commit cccb4ecd89128770d96214238f53ff4b3e3c1a01
author Carey Metcalfe <carey@cmetcalfe.ca> Wed Oct 19 02:48:15 2016 -0400
committer Carey Metcalfe <carey@cmetcalfe.ca> Wed Oct 19 02:48:15 2016 -0400
tree 92b610227fd7bdbfe61bd99847734dffcd53e10f
parent 36b4a302ae5ee6d5f33c01447a8b2761e6aad802

Set font-size using rem instead of px

Based off https://github.com/gfidente/pelican-svbhack/commit/446afc1bc800360af8ac0ae9eaca4dba69ccec54

static/css/style.scss

diff --git a/static/css/style.scss b/static/css/style.scss
index 37bdbc6..5486ac8 100644
--- a/static/css/style.scss
+++ b/static/css/style.scss
@@ -11,8 +11,8 @@
 $code-background: #f6f6f6;
 $code-linebg: #dddddd;
 
-$blue: #0e94ec;
-$accent: $blue;
+$accent: #0e94ec;
+$danger: red;
 
 @import url(https://fonts.googleapis.com/css?family=Roboto|Roboto+Mono);
 $sans: 'Roboto', sans-serif;
@@ -25,6 +25,14 @@
 $content_size: 640px;
 $horiz_pad: 40px;
 
+$main_font_size: 1rem;
+$nav_font_size: 1rem;
+$subtitle_font_size: 0.9rem;
+$code_font_size: 0.9rem;
+$article_meta_font_size: 0.8rem;
+$pagination_font_size: 0.9rem;
+$footer_font_size: 0.7rem;
+
 //The minimum size the screen can be without scaling the main content
 $min_screen: floor((($content_size + $horiz_pad * 2) * 1.33));
 
@@ -34,7 +42,7 @@
   background-color: $bg-grey;
   color: $dark-grey;
   font-family: $sans;
-  font-size: 16px;
+  font-size: $main_font_size;
   min-width: 300px;
 }
 
@@ -79,7 +87,7 @@
 
     p {
       margin: 0px;
-      font-size: 14px;
+      font-size: $subtitle_font_size;
     }
 
     i {
@@ -100,7 +108,6 @@
     ul {
       margin: 0px;
       padding-left: 0px;
-      font-size: 16px;
       list-style-type: none;
 
       li {
@@ -130,7 +137,7 @@
 
     p {
       font-weight: bold;
-      font-size: 16px;
+      font-size: $nav_font_size;
       text-transform: uppercase;
     }
 
@@ -164,13 +171,13 @@
 
       @mixin codeformat {
         color: black;
-        font-size: 14px;
+        font-size: $code_font_size;
         font-family: $mono;
       }
 
       code {
         @include codeformat;
-        padding: 2px 3px;
+        padding: 1px 3px;
         background: $light-grey;
       }
 
@@ -191,7 +198,7 @@
         background: $code-background;
       }
 
-      /* Line numbers are enabled*/
+      /* Line numbers are enabled */
       table.highlighttable {
         table-layout: fixed;
         width: 100%;
@@ -236,7 +243,7 @@
         }
 
         &.warning, &.attention, &.caution, &.danger {
-          border-left-color: red;
+          border-left-color: $danger;
         }
 
         p {
@@ -261,7 +268,7 @@
     }
 
     div.article_meta {
-      font-size: 12px;
+      font-size: $article_meta_font_size;
       color: $med-grey;
     }
 
@@ -281,7 +288,7 @@
 
     div#paginator {
       font-weight: bold;
-      font-size: 15px;
+      font-size: $pagination_font_size;
       text-transform: uppercase;
       overflow: auto;
       text-align: center;
@@ -310,7 +317,7 @@
     border-top: $border_color 1px solid;
     padding: 0 $horiz_pad 0 $horiz_pad;
     color: $med-grey;
-    font-size: 10px;
+    font-size: $footer_font_size;
   }
 }