Adjust style to be a little more "responsive"
[blog.git] / _scss / base.scss
index 9ac3a70..ba4f492 100644 (file)
@@ -1,15 +1,63 @@
 // Define variables
 
-$font-family: cursive;
-$font-family-mono: 'Lucida Sans Typewriter', 'Lucida Console', monaco, 'Bitstream Vera Sans Mono', monospace;
-$font-family-sans: sans-serif;
-$base-font-pct: 1.35*100%;
-$base-font-em:  1.35*1em;
-$base-font-rel: 1.35*1vw;
-
+@viewport {
+    width: device-width;
+    height: device-height;
+    zoom: 1;
+    min-zoom: 1.0;
+    max-zoom: 3;
+    user-zoom: zoom;
+}
+@-ms-viewport {
+    width: device-width;
+    height: device-height;
+    zoom: 1;
+    min-zoom: 1.0;
+    max-zoom: 3;
+    user-zoom: zoom;
+}
+
+$font-family: 'Droid Sans', 'Lucida Bright', Georgia, 'Hoefler Text', 'Baskerville Old Face', Garamond, 'Times New Roman', serif;
+$font-family-mono: 'Droid Sans Mono', 'Lucida Console', 'Lucida Sans Typewriter', monaco, 'Bitstream Vera Sans Mono', monospace;
+$font-family-header: Yellowtail, 'Brush Script MT', cursive;
+$base-font-rel: 0.8rem;
+
+$breakpoints: (
+    'phone': 22.5001em,
+    'tablet': 50.001em,
+    'desktop': 80.001em,
+    'widescreen': 87.5001em,
+) !default;
+
+@import "_include-media";
+@import "_mixins";
+
+// Colors definitions
+$base03:    rgb(  0,  43,  54);
+$base02:    rgb(  7,  54,  66);
+$base04:    rgb( 38,  66,  78);
+$base01:    rgb( 88, 110, 117);
+$base00:    rgb(101, 123, 131);
+$base0:     rgb(131, 148, 150);
+$base1:     rgb(147, 161, 161);
+$base2:     rgb(238, 232, 213);
+$base3:     rgb(253, 246, 227);
+$yellow:    rgb(181, 137,   0);
+$orange:    rgb(255, 137,   0);
+$red:       rgb(220,  43,  39);
+$magenta:   rgb(211,  54, 130);
+$violet:    rgb(108, 113, 196);
+$blue:      rgb( 38, 139, 210);
+$cyan:      rgb( 42, 161, 152);
+$green:     rgb( 58, 226,  92);
+$black:     rgb(  0,   0,   0);
+
+// for highlight below
+$bg-color: $base03;
+//$base01:   rgb(159,159,159);
+$body:     $base0;
 
 /*** Reset ***/
