From a92ee83b87d92bf72066fe819dd375f9ac9849b1 Mon Sep 17 00:00:00 2001
From: Thom Dickson <td3of4@gmail.com>
Date: Thu, 24 Mar 2022 15:27:03 -0400
Subject: [PATCH] Add mobile layouts

---
 sass/main.scss         | 12 ++++++++++--
 sass/mobile.scss       | 11 +++++++++++
 templates/404.html     |  4 ++++
 templates/sidebar.html |  2 +-
 4 files changed, 26 insertions(+), 3 deletions(-)
 create mode 100644 sass/mobile.scss
 create mode 100644 templates/404.html

diff --git a/sass/main.scss b/sass/main.scss
index d4106b4..eb921eb 100644
--- a/sass/main.scss
+++ b/sass/main.scss
@@ -1,4 +1,6 @@
 $sidebar_width: 20%;
+$sidebar_background: rgba(255, 0, 0, .1);
+$body_background: rgba(0, 255, 0, .1);
 
 body {
     margin: 0;
@@ -6,8 +8,9 @@ body {
         height: 100%;
         position: fixed;
         width: $sidebar_width;
-        background: rgba(255, 0, 0, .1);
+        background: $sidebar_background;
         padding-top: 32px;
+        padding-bottom: 16px;
         img {
             width: 100%;
         }
@@ -17,8 +20,9 @@ body {
     }
     main {
         height: 100%;
+        box-sizing: border-box;
         margin-left: $sidebar_width;
-        background: rgba(0, 255, 0, .1);
+        background: $body_background;
         padding-top: 50px;
         article {
             margin: auto;
@@ -28,3 +32,7 @@ body {
         }
     }
 }
+
+@media screen and (max-width: 1000px) {
+    @import "mobile.scss";
+}
diff --git a/sass/mobile.scss b/sass/mobile.scss
new file mode 100644
index 0000000..656e9b3
--- /dev/null
+++ b/sass/mobile.scss
@@ -0,0 +1,11 @@
+body {
+    nav {
+        position: unset;
+        height: auto;
+        width: 100%;
+    }
+    main {
+        margin-left: 0;
+        height: auto;
+    }
+}
diff --git a/templates/404.html b/templates/404.html
new file mode 100644
index 0000000..fca4400
--- /dev/null
+++ b/templates/404.html
@@ -0,0 +1,4 @@
+{% extends "base.html" %}
+{% block content %}
+<h1><em>Insert epic 404 page here</em></h1>
+{% endblock %}
diff --git a/templates/sidebar.html b/templates/sidebar.html
index ba80c63..c4f6072 100644
--- a/templates/sidebar.html
+++ b/templates/sidebar.html
@@ -1,6 +1,6 @@
 <nav>
     <div>
-        <img src="{{ get_url(path='logo.png') }}">
+        <a href="/"><img src="{{ get_url(path='logo.png') }}"></a>
     </div>
     <div>
         <ul>