styling: improve responsiveness

blurry-dev · Dec 31, 2024 · e5dd2ac · e5dd2ac
1 parent 91a5adc
commit e5dd2ac
Showing 1 changed file with 9 additions and 6 deletions.
diff --git a/docs/templates/WebSite.html.jinja b/docs/templates/WebSite.html.jinja
@@ -8,15 +8,22 @@ body main.container {
   margin: auto;
 }
 
-@media (min-width:1024px) {
+@media (min-width:824px) {
   body main.container {
     max-width:700px
   }
+  .flex-grid article {
+    flex: 0 1 330px;
+  }
 }
-@media (min-width:1280px) {
+@media (min-width:1080px) {
   body main.container {
     max-width:950px
   }
+  .flex-grid article {
+    flex: 0 1 450px;
+  }
+
 }
 body main.container h1,
 body main.container p {
@@ -41,10 +48,6 @@ main > pre {
   max-width: 650px;
   margin: calc(var(--pico-spacing) * 3) auto;
 }
-
-.flex-grid article {
-  flex: 0 1 450px;
-}
 </style>
 {% endblock %}