Adjust style to be a little more "responsive"
[blog.git] / _scss / base.scss
index 5a88070..ba4f492 100644 (file)
 $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;
+$base-font-rel: 0.8rem;
 
 $breakpoints: (
     'phone': 22.5001em,
     'tablet': 50.001em,
     'desktop': 80.001em,
+    'widescreen': 87.5001em,
 ) !default;
 
 @import "_include-media";
@@ -101,8 +101,7 @@ 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;
@@ -111,21 +110,23 @@ body {
     }
     text-rendering: optimizeLegibility;
     line-height: 1.7;
+    hyphens: auto;
+    ms-hyphens: auto;
+    webkit-hyphens: auto;
 }
 
 h1, h2, h3 {
     color: $yellow;
 }
 
-@each $hlev, $fspx, $fsrel in (h1, 17, 2.7),
-(h2, 15, 1.8),
-(h3, 15, 1.4) {
+@each $hlev, $fsrel in (h1, 2.7),
+(h2, 1.8),
+(h3, 1.4) {
     #{$hlev} {
         font: {
-            size: #{$fspx}px;
             size: #{$fsrel}em;
         }
-        margin: 0 0 10px 0;
+        margin: 0 0 0.625em 0;
     }
 }
 
@@ -170,6 +171,18 @@ 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 1.125em 1.875em;
     padding: 0 0 1.5vw 1.7vmax;
@@ -234,7 +247,7 @@ strong, b {
 
 small {
     font: {
-        size: (0.85 * $base-font-rel)em;
+        size: calc( #{(0.85 * $base-font-rel)}em + 0.15vw + 0.15vh);
     }
 }
 
@@ -253,8 +266,7 @@ blockquote {
     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;
@@ -287,16 +299,14 @@ acronym, abbr {
     h1 {
         color: $orange;
         font: {
-            size: 32px;
-            size: 4.2vw;
+            size: calc(#{$base-font-rel * 3.5} + 0.15vw + 0.15vh);
         }
         margin-bottom: 4px;
     }
     h2 {
         color: $green;
         font: {
-            size: 16px;
-            size: 2vw;
+            size: calc(#{$base-font-rel * 1.952} + 0.15vw + 0.15vh);
         }
     }
 
@@ -315,11 +325,7 @@ acronym, abbr {
 #footer {
     width: 75vw;
     margin: 3.125em auto 1.25em  auto;
-    padding-top: 10px;
-    border: {
-        top: 0.062em solid $base02;
-        color: $base02;
-    }
+    text-align: center;
     @include media('all', '<tablet' ) {
         width: 100vw;
     }
@@ -333,10 +339,12 @@ acronym, abbr {
 }
 
 #content {
-    width: 75%;
+    //width: 75%;
+    min-width: 45ch;
+    max-width: 95ch;
     margin: {
-        top: 11vw;
-        left: 11%
+        top: calc(#{$base-font-rel * 11} + 1vw + 1vh);
+        left: 11%;
     }
     @include media('all', '<tablet' ) {
         margin: {
@@ -353,6 +361,13 @@ acronym, abbr {
             top: auto;
         }
     }
+
+    @include media('all', '>widescreen') {
+        margin: {
+            left: auto;
+            right: auto;
+        }
+    }
 }
 
 #sidebar {
@@ -396,6 +411,9 @@ acronym, abbr {
             margin-bottom: 15px;
         }
     }
+    @include media('all', '>widescreen') {
+        left: auto;
+    }
 }
 
 /*** Posts ***/
@@ -406,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;
 
@@ -421,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;
         }
     }
@@ -439,22 +455,41 @@ article {
 img {
     &.left {
         @include left;
-        margin: 0 1em 1em 0;
+        margin: 1em 1em 1em 1em;
     }
 
     &.right {
         @include right;
-        margin: 0 0 1em 1 * $base-font-rel;
+        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 {