Some bugfixes
[blog.git] / _scss / base.scss
index 9ac3a70..b98f4fc 100644 (file)
@@ -1,15 +1,45 @@
 // 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;
-
+  
+$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-pct: 1.45*100%;
+$base-font-rel: 1rem;
+
+$breakpoints: (
+    'phone': 360px,
+    'tablet': 800px,
+    'desktop': 1280px
+) !default;
+
+@import "_include-media";
+
+// 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,38 +73,73 @@ blockquote, q {
 }
 
 table {
-    border {
+    border: {
         collapse: collapse;
-        spacing: 0;
     }
 }
 
 /*** Basics ***/
+html, body {
+    background-color: $base03;
+    color: $base0;
+}
+
 
 body {
     font: {
         size: $base-font-pct;
         size: $base-font-rel;
         family: $font-family;
+        variant-ligatures: common-ligatures;
+        kerning: normal;
+        weight: normal;
     }
+    text-rendering: optimizeLegibility;
     line-height: 1.7;
 }
 
 a {
     text-decoration: none;
-    border-bottom: 1px solid #839496;
     padding-bottom: 2px;
+    color: $cyan;
+    border-color: $base02;
 
     &:active, &:visited {
+        color: $cyan;
+        border-color: $base02;
         text-decoration: none;
-        border-bottom: 1px solid #839496;
         padding-bottom: 2px;
     }
 
     &:hover {
-        background-color: #839496;
-        color: #000000;
+        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;
+    }
+
+    &:hover {
+        background-color: $base02;
+        border-color: $base02;
+        color: $red;
     }
+
 }
 
 p, pre {
@@ -95,6 +160,47 @@ ol, ul {
     }
 }
 
+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: 15px;
+                size: 1.8em;
+            }
+            margin: 0 0 10px 0;
+        }
+    }
+    thead {
+        text-align: right;
+    }
+}
+
 em, i {
     font-style: italic;
 }
@@ -105,7 +211,7 @@ strong, b {
 
 small {
     font: {
-        size: 0.85 * $base-font-em;
+        size: 0.85 * $base-font-rel;
         size: $base-font-rel;
     }
 }
@@ -123,13 +229,14 @@ sub {
 blockquote {
     margin: 22px 22px;
     padding: 0 20px;
-    border-left: 2px solid #000000;
+    border-left: 2px solid $black;
     font: {
-        size: 1.2 * $base-font-em;
+        size: 1.2 * $base-font-rel;
         size: 1.2vw;
         style: italic;
     }
-    line-height: 1.5 * $base-font-em;
+    line-height: 1.5 * $base-font-rel;
+    border-color: $red;
 }
 
 acronym, abbr {
@@ -138,13 +245,13 @@ acronym, abbr {
     border-bottom: 1px dashed;
 }
 
-@each $hlev, $fspx, $fsrel in (h1, 17, 4.0),
-                              (h2, 15, 3.0),
-                              (h3, 15, 2.0) {
+@each $hlev, $fspx, $fsrel in (h1, 17, 2.7),
+(h2, 15, 1.8),
+(h3, 15, 1.4) {
     #{$hlev} {
         font: {
             size: #{$fspx}px;
-            size: #{$fsrel}vw;
+            size: #{$fsrel}em;
         }
         margin: 0 0 10px 0;
     }
@@ -153,7 +260,7 @@ acronym, abbr {
 /*** Useful Classes ***/
 
 .clear {
-  clear: both;
+    clear: both;
 }
 
 
@@ -166,216 +273,267 @@ acronym, abbr {
 }
 
 .text-left {
-  text-align: left;
+    text-align: left;
 }
 
 .text-right {
-  text-align: right;
+    text-align: right;
 }
 
 .text-center {
-  text-align: center;
+    text-align: center;
 }
 
 .text-justify {
-  text-align: justify;
+    text-align: justify;
 }
 
 .img-left {
-  float: left;
-  margin: 4px 10px 4px 0;
+    float: left;
+    margin: 4px 10px 4px 0;
 }
 
 .img-right {
-  float: right;
-  margin: 4px 0 4px 10px;
+    float: right;
+    margin: 4px 0 4px 10px;
 }
 
 .img-middle {
-  vertical-align: middle;
+    vertical-align: middle;
 }
 
 .nopadding {
-  padding: 0;
+    padding: 0;
 }
 
 .nounderline {
-  text-decoration: underline;
+    text-decoration: underline;
 }
 
 /*** Structure ***/
 
 #page {
-  margin-left: 10%;
-  width: 100%;
+    margin-left: 10%;
+    width: 100vw;
+    @include media('all', '<tablet' ) {
+        margin: {
+            left: initial;
+            top: auto;
+        }
+        position: static;
+        float: none;
+    }
 }
 
 #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;
-      }          
-  }
+    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;
+        }
+        margin-bottom: 4px;
+
+        a {
+            border: none;
+        }
+    }
+    h2 {
+        color: $green;
+        font: {
+            size: 16px;
+            size: 2vw;
+        }
+    }
+    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: 75%;
-  margin: 50px auto 20px auto;
-  padding-top: 10px;
-  border-top: 1px solid #073642;
+    width: 75vw;
+    margin: 50px auto 20px auto;
+    padding-top: 10px;
+    border-top: 1px solid $base02;
+    border-color: $base02;
+    @include media('all', '<tablet' ) {
+        width: 100vw;
+    }
+}
+
+#license {
+    display: inline-block;
+    p {
+        display: inline-block;
+    }
 }
 
 #content {
