about summary refs log tree commit diff stats
path: root/trunk/style.css
diff options
context:
space:
mode:
Diffstat (limited to 'trunk/style.css')
-rw-r--r--trunk/style.css640
1 files changed, 640 insertions, 0 deletions
diff --git a/trunk/style.css b/trunk/style.css new file mode 100644 index 0000000..5f6a289 --- /dev/null +++ b/trunk/style.css
@@ -0,0 +1,640 @@
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/* #SRC {{{ */
144#src {
145 border: none;
146 position: absolute;
147 top: 0;
148 right: 10px;
149 color: gray;
150 font-size: 8pt;
151}
152/* #src }}} */
153/* header elements }}} */
154/* .EKPHRASTIC {{{ */
155.ekphrastic {
156 max-width: 41em;
157 /* margin-top: -1em; */
158 margin-bottom: 1em;
159 margin-left: auto;
160 margin-right: auto;
161 text-align: center;
162}
163.ekphrastic a:link { border: none; }
164/* .ekphrastic }}} */
165/* .CONTENT ELEMENTS {{{ */
166/* BLOCK ELEMENTS {{{ */
167.content :first-child {
168 margin-top: 0;
169}
170h2 {
171 font-family: "Playfair Display", Georgia, serif;
172 font-size: 1em;
173 font-weight: 600;
174}
175blockquote {
176 border-left: 1px solid gray;
177 padding-left: 2em;
178 margin-left: 2em;
179 font-style: italic;
180}
181img {
182 max-width: 100%;
183 margin: auto;
184}
185/* block elements }}} */
186/* LINKS {{{ */
187a:link {
188 padding-top: 1px;
189 color: inherit;
190 text-decoration: none;
191 border-bottom: 1px dotted black;
192}
193a:visited {
194 color: inherit;
195}
196a:hover {
197 /* text-decoration: underline; */
198 border-bottom: 1px solid black;
199}
200a:active {
201 /* text-decoration: underline; */
202 border-bottom: 1px solid black;
203}
204/* External Links */
205a[href^="http"]:link {
206 text-decoration: none;
207 border-bottom: 1px dotted #a1a3a1;
208}
209a[href^="http"]:visited {
210}
211a[href^="http"]:hover {
212 border-bottom: 1px dashed black;
213}
214a[href^="http"]:active {
215 border-bottom: 1px dashed black;
216}
217/* links }}} */
218/* .content elements }}} */
219/* NAV ELEMENTS {{{ */
220nav a:link { border-bottom: none; }
221nav a:active { border: none; }
222nav .prevlink {
223 float: left;
224 text-align: left;
225}
226nav .nextlink {
227 float: right;
228 text-align: right;
229}
230/* Properties both types of navlinks share */
231nav .prevlink, nav .nextlink {
232 margin: 0 0.5em;
233 width: 20%;
234 display: block;
235 font-size: 0.85em;
236 font-family: "Playfair Display", Georgia, serif;
237 font-style: italic;
238 text-transform: lowercase;
239 height: 20px;
240 text-decoration: none;
241 position: relative;
242 display: table;
243 vertical-align: top;
244}
245nav .prevlink::before {
246 content: ' «';
247 font-style: normal;
248 display: table-cell;
249 vertical-align: top;
250 text-align: left;
251 padding-left: 0.5em;
252 padding-right: 0.5em;
253 width: 1em;
254}
255nav .nextlink::after {
256 content: ' »';
257 font-style: normal;
258 display: table-cell;
259 vertical-align: top;
260 text-align: right;
261 padding-left: 0.5em;
262 padding-right: 0.5em;
263 width: 1em;
264}
265#randomlink {
266 text-decoration: none;
267}
268nav .anchors {
269 position: absolute;
270 width: 100%;
271 text-align: center;
272}
273nav .anchors a {
274 margin-right: 0.25em;
275 margin-left: 0.25em;
276}
277/* nav elements }}} */
278/* .FOOTNOTES ELEMENTS {{{ */
279.footnotes li {
280 margin-right: 2em;
281 border-bottom: 1px solid gray;
282 max-width: 45em;
283 margin: auto;
284}
285.footnotes li:last-child {
286 border-bottom: none;
287}
288.footnotes p::first-line {
289 font-variant: normal !important;
290}
291.footnotes a[href^="#fnref"] {
292 float: right;
293}
294a.footnoteRef {
295 border: none;
296}
297/* .footnotes elements }}} */
298/* /1* CODE {{{ *1/ */
299/* .sourceCode { */
300/* max-width: 100%; */
301/* overflow: auto; */
302/* background-color: #303030; */
303/* color: #cccccc; */
304/* font-family: "Courier Prime", "Courier New", Courier, monospace; */
305/* font-size: 10pt; */
306/* } */
307/* .sourceCode .kw { /1* keywords *1/ */
308/* color: #f0dfaf; */
309/* font-weight: bold; */
310/* } */
311/* .sourceCode .dt { /1* datatype *1/ */
312/* color: #dfdfbf; */
313/* } */
314/* .sourceCode .dv { /1* decimal value *1/ */
315/* color: #dcdccc; */
316/* } */
317/* .sourceCode .bn { /1* base N *1/ */
318/* color: #dca3a3; */
319/* } */
320/* .sourceCode .fl { /1* float *1/ */
321/* color: #c0bed1; */
322/* } */
323/* .sourceCode .ch { /1* char *1/ */
324/* color: #dca3a3; */
325/* } */
326/* .sourceCode .st { /1* string *1/ */
327/* color: #cc9393; */
328/* } */
329/* .sourceCode .co { /1* comment *1/ */
330/* color: #7f9f7f; */
331/* font-style: italic; */
332/* } */
333/* .sourceCode .ot { /1* other token *1/ */
334/* color: #efef8f; */
335/* } */
336/* .sourceCode .at { /1* alert token *1/ */
337/* color: #ffcfaf; */
338/* } */
339/* .sourceCode .fu { /1* function *1/ */
340/* color: #efef8f; */
341/* } */
342/* .sourceCode .re { /1* region marker *1/ */
343/* } */
344/* .sourceCode .er { /1* error token *1/ */
345/* color: #c3bf9f; */
346/* } */
347/* /1* code }}} *1/ */
348/* GENRE CSS */
349/* .PROSE {{{ */
350.prose {
351 display: inline-block;
352 text-align: justify;
353 max-width: 39em;
354 margin: auto;
355 hyphens: auto;
356 -moz-hyphens: auto;
357}
358.prose p::first-child::first-line {
359 font-variant: small-caps;
360 letter-spacing: 0.1em;
361}
362/* .prose }}} */
363/* .VERSE {{{ */
364.verse {
365 display: inline-block;
366 text-align: left;
367}
368.verse p {
369 margin-bottom: 1em;
370 margin-top: 1em;
371}
372.line {
373 display: block;
374 margin: 0;
375 text-indent: -1em;
376 margin-left: 1em;
377}
378/* .verse }}} */
379/* .LIST {{{ */
380.list {
381 display: inline-block;
382 text-align: left;
383 max-width: 39em;
384 margin: auto;
385 hyphens: auto;
386 -moz-hyphens: auto;
387}
388/* .list }}} */
389/* .TABLE {{{ */
390.table {
391 display: inline-block;
392 text-align: left;
393}
394/* .table }}} */
395/* PROJECT CSS */
396/* #COVER {{{ */
397/* Flexboxing {{{ */
398#cover {
399 position: absolute;
400 top: 0;
401 bottom: 0;
402 left: 0;
403 right: 0;
404 display: -webkit-box;
405 display: -moz-box;
406 display: -ms-flexbox;
407 display: -webkit-flex;
408 display: flex;
409 -webkit-box-direction: normal;
410 -moz-box-direction: normal;
411 -webkit-box-orient: vertical;
412 -moz-box-orient: vertical;
413 -webkit-flex-direction: column;
414 -ms-flex-direction: column;
415 flex-direction: column;
416 -webkit-flex-wrap: nowrap;
417 -ms-flex-wrap: nowrap;
418 flex-wrap: nowrap;
419 -webkit-box-pack: center;
420 -moz-box-pack: center;
421 -webkit-justify-content: center;
422 -ms-flex-pack: center;
423 justify-content: center;
424 -webkit-align-content: center;
425 -ms-flex-line-pack: center;
426 align-content: center;
427 -webkit-box-align: center;
428 -moz-box-align: center;
429 -webkit-align-items: center;
430 -ms-flex-align: center;
431 align-items: center;
432 }
433#cover .title {
434 -webkit-box-ordinal-group: 1;
435 -moz-box-ordinal-group: 1;
436 -webkit-order: 0;
437 -ms-flex-order: 0;
438 order: 0;
439 -webkit-box-flex: 0;
440 -moz-box-flex: 0;
441 -webkit-flex: 0 1 auto;
442 -ms-flex: 0 1 auto;
443 flex: 0 1 auto;
444 -webkit-align-self: auto;
445 -ms-flex-item-align: auto;
446 align-self: auto;
447}
448#cover .byline {
449 -webkit-box-ordinal-group: 1;
450 -moz-box-ordinal-group: 1;
451 -webkit-order: 0;
452 -ms-flex-order: 0;
453 order: 0;
454 -webkit-box-flex: 0;
455 -moz-box-flex: 0;
456 -webkit-flex: 0 1 auto;
457 -ms-flex: 0 1 auto;
458 flex: 0 1 auto;
459 -webkit-align-self: auto;
460 -ms-flex-item-align: auto;
461 align-self: auto;
462}
463#cover .anchors {
464 -webkit-box-ordinal-group: 1;
465 -moz-box-ordinal-group: 1;
466 -webkit-order: 0;
467 -ms-flex-order: 0;
468 order: 0;
469 -webkit-box-flex: 0;
470 -moz-box-flex: 0;
471 -webkit-flex: 0 1 auto;
472 -ms-flex: 0 1 auto;
473 flex: 0 1 auto;
474 -webkit-align-self: auto;
475 -ms-flex-item-align: auto;
476 align-self: auto;
477}
478/* }}} */
479#cover {
480 color: #b2d9e5;
481 background-image: url('black-streak.jpg');
482 background-position: 0 0;
483 background-size: 100% 100%;
484 background-repeat: no-repeat;
485 background-attachment: fixed;
486 background-clip: border-box;
487 background-color: black;
488}
489#cover header {
490 border: none;
491 margin: auto;
492 padding: 0;
493}
494#cover .content {
495 max-width: 39em;
496 margin: auto;
497}
498#cover a {
499 text-decoration: none;
500 border: none;
501}
502#cover a:link {
503 color: #b2d9e5;
504}
505#cover a:visited {
506 color: #b2b2e5;
507}
508#cover a:hover {
509 color: #e5bfb2;
510}
511#cover a:active {
512 color: #e5e5b2;
513}
514#cover li {
515 list-style: none;
516}
517#cover .title {
518 text-transform: uppercase;
519 text-align: center;
520 font-size: 1.8em;
521 letter-spacing: 0.5em;
522 color: #efefb2;
523}
524#cover .byline {
525 font-style: italic;
526 text-align: center;
527 font-size: 1.3em;
528 letter-spacing: 0.2em;
529 color: #e5bfb2;
530}
531#cover .anchors a {
532 margin-left: 0.25em;
533 margin-right: 0.25em;
534}
535#cover .randomlink {
536 text-align: center;
537 font-size: 1em;
538 color: #e5bfb2;
539}
540/* #cover }}} */
541/* .ELEGIES {{{ */
542.elegies {
543}
544/* .elegies }}} */
545/* .HEZEKIAH {{{ */
546/* .hezekiah }}} */
547/* .STARK {{{ */
548/* TODO: Change to Everything Changes? */
549table { border-collapse: collapse; }
550td {
551 vertical-align: top;
552 padding-top: 0.25em;
553 padding-bottom: 0.25em;
554}
555tr {
556 border-bottom: 1px solid black;
557 border-top: 1px solid black;
558}
559/* .stark }}} */
560/* .PAUL {{{ */
561/* Blockquote = typewriter */
562.paul blockquote {
563 font-family: "Courier Prime", "Courier New", Courier, monospace;
564 font-style: normal;
565 font-size: 10pt;
566 border: 1px solid black;
567 max-width: 30em;
568 margin: auto;
569 padding: 1em;
570 text-align: left;
571}
572.paul blockquote :last-child {
573 margin: 0;
574}
575.paul blockquote p::first-line {
576 font-variant: normal !important;
577}
578.paul blockquote ul {
579 list-style-type: none;
580}
581.paul blockquote ul li::before {
582 content: '- ';
583}
584
585/* Emphasis = handwritten */
586.paul em {
587 /* font-family: "Playfair Display", Georgia, sans-serif; */
588 font-style: italic;
589}
590/* .paul }}} */
591/* .AUTOCENTO {{{ */
592.autocento {
593 background-color: white;
594}
595/* .autocento }}} */
596/* .BACKLINKS {{{ */
597.backlinks .daisy a:link {
598 font-size: 0.5em;
599 font-style: italic;
600 margin-left: 0.5em;
601 color: gray;
602 border: none;
603 position: relative;
604 top: -1em;
605}
606.backlinks .daisy a:visited {
607 color: #b2b2e5;
608}
609.backlinks .daisy a:hover {
610 color: #e5bfb2;
611}
612.backlinks .daisy a:active {
613 color: #e5e5b2;
614}
615/* .backlinks }}} */
616/* ARTICLE CSS */
617/* #TABLE_CONTENTS {{{ */
618#table_contents table {
619 max-width: 39em;
620}
621#table_contents tr {
622 border: none;
623}
624#table_contents td {
625 max-width: 50%;
626}
627/* #table_contents }}} */
628/* #ABOUT_AUTHOR {{{ */
629#about-the-author td {
630 vertical-align: middle;
631}
632/* #about_author }}} */
633/* #ABOUT {{{ */
634#about img {
635 max-width: 10em;
636 float: right;
637 padding-top: 0.5em;
638 padding-left: 1em;
639}
640/* #about }}} */
© 2022 C. Duckworth. generated by cgit. comments, issues, and patches welcome at < git at acdw dot net >.