_scss/base.scss

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