15dc8b6bb5ba4b482dabeb060362634c315e819c — Matthew Jorgensen 3 months ago f9d20cc
Put @media rules at top of stylesheet.
1 files changed, 58 insertions(+), 58 deletions(-)

M css/style.css
M css/style.css => css/style.css +58 -58
@@ 1,3 1,61 @@
+@media (max-width: 768px) {
+  .container {
+    display:block
+  }
+  header {
+    display: block;
+  }
+  .site-footer {
+    text-align: center;
+  }
+  .btn {
+   font-size: 0.8rem;
+  }
+}
+
+@media (max-width: 600px) {
+    .webring .articles {
+    display: block;
+  }
+  .webring .article {
+    display: block;
+    margin: 1rem 0 0 0;
+  }
+}
+
+@media (max-width: 550px) {
+
+  .container .widgets {
+    display:block;
+    padding: 3rem 0 0 0;
+  }
+  .hero-bio {
+    margin-bottom: 2rem;
+  }
+}
+
+@media (min-width: 576px) {
+  .visible-xs {
+  display:none
+  }
+}
+
+@media (prefers-color-scheme: dark) {
+  body {
+    background-color: black;
+    color: lightgray;
+  }
+  a {
+    color: blueviolet;
+  }
+  .webring .article {
+    background: #111;
+  }
+  .webring .date {
+    color: gray;
+  }
+}
+
 html, body {
   /* overflow-x: hidden; */
   font-family: sans-serif;


@@ 354,61 412,3 @@
 .webring .date {
   color: black;
 }
-
-@media (max-width: 768px) {
-  .container {
-    display:block
-  }
-  header {
-    display: block;
-  }
-  .site-footer {
-    text-align: center;
-  }
-  .btn {
-   font-size: 0.8rem;
-  }
-}
-
-@media (max-width: 600px) {
-    .webring .articles {
-    display: block;
-  }
-  .webring .article {
-    display: block;
-    margin: 1rem 0 0 0;
-  }
-}
-
-@media (max-width: 550px) {
-
-  .container .widgets {
-    display:block;
-    padding: 3rem 0 0 0;
-  }
-  .hero-bio {
-    margin-bottom: 2rem;
-  }
-}
-
-@media (min-width: 576px) {
-  .visible-xs {
-  display:none
-  }
-}
-
-@media (prefers-color-scheme: dark) {
-  body {
-    background-color: black;
-    color: lightgray;
-  }
-  a {
-    color: blueviolet;
-  }
-  .webring .article {
-    background: #111;
-  }
-  .webring .date {
-    color: gray;
-  }
-}