Add mobile layouts

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";
+}

sass/mobile.scss

@@ -0,0 +1,11 @@
+body {
+    nav {
+        position: unset;
+        height: auto;
+        width: 100%;
+    }
+    main {
+        margin-left: 0;
+        height: auto;
+    }
+}

templates/404.html

@@ -0,0 +1,4 @@
+{% extends "base.html" %}
+{% block content %}
+<h1><em>Insert epic 404 page here</em></h1>
+{% endblock %}

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>