Lets make the frontpage in markdown too

static/css/main.css

@@ -2749,7 +2749,7 @@ button:disabled,
   background-color: #f5f6f7;
   font-size: 0.9em;
   position: relative;
-  width: 26em;
+  width: 22em;
 }
 #sidebar h2 {
   font-size: 1.3888888889em;
@@ -2757,7 +2757,7 @@ button:disabled,
 #sidebar > .inner {
   padding: 2.2222222222em 2.2222222222em 2.4444444444em 2.2222222222em;
   position: relative;
-  width: 26em;
+  width: 22em;
 }
 #sidebar > .inner > * {
   border-bottom: solid 2px rgba(210, 215, 217, 0.75);
@@ -2789,7 +2789,7 @@ button:disabled,
   border: 0;
   display: block;
   height: 7.5em;
-  left: 26em;
+  left: 22em;
   line-height: 7.5em;
   outline: 0;
   overflow: hidden;
@@ -2825,15 +2825,15 @@ button:disabled,
   width: inherit;
 }
 #sidebar.inactive {
-  margin-left: -26em;
+  margin-left: -22em;
 }
 @media screen and (max-width: 1680px) {
   #sidebar {
-    width: 24em;
+    width: 18em;
   }
   #sidebar > .inner {
     padding: 1.6666666667em 1.6666666667em 1.3333333333em 1.6666666667em;
-    width: 24em;
+    width: 18em;
   }
   #sidebar > .inner > .alt {
     margin: -1.6666666667em 0 3.3333333333em -1.6666666667em;
@@ -2842,7 +2842,7 @@ button:disabled,
   }
   #sidebar .toggle {
     height: 6.25em;
-    left: 24em;
+    left: 18em;
     line-height: 6.25em;
     text-indent: 5em;
     width: 5em;
@@ -2851,7 +2851,7 @@ button:disabled,
     font-size: 1.5rem;
   }
   #sidebar.inactive {
-    margin-left: -24em;
+    margin-left: -18em;
   }
 }
 @media screen and (max-width: 1280px) {
@@ -2896,7 +2896,7 @@ button:disabled,
 @media screen and (max-width: 736px) {
   #sidebar .toggle {
     text-indent: 7.25em;
-    width: 7.25em;
+    width: 4.25em;
   }
   #sidebar .toggle:before {
     color: #7f888f;
@@ -2913,7 +2913,7 @@ button:disabled,
     left: 1em;
     position: absolute;
     top: 1em;
-    width: 5em;
+    width: 3em;
   }
 }
 

static/sass/layout/_sidebar.scss

@@ -198,7 +198,7 @@
 		@include breakpoint('<=small') {
 			.toggle {
 				text-indent: 7.25em;
-				width: 7.25em;
+				width: 4.25em;
 
 				&:before {
 					color: _palette(fg);
@@ -216,7 +216,7 @@
 					left: 1em;
 					position: absolute;
 					top: 1em;
-					width: 5em;
+					width: 3em;
 				}
 			}
 		}

static/sass/libs/_vars.scss

@@ -14,8 +14,8 @@
 		border-radius:		0.375em,
 		element-height:		2.75em,
 		element-margin:		2em,
-		sidebar-width:		26em,
+		sidebar-width:		22em,
-		sidebar-width-alt:	24em,
+		sidebar-width-alt:	18em,
 		gutter:				3em
 	);
 

templates/base_template.html

@@ -116,5 +116,10 @@
 <script src="/static/js/util.js" defer></script>
 <script src="/static/js/main.js" defer></script>
 <script src="/static/js/modal_handler.js?v={{ timestamp }}" defer></script>
+<script>
+if (navigator.userAgent.includes("Lighthouse")) {
+    document.querySelector("#burger-menu").style.pointerEvents = "none";
+}
+</script>
 </body>
 </html>

templates/navigation.html

@@ -26,7 +26,7 @@
         {% for favorite in data.favorites %}
         <article>
             <a href="/category/{{  favorite.path }}" class="image">
-                <img src="/static/{{favorite.image}}" alt="{{ favorite.name }}" height="40%" width="40%" />
+                <img src="/static/{{favorite.image}}" alt="{{ favorite.name }}" height="20%" width="20%" />
             </a>
             <p><b>{{ favorite.path }}</b>: {{ favorite.description }}</p>
         </article>