-
 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 {
     margin: 0;
     padding: 0;
@@ -43,37 +91,79 @@ blockquote, q {
 }
 
 table {
-    border {
+    border: {
         collapse: collapse;
-        spacing: 0;
     }
 }
 
 /*** Basics ***/
-
 body {
+    background-color: $base03;
+    color: $base0;
     font: {
-        size: $base-font-pct;
-        size: $base-font-rel;
+        size: calc(#{$base-font-rel} + 0.15vw + 0.15vh);
         family: $font-family;
+        variant-ligatures: common-ligatures;
+        kerning: normal;
+        weight: normal;
+        smoothing: antialiased;
     }
+    text-rendering: optimizeLegibility;
     line-height: 1.7;
+    hyphens: auto;
+    ms-hyphens: auto;
+    webkit-hyphens: auto;
+}
+
+h1, h2, h3 {
+    color: $yellow;
+}
+
+@each $hlev, $fsrel in (h1, 2.7),
+(h2, 1.8),
+(h3, 1.4) {
+    #{$hlev} {
+        font: {
+            size: #{$fsrel}em;
+        }
+        margin: 0 0 0.625em 0;
+    }
 }
 
 a {
     text-decoration: none;
-    border-bottom: 1px solid #839496;
-    padding-bottom: 2px;
+    padding-bottom: 0.125em;
+    color: $cyan;
+    border-color: $base02;
 
     &:active, &:visited {
+        border-color: $base02;
         text-decoration: none;
-        border-bottom: 1px solid #839496;
-        padding-bottom: 2px;
+        padding-bottom: 0.125em;
     }
 
     &:hover {
-        background-color: #839496;
-        color: #000000;
+        background-color: $base02;
+        border-color: $base02;
+    }
+
+    &.year-link {
+        color: $yellow;
+        border-bottom: 0.0625em solid $base01;
+    }
+
+    h1 > & {
+        color: $red;
+        
+        &:visited, &:active {
+            color: $red;
+        }
+        
+        &:hover {
+            background-color: $base02;
+            border-color: $base02;
+            color: $red;
+        }
     }
 }
 
@@ -81,20 +171,72 @@ p, pre {
     margin-bottom: 1vh;
 }
 
+.mono {
+    @include font-mono;
+}
+
+pre {
+    @include font-mono;
+    border: 0.0313em solid $base01;
+    padding: 1vmax;
+    overflow: auto;
+    margin-right: 0.5em;
+}
+
 ol, ul {
-    padding: 0 0 18px 30px;
+    padding: 0 0 1.125em 1.875em;
     padding: 0 0 1.5vw 1.7vmax;
 
     li {
         margin: {
-            top: 10px;
-            bottom: 10px;
+            top: 0.625em;
+            bottom: 0.625em;
             top: 1vw;
             bottom: 1vw;
         }
     }
 }
 
+table {
+    td {
+        &.postdate {
+            width: 15vw;
+        }
+        &.postlink {
+            width: 75vw;
+        }
+        &.categoryposts {
+            width: 10vw;
+            text-align: right;
+        }
+        &.yearcell {
+            color: $yellow;
+            text-align: center;
+        }
+        &.gutter.gl {
+            vertical-align: top;
+        }
+        &.code {
+            float: right;
+        }
+    }
+
+    tr {
+        &.even {
+            background-color: $base04;
+        }
+        &.yearline {
+            font: {
+                size: 1.8em;
+            }
+            margin: 0 0 0.625em 0;
+        }
+    }
+    thead {
+        text-align: right;
+    }
+}
+
 em, i {
     font-style: italic;
 }
@@ -105,8 +247,7 @@ strong, b {
 
 small {
     font: {
-        size: 0.85 * $base-font-em;
-        size: $base-font-rel;
+        size: calc( #{(0.85 * $base-font-rel)}em + 0.15vw + 0.15vh);
     }
 }
 
@@ -121,261 +262,244 @@ sub {
 }
 
 blockquote {
-    margin: 22px 22px;
-    padding: 0 20px;
-    border-left: 2px solid #000000;
+    margin: 1.375em 1.375em;
+    padding: 0 1.25em;
+    border-left: 0.125em solid $black;
     font: {
-        size: 1.2 * $base-font-em;
-        size: 1.2vw;
+        size: calc(#{(1.2 * $base-font-rel)} + 0.15vw + 0.15vh);
         style: italic;
     }
-    line-height: 1.5 * $base-font-em;
+    line-height: 1.5 * $base-font-rel;
+    border-color: $red;
 }
 
 acronym, abbr {
     cursor: help;
-    letter-spacing: 1px;
-    border-bottom: 1px dashed;
+    letter-spacing: 0.0625em;
+    border-bottom: 0.0625em dashed;
 }
 
-@each $hlev, $fspx, $fsrel in (h1, 17, 4.0),
-                              (h2, 15, 3.0),
-                              (h3, 15, 2.0) {
-    #{$hlev} {
+/*** Structure ***/
+
+
+#header {
+    // While the BC is the same as the one in body, and as such inherited,
+    // not setting it here means the scrolling content is visible behind header.
+    // Setting it --> it hides the scrolling content.
+    background-color: $base03;
+    font: {
+        family: $font-family-header;
+    }
+    width: 100vw;
+    position: fixed;
+    top: 0;
+    bottom: auto;
+    text-align: center;
+
+    h1 {
+        color: $orange;
         font: {
-            size: #{$fspx}px;
-            size: #{$fsrel}vw;
+            size: calc(#{$base-font-rel * 3.5} + 0.15vw + 0.15vh);
+        }
+        margin-bottom: 4px;
+    }
+    h2 {
+        color: $green;
+        font: {
+            size: calc(#{$base-font-rel * 1.952} + 0.15vw + 0.15vh);
         }
-        margin: 0 0 10px 0;
     }
-}
-
-/*** Useful Classes ***/
 
-.clear {
-  clear: both;
+    @include media('all', "height<=500px") {
+        position: relative;
+        float: none;
+        margin-left: initial;
+    }
+    @include media('all', '<tablet' ) {
+        position: static;
+        float: none;
+        margin-left: initial;
+    }
 }
 
-
-.float-left {
-    float: left;
+#footer {
+    width: 75vw;
+    margin: 3.125em auto 1.25em  auto;
+    text-align: center;
+    @include media('all', '<tablet' ) {
+        width: 100vw;
+    }
 }
 
-.float-right {
-    float: right;
+#license {
+    display: inline-block;
+    p {
+        display: inline-block;
+    }
 }
 
-.text-left {
-  text-align: left;
-}
+#content {
+    //width: 75%;
+    min-width: 45ch;
+    max-width: 95ch;
+    margin: {
+        top: calc(#{$base-font-rel * 11} + 1vw + 1vh);
+        left: 11%;
+    }
+    @include media('all', '<tablet' ) {
+        margin: {
+            top: auto;
+            left: initial;
+        }
+        width: 98vw;
+    }
+    @include media('all', "height<=500px") {
+        position: static;
+        float: none;
+        width: 98vw;
+        margin: {
+            top: auto;
+        }
+    }
 
-.text-right {
-  text-align: right;
+    @include media('all', '>widescreen') {
+        margin: {
+            left: auto;
+            right: auto;
+        }
+    }
 }
 
-.text-center {
-  text-align: center;
-}
+#sidebar {
+    position: fixed;
+    text-align: right;
+    margin-top: 5vmin;
+    width: 20%;
+    left: -10%;
 
-.text-justify {
-  text-align: justify;
-}
+    li {
+        list-style: none;
+        margin: 2px 0;
+    }
 
-.img-left {
-  float: left;
-  margin: 4px 10px 4px 0;
+    a {
+        border: none;
+        &:hover {
+            color: $cyan;
+            background-color: $base02;
+        }
+        padding: 2px 4px;
+    }
+    nav select.mnav {
+        display: none;
+    }
+    @include media('all', '<tablet') {
+        position: relative;
+        text-align: left;
+        width: 100vw;
+        left: 0;
+        margin-top: 0;
+        float: none;
+        overflow: auto;
+
+        li {
+            @include left;
+            margin: 2px 0;
+        }
+        nav select.mnav {
+            display: block;
+            margin-bottom: 15px;
+        }
+    }
+    @include media('all', '>widescreen') {
+        left: auto;
+    }
 }
 
-.img-right {
-  float: right;
-  margin: 4px 0 4px 10px;
-}
+/*** Posts ***/
 
-.img-middle {
-  vertical-align: middle;
-}
+article {
+    margin-bottom: 40px;
 
-.nopadding {
-  padding: 0;
-}
+    h1 {
+        color: $cyan;
+        font: {
+            size: calc(#{$base-font-rel * 1.6} + 0.15vw + 0.15vh);
+        }
+        margin: 0 0 10px 0;
 
-.nounderline {
-  text-decoration: underline;
-}
+        a {
+            border: none;
 
-/*** Structure ***/
+            &.anchor {
+                margin-left: 8px;
+                color: $cyan;
+            }
+        }
+    }
 
-#page {
-  margin-left: 10%;
-  width: 100%;
-}
+    // img {
+    //     display: block;
+    //     text-align: center;
+    //     margin: 0 auto 1em auto;
+    // }
 
-#header {
-  width: 100%;
-  position: fixed;
-  top: 0;
-  bottom: auto;
-  text-align: center;
-  z-index: 2;
-
-  h1 {
-      font: {
-          size: 32px;
-          size: 4.2vw;
-      }
-      margin-bottom: 4px;
-
-      a {
-          border: none;
-      }
-  }
-  p {
-      font: {
-          size: 1.5*$base-font-pct;
-          size: 1.5*$base-font-rel;
-      }          
-  }
+    .meta {
+        font: {
+            size: calc(#{$base-font-rel * 0.7} + 0.15vw + 0.15vh);
+            style: italic;
+        }
+    }
 }
 
-#footer {
-  width: 75%;
-  margin: 50px auto 20px auto;
-  padding-top: 10px;
-  border-top: 1px solid #073642;
-}
+img {
+    &.left {
+        @include left;
+        margin: 1em 1em 1em 1em;
+    }
 
-#content {
-  width: 75%;
-  margin: {
-      top: 11vw;
-      bottom: auto;
-      left: 2vmax;
-      right: auto;
-  }
-}
+    &.right {
+        @include right;
+        margin: 1em 1em 1em 1em;
+    }
 
-#sidebar {
-  position: fixed;
-  text-align: right;
-  margin-top: 5vmin;
-  width: 20%;
-  left: -10%;
-
-  li {
-    list-style: none;
-    margin: 2px 0;
-  }
-
-  a {
-      border: none;
-      font: {
-          family: $font-family-sans;
-          size: 1.2 * $base-font-em;
-          size: 1.2vw;
-      }
-    padding: 2px 4px;
-  }
+    &.center {
+        display: block;
+        text-align: center;
+        margin: 1em auto 1em auto;
+    }
+    max-width: 100vw;
 }
 
-/*** Posts ***/
-
-article {
-  margin-bottom: 40px;
-
-  h1 {
-      font: {
-          size: 17px;
-          size: 3.0vw;
-      }
-      margin: 0 0 10px 0;
-
-      a {
-          border: none;
-
-          &.anchor {
-              margin-left: 8px;
-          }
-      }
-  }
-
-  img {
-    display: block;
-    text-align: center;
-    margin: 0 auto 1em auto;
-  }
-
-  .meta {
-      font: {
-          size: 0.85 * $base-font-em;
-          size: 0.98vw;
-          style: italic;
-      }
-  }
+figure {
+    &.left {
+        @include left;
+        display: inline-block;
+    }
+    &.right {
+        @include right;
+        display: inline-block;
+    }
+    &.center {
+        margin-left: auto;
+        margin-right: auto;
+    }
 }
 
-img {
-  &.left {
-    float: left;
-    margin: 0 1em 1em 0;
-  }
-
-  &.right {
-    float: right;
-    margin: 0 0 1em 1 * $base-font-em;
-  }
-
-  &.center {
-    display: block;
+figcaption {
     text-align: center;
-    margin: 0 auto 1em auto;
-  }
 }
 
 /*** Pagination ***/
 
 .postnavigation {
-  padding-top: 10px;
-  text-align: center;
-  width: none;
-
-  .left {
-    float: left;
-  }
-
-  .right {
-    float: right;
-  }
-}
-
-/*** Media Queries ***/
-@media all and (max-width: 870px) {
-  #page, #header, #content, #footer {
-    position: static;
-    float: none;
-    margin-left: initial;
-    width: 100%;
-  }
-
-  #page, #content, #header, #footer {
-    width: 100%;
-  }
-
-  #content {
-    margin-top: initial;
-  }
-
-  #sidebar {
-    position: relative;
-    text-align: left;
-    width: 100%;
-    left: 0;
-    margin-top: 0;
+    text-align: center;
 
-    float: none;
+    .left {
+        @include left;
+    }
 
-    nav select.mnav {
-      display: block;
-      margin-bottom: 15px;
+    .right {
+        @include right;
     }
-  }
 }