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