Refactor fonts, add documentation

web/components/auth/Login/Login.js

@@ -59,7 +59,7 @@ class Login extends React.Component {
             className="input-group">
             <h2 className="pad-sides-xxl">Sign in</h2>
             <div className="card split flex">
-              <div className="pad-ends-xxl pad-sides-xxl margin-text-inputs">
+              <div className="pad-ends-xxl pad-sides-xxl margin-vertical-text-inputs">
                 <TextInput
                   placeholder="Enter your email"
                   value={email}

web/styles/animations.sass

@@ -1,6 +1,14 @@
+/////////////////////////
+//    TRANSITIONS      //
+/////////////////////////
+  
 $transition-time: .2s
 $transition-time-long: 1.5s
 
+/////////////////////////
+//       MIXINS        //
+/////////////////////////
+
 // This is a hack to allow transitions of linear-gradient backgrounds.
 // https://medium.com/@dave_lunny/animating-css-gradients-using-only-css-d2fd7671e759
 // Use this by @include'ing it in your class with required arguments.

web/styles/breakpoints.sass

@@ -1,3 +1,7 @@
+/////////////////////////
+//     BREAKPOINTS     //
+/////////////////////////
+  
 $desktop: 1300px;
 $laptop: 1080px;
 $tablet: 900px;

web/styles/colors.sass

@@ -1,10 +1,16 @@
-/* colors */
+/////////////////////////
+//     BASE COLORS     //
+/////////////////////////
+
 $white: #FFFFFF
 $grey-dark: #363131
 $grey-light: #BDBDBD
 $grey-slate: #9195A5
 
-/* classes */
+/////////////////////////
+//    COLOR CLASSES    //
+/////////////////////////
+
 $error:               #EB5757  // figma "red"
 $error-dark:          #D41818  // figma "dark red"
 $primary:             #21258A  // figma "body text"
@@ -13,11 +19,17 @@ $secondary:           #00BCBC  // figma "link text"
 $secondary-highlight: #00D5D5  // figma "link text/hover"
 $background:          #F2F7FE
 
-/* gradients */
+/////////////////////////
+//      GRADIENTS      //
+/////////////////////////
+
 $gradient-primary:           linear-gradient(180deg, #4DE8C2 0%, #19CBCB 100%, #18CDCD 100%)
 $gradient-primary-highlight: linear-gradient(180deg, #92F1DA 0%, #43DEDE 100%)
 $gradient-primary-subdued:   linear-gradient(180deg, #4DE8C2 0%, #18CDCD 100%, #19CBCB 100%);
 $gradient-secondary:         linear-gradient(180deg, #FFFFFF 0%, #EDFFFC 100%)
 
-/* misc */
+/////////////////////////
+//         MISC        //
+/////////////////////////
+
 $shadow: rgba(0, 82, 174, 0.15)

web/styles/decoration.sass

@@ -1,3 +1,7 @@
+/////////////////////////
+// ELEMENT DECORATIONS //
+/////////////////////////
+
 .shadow
   box-shadow: 0px 4px 6px $shadow
 

web/styles/index.sass

@@ -1,4 +1,8 @@
-/* core */
+/////////////////////////
+//   ALL STYLESHEETS   //
+/////////////////////////
+  
+// core
 @import ./spacing
 @import ./colors
 @import ./typography
@@ -7,12 +11,16 @@
 @import ./breakpoints
 @import ./decoration
 
-/* components */
+// components
 @import ../components/index
 
-/* containers */
+// containers
 @import ../containers/index
 
+/////////////////////////
+//      DEFAULTS       //
+/////////////////////////
+
 // Remove from here once definitions are set up
 html, body, div, span, applet, object, iframe,
 h1, h3, h4, h5, h6, blockquote, pre,

web/styles/spacing.sass

@@ -1,14 +1,78 @@
+/////////////////////////
+// SPACING DEFINITIONS //
+/////////////////////////
+
 $spacing-xxs: 4px;
 $spacing-xs: 8px;
 $spacing-s: 16px;
 $spacing-m: 24px;
 $spacing-l: 32px;
 $spacing-xl: 40px;
 $spacing-xxl: 48px;
-
-// for extra large spaces...
 $spacing-mega: 56px;
 $spacing-giga: 64px;
-
-// Misc
 $navbar: $spacing-giga
+
+/////////////////////////
+//   SPACING CLASSES   //
+/////////////////////////
+
+.pad
+  // navbar
+  &-nav
+    padding-top: $navbar
+
+  // sides
+  &-left, &-sides
+    &-xxl
+      padding-left: $spacing-xxl
+  &-right, &-sides
+    &-xxl
+      padding-right: $spacing-xxl
+
+  // ends
+  &-top, &-ends
+    &-xxl
+      padding-top: $spacing-xxl
+    &-mega
+      padding-top: $spacing-mega
+  &-bottom, &-ends
+    &-xxl
+      padding-bottom: $spacing-xxl
+    &-mega
+      padding-bottom: $spacing-mega
+
+.margin
+  // sides
+  &-left, &-sides
+    &-xs
+      padding-left: $spacing-xs
+    &-m
+      padding-left: $spacing-s
+    &-l
+      padding-left: $spacing-l
+  &-right, &-sides
+    &-s
+      padding-right: $spacing-xs
+    &-m
+      padding-right: $spacing-s
+      &-l
+      padding-left: $spacing-l
+
+  // repeating vertical elements
+  &-vertical
+    &-text-inputs
+      > .text-input
+        &:first-of-type
+          margin-bottom: $spacing-xl
+        &:last-of-type
+          margin-bottom: $spacing-mega
+
+  // repeating horizontal elements
+  &-horizontal
+    &-divs
+      > div
+        &:first-of-type
+          margin-left: $spacing-m
+        &:last-of-type
+          margin-right: $spacing-m

web/styles/typography.sass

@@ -1,3 +1,7 @@
+/////////////////////////
+//        FONTS        //
+/////////////////////////
+
 @font-face
   font-family: 'Apercu Pro'
   font-weight: bold
@@ -16,6 +20,10 @@
   font-style: normal
   src: url(./fonts/apercu_regular_pro.otf) format('opentype')
 
+/////////////////////////
+//    TEXT CLASSES     //
+/////////////////////////
+
 a
   &:visited
     color: $primary

web/styles/utils.sass

@@ -1,3 +1,7 @@
+//////////////////////////
+// WIDTH/HEIGHT CLASSES //
+//////////////////////////
+
 .fill
   &-width
     width: 100%
@@ -9,64 +13,10 @@
   > *
     width: 50%
 
-// padding declarations
-.pad
-  // navbar
-  &-nav
-    padding-top: $navbar
-
-  // sides
-  &-left, &-sides
-    &-xxl
-      padding-left: $spacing-xxl
-  &-right, &-sides
-    &-xxl
-      padding-right: $spacing-xxl
-
-  // ends
-  &-top, &-ends
-    &-xxl
-      padding-top: $spacing-xxl
-    &-mega
-      padding-top: $spacing-mega
-  &-bottom, &-ends
-    &-xxl
-      padding-bottom: $spacing-xxl
-    &-mega
-      padding-bottom: $spacing-mega
-
-// margin declarations
-.margin
-  &-left, &-sides
-    &-xs
-      padding-left: $spacing-xs
-    &-m
-      padding-left: $spacing-s
-    &-l
-      padding-left: $spacing-l
-  &-right, &-sides
-    &-s
-      padding-right: $spacing-xs
-    &-m
-      padding-right: $spacing-s
-      &-l
-      padding-left: $spacing-l
-  &-text-inputs
-    > .text-input
-      &:first-of-type
-        margin-bottom: 40px
-      &:last-of-type
-        margin-bottom: 56px
-
-  &-horizontal
-    &-divs
-      > div
-        &:first-of-type
-          margin-left: 24px
-        &:last-of-type
-          margin-right: 24px
+//////////////////////////
+//   FLEXBOX CLASSES    //
+//////////////////////////
 
-// flexbox utility classes
 .flex
   display: flex