_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 }