c60759a3f1151af3dadd53ccf05ac14aee490b57 — Matthew Jorgensen 3 months ago 15ba725
Modify webring styles

- Make them stack vertically on small screens.
2 files changed, 43 insertions(+), 37 deletions(-)

M _includes/webring_in.html
M css/style.css
M _includes/webring_in.html => _includes/webring_in.html +0 -37
@@ 27,40 27,3 @@
 href="https://git.sr.ht/~sircmpwn/openring">openring</a>
 </p>
 </section>
-<style>
-  .webring .articles {
-    display: flex;
-  }
-  .webring .title {
-    margin: 0;
-  }
-  .webring .article {
-    flex: 1 1 0;
-    display: flex;
-    flex-direction:
-    column;
-    margin: 0
-    0.5rem;
-    padding: 0.5rem;
-    background:
-    #eee;
-  }
-  .webring .article:first-child {
-    margin-left: 0;
-  }
-  .webring .article:last-child {
-    margin-right: 0;
-  }
-  .webring .summary {
-    font-size: 0.8rem;
-    flex: 1 1 0;
-  }
-  .webring .attribution {
-    text-align: right;
-    font-size: 0.8rem;
-    color: #555;
-  }
-  .webring .date {
-    color: black;
-  }
-</style>

M css/style.css => css/style.css +43 -0
@@ 321,6 321,42 @@
   padding-top: 0.5rem;
 }
 
+.webring .articles {
+  display: flex;
+}
+.webring .title {
+  margin: 0;
+}
+.webring .article {
+  flex: 1 1 0;
+  display: flex;
+  flex-direction:
+  column;
+  margin: 0
+  0.5rem;
+  padding: 0.5rem;
+  background:
+  #eee;
+}
+.webring .article:first-child {
+  margin-left: 0;
+}
+.webring .article:last-child {
+  margin-right: 0;
+}
+.webring .summary {
+  font-size: 0.8rem;
+  flex: 1 1 0;
+}
+.webring .attribution {
+  text-align: right;
+  font-size: 0.8rem;
+  color: #555;
+}
+.webring .date {
+  color: black;
+}
+
 @media (max-width: 768px) {
   .container {
     display:block


@@ 345,6 381,13 @@
   .hero-bio {
     margin-bottom: 2rem;
   }
+  .webring .articles {
+    display: block;
+  }
+  .webring .article {
+    display: block;
+    margin: 1rem 0 0 0;
+  }
 }
 
 @media (min-width: 576px) {