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