Make it responsive

styles/main.scss

@@ -1,3 +1,5 @@
+$small: 600px;
+
 $accent-dark: #66BB6A;
 $accent-light: #33691E;
 
@@ -97,6 +99,12 @@ header {
   border-radius: 5px;
   box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.2);
   object-fit: cover;
+
+  @media screen and (max-width: $small) {
+    height: 15vh;
+    width: 90vw;
+    margin-left: 5vw;
+  }
 }
 
 // --------------------------------------------------
@@ -108,8 +116,18 @@ header {
   display: flex;
   justify-content: space-between;
 
+  @media screen and (max-width: $small) {
+    width: 90vw;
+    margin-left: 5vw;
+    flex-direction: column;
+  }
+
   #content {
     width: calc(80% - 20px);
+
+    @media screen and (max-width: $small) {
+      width: 100%;
+    }
   }
 
   #sidebar {
@@ -117,6 +135,11 @@ header {
     border-left: 1px solid #bbb;
     padding-left: 10px;
 
+    @media screen and (max-width: $small) {
+      width: 90vw;
+      border: none;
+    }
+
     #tags {
       display: flex;
       flex-wrap: wrap;
@@ -139,6 +162,7 @@ header {
   .highlight {
     pre {
       padding: 10px;
+      overflow-x: scroll;
     }
   }
 }

templates/layout.html

@@ -19,7 +19,7 @@
 	    </div>
 	    {{ if .ShowSidebar }}
 	    <div id="sidebar">
-		<h2>Tags</h2>
+		<h2>~ Tags</h2>
 		<div id="tags">
 
 		    {{ range .Tags }}