Layout mostly done?

app.py

@@ -50,13 +50,21 @@ def internal_server_error(e):
 #
 @app.route('/')
 def index():
-    return render_template('index.html')
+    msg = ['Some interesting text', 'Balls', 'hiiiiii']
+    return render_template('index.html', title=random.choice(msg))
 
+@app.route('/thankies')
+def thankies():
+    return render_template('thankies.html')
 
 @app.route('/funny')
 def funny():
     return render_template('funny.html')
 
+@app.route('/status')
+def status():
+    abort(403)
+
 @app.route('/error/<error>/<msg>')
 def error(error, msg):
     try:

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;
+        background-color: $black;
-        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;
+    background-color: #101010;
-    color: $black;
+    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;
+    margin: 1rem;
-    padding: 0.5rem;
-
-    height: 100vh;
-
-    display: flex;
-    flex-direction: column;
-    gap: 1.5rem;
 
     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'
+        grid-template-areas: 'wrapper'
-                            '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 {
+.error {
-    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 {
     margin: 0;
     padding: 0;
 
-    width: 100%;
+    width: 80%;
-    height: auto;
 
-    background-color: transparent;
+    position: absolute;
-    color: $white;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
 
-    text-decoration: none;
+    h1 {
+        margin: 0;
+        padding: 0;
 
-    display: flex;
+        font-size: 5rem;
-    justify-content: left;
+        text-align: center;
-    align-items: center;
+        font-weight: 700;
-    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);
     }
 
-    &:hover {
+    p {
-        i {
+        margin: 0;
-            opacity: 1;
+        padding: 0;
-            transform: translateX(0);
+
-            filter: blur(0);
+        font-size: 1.5rem;
-        }
+        text-align: center;
+        font-weight: 400;
     }
-}
-
-#funny {
-    margin: 0;
-    padding: 0;
-
-    width: 100%;
-    height: 100%;
 }

templates/error.html

@@ -1,6 +1,6 @@
 {% extends 'layout.html' %}
 {% block content %}
-    <div class="title">
+    <div class="error">
         <h1>{{error}}</h1>
         <p style="text-align: center;">{{msg}}</p>
     </div>

templates/funny.html

@@ -1,4 +1,6 @@
 {% extends 'layout.html' %}
 {% block content %}
-    <img src="{{ url_for('static', filename='images/funny.jpg') }}" alt="Funny" id="funny">
+    <div class="content content-img">
+        <img src="{{ url_for('static', filename='images/funny.jpg') }}" alt="Funny" id="funny">
+    </div>
 {% endblock %}

templates/index.html

@@ -1,35 +1,33 @@
 {% extends 'layout.html' %}
 {% block content %}
-    <div class="content" id="about">
+    <div class="content content-header">
-        <h2>Special Thanks</h2>
+        <p>{{title}}</p>
-        <p>Jeetix: Helping me with learning how to make websites!</p>
-        <p>Carty: Teaching me how to run servers and the networking!</p>
-        <p>mrHDash: For the Ref Sheet and most other art on the page!</p>
-        <p>Zadok: Silly taidum art seen below!</p>
-        <p>Shep: For the free YHC!</p>
     </div>
 
-    <div class="content" id="contact">
+    <div class="content content-list" id="contact">
-        <h2>Stalk me</h2>
+        <button class="btn btn-blue">
-        <button class="btn">
             Twitter
             <i class="ph-twitter-logo"></i>
         </button>
-        <button class="btn">
+        <button class="btn btn-purple">
             Mastodon
             <i class="ph-linux-logo"></i>
         </button>
-        <button class="btn">
+        <button class="btn btn-blue">
             Telegram
             <i class="ph-telegram-logo"></i>
         </button>
-        <button class="btn">
+        <button class="btn btn-yellow">
             Github
             <i class="ph-github-logo"></i>
         </button>
-        <button class="btn">
+        <button class="btn btn-red">
             Discord
             <i class="ph-discord-logo"></i>
         </button>
     </div>
+
+    <div class="content content-img" id="contact">
+        <img src="{{ url_for('static', filename='images/sneak.png') }}" alt="Fluffy the maned wolf art, line art by Shep, colouring by meeee" style="max-width: 500px;">
+    </div>
 {% endblock %}

templates/layout.html

@@ -24,12 +24,12 @@
                 Home
                 <i class="ph-arrow-right"></i>
             </a>
-            <a href="/#contact" class="aside-item">
+            <a href="/thankies" class="aside-item">
-                Social Media
+                Thankies
-                <i class="ph-arrow-right"></i>
+                <i class="ph-heart"></i>
             </a>
-            <a href="/#about" class="aside-item">
+            <a href="/funny" class="aside-item">
-                About
+                lol
                 <i class="ph-arrow-right"></i>
             </a>
 
@@ -43,17 +43,6 @@
                 Server Status
                 <i class="ph-cpu"></i>
             </a>
-            <a href="/" class="aside-item">
-                Gwa Gwa
-                <i class="ph-package"></i>
-            </a>
-
-            <hr>
-
-            <a href="/funny" class="aside-item">
-                lol
-                <i class="ph-arrow-right"></i>
-            </a>
         </div>
     </div>
     
@@ -67,19 +56,8 @@
 
     <script>
         let btnColours = [ 'red', 'yellow', 'green', 'blue', 'purple']
-        let btnElements = document.querySelectorAll('.btn');
         let asideElements = document.querySelectorAll('.aside-item');
 
-        for (let i = 0; i < btnElements.length; i++) {
-            btnElements[i].addEventListener("mouseover", function() {
-                let randomColour = Math.floor(Math.random() * btnColours.length);
-                this.style.color = `var(--${btnColours[randomColour]})`;
-            });
-        
-            btnElements[i].addEventListener("mouseout", function() {
-                this.style.color = '';
-            });
-        }
         for (let i = 0; i < asideElements.length; i++) {
             asideElements[i].addEventListener("mouseover", function() {
                 let randomColour = Math.floor(Math.random() * btnColours.length);

templates/thankies.html

@@ -0,0 +1,15 @@
+{% extends 'layout.html' %}
+{% block content %}
+    <div class="content content-default" id="about">
+        <h2>Special thanks to these wonderful cretura</h2>
+        <p>Jeetix: Helping me with learning how to make websites!</p>
+        <p>Carty: Teaching me how to run servers and the networking!</p>
+        <p>mrHDash: For the Ref Sheet and most other art on the page!</p>
+        <p>Zadok: Silly taidum art!</p>
+        <p>Shep: For the free YHC!</p>
+    </div>
+
+    <div class="content content-img">
+        <img src="{{url_for('static', filename='images/ny.png')}}" style="max-width: 800px;">
+    </div>
+{% endblock %}