Layout mostly done?

static/css/_aside.scss

@@ -11,12 +11,13 @@
     background-color: $black;
 
     box-sizing: border-box;
+    z-index: 68;
 
     hr {
-        margin: 0.5rem 0;
+        margin: 0.5rem auto;
         padding: 0;
 
-        width: 100%;
+        width: 80%;
         height: 1px;
 
         background-color: $white;
@@ -92,7 +93,13 @@
     @include aside-item($purple);
 }
 
-@media screen and (max-width: 768px) {
+@media screen and (max-width: $phone-width) {
+    @media screen and (min-width: calc(#{$phone-width} * 0.6)) {
+        .aside {
+            max-width: 20rem;
+        }
+    }
+
     .aside {
         display: block;
 
@@ -100,15 +107,20 @@
         top: 3rem;
         left: -100vw;
 
-        width: calc(100vw - 1rem);
+        width: 100vw;
         height: calc(100vh - 3rem);
 
-        z-index: 68;
+        background-color: #121212;
+
         overflow-y: auto;
-
         box-shadow: 0 0 0.5rem 5px rgba($black, 0.5);
-
         transition: left 0.2s ease-in-out, opacity 0.2s ease-in-out;
+
+        hr {
+            margin: 1rem auto;
+
+            width: 100%;
+        }
     }
 
     .aside-active {

static/css/_footer.scss

@@ -17,9 +17,9 @@
     }
 }
 
-@media screen and (max-width: 768px) {
+@media screen and (max-width: $phone-width) {
     .footer {
-        background-color: $white;
-        color: $black;
+        background-color: $black;
+        color: $white;
     }
 }

static/css/_nav.scss

@@ -42,11 +42,22 @@
     }
 }
 
-@media screen and (max-width: 768px) {
+@media screen and (max-width: $phone-width) {
     .nav {
+        margin: 0;
+        padding: 0;
+
+        width: 100vw;
+        height: 3rem;
+
+        position: fixed;
+        top: 0;
+        left: 0;
+
         justify-content: space-between;
 
-        background-color: #121212;
+        background-color: $black;
+        color: $white;
     }
     .nav-toggle {
         display: flex;

static/css/_wrapper.scss

@@ -1,37 +1,147 @@
+@mixin btn-hover($color) {
+    background-color: rgba($color, 0.1);
+    border: 1px solid rgba($color, 0.5);
+    color: $color;
+}
+
 .wrapper {
     margin: 0;
     padding: 0;
 
-    background-color: $white;
-    color: $black;
+    background-color: #101010;
+    color: $white;
 
-    border-radius: 6px 0 0 0;
+    border-radius: calc(0.8rem + 3px) 0 0 0;
 
+    position: relative;
     overflow: hidden;
+
+    hr {
+        margin: 0.5rem 1rem;
+        padding: 0;
+
+        height: 1px;
+
+        background-color: $white;
+        border: none;
+    }
 }
 
 .content {
-    margin: 0;
-    padding: 0.5rem;
-
-    height: 100vh;
-
-    display: flex;
-    flex-direction: column;
-    gap: 1.5rem;
+    margin: 1rem;
 
     position: relative;
 
-    p, .btn {
+    p {
         margin: 0;
         padding: 0;
 
         font-size: 1rem;
     }
 }
+.content-header {
+    padding: 1rem;
 
-@media screen and (max-width: 768px) {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+
+    background-color: rgba($white, 0.1);
+    border: 1px solid rgba($white, 0.5);
+    border-radius: 3px;
+
+    p {
+        margin: 0;
+        padding: 0;
+
+        font-size: 2rem;
+        font-weight: 600;
+        text-align: center;
+    }
+}
+.content-default {
+    padding: 1rem;
+
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+
+    background-color: rgba($white, 0.1);
+    border: 1px solid rgba($white, 0.5);
+    border-radius: 3px;
+}
+.content-list {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+}
+.content-img {
+    padding: 1rem;
+
+    display: flex;
+
+    background-color: rgba($white, 0.1);
+    border: 1px solid rgba($white, 0.5);
+    border-radius: 3px;
+
+    img {
+        margin: auto;
+        padding: 0;
+
+        width: 100%;
+        height: auto;
+
+        border-radius: 3px;
+
+        object-fit: cover;
+    }
+}
+
+.btn {
+    margin: 0;
+    padding: 1.5rem;
+
+    width: auto;
+    height: auto;
+
+    background-color: transparent;
+    color: $white;
+
+    text-decoration: none;
+    font-size: 1rem;
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.5rem;
+
+    border: 1px solid transparent;
+    border-radius: 3px;
+
+    transition: all 0.2s ease-in-out;
+}
+.btn-red:hover {
+    @include btn-hover($red);
+}
+.btn-yellow:hover {
+    @include btn-hover($yellow);
+}
+.btn-green:hover {
+    @include btn-hover($green);
+}
+.btn-blue:hover {
+    @include btn-hover($blue);
+}
+.btn-purple:hover {
+    @include btn-hover($purple);
+}
+
+
+@media screen and (max-width: $phone-width) {
     .wrapper {
+        margin: 0;
+        padding: 3rem 0 0 0;
+
         border-radius: 0;
     }
 }

static/css/scss/_grid.scss

@@ -23,13 +23,12 @@ body {
     grid-area: footer;
 }
 
-@media screen and (max-width: 768px) {
+@media screen and (max-width: $phone-width) {
     body {
-        grid-template-areas: 'nav'
-                            'wrapper'
+        grid-template-areas: 'wrapper'
                             'footer';
 
-        grid-template-rows: 3rem 1fr 3rem;
+        grid-template-rows: 1fr 3rem;
         grid-template-columns: 1fr;
     }
 }

static/css/scss/_variables.scss

@@ -8,7 +8,7 @@ $blue: #8DA3B9;
 //$dblue: #222c45;
 $purple: #A988B0;
 
-$primary: $green;
+$primary: #f5622d;
 
 @font-face {
     font-family: 'Mona-Sans';
@@ -28,6 +28,8 @@ $primary: $green;
 $font-header: "Mona-Sans", sans-serif;
 $font-body: "Hubot-Sans", sans-serif;
 
+$phone-width: 900px;
+
 @function hexToRGB($hex) {
     @return red($hex), green($hex), blue($hex);
 }

static/css/style.scss

@@ -33,70 +33,32 @@ h3 {
     font-weight: 600;
 }
 
-.title {
-    margin: 0;
-    padding: 2rem 0;
-
-    position: relative;
-
-    img {
-        width: 100%;
-        height: 100%;
-
-        object-fit: cover;
-
-        filter: grayscale(100%);
-
-        transition: all 0.2s ease-in-out;
-
-        &:hover {
-            filter: grayscale(0%);
-        }
-    }
-}
-
-.btn {
+.error {
     margin: 0;
     padding: 0;
 
-    width: 100%;
-    height: auto;
+    width: 80%;
 
-    background-color: transparent;
-    color: $white;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
 
-    text-decoration: none;
+    h1 {
+        margin: 0;
+        padding: 0;
 
-    display: flex;
-    justify-content: left;
-    align-items: center;
-    gap: 0.5rem;
-
-    border: none;
-
-    transition: all 0.2s ease-in-out;
-    cursor: pointer;
-
-    i {
-        opacity: 0;
-        transform: translateX(1rem);
-        transition: all 0.2s ease-in-out;
-        filter: blur(0.1rem);
+        font-size: 5rem;
+        text-align: center;
+        font-weight: 700;
     }
 
-    &:hover {
-        i {
-            opacity: 1;
-            transform: translateX(0);
-            filter: blur(0);
-        }
+    p {
+        margin: 0;
+        padding: 0;
+
+        font-size: 1.5rem;
+        text-align: center;
+        font-weight: 400;
     }
-}
-
-#funny {
-    margin: 0;
-    padding: 0;
-
-    width: 100%;
-    height: 100%;
 }