Merge pull request #153 from stuartmaxwell:fix-responsive

Fix-responsive
stuartmaxwell · Nov 25, 2024 · 3cd83a9 · 3cd83a9
2 parents 429f034 + 7544aa9
commit 3cd83a9
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 15 deletions.
diff --git a/static/css/styles.css b/static/css/styles.css
@@ -59,38 +59,51 @@ main.main-sidebar {
   gap: 1em;
 }
 
+/* Markdown Preview Styles */
+.highlight pre {
+  padding: var(--pico-spacing);
+}
+
 @media (max-width: 576px) {
   .hide-at-xs {
     display: none;
   }
+
+  nav ul li {
+    padding: var(--pico-nav-element-spacing-vertical) 0.25em;
+  }
+
+  .container {
+    padding: 0 0.5rem;
+  }
+
+  article {
+    padding: 1rem 0.5rem;
+  }
+
+  /* Markdown Preview Styles */
+  .highlight pre {
+    padding: 0.5rem;
+  }
 }
 
-@media (max-width: 768px) {
+@media (max-width: 1023px) {
   .hide-at-s {
     display: none;
   }
 
   main.main-sidebar {
-    display: grid;
-    grid-template-columns: 1fr;
-    gap: 1em;
+    display: block;
   }
 }
 
 span[role="group"] {
   width: auto;
 }
 
-/* Tighter margins in the navbar when really small */
-@media (max-width: 400px) {
-  nav ul li {
-    padding: var(--pico-nav-element-spacing-vertical) 0.25em;
-  }
-}
-
-/* Prevent going smaller than 320px */
+/* Prevent going smaller than 360px */
 body {
-  min-width: 320px;
+  min-width: 360px;
 }
 
 /* More spacing between articles */
@@ -137,5 +150,4 @@ article {
 /* Markdown Preview Styles */
 .highlight pre {
   background-color: #2e3440;
-  padding: 1em;
 }
diff --git a/templates/snippets/navbar.html b/templates/snippets/navbar.html
@@ -31,7 +31,7 @@
     {% endfor %}
   </ul>
 
-  <ul style="margin-left: auto">
+  <ul class="hide-at-xs" style="margin-left: auto">
     {% if user.is_authenticated %}
       <li>
         <a role="button" class="outline" href="{% url 'admin:index' %}">