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