-  width: 75%;
-  margin: {
-      top: 11vw;
-      bottom: auto;
-      left: 2vmax;
-      right: auto;
-  }
+    width: 75%;
+    margin: {
+        top: 11vw;
+        left: 2vmax;
+    }
+    @include media('all', '<tablet' ) {
+        margin: {
+            top: auto;
+        }
+        width: 98vw;
+    }
+    @include media('all', "height<=500px") {
+        position: static;
+        float: none;
+        width: 98vw;
+        margin: {
+            top: auto;
+        }
+    }
 }
 
 #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;
-  }
+    position: fixed;
+    text-align: right;
+    margin-top: 5vmin;
+    width: 20%;
+    left: -10%;
+
+    li {
+        list-style: none;
+        margin: 2px 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 {
+            margin: 2px 0;
+            float: left;
+        }
+        nav select.mnav {
+            display: block;
+            margin-bottom: 15px;
+        }
+    }
 }
 
 /*** Posts ***/
 
 article {
-  margin-bottom: 40px;
+    margin-bottom: 40px;
 
-  h1 {
-      font: {
-          size: 17px;
-          size: 3.0vw;
-      }
-      margin: 0 0 10px 0;
+    h1 {
+        color: $cyan;
+        font: {
+            size: 1.24 * $base-font-pct;
+            size: 1.8 * $base-font-rel;
+        }
+        margin: 0 0 10px 0;
 
-      a {
-          border: none;
+        a {
+            border: none;
 
-          &.anchor {
-              margin-left: 8px;
-          }
-      }
-  }
+            &.anchor {
+                margin-left: 8px;
+                color: $cyan;
+            }
+        }
+    }
 
-  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.85 * $base-font-em;
-          size: 0.98vw;
-          style: italic;
-      }
-  }
+    .meta {
+        font: {
+            size: 0.9 * $base-font-pct;
+            size: 0.9 * $base-font-rel;
+            style: italic;
+        }
+    }
 }
 
 img {
-  &.left {
-    float: left;
-    margin: 0 1em 1em 0;
-  }
+    &.left {
+        float: left;
+        margin: 0 1em 1em 0;
+    }
 
-  &.right {
-    float: right;
-    margin: 0 0 1em 1 * $base-font-em;
-  }
+    &.right {
+        float: right;
+        margin: 0 0 1em 1 * $base-font-rel;
+    }
 
-  &.center {
-    display: block;
-    text-align: center;
-    margin: 0 auto 1em auto;
-  }
+    &.center {
+        display: block;
+        text-align: center;
+        margin: 0 auto 1em auto;
+    }
+    max-width: 100vw;
 }
 
 /*** 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;
+    padding-top: 10px;
+    text-align: center;
+    width: none;
 
-    float: none;
+    .left {
+        float: left;
+    }
 
-    nav select.mnav {
-      display: block;
-      margin-bottom: 15px;
+    .right {
+        float: right;
     }
-  }
 }