summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorJeff Kaufman <jeff.t.kaufman@gmail.com>2019-06-21 02:39:46 +0000
committerDrew DeVault <sir@cmpwn.com>2019-06-21 13:53:23 -0400
commit9a1cd340f384103918bedea0146c9665d242a437 (patch)
treeb0fcabbce0da68f089a47af193565e6f502753ce
parentf75cc73b8b7874d2125ce0b9ec2b650f9022a255 (diff)
style: keep articles from being horizontally compressed
In the default style for openring articles are arranged horizontally. This is fine with a small number of articles or a wide screen, but can look squashed when you don't have those. Current behavior, on a "Galaxy S5" in Chrome Devtools: https://www.jefftk.com/openring-example-nowrap.png Instead, give each article a minimum width and tell flexbox to wrap as needed. To maintain spacing between the articles without adding spacing around the edges, follow the approach described in: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Mastering_Wrapping_of_Flex_Items#Creating_gutters_between_items This gives us new wrapping behavior on narrow screens, without changing behavior on wider screens: https://www.jefftk.com/openring-example-wrap.png
-rw-r--r--in.html11
1 files changed, 4 insertions, 7 deletions
diff --git a/in.html b/in.html
index 088a6bc..d1437e8 100644
--- a/in.html
+++ b/in.html
@@ -22,6 +22,8 @@
<style>
.webring .articles {
display: flex;
+ flex-wrap: wrap;
+ margin: -0.5rem;
}
.webring .title {
margin: 0;
@@ -30,15 +32,10 @@
flex: 1 1 0;
display: flex;
flex-direction: column;
- margin: 0 0.5rem;
+ margin: 0.5rem;
padding: 0.5rem;
background: #eee;
-}
-.webring .article:first-child {
- margin-left: 0;
-}
-.webring .article:last-child {
- margin-right: 0;
+ min-width: 10rem;
}
.webring .summary {
font-size: 0.8rem;