Adjust style to be a little more "responsive"
[blog.git] / _scss / base.scss
index ceee8b4..ba4f492 100644 (file)
@@ -1,19 +1,36 @@
 // Define variables
 
-$font-family: 'Clear Sans', sans-serif;
-$font-family-mono: 'Lucida Sans Typewriter', 'Lucida Console', monaco, 'Bitstream Vera Sans Mono', monospace;
-$font-family-mono: 'Clear Sans', sans-serif;
-$font-family-header: cursive;
-$base-font-pct: 1.45*100%;
-$base-font-rel: 1rem;
+@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': 360px,
-    'tablet': 800px,
-    'desktop': 1280px
+    '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);
@@ -80,81 +97,100 @@ table {
 }
 
 /*** Basics ***/
-html, body {
+body {
     background-color: $base03;
     color: $base0;
-}
-
-
-body {
     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;
-    padding-bottom: 2px;
+    padding-bottom: 0.125em;
     color: $cyan;
     border-color: $base02;
 
     &:active, &:visited {
-        color: $cyan;
         border-color: $base02;
         text-decoration: none;
-        padding-bottom: 2px;
+        padding-bottom: 0.125em;
     }
 
     &:hover {
         background-color: $base02;
         border-color: $base02;
-        color: $cyan;
     }
 
     &.year-link {
         color: $yellow;
-        border-bottom: 1px solid $base01;
-    }
-}
-
-h1, h2, h3 {
-    color: $yellow;
-}
-
-h1 a {
-    color: $red;
-
-    &:visited, &:active {
-        color: $red;
+        border-bottom: 0.0625em solid $base01;
     }
 
-    &:hover {
-        background-color: $base02;
-        border-color: $base02;
+    h1 > & {
         color: $red;
+        
+        &:visited, &:active {
+            color: $red;
+        }
+        
+        &:hover {
+            background-color: $base02;
+            border-color: $base02;
+            color: $red;
+        }
     }
-
 }
 
 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;
         }
@@ -177,6 +213,12 @@ table {
             color: $yellow;
             text-align: center;
         }
+        &.gutter.gl {
+            vertical-align: top;
+        }
+        &.code {
+            float: right;
+        }
     }
 
     tr {
@@ -185,10 +227,9 @@ table {
         }
         &.yearline {
             font: {
-                size: 15px;
                 size: 1.8em;
             }
-            margin: 0 0 10px 0;
+            margin: 0 0 0.625em 0;
         }
     }
     thead {
@@ -206,8 +247,7 @@ strong, b {
 
 small {
     font: {
-        size: 0.85 * $base-font-rel;
-        size: $base-font-rel;
+        size: calc( #{(0.85 * $base-font-rel)}em + 0.15vw + 0.15vh);
     }
 }
 
@@ -222,12 +262,11 @@ sub {
 }
 
 blockquote {
-    margin: 22px 22px;
-    padding: 0 20px;
-    border-left: 2px solid $black;
+    margin: 1.375em 1.375em;
+    padding: 0 1.25em;
+    border-left: 0.125em solid $black;
     font: {
-        size: 1.2 * $base-font-rel;
-        size: 1.2vw;
+        size: calc(#{(1.2 * $base-font-rel)} + 0.15vw + 0.15vh);
         style: italic;
     }
     line-height: 1.5 * $base-font-rel;
@@ -236,153 +275,57 @@ blockquote {
 
 acronym, abbr {
     cursor: help;
-    letter-spacing: 1px;
-    border-bottom: 1px dashed;
-}
-
-@each $hlev, $fspx, $fsrel in (h1, 17, 2.7),
-(h2, 15, 1.8),
-(h3, 15, 1.4) {
-    #{$hlev} {
-        font: {
-            size: #{$fspx}px;
-            size: #{$fsrel}em;
-        }
-        margin: 0 0 10px 0;
-    }
-}
-
-/*** Useful Classes ***/
-
-.clear {
-    clear: both;
-}
-
-
-.float-left {
-    float: left;
-}
-
-.float-right {
-    float: right;
-}
-
-.text-left {
-    text-align: left;
-}
-
-.text-right {
-    text-align: right;
-}
-
-.text-center {
-    text-align: center;
-}
-
-.text-justify {
-    text-align: justify;
-}
-
-.img-left {
-    float: left;
-    margin: 4px 10px 4px 0;
-}
-
-.img-right {
-    float: right;
-    margin: 4px 0 4px 10px;
-}
-
-.img-middle {
-    vertical-align: middle;
-}
-
-.nopadding {
-    padding: 0;
-}
-
-.nounderline {
-    text-decoration: underline;
+    letter-spacing: 0.0625em;
+    border-bottom: 0.0625em dashed;
 }
 
 /*** Structure ***/
 
-#page {
-    margin-left: 10%;
-    width: 100vw;
-    @include media('all', '<tablet' ) {
-        margin: {
-            left: initial;
-            top: auto;
-        }
-        position: static;
-        float: none;
-    }
-}
 
 #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;
     }
-    background-color: $base03;
     width: 100vw;
     position: fixed;
     top: 0;
     bottom: auto;
     text-align: center;
-    z-index: 2;
 
     h1 {
         color: $orange;
         font: {
-            size: 32px;
-            size: 4.2vw;
+            size: calc(#{$base-font-rel * 3.5} + 0.15vw + 0.15vh);
         }
         margin-bottom: 4px;
-
-        a {
-            border: none;
-        }
     }
     h2 {
         color: $green;
         font: {
-            size: 16px;
-            size: 2vw;
+            size: calc(#{$base-font-rel * 1.952} + 0.15vw + 0.15vh);
         }
     }
-    p {
-        font: {
-            size: 1.5*$base-font-pct;
-            size: 1.5*$base-font-rel;
-        }          
-    }
+
     @include media('all', "height<=500px") {
         position: relative;
         float: none;
         margin-left: initial;
-        width: 100vw;
-        p {
-            font: {
-                size: $base-font-pct;
-                size: $base-font-rel;
-            }          
-        }
     }
     @include media('all', '<tablet' ) {
         position: static;
         float: none;
         margin-left: initial;
-        width: 100vw;
     }
 }
 
 #footer {
     width: 75vw;
-    margin: 50px auto 20px auto;
-    padding-top: 10px;
-    border-top: 1px solid $base02;
-    border-color: $base02;
+    margin: 3.125em auto 1.25em  auto;
+    text-align: center;
     @include media('all', '<tablet' ) {
         width: 100vw;
     }
@@ -396,14 +339,17 @@ acronym, abbr {
 }
 
 #content {
-    width: 75%;
+    //width: 75%;
+    min-width: 45ch;
+    max-width: 95ch;
     margin: {
-        top: 11vw;
-        left: 2vmax;
+        top: calc(#{$base-font-rel * 11} + 1vw + 1vh);
+        left: 11%;
     }
     @include media('all', '<tablet' ) {
         margin: {
             top: auto;
+            left: initial;
         }
         width: 98vw;
     }
@@ -415,6 +361,13 @@ acronym, abbr {
             top: auto;
         }
     }
+
+    @include media('all', '>widescreen') {
+        margin: {
+            left: auto;
+            right: auto;
+        }
+    }
 }
 
 #sidebar {
@@ -450,14 +403,17 @@ acronym, abbr {
         overflow: auto;
 
         li {
+            @include left;
             margin: 2px 0;
-            float: left;
         }
         nav select.mnav {
             display: block;
             margin-bottom: 15px;
         }
     }
+    @include media('all', '>widescreen') {
+        left: auto;
+    }
 }
 
 /*** Posts ***/
@@ -468,8 +424,7 @@ article {
     h1 {
         color: $cyan;
         font: {
-            size: 1.24 * $base-font-pct;
-            size: 1.8 * $base-font-rel;
+            size: calc(#{$base-font-rel * 1.6} + 0.15vw + 0.15vh);
         }
         margin: 0 0 10px 0;
 
@@ -483,16 +438,15 @@ article {
         }
     }
 
-    img {
-        display: block;
-        text-align: center;
-        margin: 0 auto 1em auto;
-    }
+    // img {
+    //     display: block;
+    //     text-align: center;
+    //     margin: 0 auto 1em auto;
+    // }
 
     .meta {
         font: {
-            size: 0.9 * $base-font-pct;
-            size: 0.9 * $base-font-rel;
+            size: calc(#{$base-font-rel * 0.7} + 0.15vw + 0.15vh);
             style: italic;
         }
     }
@@ -500,35 +454,52 @@ article {
 
 img {
     &.left {
-        float: left;
-        margin: 0 1em 1em 0;
+        @include left;
+        margin: 1em 1em 1em 1em;
     }
 
     &.right {
-        float: right;
-        margin: 0 0 1em 1 * $base-font-rel;
+        @include right;
+        margin: 1em 1em 1em 1em;
     }
 
     &.center {
         display: block;
         text-align: center;
-        margin: 0 auto 1em auto;
+        margin: 1em auto 1em auto;
     }
     max-width: 100vw;
 }
 
+figure {
+    &.left {
+        @include left;
+        display: inline-block;
+    }
+    &.right {
+        @include right;
+        display: inline-block;
+    }
+    &.center {
+        margin-left: auto;
+        margin-right: auto;
+    }
+}
+
+figcaption {
+    text-align: center;
+}
+
 /*** Pagination ***/
 
 .postnavigation {
-    padding-top: 10px;
     text-align: center;
-    width: none;
 
     .left {
-        float: left;
+        @include left;
     }
 
     .right {
-        float: right;
+        @include right;
     }
 }