81bae23fef674175936a645ad6a352454bbb515b
[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 $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 // border-bottom: 1px solid $base0;
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 // border-bottom: 1px solid $base0;
113 padding-bottom: 2px;
114 }
115
116 &:hover {
117 background-color: $base02;;
118 border-color: $base02;;
119 color: $cyan;
120 }
121 }
122
123 h1, h2, h3 {
124 color: $yellow;
125 }
126
127 h1 a {
128 color: $red;
129
130 &:visited, &:active {
131 color: $red;
132 }
133
134 &:hover {
135 background-color: $base02;;
136 border-color: $base02;;
137 color: $red;
138 }
139 }
140
141 p, pre {
142 margin-bottom: 1vh;
143 }
144
145 ol, ul {
146 padding: 0 0 18px 30px;
147 padding: 0 0 1.5vw 1.7vmax;
148
149 li {
150 margin: {
151 top: 10px;
152 bottom: 10px;
153 top: 1vw;
154 bottom: 1vw;
155 }
156 }
157 }
158
159 em, i {
160 font-style: italic;
161 }
162
163 strong, b {
164 font-weight: bold;
165 }
166
167 small {
168 font: {
169 size: 0.85 * $base-font-rel;
170 size: $base-font-rel;
171 }
172 }
173
174 sup {
175 @extend small;
176 vertical-align: super;
177 }
178
179 sub {
180 @extend small;
181 vertical-align: sub;
182 }
183
184 blockquote {
185 margin: 22px 22px;
186 padding: 0 20px;
187 border-left: 2px solid $black;
188 font: {
189 size: 1.2 * $base-font-rel;
190 size: 1.2vw;
191 style: italic;
192 }
193 line-height: 1.5 * $base-font-rel;
194 border-color: $red;
195 }
196
197 acronym, abbr {
198 cursor: help;
199 letter-spacing: 1px;
200 border-bottom: 1px dashed;
201 }
202
203 @each $hlev, $fspx, $fsrel in (h1, 17, 4.0),
204 (h2, 15, 3.0),
205 (h3, 15, 2.0) {
206 #{$hlev} {
207 font: {
208 size: #{$fspx}px;
209 size: #{$fsrel}vw;
210 }
211 margin: 0 0 10px 0;
212 }
213 }
214
215 /*** Useful Classes ***/
216
217 .clear {
218 clear: both;
219 }
220
221
222 .float-left {
223 float: left;
224 }
225
226 .float-right {
227 float: right;
228 }
229
230 .text-left {
231 text-align: left;
232 }
233
234 .text-right {
235 text-align: right;
236 }
237
238 .text-center {
239 text-align: center;
240 }
241
242 .text-justify {
243 text-align: justify;
244 }
245
246 .img-left {
247 float: left;
248 margin: 4px 10px 4px 0;
249 }
250
251 .img-right {
252 float: right;
253 margin: 4px 0 4px 10px;
254 }
255
256 .img-middle {
257 vertical-align: middle;
258 }
259
260 .nopadding {
261 padding: 0;
262 }
263
264 .nounderline {
265 text-decoration: underline;
266 }
267
268 /*** Structure ***/
269
270 #page {
271 margin-left: 10%;
272 width: 100vw;
273 @include media('all', '<tablet' ) {
274 margin: {
275 left: initial;
276 top: auto;
277 }
278 position: static;
279 float: none;
280 }
281 }
282
283 #header {
284 font: {
285 family: $font-family-header;
286 }
287 background-color: $base03;
288 width: 100vw;
289 position: fixed;
290 top: 0;
291 bottom: auto;
292 text-align: center;
293 z-index: 2;
294
295 h1 {
296 color: $orange;
297 font: {
298 size: 32px;
299 size: 4.2vw;
300 }
301 margin-bottom: 4px;
302
303 a {
304 border: none;
305 }
306 }
307 h2 {
308 color: $green;
309 font: {
310 size: 16px;
311 size: 2vw;
312 }
313 }
314 p {
315 font: {
316 size: 1.5*$base-font-pct;
317 size: 1.5*$base-font-rel;
318 }
319 }
320 @include media('all', "height<=500px") {
321 position: relative;
322 float: none;
323 margin-left: initial;
324 width: 100vw;
325 p {
326 font: {
327 size: $base-font-pct;
328 size: $base-font-rel;
329 }
330 }
331 }
332 @include media('all', '<tablet' ) {
333 position: static;
334 float: none;
335 margin-left: initial;
336 width: 100vw;
337 }
338 }
339
340 #footer {
341 width: 75vw;
342 margin: 50px auto 20px auto;
343 padding-top: 10px;
344 border-top: 1px solid $base02;;
345 border-color: $base02;;
346 @include media('all', '<tablet' ) {
347 width: 100vw;
348 }
349 }
350
351 #license {
352 display: inline-block;
353 p {
354 display: inline-block;
355 }
356 }
357
358 #content {
359 width: 75%;
360 margin: {
361 top: 11vw;
362 left: 2vmax;
363 }
364 @include media('all', '<tablet' ) {
365 margin: {
366 top: auto;
367 }
368 width: 98vw;
369 }
370 @include media('all', "height<=500px") {
371 position: static;
372 float: none;
373 width: 98vw;
374 margin: {
375 top: auto;
376 }
377 }
378 }
379
380 #sidebar {
381 position: fixed;
382 text-align: right;
383 margin-top: 5vmin;
384 width: 20%;
385 left: -10%;
386
387 li {
388 list-style: none;
389 margin: 2px 0;
390 }
391
392 a {
393 border: none;
394 &:hover {
395 color: $cyan;
396 background-color: $base02;;
397 }
398 padding: 2px 4px;
399 }
400 nav select.mnav {
401 display: none;
402 }
403 @include media('all', '<tablet') {
404 position: relative;
405 text-align: left;
406 width: 100vw;
407 left: 0;
408 margin-top: 0;
409 float: none;
410 overflow: auto;
411
412 li {
413 margin: 2px 0;
414 float: left;
415 }
416 nav select.mnav {
417 display: block;
418 margin-bottom: 15px;
419 }
420 }
421 }
422
423 /*** Posts ***/
424
425 article {
426 margin-bottom: 40px;
427
428 h1 {
429 color: $cyan;
430 font: {
431 size: 1.24 * $base-font-pct;
432 size: 1.8 * $base-font-rel;
433 }
434 margin: 0 0 10px 0;
435
436 a {
437 border: none;
438
439 &.anchor {
440 margin-left: 8px;
441 color: $cyan;
442 }
443 }
444 }
445
446 img {
447 display: block;
448 text-align: center;
449 margin: 0 auto 1em auto;
450 }
451
452 .meta {
453 font: {
454 size: 0.9 * $base-font-pct;
455 size: 0.9 * $base-font-rel;
456 style: italic;
457 }
458 }
459 }
460
461 img {
462 &.left {
463 float: left;
464 margin: 0 1em 1em 0;
465 }
466
467 &.right {
468 float: right;
469 margin: 0 0 1em 1 * $base-font-rel;
470 }
471
472 &.center {
473 display: block;
474 text-align: center;
475 margin: 0 auto 1em auto;
476 }
477 max-width: 100vw;
478 }
479
480 /*** Pagination ***/
481
482 .postnavigation {
483 padding-top: 10px;
484 text-align: center;
485 width: none;
486
487 .left {
488 float: left;
489 }
490
491 .right {
492 float: right;
493 }
494 }