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