fixing the site

output/assets/styles/media.css

@@ -0,0 +1,78 @@
+@media (max-width: 600px){
+    .banner-header{ flex-direction: column; align-items: center; text-align: center; }
+    .banner-left{ margin: 0 0 .5rem 0; }
+    .banner-logo{ margin: 0; }
+    nav{ flex-wrap: wrap; justify-content: center; gap: .5rem; font-size: 1rem; }
+
+
+    .theme-toggle {
+	position: static;
+	order: 2; 
+	margin-left: .5rem;
+	padding: .3rem .6rem;
+	background: transparent;
+  }
+
+    .banner-header {
+	flex-wrap: wrap;
+	justify-content: center;
+    }
+    .banner-header nav {
+	display: flex;
+	align-items: center;
+	flex-wrap: wrap;
+    }
+
+    body.no-sidenotes {
+	margin-left: 1em;
+	margin-right: 1em;
+    }
+
+    #mobile-move-panel {
+	display: block;
+    }
+
+}
+@media (max-width: 1250px){
+    #preamble.status{
+	padding-right: var(--body-pad);
+    }
+    
+    #content.content{
+	padding-right: var(--body-pad);
+    }
+    .sidenote,
+  .marginnote{
+      float: none;
+      clear: both;
+      width: auto;
+      display: block;
+      margin: 0.5rem 0 0.75rem;
+      padding-left: 0.75rem;
+      border-left: 3px dotted color-mix(in oklab, var(--fg) 8%, transparent);
+      margin-right: 0;
+  }
+    .fullwidth{
+	max-width: calc(100vw - 2 * var(--body-pad));
+    }
+    .sidenote, .marginnote{
+	border-left: 3px dotted color-mix(in oklab, var(--fg) 12%, transparent);
+    }
+    .sidenote .mn-img,
+  .marginnote .mn-img{
+      border-color: color-mix(in oklab, var(--fg) 12%, transparent);
+  }
+   
+  #table-of-contents{
+      float: none;
+      position: static;
+      width: auto;
+      margin: 0 0 1rem;
+      padding: .5rem .75rem;
+      border-right: 0;
+      border-left: 3px dotted color-mix(in oklab, var(--fg) 12%, transparent);
+      background: color-mix(in oklab, var(--bg) 96%, var(--fg) 4%);
+      border-radius: 4px;
+  }
+
+}