add small menu

resources/sass/app.scss

@@ -3,11 +3,12 @@
 @import "setup/colors";
 @import "setup/fonts";
 @import "setup/positions";
+@import "setup/containers";
+@import "setup/effects";
 
 @import "components/btn";
 @import "components/elements";
 @import "components/main";
-@import "components/boxes";
 @import "components/nav";
 @import "components/topbar";
 @import "components/avatar";

resources/sass/components/_elements.scss

@@ -12,7 +12,7 @@ input {
     font-size: 1.6rem;
     font-family: $fontMain;
     padding: 0.5rem 1rem;
-    border-radius: 0.5rem;
+    border-radius: 0.2rem;
 
     &:focus {
         background-color: $white;

resources/sass/components/boxes.scss

@@ -1,6 +0,0 @@
-.card {
-    display: inline-block;
-    padding: 1rem;
-    box-shadow: 1px 1px 2px $grey;
-    border-radius: 2px;
-}

resources/sass/components/main.scss

@@ -8,7 +8,3 @@ main {
     width: 100%;
     height: calc(100vh - 4.5rem);
 }
-
-.main-top {
-
-}

resources/sass/components/nav.scss

@@ -4,7 +4,14 @@ nav {
     height: 100vh;
     width: 15rem;
     flex-shrink: 0;
+    display: flex;
+    flex-direction: column;
     box-shadow: inset -3px -2px 3px rgba(0,0,0,0.2);
+    transition: width $transition-delay;
+
+    &.small {
+        width: 5.5rem;
+    }
 
     hr {
         width: 90%;
@@ -20,6 +27,10 @@ nav {
         padding-top: 1rem;
         padding-bottom: 1rem;
 
+        span {
+            overflow: hidden;
+        }
+
         svg {
             margin: 0 1rem;
             width: 3rem;
@@ -55,15 +66,38 @@ nav {
     }
 }
 
+.navhidden {
+    width: 0;
+}
+
 
 .site-logo-main {
     @extend .site-logo;
     display: block;
-    padding: 1rem 2rem;
-    width: 100%;
+    margin: 1rem;
+    width: 13rem;
+    transition: width $transition-delay;
 
     svg {
 
         width: 100%;
     }
+
+    &.small {
+        //padding-bottom: 10rem;
+        width: 3.5rem;
+    }
+}
+
+.nav-toggle {
+    @extend .site-logo;
+    align-self: center;
+
+    svg {
+        transition: transform $transition-delay;
+    }
+
+    svg.small {
+            transform: rotate(-180deg);
+    }
 }

resources/sass/components/topbar.scss

@@ -1,6 +1,6 @@
 .topbar {
     background-color: $medium;
-    width: calc(100vw - 15rem);
+    width: initial;
     box-shadow: 3px 2px 3px rgba(0,0,0,0.2);
 
     svg {

resources/sass/setup/_containers.scss

@@ -0,0 +1,40 @@
+.container-cards-list {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    grid-gap: 10px;
+    grid-auto-rows: minmax(100px, auto);
+}
+
+.card {
+    background-color: $light;
+    display: flex;
+    padding: 1rem;
+    box-shadow: 1px 1px 2px $grey;
+    border-radius: 2px;
+
+    a {
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        text-decoration: none;
+    }
+}
+
+
+.bg-b {
+    background-color: royalblue;
+}
+
+@media (max-width: 1200px) {
+    .container-cards-list {
+        grid-template-columns: repeat(3, 1fr);
+
+    }
+}
+
+@media (max-width: 800px) {
+    .container-cards-list {
+        grid-template-columns: repeat(2, 1fr);
+
+    }
+}

resources/sass/setup/_effects.scss

@@ -0,0 +1 @@
+$transition-delay: 0.2s;