KIT&GO intro, module 1

themes/coopgo-theme/assets/sass/coopgo-web-ui-kit/_base.scss

@@ -55,7 +55,7 @@ p {
 
 .container {
     margin: auto;
-    max-width: 1000px;
+    max-width: 1020px;
 }
 
 .cap {
@@ -65,4 +65,21 @@ p {
 a {
     text-decoration: none;
     color: $brandblue;
+}
+
+button {
+    font-family: $brandfont;
+    padding: 10px;
+    border-radius: 17px; 
+    padding-left: 20px;
+    padding-right: 20px;
+    border: 0;
+    text-transform: uppercase;
+    letter-spacing: 2px;
+    cursor: pointer;
+    font-size: 1em;
+}
+
+button:hover {
+    box-shadow: 0 8px 8px 0 rgba(0, 0, 0, 0.16), 0 0 0 1px rgba(0, 0, 0, 0.08);
 }

themes/coopgo-theme/assets/sass/coopgo-web-ui-kit/_flexbox.scss

@@ -20,4 +20,83 @@
 
 .direction-row-reverse {
     flex-direction: row-reverse;
+}
+
+
+@media(max-width: $breakpoint-phone) {
+    .sm-flex-row {
+        display: flex;
+    }
+    
+    .sm-flex-1 {
+        flex: 1;
+    }
+    
+    .sm-wrap {
+        flex-wrap: wrap;
+    }
+    
+    .sm-j-center {
+        justify-content: center;
+    }
+    
+    .sm-ai-center {
+        align-items: center;
+    }
+    
+    .sm-direction-row-reverse {
+        flex-direction: row-reverse;
+    }
+}
+
+@media(min-width: $breakpoint-phone) and (max-width: $breakpoint-tablet) {
+    .md-flex-row {
+        display: flex;
+    }
+    
+    .md-flex-1 {
+        flex: 1;
+    }
+    
+    .md-wrap {
+        flex-wrap: wrap;
+    }
+    
+    .md-j-center {
+        justify-content: center;
+    }
+    
+    .md-ai-center {
+        align-items: center;
+    }
+    
+    .md-direction-row-reverse {
+        flex-direction: row-reverse;
+    }
+}
+
+@media(min-width: $breakpoint-tablet) {
+    .lg-flex-row {
+        display: flex;
+    }
+    
+    .lg-flex-1 {
+        flex: 1;
+    }
+    
+    .lg-wrap {
+        flex-wrap: wrap;
+    }
+    
+    .lg-j-center {
+        justify-content: center;
+    }
+    
+    .lg-ai-center {
+        align-items: center;
+    }
+    
+    .lg-direction-row-reverse {
+        flex-direction: row-reverse;
+    }
 }

themes/coopgo-theme/assets/sass/coopgo-web-ui-kit/_helpers.scss

@@ -26,6 +26,84 @@ $widthvalues: (0, 5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 75, 100, 125, 150, 200,
     .min-h-#{$width} {
         min-height: #{$width}px;
     }
+
+    @media(max-width: $breakpoint-phone) {
+        .sm-w-#{$width} {
+            width: #{$width}px;
+        }
+    
+        .sm-max-w-#{$width} {
+            max-width: #{$width}px;
+        }
+    
+        .sm-min-w-#{$width} {
+            min-width: #{$width}px;
+        }
+    
+        .sm-h-#{$width} {
+            height: #{$width}px;
+        }
+    
+        .sm-max-h-#{$width} {
+            max-height: #{$width}px;
+        }
+    
+        .sm-min-h-#{$width} {
+            min-height: #{$width}px;
+        }
+    }
+
+    @media(min-width: $breakpoint-phone) and (max-width: $breakpoint-tablet) {
+        .md-w-#{$width} {
+            width: #{$width}px;
+        }
+    
+        .md-max-w-#{$width} {
+            max-width: #{$width}px;
+        }
+    
+        .md-min-w-#{$width} {
+            min-width: #{$width}px;
+        }
+    
+        .md-h-#{$width} {
+            height: #{$width}px;
+        }
+    
+        .md-max-h-#{$width} {
+            max-height: #{$width}px;
+        }
+    
+        .md-min-h-#{$width} {
+            min-height: #{$width}px;
+        }
+    }
+
+    @media(min-width: $breakpoint-tablet) {
+        .lg-w-#{$width} {
+            width: #{$width}px;
+        }
+    
+        .lg-max-w-#{$width} {
+            max-width: #{$width}px;
+        }
+    
+        .lg-min-w-#{$width} {
+            min-width: #{$width}px;
+        }
+    
+        .lg-h-#{$width} {
+            height: #{$width}px;
+        }
+    
+        .lg-max-h-#{$width} {
+            max-height: #{$width}px;
+        }
+    
+        .lg-min-h-#{$width} {
+            min-height: #{$width}px;
+        }
+    }
 }
 
 
@@ -78,4 +156,10 @@ $sides: (top, bottom, left, right);
             padding-#{$side}: #{$space}px !important;
         }
     }
+}
+
+/* TEXT SIZE */
+
+.small {
+    font-size: 0.8em;
 }

themes/coopgo-theme/assets/sass/main.scss

@@ -2,9 +2,10 @@
 // @import 'colors' <- we use the library's default values for colors, we don't need this
 
 nav{
-    height: 52px;
      
     &#navbar {
+        height: 52px;
+
         .left {
             flex:0;
             text-align: left;
@@ -61,6 +62,13 @@ nav{
         box-sizing: border-box;
         transition: ease 0.2s all;
     }
+
+    &#TableOfContents {
+        a {
+            color: $white;
+            font-size: 0.8em;
+        }
+    }
 }
 
 @media(max-width: $breakpoint-phone) {
@@ -106,9 +114,6 @@ body {
         text-align: justify;
         color: $secondarycolor;
     }
-    div {
-        min-width: 200px;
-    }
 
     p {
         text-align: justify;