about summary refs log tree commit diff stats
path: root/style.css
diff options
context:
space:
mode:
authorCase Duckworth2015-03-24 22:53:18 -0700
committerCase Duckworth2015-03-24 22:53:18 -0700
commitdf0d5f3cb03f8bf7d72e067c0fd7ee54ce4b86eb (patch)
tree9cb3585e91c71e0d56bff5fb1f0d6c8dc5f8c093 /style.css
parentDisable Jekyll page rendering (diff)
downloadautocento-df0d5f3cb03f8bf7d72e067c0fd7ee54ce4b86eb.tar.gz
autocento-df0d5f3cb03f8bf7d72e067c0fd7ee54ce4b86eb.zip
Change template and CSS for flatter structure
- Change CSS to one file
- Change template to reflect CSS flattening
Diffstat (limited to 'style.css')
-rw-r--r--style.css491
1 files changed, 491 insertions, 0 deletions
diff --git a/style.css b/style.css new file mode 100644 index 0000000..14f8b88 --- /dev/null +++ b/style.css
@@ -0,0 +1,491 @@
1/* CSS for Autocento at the breakfast table
2 * Case Duckworth | autocento.me
3 * vim: fdm=marker
4 */
5/* COMMON CSS */
6/* @IMPORTS {{{ */
7/* Playfair Display: headings */
8@import url(http://fonts.googleapis.com/css?family=Playfair+Display:400,700,400italic,700italic&subset=latin,latin-ext);
9/* Linux Libertine: body text */
10@import url(fonts/libertine.css);
11/* Courier New: typewriter text */
12@import url(fonts/courier-prime.css);
13/* @imports }}} */
14/* MAIN LAYOUT ELEMENTS {{{ */
15/* HTML + BODY {{{ */
16html, body {
17 margin: 0;
18 padding: 0;
19 font-family: "Libertine", Georgia, serif;
20 font-size: 100%;
21}
22html {
23 height: 100%;
24}
25body {
26 position: absolute;
27 top: 0;
28 left: 0;
29 right: 0;
30 min-height: 100%;
31 padding-left: 1em;
32 padding-right: 1em;
33}
34/* html + body }}} */
35/* HEADER + .CONTAINER + .CONTENT {{{ */
36header {
37 max-width: 39em;
38 margin: auto;
39 text-align: center;
40 border-bottom: 1px solid black;
41 padding: 1em 0;
42 margin-bottom: 1em;
43 position: relative;
44}
45.container {
46 margin: 0 auto;
47 padding-bottom: 30px;
48 text-align: center;
49}
50.content {
51 line-height: 1.3em;
52}
53/* header + .container + .content }}} */
54/* NAV + .FOOTNOTES {{{ */
55nav {
56 height: 24px;
57 width: 100%;
58 position: absolute;
59 bottom: 0;
60 left: 0;
61 text-align: center;
62 overflow: hidden;
63}
64.footnotes {
65 font-size: 0.85em;
66 width: 100%;
67 position: absolute;
68 top: 100%;
69 left: 0;
70}
71/* nav + .footnotes }}} */
72/* main layout elements }}} */
73/* HEADER ELEMENTS {{{ */
74/* .TITLE + .SUBTITLE {{{ */
75.title {
76 text-align: left;
77 display: inline-block;
78 font-family: "Playfair Display", Georgia, serif;
79 font-size: 1.5em;
80 font-weight: 400;
81 letter-spacing: 0.1em;
82 text-transform: uppercase;
83 margin: 0;
84}
85.subtitle {
86 text-align: center;
87 display: block;
88 font-family: "Playfair Display", Georgia, serif;
89 font-size: 1.25em;
90 font-style: italic;
91 font-weight: 400;
92 margin-top: 0;
93 margin-bottom: 0;
94}
95/* .title + .subtitle }}} */
96/* .HEADER-EXTRA {{{ */
97.header-extra {
98 text-align: right;
99}
100.dedication,.epigraph {
101 vertical-align: bottom;
102 display: inline-block;
103 margin-left: 2%;
104 margin-right: 2%;
105 width: 45%;
106}
107/* DEDICATION {{{ */
108.dedication {
109 font-style: italic;
110 font-size: 0.92em;
111 margin-top: 1em;
112}
113.dedication::before {
114 content: 'for ';
115 font-style: italic;
116}
117.dedication:only-child {
118 text-align: right;
119}
120/* dedication }}} */
121/* EPIGRAPH {{{ */
122.epigraph {
123 text-align: right;
124 font-size: 0.92em;
125 font-style: italic;
126 margin-top: 1em;
127}
128.epigraph p {
129 margin: 0;
130}
131.epigraph .attrib {
132 text-align: right;
133 margin-top: 0;
134 font-size: 0.92em;
135 font-style: normal;
136}
137.epigraph .attrib::before {
138 content: '– ';
139}
140/* epigraph }}} */
141/* header-extra }}} */
142/* header elements }}} */
143/* .EKPHRASTIC {{{ */
144.ekphrastic {
145 max-width: 41em;
146 /* margin-top: -1em; */
147 margin-bottom: 1em;
148 margin-left: auto;
149 margin-right: auto;
150 text-align: center;
151}
152.ekphrastic a:link { border: none; }
153/* .ekphrastic }}} */
154/* .CONTENT ELEMENTS {{{ */
155/* BLOCK ELEMENTS {{{ */
156.content :first-child {
157 margin-top: 0;
158}
159h2 {
160 font-family: "Playfair Display", Georgia, serif;
161 font-size: 1em;
162 font-weight: 600;
163}
164blockquote {
165 border-left: 1px solid gray;
166 padding-left: 2em;
167 margin-left: 2em;
168 font-style: italic;
169}
170img {
171 max-width: 100%;
172 margin: auto;
173}
174/* block elements }}} */
175/* LINKS {{{ */
176a:link {
177 padding-top: 1px;
178 color: inherit;
179 text-decoration: none;
180 border-bottom: 1px dotted black;
181}
182a:visited {
183 color: inherit;
184}
185a:hover {
186 /* text-decoration: underline; */
187 border-bottom: 1px solid black;
188}
189a:active {
190 /* text-decoration: underline; */
191 border-bottom: 1px solid black;
192}
193/* External Links */
194a[href^="http"]:link {
195 text-decoration: none;
196 border-bottom: 1px dotted #a1a3a1;
197}
198a[href^="http"]:visited {
199}
200a[href^="http"]:hover {
201 border-bottom: 1px dashed black;
202}
203a[href^="http"]:active {
204 border-bottom: 1px dashed black;
205}
206/* links }}} */
207/* .content elements }}} */
208/* NAV ELEMENTS {{{ */
209nav a:link { border-bottom: none; }
210nav a:active { border: none; }
211nav .prevlink { float: left; text-align: left; }
212nav .nextlink { float: right; text-align: right; }
213/* Properties both types of navlinks share */
214nav .prevlink, nav .nextlink {
215 margin: 0 0.5em;
216 width: 20%;
217 display: block;
218 font-size: 0.85em;
219 font-family: "Playfair Display", Georgia, serif;
220 font-style: italic;
221 text-transform: lowercase;
222 height: 20px;
223 text-decoration: none;
224 position: relative;
225 display: table;
226 vertical-align: top;
227}
228nav .prevlink::before {
229 content: ' «';
230 font-style: normal;
231 display: table-cell;
232 vertical-align: top;
233 text-align: left;
234 padding-left: 0.5em;
235 padding-right: 0.5em;
236}
237nav .nextlink::after {
238 content: ' »';
239 font-style: normal;
240 display: table-cell;
241 vertical-align: top;
242 text-align: right;
243 padding-left: 0.5em;
244 padding-right: 0.5em;
245}
246#lozenge {
247 position: absolute;
248 left: 50%;
249 text-decoration: none;
250}
251/* nav elements }}} */
252/* .FOOTNOTES ELEMENTS {{{ */
253.footnotes li {
254 margin-right: 2em;
255 border-bottom: 1px solid gray;
256 max-width: 45em;
257 margin: auto;
258}
259.footnotes li:last-child {
260 border-bottom: none;
261}
262.footnotes p::first-line {
263 font-variant: normal !important;
264}
265.footnotes a[href^="#fnref"] {
266 float: right;
267}
268a.footnoteRef {
269 border: none;
270}
271/* .footnotes elements }}} */
272/* GENRE CSS */
273/* .PROSE {{{ */
274.prose {
275 display: inline-block;
276 text-align: justify;
277 max-width: 39em;
278 margin: auto;
279 hyphens: auto;
280 -moz-hyphens: auto;
281}
282.prose p::first-child::first-line {
283 font-variant: small-caps;
284 letter-spacing: 0.1em;
285}
286/* .prose }}} */
287/* .VERSE {{{ */
288.verse {
289 display: inline-block;
290 text-align: left;
291}
292/* .verse }}} */
293/* PROJECT CSS */
294/* #COVER {{{ */
295/* Flexboxing {{{ */
296#cover {
297 position: absolute;
298 top: 0;
299 bottom: 0;
300 left: 0;
301 right: 0;
302 display: -webkit-box;
303 display: -moz-box;
304 display: -ms-flexbox;
305 display: -webkit-flex;
306 display: flex;
307 -webkit-box-direction: normal;
308 -moz-box-direction: normal;
309 -webkit-box-orient: vertical;
310 -moz-box-orient: vertical;
311 -webkit-flex-direction: column;
312 -ms-flex-direction: column;
313 flex-direction: column;
314 -webkit-flex-wrap: nowrap;
315 -ms-flex-wrap: nowrap;
316 flex-wrap: nowrap;
317 -webkit-box-pack: center;
318 -moz-box-pack: center;
319 -webkit-justify-content: center;
320 -ms-flex-pack: center;
321 justify-content: center;
322 -webkit-align-content: center;
323 -ms-flex-line-pack: center;
324 align-content: center;
325 -webkit-box-align: center;
326 -moz-box-align: center;
327 -webkit-align-items: center;
328 -ms-flex-align: center;
329 align-items: center;
330 }
331#cover .title {
332 -webkit-box-ordinal-group: 1;
333 -moz-box-ordinal-group: 1;
334 -webkit-order: 0;
335 -ms-flex-order: 0;
336 order: 0;
337 -webkit-box-flex: 0;
338 -moz-box-flex: 0;
339 -webkit-flex: 0 1 auto;
340 -ms-flex: 0 1 auto;
341 flex: 0 1 auto;
342 -webkit-align-self: auto;
343 -ms-flex-item-align: auto;
344 align-self: auto;
345}
346#cover .byline {
347 -webkit-box-ordinal-group: 1;
348 -moz-box-ordinal-group: 1;
349 -webkit-order: 0;
350 -ms-flex-order: 0;
351 order: 0;
352 -webkit-box-flex: 0;
353 -moz-box-flex: 0;
354 -webkit-flex: 0 1 auto;
355 -ms-flex: 0 1 auto;
356 flex: 0 1 auto;
357 -webkit-align-self: auto;
358 -ms-flex-item-align: auto;
359 align-self: auto;
360}
361#cover .lozenge {
362 -webkit-box-ordinal-group: 1;
363 -moz-box-ordinal-group: 1;
364 -webkit-order: 0;
365 -ms-flex-order: 0;
366 order: 0;
367 -webkit-box-flex: 0;
368 -moz-box-flex: 0;
369 -webkit-flex: 0 1 auto;
370 -ms-flex: 0 1 auto;
371 flex: 0 1 auto;
372 -webkit-align-self: auto;
373 -ms-flex-item-align: auto;
374 align-self: auto;
375}
376/* }}} */
377#cover {
378 color: #b2d9e5;
379 background-image: url('img/black-streak.jpg');
380 background-position: 0 0;
381 background-size: 100% 100%;
382 background-repeat: no-repeat;
383 background-attachment: fixed;
384 background-clip: border-box;
385 background-color: black;
386}
387#cover header {
388 border: none;
389}
390#cover .content {
391 max-width: 39em;
392 margin: auto;
393}
394#cover a {
395 text-decoration: none;
396 border: none;
397}
398#cover a:link {
399 color: #b2d9e5;
400}
401#cover a:visited {
402 color: #b2b2e5;
403}
404#cover a:hover {
405 color: #e5bfb2;
406}
407#cover a:active {
408 color: #e5e5b2;
409}
410#cover li {
411 list-style: none;
412}
413#cover .title {
414 text-transform: uppercase;
415 text-align: center;
416 font-size: 1.8em;
417 letter-spacing: 0.5em;
418 color: #efefb2;
419}
420#cover .byline {
421 font-style: italic;
422 text-align: center;
423 font-size: 1.3em;
424 letter-spacing: 0.2em;
425 color: #e5bfb2;
426}
427#cover .lozenge {
428 text-align: center;
429 font-size: 1em;
430 color: #e5bfb2;
431}
432/* #cover }}} */
433/* .ELEGIES {{{ */
434.elegies {
435}
436/* .elegies }}} */
437/* .HEZEKIAH {{{ */
438/* .hezekiah }}} */
439/* .STARK {{{ */
440/* TODO: Change to Everything Changes? */
441table { border-collapse: collapse; }
442td {
443 vertical-align: top;
444}
445tr {
446 border-bottom: 1px solid #aaa;
447 border-top: 1px solid #aaa;
448}
449/* .stark }}} */
450/* .PAUL {{{ */
451/* Blockquote = typewriter */
452.paul blockquote {
453 font-family: "Courier Prime", "Courier New", Courier, monospace;
454 font-style: normal;
455 font-size: 10pt;
456 border: 1px solid black;
457 max-width: 30em;
458 margin: auto;
459 padding: 1em;
460 text-align: left;
461}
462.paul blockquote :last-child {
463 margin: 0;
464}
465.paul blockquote p::first-line {
466 font-variant: normal !important;
467}
468.paul blockquote ul {
469 list-style-type: none;
470}
471.paul blockquote ul li::before {
472 content: '- ';
473}
474
475/* Emphasis = handwritten */
476.paul em {
477 /* font-family: "Playfair Display", Georgia, sans-serif; */
478 font-style: italic;
479}
480/* .paul }}} */
481/* .AUTOCENTO {{{ */
482.autocento {
483 background-image: url('img/white-streak.jpg');
484 background-position: 0 0;
485 background-size: 100% 100%;
486 background-repeat: no-repeat;
487 background-attachment: fixed;
488 background-clip: border-box;
489 background-color: white;
490}
491/* .autocento }}} */
© 2022 C. Duckworth. generated by cgit. comments, issues, and patches welcome at < git at acdw dot net >.