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