about summary refs log tree commit diff stats
path: root/_style.css
diff options
context:
space:
mode:
Diffstat (limited to '_style.css')
-rw-r--r--_style.css529
1 files changed, 529 insertions, 0 deletions
diff --git a/_style.css b/_style.css new file mode 100644 index 0000000..4ef57e3 --- /dev/null +++ b/_style.css
@@ -0,0 +1,529 @@
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(trunk/libertine.css);
11/* Courier New: typewriter text */
12@import url(trunk/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/* DEDICATION {{{ */
98.dedication {
99 font-style: italic;
100 font-size: 0.92em;
101 margin-top: 1em;
102 text-align: left;
103}
104.dedication::before {
105 content: 'for ';
106 font-style: italic;
107}
108.dedication:only-child {
109 text-align: right;
110}
111/* dedication }}} */
112/* EPIGRAPH {{{ */
113.epigraph {
114 text-align: right;
115 font-size: 0.92em;
116 font-style: italic;
117 margin-top: 1em;
118}
119.epigraph p {
120 margin: 0;
121}
122.epigraph .attrib {
123 text-align: right;
124 margin-top: 0;
125 font-size: 0.92em;
126 font-style: normal;
127}
128.epigraph .attrib::before {
129 content: '– ';
130}
131/* epigraph }}} */
132.header-extra {
133 text-align: right;
134}
135.dedication,.epigraph {
136 vertical-align: bottom;
137 display: inline-block;
138 margin-left: 2%;
139 margin-right: 2%;
140 width: 45%;
141}
142/* header-extra }}} */
143/* header elements }}} */
144/* .EKPHRASTIC {{{ */
145.ekphrastic {
146 max-width: 41em;
147 /* margin-top: -1em; */
148 margin-bottom: 1em;
149 margin-left: auto;
150 margin-right: auto;
151 text-align: center;
152}
153.ekphrastic a:link { border: none; }
154/* .ekphrastic }}} */
155/* .CONTENT ELEMENTS {{{ */
156/* BLOCK ELEMENTS {{{ */
157.content :first-child {
158 margin-top: 0;
159}
160h2 {
161 font-family: "Playfair Display", Georgia, serif;
162 font-size: 1em;
163 font-weight: 600;
164}
165blockquote {
166 border-left: 1px solid gray;
167 padding-left: 2em;
168 margin-left: 2em;
169 font-style: italic;
170}
171img {
172 max-width: 100%;
173 margin: auto;
174}
175/* block elements }}} */
176/* LINKS {{{ */
177a:link {
178 padding-top: 1px;
179 color: inherit;
180 text-decoration: none;
181 border-bottom: 1px dotted black;
182}
183a:visited {
184 color: inherit;
185}
186a:hover {
187 /* text-decoration: underline; */
188 border-bottom: 1px solid black;
189}
190a:active {
191 /* text-decoration: underline; */
192 border-bottom: 1px solid black;
193}
194/* External Links */
195a[href^="http"]:link {
196 text-decoration: none;
197 border-bottom: 1px dotted #a1a3a1;
198}
199a[href^="http"]:visited {
200}
201a[href^="http"]:hover {
202 border-bottom: 1px dashed black;
203}
204a[href^="http"]:active {
205 border-bottom: 1px dashed black;
206}
207/* links }}} */
208/* .content elements }}} */
209/* NAV ELEMENTS {{{ */
210nav a:link { border-bottom: none; }
211nav a:active { border: none; }
212nav .prevlink {
213 float: left;
214 text-align: left;
215}
216nav .nextlink {
217 float: right;
218 text-align: right;
219}
220/* Properties both types of navlinks share */
221nav .prevlink, nav .nextlink {
222 margin: 0 0.5em;
223 width: 20%;
224 display: block;
225 font-size: 0.85em;
226 font-family: "Playfair Display", Georgia, serif;
227 font-style: italic;
228 text-transform: lowercase;
229 height: 20px;
230 text-decoration: none;
231 position: relative;
232 display: table;
233 vertical-align: top;
234}
235nav .prevlink::before {
236 content: ' «';
237 font-style: normal;
238 display: table-cell;
239 vertical-align: top;
240 text-align: left;
241 padding-left: 0.5em;
242 padding-right: 0.5em;
243 width: 1em;
244}
245nav .nextlink::after {
246 content: ' »';
247 font-style: normal;
248 display: table-cell;
249 vertical-align: top;
250 text-align: right;
251 padding-left: 0.5em;
252 padding-right: 0.5em;
253 width: 1em;
254}
255#lozenge {
256 text-decoration: none;
257}
258nav .anchors {
259 position: absolute;
260 width: 100%;
261 text-align: center;
262}
263nav .anchors a {
264 margin-right: 0.25em;
265 margin-left: 0.25em;
266}
267/* nav elements }}} */
268/* .FOOTNOTES ELEMENTS {{{ */
269.footnotes li {
270 margin-right: 2em;
271 border-bottom: 1px solid gray;
272 max-width: 45em;
273 margin: auto;
274}
275.footnotes li:last-child {
276 border-bottom: none;
277}
278.footnotes p::first-line {
279 font-variant: normal !important;
280}
281.footnotes a[href^="#fnref"] {
282 float: right;
283}
284a.footnoteRef {
285 border: none;
286}
287/* .footnotes elements }}} */
288/* GENRE CSS */
289/* .PROSE {{{ */
290.prose {
291 display: inline-block;
292 text-align: justify;
293 max-width: 39em;
294 margin: auto;
295 hyphens: auto;
296 -moz-hyphens: auto;
297}
298.prose p::first-child::first-line {
299 font-variant: small-caps;
300 letter-spacing: 0.1em;
301}
302/* .prose }}} */
303/* .VERSE {{{ */
304.verse {
305 display: inline-block;
306 text-align: left;
307}
308.verse p {
309 margin-bottom: 1em;
310 margin-top: 1em;
311}
312.verse .line {
313 display: block;
314 margin: 0;
315 text-indent: -1em;
316 margin-left: 1em;
317}
318/* .verse }}} */
319/* .LIST {{{ */
320.list {
321 display: inline-block;
322 text-align: left;
323 max-width: 39em;
324 margin: auto;
325 hyphens: auto;
326 -moz-hyphens: auto;
327}
328/* .list }}} */
329/* .TABLE {{{ */
330.table {
331 display: inline-block;
332 text-align: left;
333}
334/* .table }}} */
335/* PROJECT CSS */
336/* #COVER {{{ */
337/* Flexboxing {{{ */
338#cover {
339 position: absolute;
340 top: 0;
341 bottom: 0;
342 left: 0;
343 right: 0;
344 display: -webkit-box;
345 display: -moz-box;
346 display: -ms-flexbox;
347 display: -webkit-flex;
348 display: flex;
349 -webkit-box-direction: normal;
350 -moz-box-direction: normal;
351 -webkit-box-orient: vertical;
352 -moz-box-orient: vertical;
353 -webkit-flex-direction: column;
354 -ms-flex-direction: column;
355 flex-direction: column;
356 -webkit-flex-wrap: nowrap;
357 -ms-flex-wrap: nowrap;
358 flex-wrap: nowrap;
359 -webkit-box-pack: center;
360 -moz-box-pack: center;
361 -webkit-justify-content: center;
362 -ms-flex-pack: center;
363 justify-content: center;
364 -webkit-align-content: center;
365 -ms-flex-line-pack: center;
366 align-content: center;
367 -webkit-box-align: center;
368 -moz-box-align: center;
369 -webkit-align-items: center;
370 -ms-flex-align: center;
371 align-items: center;
372 }
373#cover .title {
374 -webkit-box-ordinal-group: 1;
375 -moz-box-ordinal-group: 1;
376 -webkit-order: 0;
377 -ms-flex-order: 0;
378 order: 0;
379 -webkit-box-flex: 0;
380 -moz-box-flex: 0;
381 -webkit-flex: 0 1 auto;
382 -ms-flex: 0 1 auto;
383 flex: 0 1 auto;
384 -webkit-align-self: auto;
385 -ms-flex-item-align: auto;
386 align-self: auto;
387}
388#cover .byline {
389 -webkit-box-ordinal-group: 1;
390 -moz-box-ordinal-group: 1;
391 -webkit-order: 0;
392 -ms-flex-order: 0;
393 order: 0;
394 -webkit-box-flex: 0;
395 -moz-box-flex: 0;
396 -webkit-flex: 0 1 auto;
397 -ms-flex: 0 1 auto;
398 flex: 0 1 auto;
399 -webkit-align-self: auto;
400 -ms-flex-item-align: auto;
401 align-self: auto;
402}
403#cover .lozenge {
404 -webkit-box-ordinal-group: 1;
405 -moz-box-ordinal-group: 1;
406 -webkit-order: 0;
407 -ms-flex-order: 0;
408 order: 0;
409 -webkit-box-flex: 0;
410 -moz-box-flex: 0;
411 -webkit-flex: 0 1 auto;
412 -ms-flex: 0 1 auto;
413 flex: 0 1 auto;
414 -webkit-align-self: auto;
415 -ms-flex-item-align: auto;
416 align-self: auto;
417}
418/* }}} */
419#cover {
420 color: #b2d9e5;
421 background-image: url('trunk/black-streak.jpg');
422 background-position: 0 0;
423 background-size: 100% 100%;
424 background-repeat: no-repeat;
425 background-attachment: fixed;
426 background-clip: border-box;
427 background-color: black;
428}
429#cover header {
430 border: none;
431}
432#cover .content {
433 max-width: 39em;
434 margin: auto;
435}
436#cover a {
437 text-decoration: none;
438 border: none;
439}
440#cover a:link {
441 color: #b2d9e5;
442}
443#cover a:visited {
444 color: #b2b2e5;
445}
446#cover a:hover {
447 color: #e5bfb2;
448}
449#cover a:active {
450 color: #e5e5b2;
451}
452#cover li {
453 list-style: none;
454}
455#cover .title {
456 text-transform: uppercase;
457 text-align: center;
458 font-size: 1.8em;
459 letter-spacing: 0.5em;
460 color: #efefb2;
461}
462#cover .byline {
463 font-style: italic;
464 text-align: center;
465 font-size: 1.3em;
466 letter-spacing: 0.2em;
467 color: #e5bfb2;
468}
469#cover .lozenge {
470 text-align: center;
471 font-size: 1em;
472 color: #e5bfb2;
473}
474/* #cover }}} */
475/* .ELEGIES {{{ */
476.elegies {
477}
478/* .elegies }}} */
479/* .HEZEKIAH {{{ */
480/* .hezekiah }}} */
481/* .STARK {{{ */
482/* TODO: Change to Everything Changes? */
483table { border-collapse: collapse; }
484td {
485 vertical-align: top;
486 text-indent: -1em;
487 padding-left: 1em;
488}
489tr {
490 border-bottom: 1px solid #aaa;
491 border-top: 1px solid #aaa;
492}
493/* .stark }}} */
494/* .PAUL {{{ */
495/* Blockquote = typewriter */
496.paul blockquote {
497 font-family: "Courier Prime", "Courier New", Courier, monospace;
498 font-style: normal;
499 font-size: 10pt;
500 border: 1px solid black;
501 max-width: 30em;
502 margin: auto;
503 padding: 1em;
504 text-align: left;
505}
506.paul blockquote :last-child {
507 margin: 0;
508}
509.paul blockquote p::first-line {
510 font-variant: normal !important;
511}
512.paul blockquote ul {
513 list-style-type: none;
514}
515.paul blockquote ul li::before {
516 content: '- ';
517}
518
519/* Emphasis = handwritten */
520.paul em {
521 /* font-family: "Playfair Display", Georgia, sans-serif; */
522 font-style: italic;
523}
524/* .paul }}} */
525/* .AUTOCENTO {{{ */
526.autocento {
527 background-color: white;
528}
529/* .autocento }}} */
© 2022 C. Duckworth. generated by cgit. comments, issues, and patches welcome at < git at acdw dot net >.