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