"Point Man": title drop!
[Ultimately_Untrue_Thought.git] / theme / static / css / main.css
1 /* Imports */
2
3 @import url("pygment.css");
4
5
6 /* Layout */
7
8 article,
9 figcaption,
10 figure,
11 footer,
12 header,
13 nav,
14 section,
15 time {
16   display: block;
17 }
18
19 body {
20   font-family: 'Source Sans Pro', sans-serif;
21   font-size: 14px;
22   text-align: left;
23   color: #1D1D1D;
24   padding: 0;
25   min-width: 740px;
26 }
27
28 header {
29   background-color: #101010;
30   height: 50px;
31   line-height: 50px;
32   padding: 0 1em;
33 }
34
35 .wrapper {
36   display: table;
37   width: 100%;
38 }
39
40 .content {
41   display: table-cell;
42   border-left: 1px solid #d6d6d6;
43   border-right: 1px dotted #D6D6D6;
44   padding: 0 20px 1em 20px;
45 }
46
47 .sidebar {
48   display: table-cell;
49   width: 25%;
50   border-right: 1px solid #d6d6d6;
51   padding: 0 20px 1em 20px;
52 }
53
54 footer {
55   border-top: 1px dotted #D6D6D6;
56   line-height: 15px;
57   padding: 0 1em;
58   font-size: 0.8em;
59 }
60
61
62 /* Header */
63
64 header a {
65   color: #E5E5E3;
66   border-bottom: none;
67 }
68
69 header a.title {
70   font-size: 1.25em;
71 }
72
73 header .feeds {
74   float: right;
75   text-align: right;
76   width: 25%;
77   height: 41px;
78   padding-top: 9px;
79 }
80
81 header .feeds a {
82   display: block;
83   float: right;
84   padding-right: 5px;
85   width: 40px;
86 }
87
88 header .feeds a:hover,
89 header .feeds a:active {
90   border-bottom: none;
91 }
92
93 header .pages {
94   float: right;
95 }
96
97 header .pages a {
98   font-size: 1.1em;
99 }
100
101
102 /* Sidebar */
103
104
105 /* Titles */
106
107 h1, h2, h3, h4, h5, h6 {
108     font-family: "Source Sans Pro",sans-serif;
109     font-weight: 400;
110     text-shadow: 0.1em 0.1em 0.1em #EFEFEF;
111     line-height: 125%;
112 }
113
114 h1 {
115   font-size: 2em;
116 }
117
118 h1 a {
119   color: inherit;
120   border-bottom: none;
121 }
122
123
124 /* Texts */
125
126 p {
127   margin: 0.8em 0 0.5em;
128 }
129
130 a {
131   text-decoration: none;
132   border-bottom: 1px dotted #4D4D4C;
133   color: #2D2D2C;
134 }
135
136 a:hover, a:active {
137   text-decoration: none;
138   border-bottom: 1px dotted #C07095;
139   color: #C07095;
140 }
141
142 .literal {
143   font-size: 0.9em;
144   border: 1px solid #F0F0F0;
145   padding: 0px 5px;
146 }
147
148 pre {
149   font-family: 'Source Code Pro',monospace;
150   background: none repeat scroll 0 0 #F0F0F0;
151   border-radius: 2px;
152   font-size: 0.9em;
153   font-style: normal;
154   letter-spacing: 0.015em;
155   line-height: 130%;
156   padding: 0.7em;
157   white-space: pre-wrap;
158   word-wrap: break-word;
159 }
160
161 hr {
162   color: #d6d6d6;
163   box-shadow: 0.1em 0.1em 0.1em #EFEFEF;
164   border-radius: 5px;
165 }
166
167
168 /* Article */
169
170 article.summary {
171   margin-bottom: 40px;
172   clear: both;
173 }
174
175 article.summary > div {
176   margin-left: 28%;
177 }
178
179 article .metadata,
180 article.full .metadata,
181 article.summary .metadata {
182   background: #FFFFFF;
183   padding: 1%;
184   border: 1px dotted #EFEFEF;
185   box-shadow: 0.1em 0.1em 0.1em #EFEFEF;
186   font-style: italic;
187 }
188
189 article .metadata,
190 article.full .metadata {
191   width: 25%;
192   float: right;
193   margin: 0 0 2% 1%;
194 }
195
196 article.summary .metadata {
197   width: 23%;
198   float: left;
199   margin: 0 1% 2% 0 ;
200 }
201
202 .metadata p {
203   margin: 0;
204 }
205
206
207 blockquote {
208     background: #F0F0F0;
209     border-left: 10px solid #C07095;
210     margin: 1.5em 10px;
211     padding: 0.5em 10px;
212 }
213
214
215 /* Listings */
216
217 ol.archive li {
218   margin: 8px 0;
219 }
220
221 ol.archive li time,
222 ol.archive li .tags
223  {
224   line-height: 140%;
225   font-size: 0.8em;
226   margin: 0;
227 }
228
229
230
231 /* Social */
232
233 .social {
234   list-style-type: none;
235   padding-left: 20px;
236 }
237
238 .social li {
239   clear: both;
240 }
241
242 .social a {}
243
244 .social i {
245   float: left;
246   margin-right: 3px;
247   padding-top: 4px;
248 }
249 .social a[href*='twitter.com'] + i:before {content: url('../images/icons/twitter-18px.png'); }
250 .social a[href*='linkedin.com'] + i:before {content: url('../images/icons/linkedin-18px.png'); }
251 .social a[href*='github.com'] + i:before {content: url('../images/icons/github-18px.png'); }
252 .social a[href*='google.com'] + i:before {content: url('../images/icons/google-18px.png'); }
253 .social a[href*='delicious.com']:before {content: url('../images/icons/delicious-18px.png'); }
254 .social a[href*='digg.com']:before {content: url('../images/icons/digg-18px.png'); }
255 .social a[href*='facebook.com']:before {content: url('../images/icons/facebook-18px.png'); }
256 .social a[href*='stackoverflow.com']:before {content: url('../images/icons/stackoverfow-18px.png'); }
257 .social a[href*='rss.xml']:before {content: url('../images/icons/feed-18px.png'); }
258 .social a[href*='atom.xml']:before {content: url('../images/icons/feed-18px.png'); }
259
260
261 /* Tag cloud */
262
263 ul.tagcloud {
264   list-style: none;
265   padding: 0;
266   width: 50%;
267   margin: 0 auto;
268   line-height: 200%;
269 }
270
271 ul.tagcloud li {
272     display: inline-block;
273 }
274
275 li.tag-1 { font-size: 175%; margin: 0 1em; }
276 li.tag-2 { font-size: 150%; margin: 0 1em; }
277 li.tag-3 { font-size: 125%; margin: 0 1em; }
278 li.tag-4 { font-size: 110%; margin: 0 1em; }
279
280 /* Pagination */
281
282 .pagination {
283   width: 100px;
284   margin: 1em auto;
285 }
286
287 /* Responsive */
288
289 @media (min-width: 1280px) {
290   body {
291     margin: 0 16%;
292   }
293 }
294
295 @media (max-width: 1280px) {
296   body {
297     margin: 0 12%;
298   }
299 }
300
301 @media (max-width: 979px) {
302   body {
303     margin: 0 4%;
304   }
305 }
306
307
308 /* tag cloud */
309
310 span.tag-1 {
311     font-size: 160%;
312 }
313 span.tag-2 {
314     font-size: 140%;
315 }
316 span.tag-3 {
317     font-size: 125%;
318 }
319 span.tag-4 {
320     font-size: 110%;
321 }
322 span.tag-5 {
323     font-size: 95%;
324 }
325 span.tag-6 {
326     font-size: 75%;
327 }
328
329
330 /* footnotes */
331 p#notes-header {
332     font-weight: bold;
333 }
334
335 ol.simple-footnotes {
336     font-size: 85%;
337 }
338
339
340 /* sidebar-aside */
341 aside.boxout {
342     width: 80%;
343     font-size: 85%;
344     background-color: #E5E5E5;
345     outline-style: solid;
346     outline-color: black;
347     outline-width: 1px;
348     padding: 6px;
349 }
350
351 span.photo-credit {
352     font-size: 85%;
353 }
354
355 .dialogue > p {
356     margin: 0.25em 0 0.25em;
357 }
358
359 .dialogue-character-label {
360     font-weight: bold;
361     font-variant: small-caps;
362 }
363
364 p.flower-break {
365     text-align: center;
366 }
367
368 .footnote {
369     font-size: 85%;
370 }
371
372 .comments-link-container {
373     font-weight: bold;
374     font-size: 85%;
375 }