added commenting, adjust for cia theme

vue-theme/src/sss/_helpers.sss

@@ -8,7 +8,7 @@
     display: flex
     justify-content: center
     align-items: center
-    grid-gap: 0 $ms-0
+    grid-gap: 0 $ms--2
 
 .f
     &-row, &-col
@@ -58,7 +58,7 @@
     &-radius
         border-radius: $ms-0
     &-shadow
-        box-shadow: 1px 3px 12px #011
+        box-shadow: rgba(0 0 0 / 15%) 0.3px 0.5px 1.5px 0.5px
 
 button
     &:hover

vue-theme/src/sss/theme.sss

@@ -16,8 +16,14 @@ $primary-lighter: #CEFFF3
 $primary-dark: #007351
 
 $cia_red: #a10000 /* rgb(161, 0, 0) */
+$cia_red1: #800000
+$cia_red2: #4d0000
+$cia_red3: #330000
+
 $cia_white: #ffffff /* 100% white */
+$cia_white2: #f7f7f7 /* 97% white */
 $cia_grey: #efefef /* 5% black */
+$cia_darker: #808080 /* 50% black */
 $cia_black: #0d0d0d /* 95% black */
 
 $cia_serif: 'Hoefler Text', 'Crimson Text', serif

vue-theme/src/sss/variables.sss

@@ -3,7 +3,7 @@
 $transition: 500ms
 
 $min-width: 20em
-$max-width: 77em
+$max-width: 74em
 
 /* Circles for add page */
 $radius: 2.5vw
@@ -11,24 +11,45 @@ $path: 4px
 
 /* Proportion */
 $base: 1.0em
+
 $ratio: $minor-third
+/* $ratio = 1.2 from _ratios.sss */
 
 $ms-0: calc($base)
+/* $ms-0 = 1.0em */
 $ms--1: calc($ms-0 / $ratio)
+/* $ms--1 = 1.0em / 1.2 = 0.83333em */
 $ms--2: calc($ms--1 / $ratio)
+/* $ms--2 = 0.8333em / 1.2 = 0.69444em */
 $ms--3: calc($ms--2 / $ratio)
+/* $ms--3 = 0.694em / 1.2 = 0.57870em */
 $ms--4: calc($ms--3 / $ratio)
+/* $ms--4 = 0.57870em / 1.2 = 0.48225em */
 $ms--5: calc($ms--4 / $ratio)
+/* $ms--5 = 0.482253em / 1.2 = 0.40187em */
 $ms--6: calc($ms--5 / $ratio)
+/* $ms--6 = 0.40187757em / 1.2 = 0.33489em */
+$ms--7: calc($ms--6 / $ratio)
+/* $ms--7 = 0.334898em / 1.2 = 0.27908em */
+
 $ms-1: calc($ms-0 * $ratio)
+/* $ms-1 = 1.0em * 1.2 = 1.2em */
 $ms-2: calc($ms-1 * $ratio)
+/* $ms-2 = 1.2em * 1.2 = 1.44em */
 $ms-3: calc($ms-2 * $ratio)
+/* $ms-3 = 1.44em * 1.2 = 1.728em */
 $ms-4: calc($ms-3 * $ratio)
+/* $ms-4 = 1.728em * 1.2 = 2.0736em */
 $ms-5: calc($ms-4 * $ratio)
+/* $ms-5 = 2.0736em * 1.2 = 2.48832em */
 $ms-6: calc($ms-5 * $ratio)
+/* $ms-6 = 2.48832em * 1.2 = 2.985984em */
 $ms-7: calc($ms-6 * $ratio)
+/* $ms-7 = 2.985984em * 1.2 = 3.5831808em */
 $ms-8: calc($ms-7 * $ratio)
+/* $ms-8 = 3.5831808em * 1.2 = 4.29981696em */
 $ms-9: calc($ms-8 * $ratio)
+/* $ms-9 = 4.29981696em * 1.2 = 5.15978035em */
 
 /* Fonts */
 $sans: 'Questrial', sans-serif