:art: adding a few more css helpers

src/components/card.vue

 <template lang="pug">
-.card.f-col
-    header
-        p {{ card.name }}
+.card.f-col.start.b-solid.rounded.bg-primary
+    header.t-right.dark
+        h3 {{ card.name }}
 
     main
         section
 @import '@/sss/variables.sss'
 
 .card
-    background-color: $primary
-    opacity: 0.8
-    width: $ms-4
-    height: $ms-5
-    border-radius: $ms-0
-    margin: 0 $ms-0 0 0
-    border: 1px solid black
-    transition: $transition
+    margin: 0 $ms-3 0 0
+    height: $ms-8
+    width: $ms-7
+    
     header, main, footer
-        color: $dark
-        text-align: left
         padding: 0 $ms-1
     header
         padding-top: $ms-1

src/sss/partials/_helpers.sss

         flex-direction: column
     &-grow
         flex-grow: 1
+
+.b
+    &-none
+        border: none
+    &-solid
+        border: 1px solid $dark
+    &-dot
+        border: 1px dotted $dark
+    &-solid, &-dot
+        &.rounded
+            border-radius: $ms-0
+        &.invert
+            border-color: $light
+
+.bg
+    &-none
+        background-color: none
+    &-primary
+        background-color: $primary
+    &-dark
+        background-color: $dark
+    &-light
+        background-color: $light
+
+.primary
+    color: $primary
+.dark
+    color: $dark
+.light
+    color: $light

src/sss/partials/_typography.sss

 
 .t
     &-center
+        width: 100%
         text-align: center
     &-right
+        width: 100%
         text-align: right
     &-left
+        width: 100%
         text-align: left
     &-up
         text-transform: uppercase

src/sss/variables.sss

 /**
   * Modular Scale
   */
-$base: 1em
+$base: 0.5em
 $scale: $golden
 
 $ms-0: calc($base)
 /**
   * Color Scale
   */
-$cbase: 1
+$cbase: 0.5
 $cs-0: calc($cbase)
 $cs-1: calc($cs-0 * $scale)
 $cs-2: calc($cs-1 * $scale)