Fixup date
[blog.git] / _scss / base.scss
1 // Define variables
2
3 @viewport {
4 width: device-width;
5 height: device-height;
6 zoom: 1;
7 min-zoom: 1.0;
8 max-zoom: 3;
9 user-zoom: zoom;
10 }
11 @-ms-viewport {
12 width: device-width;
13 height: device-height;
14 zoom: 1;
15 min-zoom: 1.0;
16 max-zoom: 3;
17 user-zoom: zoom;
18 }
19
20 $font-family: 'Droid Sans', 'Lucida Bright', Georgia, 'Hoefler Text', 'Baskerville Old Face', Garamond, 'Times New Roman', serif;
21 $font-family-mono: 'Droid Sans Mono', 'Lucida Console', 'Lucida Sans Typewriter', monaco, 'Bitstream Vera Sans Mono', monospace;
22 $font-family-header: Yellowtail, 'Brush Script MT', cursive;
23 $base-font-rel: 1rem;
24
25 $breakpoints: (
26 'phone': 22.5001em,
27 'tablet': 50.001em,
28 'desktop': 80.001em,
29 'widescreen': 87.5001em,
30 ) !default;
31
32 @import "_include-media";
33 @import "_mixins";
34
35 // Colors definitions
36 $base03: rgb( 0, 43, 54);
37 $base02: rgb( 7, 54, 66);
38 $base04: rgb( 38, 66, 78);
39 $base01: rgb( 88, 110, 117);
40 $base00: rgb(101, 123, 131);
41 $base0: rgb(131, 148, 150);
42 $base1: rgb(147, 161, 161);
43 $base2: rgb(238, 232, 213);
44 $base3: rgb(253, 246, 227);
45 $yellow: rgb(181, 137, 0);
46 $orange: rgb(255, 137, 0);
47 $red: rgb(220, 43, 39);
48 $magenta: rgb(211, 54, 130);
49 $violet: rgb(108, 113, 196);
50 $blue: rgb( 38, 139, 210);
51 $cyan: rgb( 42, 161, 152);
52 $green: rgb( 58, 226, 92);
53 $black: rgb( 0, 0, 0);
54
55 // for highlight below
56 $bg-color: $base03;
57 //$base01: rgb(159,159,159);
58 $body: $base0;
59
60 /*** Reset ***/
61 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 {
62 margin: 0;
63 padding: 0;
64 border: 0;
65 font: inherit;
66 vertical-align: baseline;
67 -moz-box-sizing: border-box;
68 -webkit-box-sizing: border-box;
69 box-sizing: border-box;
70 }
71
72 article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
73 display: block;
74 }
75
76 body {
77 line-height: 1;
78 }
79
80 ol, ul {
81 list-style: disc;
82 }
83
84 blockquote, q {
85 quotes: none;
86
87 &:before, &:after {
88 content: '';
89 content: none;
90 }
91 }
92
93 table {
94 border: {
95 collapse: collapse;
96 }
97 }
98
99 /*** Basics ***/
100 body {
101 background-color: $base03;
102 color: $base0;
103 font: {
104 size: calc(#{$base-font-rel} + 0.15vw + 0.15vh);
105 family: $font-family;
106 variant-ligatures: common-ligatures;
107 kerning: normal;
108 weight: normal;
109 smoothing: antialiased;
110 }
111 text-rendering: optimizeLegibility;
112 line-height: 1.7;
113 hyphens: auto;
114 ms-hyphens: auto;
115 webkit-hyphens: auto;
116 }
117
118 h1, h2, h3 {
119 color: $yellow;
120 }
121
122 @each $hlev, $fsrel in (h1, 2.7),
123 (h2, 1.8),
124 (h3, 1.4) {
125 #{$hlev} {
126 font: {
127 size: #{$fsrel}em;
128 }
129 margin: 0 0 0.625em 0;
130 }
131 }
132
133 a {
134 text-decoration: none;
135 padding-bottom: 0.125em;
136 color: $cyan;
137 border-color: $base02;
138
139 &:active, &:visited {
140 border-color: $base02;
141 text-decoration: none;
142 padding-bottom: 0.125em;
143 }
144
145 &:hover {
146 background-color: $base02;
147 border-color: $base02;
148 }
149
150 &.year-link {
151 color: $yellow;
152 border-bottom: 0.0625em solid $base01;
153 }
154
155 h1 > & {
156 color: $red;
157
158 &:visited, &:active {
159 color: $red;
160 }
161
162 &:hover {
163 background-color: $base02;
164 border-color: $base02;
165 color: $red;
166 }
167 }
168 }
169
170 p, pre {
171 margin-bottom: 1vh;
172 }
173
174 .mono {
175 @include font-mono;
176 }
177
178 pre {
179 @include font-mono;
180 border: 0.0313em solid $base01;
181 padding: 1vmax;
182 overflow: auto;
183 margin-right: 0.5em;
184 }
185
186 ol, ul {
187 padding: 0 0 1.125em 1.875em;
188 padding: 0 0 1.5vw 1.7vmax;
189
190 li {
191 margin: {
192 top: 0.625em;
193 bottom: 0.625em;
194 top: 1vw;
195 bottom: 1vw;
196 }
197 }
198 }
199
200 table {
201 td {
202 &.postdate {
203 width: 15vw;
204 }
205 &.postlink {
206 width: 75vw;
207 }
208 &.categoryposts {
209 width: 10vw;
210 text-align: right;
211 }
212 &.yearcell {
213 color: $yellow;
214 text-align: center;
215 }
216 &.gutter.gl {
217 vertical-align: top;
218 }
219 &.code {
220 float: right;
221 }
222 }
223
224 tr {
225 &.even {
226 background-color: $base04;
227 }
228 &.yearline {
229 font: {
230 size: 1.8em;
231 }
232 margin: 0 0 0.625em 0;
233 }
234 }
235 thead {
236 text-align: right;
237 }
238 }
239
240 em, i {
241 font-style: italic;
242 }
243
244 strong, b {
245 font-weight: bold;
246 }
247
248 small {
249 font: {
250 size: calc( #{(0.85 * $base-font-rel)} + 0.15vw + 0.15vh);
251 }
252 }
253 tiny {
254 font: {
255 size: calc( #{(0.7 * $base-font-rel)} + 0.15vw + 0.15vh);
256 }
257 }
258
259 sup {
260 @extend small;
261 vertical-align: super;
262 }
263
264 sub {
265 @extend small;
266 vertical-align: sub;
267 }
268
269 blockquote {
270 margin: 1.375em 1.375em;
271 padding: 0 1.25em;
272 border-left: 0.125em solid $black;
273 font: {
274 size: calc(#{(1.2 * $base-font-rel)} + 0.15vw + 0.15vh);
275 style: italic;
276 }
277 line-height: 1.5 * $base-font-rel;
278 border-color: $red;
279 }
280
281 acronym, abbr {
282 cursor: help;
283 letter-spacing: 0.0625em;
284 border-bottom: 0.0625em dashed;
285 }
286
287 /*** Structure ***/
288
289
290 #header {
291 // While the BC is the same as the one in body, and as such inherited,
292 // not setting it here means the scrolling content is visible behind header.
293 // Setting it --> it hides the scrolling content.
294 background-color: $base03;
295 font: {
296 family: $font-family-header;
297 }
298 width: 100vw;
299 position: fixed;
300 top: 0;
301 bottom: auto;
302 text-align: center;
303
304 h1 {
305 color: $orange;
306 font: {
307 size: calc(#{$base-font-rel * 3.5} + 0.15vw + 0.15vh);
308 }
309 margin-bottom: 4px;
310 }
311 h2 {
312 color: $green;
313 font: {
314 size: calc(#{$base-font-rel * 1.952} + 0.15vw + 0.15vh);
315 }
316 }
317
318 @include media('all', "height<=500px") {
319 position: relative;
320 float: none;
321 margin-left: initial;
322 }
323 @include media('all', '<tablet' ) {
324 position: static;
325 float: none;
326 margin-left: initial;
327 }
328 }
329
330 #footer {
331 width: 75vw;
332 margin: 3.125em auto 1.25em auto;
333 text-align: center;
334 @include media('all', '<tablet' ) {
335 width: 100vw;
336 }
337 }
338
339 #license {
340 display: inline-block;
341 p {
342 display: inline-block;
343 }
344 }
345
346 #content {
347 min-width: 45ch;
348 max-width: 95ch;
349 margin: {
350 top: calc(#{$base-font-rel * 11} + 1vw + 1vh);
351 left: 11%;
352 }
353 @include media('all', '<tablet' ) {
354 margin: {
355 top: auto;
356 left: initial;
357 }
358 width: 98vw;
359 }
360 @include media('all', "height<=500px") {
361 position: static;
362 float: none;
363 width: 98vw;
364 margin: {
365 top: auto;
366 }
367 }
368
369 @include media('all', '>widescreen') {
370 margin: {
371 left: auto;
372 right: auto;
373 }
374 }
375 }
376
377 #sidebar {
378 position: fixed;
379 text-align: right;
380 margin-top: 5vmin;
381 width: 20%;
382 left: -10%;
383
384 li {
385 list-style: none;
386 margin: 2px 0;
387 }
388
389 a {
390 border: none;
391 &:hover {
392 color: $cyan;
393 background-color: $base02;
394 }
395 padding: 2px 4px;
396 }
397 nav select.mnav {
398 display: none;
399 }
400 @include media('all', '<tablet') {
401 position: relative;
402 text-align: left;
403 width: 100vw;
404 left: 0;
405 margin-top: 0;
406 float: none;
407 overflow: auto;
408
409 li {
410 @include left;
411 margin: 2px 0;
412 }
413 nav select.mnav {
414 display: block;
415 margin-bottom: 15px;
416 }
417 }
418 @include media('all', '>widescreen') {
419 left: auto;
420 }
421 }
422
423 /*** Posts ***/
424
425 article {
426 margin-bottom: 40px;
427
428 h1 {
429 color: $cyan;
430 font: {
431 size: calc(#{$base-font-rel * 1.6} + 0.15vw + 0.15vh);
432 }
433 margin: 0 0 10px 0;
434
435 a {
436 border: none;
437
438 &.anchor {
439 margin-left: 8px;
440 color: $cyan;
441 }
442 }
443 }
444
445 // img {
446 // display: block;
447 // text-align: center;
448 // margin: 0 auto 1em auto;
449 // }
450
451 .meta {
452 font: {
453 size: calc(#{$base-font-rel * 0.7} + 0.15vw + 0.15vh);
454 style: italic;
455 }
456 }
457 }
458
459 img {
460 &.left {
461 @include left;
462 margin: 1em 1em 1em 1em;
463 }
464
465 &.right {
466 @include right;
467 margin: 1em 1em 1em 1em;
468 }
469
470 &.center {
471 display: block;
472 text-align: center;
473 margin: 1em auto 1em auto;
474 }
475 max-width: 100vw;
476 }
477
478 figure {
479 &.left {
480 @include left;
481 display: inline-block;
482 }
483 &.right {
484 @include right;
485 display: inline-block;
486 }
487 &.center {
488 margin-left: auto;
489 margin-right: auto;
490 }
491 }
492
493 figcaption {
494 text-align: center;
495 }
496
497 /*** Footnotes ***/
498 .footnotes {
499 @extend tiny;
500 background: darken($bg-color, 1);
501 border-top: 2px solid darken($base00, 21);
502 li {
503 list-style: decimal;
504 }
505 }
506
507 /*** Pagination ***/
508
509 .postnavigation {
510 text-align: center;
511
512 .left {
513 @include left;
514 }
515
516 .right {
517 @include right;
518 }
519 }