diff options
Diffstat (limited to 'css/common.css')
-rw-r--r-- | css/common.css | 132 |
1 files changed, 64 insertions, 68 deletions
diff --git a/css/common.css b/css/common.css index 56496ad..c51fe31 100644 --- a/css/common.css +++ b/css/common.css | |||
@@ -1,48 +1,58 @@ | |||
1 | /* Common CSS for all of Autocento at the breakfast table | 1 | /* Common CSS for all of Autocento at the breakfast table |
2 | * should include ONLY the following: | ||
3 | * margins & widths | ||
4 | * text sizes & font assignments | ||
5 | * link rendering | ||
6 | * images | ||
7 | * vim: fdm=marker | 2 | * vim: fdm=marker |
8 | */ | 3 | */ |
9 | /* Import rules {{{ */ | 4 | /* IMPORTS {{{ */ |
10 | /* Playfair Display (headings) */ | 5 | /* Playfair Display (headings) */ |
11 | @import url(http://fonts.googleapis.com/css?family=Playfair+Display:400,700,400italic,700italic&subset=latin,latin-ext); | 6 | @import url(http://fonts.googleapis.com/css?family=Playfair+Display:400,700,400italic,700italic&subset=latin,latin-ext); |
12 | /* Fira Sans (body) */ | 7 | /* Fira Sans (body) */ |
13 | @import url(http://code.cdn.mozilla.net/fonts/fira.css); | 8 | @import url(http://code.cdn.mozilla.net/fonts/fira.css); |
14 | /* @import url("fonts/courier-prime.css"); | 9 | /* @import url("fonts/courier-prime.css"); |
15 | * ^^^^^^ for typewriter pages in Paul */ | 10 | * ^^^^^^ for typewriter pages in Paul */ |
16 | /* }}} */ | 11 | /* imports }}} */ |
17 | /* Body {{{ */ | 12 | /* LAYOUT {{{ */ |
18 | html, body { | 13 | html, body { |
19 | font-family: "Fira Sans", sans-serif; | ||
20 | font-size: 12pt; | ||
21 | margin: 0; | 14 | margin: 0; |
22 | padding: 0; | 15 | padding: 0; |
23 | height: 100%; | 16 | |
17 | font-family: "Fira Sans", sans-serif; | ||
18 | font-size: 12pt; | ||
24 | } | 19 | } |
25 | #wrapper { /*makes sure nav is at bottom of window*/ | 20 | html { height: 100%; } |
21 | body { | ||
22 | position: absolute; | ||
23 | top: 0; | ||
24 | left: 0; | ||
25 | right: 0; | ||
26 | min-height: 100%; | 26 | min-height: 100%; |
27 | position: relative; | 27 | padding-left: 12px; |
28 | margin: 12px; | 28 | padding-right: 12px; |
29 | } | 29 | } |
30 | .thing { | 30 | header { |
31 | max-width: 39em; | 31 | max-width: 39em; |
32 | margin: auto; | 32 | margin: auto; |
33 | padding-bottom: 3em; /*height of nav*/ | ||
34 | } | 33 | } |
35 | /* Tables */ | 34 | .thing { |
36 | table { border-collapse: collapse; } | 35 | max-width: 39em; |
37 | td { | 36 | margin: 0 auto; |
38 | vertical-align: top; | 37 | padding-bottom: 24px; |
38 | } | ||
39 | nav { | ||
40 | height: 24px; | ||
41 | width: 100%; | ||
42 | position: absolute; | ||
43 | bottom: 0; | ||
44 | left: 0; | ||
45 | text-align: center; | ||
39 | } | 46 | } |
40 | tr { | 47 | .footnotes { |
41 | border-bottom: 1px solid #aaa; | 48 | width: 80%; |
42 | border-top: 1px solid #aaa; | 49 | position: absolute; |
50 | top: 100%; | ||
51 | left: 10%; | ||
52 | font-size: 10pt; | ||
43 | } | 53 | } |
44 | /* }}} */ | 54 | /* layout }}} */ |
45 | /* Links {{{ */ | 55 | /* LINKS {{{ */ |
46 | a:link { | 56 | a:link { |
47 | color: inherit; | 57 | color: inherit; |
48 | text-decoration: underline; | 58 | text-decoration: underline; |
@@ -68,8 +78,8 @@ a[href^="http"]:hover { | |||
68 | a[href^="http"]:active { | 78 | a[href^="http"]:active { |
69 | text-decoration: underline; | 79 | text-decoration: underline; |
70 | } | 80 | } |
71 | /* }}} */ | 81 | /* links }}} */ |
72 | /* Images {{{ */ | 82 | /* IMAGES {{{ */ |
73 | figure { | 83 | figure { |
74 | width: 100%; | 84 | width: 100%; |
75 | margin: auto; | 85 | margin: auto; |
@@ -82,13 +92,8 @@ img { | |||
82 | max-width: 100%; | 92 | max-width: 100%; |
83 | margin: auto; | 93 | margin: auto; |
84 | } | 94 | } |
85 | /* }}} */ | 95 | /* images }}} */ |
86 | /* Header section {{{ */ | 96 | /* HEADINGS {{{ */ |
87 | header { | ||
88 | max-width: 39em; | ||
89 | margin: auto; | ||
90 | } | ||
91 | /* headings */ | ||
92 | h1.title { | 97 | h1.title { |
93 | font-family: "Playfair Display", Georgia, serif; | 98 | font-family: "Playfair Display", Georgia, serif; |
94 | font-size: 16pt; | 99 | font-size: 16pt; |
@@ -110,7 +115,8 @@ h2 { | |||
110 | font-size: 12pt; | 115 | font-size: 12pt; |
111 | font-weight: 600; | 116 | font-weight: 600; |
112 | } | 117 | } |
113 | /* Epigraph & Dedication */ | 118 | /* headings }}} */ |
119 | /* DEDICATION {{{ */ | ||
114 | .dedication { | 120 | .dedication { |
115 | font-style: italic; | 121 | font-style: italic; |
116 | font-size: 10pt; | 122 | font-size: 10pt; |
@@ -121,7 +127,8 @@ h2 { | |||
121 | content: 'for '; | 127 | content: 'for '; |
122 | font-style: italic; | 128 | font-style: italic; |
123 | } | 129 | } |
124 | 130 | /* dedication }}} */ | |
131 | /* EPIGRAPH {{{ */ | ||
125 | .epigraph { | 132 | .epigraph { |
126 | text-align: right; | 133 | text-align: right; |
127 | font-size: 10pt; | 134 | font-size: 10pt; |
@@ -139,52 +146,41 @@ h2 { | |||
139 | .epigraph-attrib:before { | 146 | .epigraph-attrib:before { |
140 | content: '– '; | 147 | content: '– '; |
141 | } | 148 | } |
142 | /* }}} */ | 149 | /* epigraph }}} */ |
143 | /* Navigation {{{ */ | 150 | /* NAV {{{ */ |
144 | nav { | 151 | nav .prevlink { float: left; text-align: left; } |
145 | width: 100%; | 152 | nav .nextlink { float: right; text-align: right; } |
146 | height: 3em; | 153 | /* Properties both types of navlinks share */ |
147 | position: absolute; | 154 | nav .prevlink, nav .nextlink { |
148 | bottom: 0; | ||
149 | left: 0; | ||
150 | text-align: center; | ||
151 | } | ||
152 | nav .prevlink { | ||
153 | float: left; | ||
154 | text-align: left; | ||
155 | margin: 0 0.5em; | ||
156 | max-width: 20%; | ||
157 | } | ||
158 | nav .nextlink { | ||
159 | float: right; | ||
160 | text-align: right; | ||
161 | margin: 0 0.5em; | 155 | margin: 0 0.5em; |
162 | max-width: 20%; | 156 | max-width: 25%; |
157 | font-size: 10pt; | ||
158 | font-family: "Playfair Display", Georgia, serif; | ||
159 | font-style: italic; | ||
160 | text-transform: lowercase; | ||
161 | height: 20px; | ||
162 | overflow: hidden; | ||
163 | text-decoration: none; | ||
163 | } | 164 | } |
164 | nav .prevlink:before { | 165 | nav .prevlink:before { |
165 | content: ' «' | 166 | content: ' «'; |
167 | font-style: normal; | ||
166 | } | 168 | } |
167 | nav .nextlink:after { | 169 | nav .nextlink:after { |
168 | content: ' »' | 170 | content: ' »'; |
171 | font-style: normal; | ||
169 | } | 172 | } |
170 | #lozenge { | 173 | #lozenge { |
171 | position: absolute; | 174 | position: absolute; |
172 | left: 50%; | 175 | left: 50%; |
173 | text-decoration: none; | 176 | text-decoration: none; |
174 | } | 177 | } |
175 | /* }}} */ | 178 | /* nav }}} */ |
176 | /* Footnotes {{{ */ | 179 | /* FOOTNOTES {{{ */ |
177 | .footnotes { | ||
178 | position: absolute; | ||
179 | top: 100%; | ||
180 | left: 25%; | ||
181 | width: 50%; | ||
182 | font-size: 10pt; | ||
183 | } | ||
184 | .footnotes p::first-line { | 180 | .footnotes p::first-line { |
185 | font-variant: normal !important; | 181 | font-variant: normal !important; |
186 | } | 182 | } |
187 | .footnotes a[href^="#fnref"] { | 183 | .footnotes a[href^="#fnref"] { |
188 | float: right; | 184 | float: right; |
189 | } | 185 | } |
190 | /* }}} */ | 186 | /* footnotes }}} */ |