Commit 50fd5cdb authored by Laura Kalbag's avatar Laura Kalbag
Browse files

Get basic consistent gridded layout across all templates

parent a8f3a1b5
......@@ -12,7 +12,7 @@
{{/* Derive the section name */}}
{{ $section_name := index (.Site.Params.mainSections) 0 }}
<section class="recent-posts">
<section class="latest">
{{/* Use $section_name to get the section title. Use "with" to only show it if it exists */}}
{{ with .Site.GetPage "section" $section_name }}
<h2>
......@@ -34,27 +34,25 @@
</section>
{{ end }}
<div class="latest">
<section class="latest-note">
{{ range first 1 (where .Data.Pages "Section" "notes") }}
<h2>Latest Note</h2>
<div class="note">
<h3>
<a href="{{ .URL }}">
{{- .Title -}}
</a>
</h3>
{{ partial "summary.html" . }}
</div>
{{ end }}
</section>
<section class="latest-photo">
{{ range first 1 (where .Data.Pages "Section" "photos") }}
<h2>Latest Photo</h2>
<div class="photo">
{{ partial "summary-photo.html" . }}
</div>
{{ end }}
</section>
</div>
<section class="latest">
{{ range first 1 (where .Data.Pages "Section" "notes") }}
<h2>Latest Note</h2>
<div class="note">
<h3>
<a href="{{ .URL }}">
{{- .Title -}}
</a>
</h3>
{{ partial "summary.html" . }}
</div>
{{ end }}
</section>
<section class="latest">
{{ range first 1 (where .Data.Pages "Section" "photos") }}
<h2>Latest Photo</h2>
<div class="photo">
{{ partial "summary-photo.html" . }}
</div>
{{ end }}
</section>
{{ end }}
......@@ -8,7 +8,7 @@
<section class="latest">
<h2 id="latest-photos">Photos</h2>
<p><a href="/photos">See all photos</a>. <a href="/photos/index.xml">Subscribe to the Photos RSS feed</a>.</p>
<ul class="posts-list latest-photos">
<ul class="latest-photos">
{{ range first 5 (where .Site.Pages "Section" "=" "photos") }}
{{ partial "summary-photo.html" . }}
{{ end }}
......
......@@ -2,7 +2,7 @@
<div class="footer-wrap">
<h2>A bit about me</h2>
<p>Hello! I&#8217;m a British designer, living in Ireland, and working as one half of <a href="https://ind.ie">Ind.ie</a>. We make an app called <a href="https://better.fyi">Better</a> that protects you while you’re browsing the web. My book <a href="https://abookapart.com/products/accessibility-for-everyone">Accessibility For Everyone</a> is available in paperback, ebook, and audiobook from A Book Apart.</p>
<p><small class="site-info">Copyright &copy; <a href="{{ .Site.BaseURL }}" >{{ .Site.Title }}</a>, {{ now.Format "2006" }}. <a href="/rss">RSS feeds</a></small></p>
<img src="/notes/1/me.jpg" alt="Photo of me waving at you." >
<p><small class="site-info">Copyright &copy; <a href="{{ .Site.BaseURL }}" >{{ .Site.Title }}</a>, {{ now.Format "2006" }}. <a href="/rss">RSS feeds</a></small></p>
</div>
</footer>
......@@ -141,8 +141,6 @@ h1, h2, h3 {
letter-spacing: normal;
line-height: 1.1;
margin: 0 0 0.5em 0;
margin-left: var(--layout-unit);
margin-right: var(--layout-unit);
}
h1 {
......@@ -179,10 +177,6 @@ h2 {
}
}
h2#latest-photos, h2#latest-notes {
margin-top: 1em;
}
/* make h2s on notes smaller */
.notes main h2 {
font-size: 1.75em;
......@@ -223,8 +217,6 @@ h3, h4, h5, h6 {
h4, h5, h6 {
font-style: italic;
margin: 1em 0 0.5em 0;
margin-left: var(--layout-unit);
margin-right: var(--layout-unit);
}
h4 {
......@@ -258,7 +250,7 @@ h6 {
}
p {
margin: 0 var(--layout-unit) 0.5em var(--layout-unit);
margin: 0 0 0.5em 0;
}
a {
......@@ -308,7 +300,7 @@ code {
}
ul, ol {
margin: 1em var(--layout-unit);
margin: 1em 0;
padding-left: var(--layout-unit);
}
......@@ -322,7 +314,7 @@ small a {
blockquote {
font-style: italic;
margin: 1em var(--layout-unit);
margin: 1em 0
}
pre {
......@@ -352,7 +344,7 @@ hr {
/* when the hr is in a summary, make it a bit more subtle/not full width */
hr {
border: hsl(var(--brilliant)) dashed 0.075em;
margin: 1em var(--layout-unit);
margin: 1em 0;
}
/* - - - - - - - - LAYOUT
......@@ -393,14 +385,10 @@ hr {
.h-entry .entry-meta,
.h-entry .entry-notes {
grid-column: 2 / 7;
margin-left: 0;
margin-right: 0;
}
.h-entry .entry-meta p,
.h-entry .entry-notes p {
margin-left: 0;
margin-right: 0;
}
.entry-content {
......@@ -420,15 +408,11 @@ hr {
.entry-content ul,
.entry-content ol {
grid-column: 2 / 7;
margin-left: 0;
margin-right: 0;
}
.entry-content figure,
.entry-content img {
grid-column: 2 / 8;
margin-left: 0;
margin-right: 0;
}
}
......@@ -479,80 +463,6 @@ figcaption, .site-footer p, .site-footer small, .note {
text-decoration: none;
}
/* - - - - - - - - MAIN */
main {
background: white;
}
#content {
/* to clear contained margins */
padding: 0.5em 0 4.5em;
}
.entry-notes {
padding-top: 2em;
}
.notes-list .entry-notes, .posts-list .entry-notes {
padding-top: 0.5em;
}
/* - - - - - - - - FOOTER */
.site-footer {
background: hsl(var(--primary-bg));
/* to clear contained margins */
padding: 0.5em 0;
}
.site-footer img {
border-radius: 50%;
display: block;
margin: 1em auto;
max-width: 5.4em;
}
@media screen and (min-width: 37em) {
.footer-wrap {
display: grid;
grid-template-columns: repeat(7, minmax(14.285714286%, 7.4em));
grid-template-rows: auto;
grid-template-areas: "a b b b b c z"
"a d d d d c z"
"a e e e e c z";
/* centre everything */
margin: 0 auto;
max-width: 51.8em;
}
.site-footer .footer-wrap h2,
.site-footer .footer-wrap p {
margin-left: 0;
margin-right: 0;
}
.site-footer .footer-wrap h2 {
grid-area: b;
}
.site-footer .footer-wrap p:nth-of-type(1) {
grid-area: d;
}
.site-footer .footer-wrap p:nth-of-type(2) {
grid-area: e;
}
.site-footer img {
grid-area: c;
margin-top: 4em;
margin-left: 2em;
}
}
/* - - - - - - - - NAVIGATION
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
......@@ -569,7 +479,7 @@ nav {
}
.navigation-menu ul {
background: hsla(var(--tab-five), 0.1);
background: hsla(var(--secondary-bg), 1);
display: flex;
flex-wrap: wrap;
justify-content: center;
......@@ -579,7 +489,7 @@ nav {
padding: 0 0 0.5em 0.5em;
}
@media screen and (min-width: 45em) {
@media screen and (min-width: 52em) {
.navigation-menu {
display: grid;
grid-template-columns: repeat(7, minmax(14.285714286%, 7.4em));
......@@ -608,11 +518,16 @@ nav {
text-decoration: none;
}
@media screen and (min-width: 45em) {
@media screen and (min-width: 52em) {
.navigation-menu ul a {
border-radius: 0;
display: block;
margin: 0;
}
}
@media screen and (min-width: 65em) {
.navigation-menu ul a {
padding: calc(var(--layout-unit)/3) var(--layout-unit);
}
}
......@@ -719,27 +634,91 @@ body.contact-me .navigation-menu a[href="/"] {
color: hsl(var(--darklinktext));
}
/* - - - - - - - - VIEW-SPECIFIC
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* - - - - - - - - MAIN */
/* - - - - - - - - HOME
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
main {
background: white;
}
@media screen and (min-width: 70em) {
/* make latest note and photo on homepage split into two columns on wider views */
body.home .latest {
display: grid;
grid-template-columns: auto 50%;
@media screen and (max-width: 37em) {
main {
/* before grid kicks in */
padding: 0 var(--layout-unit);
}
}
body.home .note {
margin-left: 0;
#content {
/* to clear contained margins */
padding: 0.5em 0 4.5em;
}
.entry-notes {
padding-top: 2em;
}
.notes-list .entry-notes, .posts-list .entry-notes {
padding-top: 0.5em;
}
body.home .latest-note h3 {
/* - - - - - - - - FOOTER */
.site-footer {
background: hsl(var(--primary-bg));
/* to clear contained margins */
padding: 0.5em 0;
}
@media screen and (max-width: 37em) {
.site-footer {
/* before grid kicks in */
padding: 0.5em var(--layout-unit);
}
}
.site-footer img {
border-radius: 50%;
display: block;
margin: 1em auto;
max-width: 5.4em;
}
@media screen and (min-width: 37em) {
.footer-wrap {
display: grid;
grid-template-columns: repeat(7, minmax(14.285714286%, 7.4em));
grid-template-rows: auto;
grid-template-areas: "a b b b b c z"
"a d d d d c z"
"a e e e e c z";
/* centre everything */
margin: 0 auto;
max-width: 51.8em;
}
.site-footer .footer-wrap h2 {
grid-area: b;
}
.site-footer .footer-wrap p:nth-of-type(1) {
grid-area: d;
}
.site-footer .footer-wrap p:nth-of-type(2) {
grid-area: e;
}
.site-footer img {
grid-area: c;
margin-top: 4em;
margin-left: 2em;
}
}
/* - - - - - - - - VIEW-SPECIFIC
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* - - - - - - - - BLOG
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
......@@ -764,11 +743,6 @@ body.home .latest-note h3 {
.posts-list > li, .resources-list > li {
grid-column: 2 / 7;
}
.posts-list > li h2, .resources-list > li h2,
.posts-list > li p, .resources-list > li p {
margin-left: 0;
}
}
.posts-list ul li, .resources-list ul li, .notes-list ul li {
......@@ -794,10 +768,6 @@ main article .entry-meta {
font-weight: bold;
}
.resources-list li {
margin-left: var(--layout-unit);
}
.commentlist {
margin-top: 2em;
padding-left: 0;
......@@ -824,7 +794,6 @@ main article .entry-meta {
.commentlist li .fn {
display: block;
grid-area: b;
margin-left: var(--layout-unit);
}
.commentlist li .comment-meta {
......@@ -848,16 +817,35 @@ main article .entry-meta {
section.latest h2,
section.latest p {
grid-column: 2 / 6;
margin-left: 0;
}
section.latest .latest-photos {
grid-column: 2 / 7;
}
section.latest h2 {
grid-column: 2 / 6;
}
section.latest .posts-list {
grid-column: 1 / 6;
grid-template-columns: repeat(5, minmax(20%, 5.285714285em));
}
section.latest .notes-list {
grid-column: 2 / 6;
}
section.latest .note,
section.latest .photo {
grid-column: 2 / 6;
}
}
.latest-photos {
margin-top: 1em;
padding-left: 0;
}
.latest-photos .photo-post img {
......@@ -869,10 +857,13 @@ main article .entry-meta {
.latest-photos {
display: grid;
grid-template-columns: repeat(5, minmax(20%, 5.285714285em));
grid-gap: 0.25em;
justify-content: space-between;
}
.latest-photos a {
margin-right: 0.1em;
}
}
/* - - - - - - - - MEDIA
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment