Commit 8f0d5638eb17d9158641caeb15269b3483887cde
Use fewer <header>, <main> and <footer>
Make the top and bottom navigation use classes instead. Remove the <main> between them, that wraps the <article> on article pages.Greg K Nicholson committed on 2/4/2018, 5:47:34 PM
Parent: deab7af0d2b4d48b3f0c15dd8b0f7391ac4be08c
Files changed
| themes/ran/static/style/ran.css | changed |
| themes/ran/templates/article.html | changed |
| themes/ran/templates/base.html | changed |
| themes/ran/static/style/ran.css | ||
|---|---|---|
| @@ -78,22 +78,22 @@ | ||
| 78 | 78 … | grid-column: 3/4; |
| 79 | 79 … | } |
| 80 | 80 … | |
| 81 | 81 … | |
| 82 | -/* Page header and footer, article footer */ | |
| 82 … | +/* Top and bottom navigation, article footer */ | |
| 83 | 83 … | |
| 84 | -body > header { | |
| 84 … | +.topnav { | |
| 85 | 85 … | margin-top: 10vh; |
| 86 | 86 … | margin-bottom: 1rem; |
| 87 | 87 … | } |
| 88 | 88 … | |
| 89 | -article > footer { | |
| 89 … | +footer { | |
| 90 | 90 … | border-top: 1px solid; |
| 91 | 91 … | margin-top: -1px; |
| 92 | 92 … | margin-bottom: 1rem; |
| 93 | 93 … | } |
| 94 | 94 … | |
| 95 | -body > footer { | |
| 95 … | +.bottomnav { | |
| 96 | 96 … | border-top: 1px solid; |
| 97 | 97 … | margin-top: -1px; |
| 98 | 98 … | margin-bottom: 10vh; |
| 99 | 99 … | } |
| @@ -120,26 +120,26 @@ | ||
| 120 | 120 … | .logo path { |
| 121 | 121 … | fill: var(--secondary-color); |
| 122 | 122 … | } |
| 123 | 123 … | |
| 124 | - body > footer .logo { | |
| 124 … | + .bottomnav .logo { | |
| 125 | 125 … | margin-top: 2rem; |
| 126 | 126 … | } |
| 127 | - body > footer .logo circle { | |
| 127 … | + .bottomnav .logo circle { | |
| 128 | 128 … | fill: var(--background-color); |
| 129 | 129 … | stroke: var(--dim-color); |
| 130 | 130 … | stroke-width: 12px; |
| 131 | 131 … | } |
| 132 | 132 … | |
| 133 | - body > footer .logo path { | |
| 133 … | + .bottomnav .logo path { | |
| 134 | 134 … | fill: var(--dim-color); |
| 135 | 135 … | } |
| 136 | 136 … | |
| 137 | - body > footer a .logo circle { | |
| 137 … | + .bottomnav a .logo circle { | |
| 138 | 138 … | stroke: var(--link-color); |
| 139 | 139 … | } |
| 140 | 140 … | |
| 141 | - body > footer a .logo path { | |
| 141 … | + .bottomnav a .logo path { | |
| 142 | 142 … | fill: var(--link-color); |
| 143 | 143 … | } |
| 144 | 144 … | |
| 145 | 145 … | |
| @@ -227,10 +227,9 @@ | ||
| 227 | 227 … | |
| 228 | 228 … | |
| 229 | 229 … | /* Page heading */ |
| 230 | 230 … | |
| 231 | -article > header, | |
| 232 | -body > main > header { | |
| 231 … | +header { | |
| 233 | 232 … | margin-bottom: 1rem; |
| 234 | 233 … | } |
| 235 | 234 … | |
| 236 | 235 … | .pagetitle { |
| @@ -299,9 +298,9 @@ | ||
| 299 | 298 … | details[open] > section > * { |
| 300 | 299 … | opacity: 1; |
| 301 | 300 … | } |
| 302 | 301 … | |
| 303 | -article > header .image { | |
| 302 … | +header .image { | |
| 304 | 303 … | /* The height is overridden by inline styles for some articles. */ |
| 305 | 304 … | height: 4rem; |
| 306 | 305 … | background-position: center; |
| 307 | 306 … | background-size: cover; |
| themes/ran/templates/article.html | ||
|---|---|---|
| @@ -46,9 +46,9 @@ | ||
| 46 | 46 … | {# <!--XXX skip links --> #} |
| 47 | 47 … | {%- endblock -%} |
| 48 | 48 … | {%- block maincontentintro -%} |
| 49 | 49 … | {%- if article.image -%} |
| 50 | - <footer class="image" style=" | |
| 50 … | + <div class="image" style=" | |
| 51 | 51 … | background-image: url('{{- article.image.filename -}}'); |
| 52 | 52 … | {%- if article.image.position -%} |
| 53 | 53 … | background-position: {{ |
| 54 | 54 … | article.image.position |
| @@ -61,9 +61,9 @@ | ||
| 61 | 61 … | {%- else -%} |
| 62 | 62 … | height: 4rem; |
| 63 | 63 … | {%- endif -%} |
| 64 | 64 … | "> |
| 65 | - </footer> | |
| 65 … | + </div> | |
| 66 | 66 … | {%- endif -%} |
| 67 | 67 … | {%- endblock -%} |
| 68 | 68 … | {%- block maincontent -%} |
| 69 | 69 … | {{- article.content | trim -}} |
| themes/ran/templates/base.html | |||
|---|---|---|---|
| @@ -32,9 +32,9 @@ | |||
| 32 | 32 … | title="{{- SITENAME -}}"> | |
| 33 | 33 … | {%- endblock -%} | |
| 34 | 34 … | </head> | |
| 35 | 35 … | <body> | |
| 36 | - <header> | ||
| 36 … | + <section class="topnav"> | ||
| 37 | 37 … | {%- block topnav -%} | |
| 38 | 38 … | <nav> | |
| 39 | 39 … | {%- block logo -%} | |
| 40 | 40 … | <a class="logo" href="/"> | |
| @@ -43,52 +43,50 @@ | |||
| 43 | 43 … | </a> | |
| 44 | 44 … | {%- endblock -%} | |
| 45 | 45 … | </nav> | |
| 46 | 46 … | {%- endblock -%} | |
| 47 | - </header> | ||
| 48 | - <main> | ||
| 49 | - {%- block main -%} | ||
| 50 | - <header> | ||
| 51 | - {%- block pagetitle -%} | ||
| 52 | - <details> | ||
| 53 | - <summary> | ||
| 54 | - <h1 class="pagetitle"> | ||
| 55 | - {{- self.title() -}} | ||
| 56 | - </h1> | ||
| 57 | - </summary> | ||
| 58 | - <section> | ||
| 59 | - {%- block pagedetails -%} | ||
| 60 | - <address> | ||
| 61 | - <span>by </span> | ||
| 62 | - <a href="/{{- AUTHOR_URL -}}" | ||
| 63 | - rel="author"> | ||
| 64 | - {{- AUTHOR -}} | ||
| 65 | - </a> | ||
| 66 | - </address> | ||
| 67 | - {%- endblock -%} | ||
| 68 | - </section> | ||
| 69 | - </details> | ||
| 70 | - {%- block maincontentintro -%} | ||
| 71 | - {%- endblock -%} | ||
| 47 … | + </section> | ||
| 48 … | + {%- block main -%} | ||
| 49 … | + <header> | ||
| 50 … | + {%- block pagetitle -%} | ||
| 51 … | + <details> | ||
| 52 … | + <summary> | ||
| 53 … | + <h1 class="pagetitle"> | ||
| 54 … | + {{- self.title() -}} | ||
| 55 … | + </h1> | ||
| 56 … | + </summary> | ||
| 57 … | + <section> | ||
| 58 … | + {%- block pagedetails -%} | ||
| 59 … | + <address> | ||
| 60 … | + <span>by </span> | ||
| 61 … | + <a href="/{{- AUTHOR_URL -}}" | ||
| 62 … | + rel="author"> | ||
| 63 … | + {{- AUTHOR -}} | ||
| 64 … | + </a> | ||
| 65 … | + </address> | ||
| 66 … | + {%- endblock -%} | ||
| 67 … | + </section> | ||
| 68 … | + </details> | ||
| 69 … | + {%- block maincontentintro -%} | ||
| 72 | 70 … | {%- endblock -%} | |
| 73 | - </header> | ||
| 74 | - <main> | ||
| 75 | - {%- block maincontent -%} | ||
| 76 | - <ol class="biglinks"> | ||
| 77 | - {%- for article in dates -%} | ||
| 78 | - {{- entry_link(article) -}} | ||
| 79 | - {%- endfor -%} | ||
| 80 | - </ol> | ||
| 81 | - {%- endblock -%} | ||
| 82 | - </main> | ||
| 83 | - {%- endblock -%} | ||
| 84 | - </main> | ||
| 85 | - <footer> | ||
| 71 … | + {%- endblock -%} | ||
| 72 … | + </header> | ||
| 73 … | + <main> | ||
| 74 … | + {%- block maincontent -%} | ||
| 75 … | + <ol class="biglinks"> | ||
| 76 … | + {%- for article in dates -%} | ||
| 77 … | + {{- entry_link(article) -}} | ||
| 78 … | + {%- endfor -%} | ||
| 79 … | + </ol> | ||
| 80 … | + {%- endblock -%} | ||
| 81 … | + </main> | ||
| 82 … | + {%- endblock -%} | ||
| 83 … | + <section class="bottomnav"> | ||
| 86 | 84 … | {%- block bottomnav -%} | |
| 87 | 85 … | <nav> | |
| 88 | 86 … | {{- self.logo() -}} | |
| 89 | 87 … | </nav> | |
| 90 | 88 … | {%- endblock -%} | |
| 91 | - </footer> | ||
| 89 … | + </section> | ||
| 92 | 90 … | </body> | |
| 93 | 91 … | </html> | |
| 94 | 92 … | ||
Built with git-ssb-web