change variable typography sss

adding font questrial and heading

vue-theme/src/sss/_typography.sss

@@ -6,7 +6,7 @@
     &-left
         text-align: left
     &-b
-        text-weight: bold
+        text-weight: 800
     &-i
         text-style: italic
     &-up
@@ -21,5 +21,60 @@
         font-family: $mono
 
 a
+    color: $cia_grey
+    /* text-decoration: none */
     &:hover
-        cursor: pointer
+        cursor: pointer
+        color: $cia_black
+
+h1
+    display: block
+    font-size: 2em
+    margin-top: 0.6em
+    margin-bottom: 0.6em
+    margin-left: 0
+    margin-right: 0
+    font-weight: bold
+
+h2
+    display: block
+    font-size: 1.5em
+    margin-top: 0.8em
+    margin-bottom: 0.8em
+    margin-left: 0
+    margin-right: 0
+    font-weight: bold
+h3
+    display: block
+    font-size: 1.17em
+    margin-top: 1em
+    margin-bottom: 1em
+    margin-left: 0
+    margin-right: 0
+    font-weight: bold
+h4
+    display: block
+    font-size: 1em
+    margin-top: 1.33em
+    margin-bottom: 1.33em
+    margin-left: 0
+    margin-right: 0
+    font-weight: bold
+
+h5
+    display: block
+    font-size: .8em
+    margin-top: 1.6em
+    margin-bottom: 1.6em
+    margin-left: 0
+    margin-right: 0
+    font-weight: bold
+
+h6
+    display: block
+    font-size: .67em
+    margin-top: 2em
+    margin-bottom: 2em
+    margin-left: 0
+    margin-right: 0
+    font-weight: bold

vue-theme/src/sss/variables.sss

@@ -1,3 +1,5 @@
+@import url('https://fonts.googleapis.com/css?family=Crimson+Text|Questrial')
+
 /* Colors */
 $blue: #0076A3
 $chart-bg: rgba(20,20,20)
@@ -12,10 +14,35 @@ $primary-light: #00D6A3
 $primary-lighter: #CEFFF3
 $primary-dark: #007351
 
+$cia_red: #a10000
+$cia_white: #ffffff
+$cia_grey: #efefef
+$cia_black: #0d0d0d
+
 /* Fonts */
-$sans: 'sans-serif'
-$serif: 'serif'
-$mono: 'monospace'
+$sans: 'Questrial', sans-serif
+$serif: 'Hoefler Text', 'Crimson Text', serif
+$mono: 'Roboto Mono', monospace
+
+$cia_serif: 'Hoefler Text', 'Crimson Text', serif
+$cia_sans: 'Questrial', 'Futura', 'Futura PT', sans-serif
+$cia_transition: 200ms
+
+@font-face
+  font-family: 'Crimson Text'
+  font-style: normal
+  font-weight: 400
+  font-display: swap
+  src: local('Crimson Text Regular'), local('CrimsonText-Regular'), url(https://fonts.gstatic.com/s/crimsontext/v9/wlp2gwHKFkZgtmSR3NB0oRJfbwhT.woff2) format('woff2')
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD
+
+@font-face 
+  font-family: 'Questrial'
+  font-style: normal
+  font-weight: 400
+  font-display: swap
+  src: local('Questrial'), local('Questrial-Regular'), url(https://fonts.gstatic.com/s/questrial/v8/QdVUSTchPBm7nuUeVf70viFl.woff2) format('woff2')
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD
 
 /* Proportion (to be replaced with modular scale) */
 $ms: 1vw