Initial import of blog.ganneff.de into a jekyll based setup
[blog.git] / _scss / base.scss
1 // Define variables
2
3 $font-family: cursive;
4 $font-family-mono: 'Lucida Sans Typewriter', 'Lucida Console', monaco, 'Bitstream Vera Sans Mono', monospace;
5 $font-family-sans: sans-serif;
6 $base-font-pct: 1.35*100%;
7 $base-font-em: 1.35*1em;
8 $base-font-rel: 1.35*1vw;
9
10
11 /*** Reset ***/
12
13 html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
14 margin: 0;
15 padding: 0;
16 border: 0;
17 font: inherit;
18 vertical-align: baseline;
19 -moz-box-sizing: border-box;
20 -webkit-box-sizing: border-box;
21 box-sizing: border-box;
22 }
23
24 article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
25 display: block;
26 }
27
28 body {
29 line-height: 1;
30 }
31
32 ol, ul {
33 list-style: disc;
34 }
35
36 blockquote, q {
37 quotes: none;
38
39 &:before, &:after {
40 content: '';
41 content: none;
42 }
43 }
44
45 table {
46 border {
47 collapse: collapse;
48 spacing: 0;
49 }
50 }
51
52 /*** Basics ***/
53
54 body {
55 font: {
56 size: $base-font-pct;
57 size: $base-font-rel;
58 family: $font-family;
59 }
60 line-height: 1.7;
61 }
62
63 a {
64 text-decoration: none;
65 border-bottom: 1px solid #839496;
66 padding-bottom: 2px;
67
68 &:active, &:visited {
69 text-decoration: none;
70 border-bottom: 1px solid #839496;
71 padding-bottom: 2px;
72 }
73
74 &:hover {
75 background-color: #839496;
76 color: #000000;
77 }
78 }
79
80 p, pre {
81 margin-bottom: 1vh;
82 }
83
84 ol, ul {
85 padding: 0 0 18px 30px;
86 padding: 0 0 1.5vw 1.7vmax;
87
88 li {
89 margin: {
90 top: 10px;
91 bottom: 10px;
92 top: 1vw;
93 bottom: 1vw;
94 }
95 }
96 }
97
98 em, i {
99 font-style: italic;
100 }
101
102 strong, b {
103 font-weight: bold;
104 }
105
106 small {
107 font: {
108 size: 0.85 * $base-font-em;
109 size: $base-font-rel;
110 }
111 }
112
113 sup {
114 @extend small;
115 vertical-align: super;
116 }
117
118 sub {
119 @extend small;
120 vertical-align: sub;
121 }
122
123 blockquote {
124 margin: 22px 22px;
125 padding: 0 20px;
126 border-left: 2px solid #000000;
127 font: {
128 size: 1.2 * $base-font-em;
129 size: 1.2vw;
130 style: italic;
131 }
132 line-height: 1.5 * $base-font-em;
133 }
134
135 acronym, abbr {
136 cursor: help;
137 letter-spacing: 1px;
138 border-bottom: 1px dashed;
139 }
140
141 @each $hlev, $fspx, $fsrel in (h1, 17, 4.0),
142 (h2, 15, 3.0),
143 (h3, 15, 2.0) {
144 #{$hlev} {
145 font: {
146 size: #{$fspx}px;
147 size: #{$fsrel}vw;
148 }
149 margin: 0 0 10px 0;
150 }
151 }
152
153 /*** Useful Classes ***/
154
155 .clear {
156 clear: both;
157 }
158
159
160 .float-left {
161 float: left;
162 }
163
164 .float-right {
165 float: right;
166 }
167
168 .text-left {
169 text-align: left;
170 }
171
172 .text-right {
173 text-align: right;
174 }
175
176 .text-center {
177 text-align: center;
178 }
179
180 .text-justify {
181 text-align: justify;
182 }
183
184 .img-left {
185 float: left;
186 margin: 4px 10px 4px 0;
187 }
188
189 .img-right {
190 float: right;
191 margin: 4px 0 4px 10px;
192 }
193
194 .img-middle {
195 vertical-align: middle;
196 }
197
198 .nopadding {
199 padding: 0;
200 }
201
202 .nounderline {
203 text-decoration: underline;
204 }
205
206 /*** Structure ***/
207
208 #page {
209 margin-left: 10%;
210 width: 100%;
211 }
212
213 #header {
214 width: 100%;
215 position: fixed;
216 top: 0;
217 bottom: auto;
218 text-align: center;
219 z-index: 2;
220
221 h1 {
222 font: {
223 size: 32px;
224 size: 4.2vw;
225 }
226 margin-bottom: 4px;
227
228 a {
229 border: none;
230 }
231 }
232 p {
233 font: {
234 size: 1.5*$base-font-pct;
235 size: 1.5*$base-font-rel;
236 }
237 }
238 }
239
240 #footer {
241 width: 75%;
242 margin: 50px auto 20px auto;
243 padding-top: 10px;
244 border-top: 1px solid #073642;
245 }
246
247 #content {
248 width: 75%;
249 margin: {
250 top: 11vw;
251 bottom: auto;
252 left: 2vmax;
253 right: auto;
254 }
255 }
256
257 #sidebar {
258 position: fixed;
259 text-align: right;
260 margin-top: 5vmin;
261 width: 20%;
262 left: -10%;
263
264 li {
265 list-style: none;
266 margin: 2px 0;
267 }
268
269 a {
270 border: none;
271 font: {
272 family: $font-family-sans;
273 size: 1.2 * $base-font-em;
274 size: 1.2vw;
275 }
276 padding: 2px 4px;
277 }
278 }
279
280 /*** Posts ***/
281
282 article {
283 margin-bottom: 40px;
284
285 h1 {
286 font: {
287 size: 17px;
288 size: 3.0vw;
289 }
290 margin: 0 0 10px 0;
291
292 a {
293 border: none;
294
295 &.anchor {
296 margin-left: 8px;
297 }
298 }
299 }
300
301 img {
302 display: block;
303 text-align: center;
304 margin: 0 auto 1em auto;
305 }
306
307 .meta {
308 font: {
309 size: 0.85 * $base-font-em;
310 size: 0.98vw;
311 style: italic;
312 }
313 }
314 }
315
316 img {
317 &.left {
318 float: left;
319 margin: 0 1em 1em 0;
320 }
321
322 &.right {
323 float: right;
324 margin: 0 0 1em 1 * $base-font-em;
325 }
326
327 &.center {
328 display: block;
329 text-align: center;
330 margin: 0 auto 1em auto;
331 }
332 }
333
334 /*** Pagination ***/
335
336 .postnavigation {
337 padding-top: 10px;
338 text-align: center;
339 width: none;
340
341 .left {
342 float: left;
343 }
344
345 .right {
346 float: right;
347 }
348 }
349
350 /*** Media Queries ***/
351 @media all and (max-width: 870px) {
352 #page, #header, #content, #footer {
353 position: static;
354 float: none;
355 margin-left: initial;
356 width: 100%;
357 }
358
359 #page, #content, #header, #footer {
360 width: 100%;
361 }
362
363 #content {
364 margin-top: initial;
365 }
366
367 #sidebar {
368 position: relative;
369 text-align: left;
370 width: 100%;
371 left: 0;
372 margin-top: 0;
373
374 float: none;
375
376 nav select.mnav {
377 display: block;
378 margin-bottom: 15px;
379 }
380 }
381 }