9a1cd340f384103918bedea0146c9665d242a437 — Jeff Kaufman 4 years ago f75cc73
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:


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:


This gives us new wrapping behavior on narrow screens, without
changing behavior on wider screens:

1 files changed, 4 insertions(+), 7 deletions(-)

M in.html
M in.html => in.html +4 -7
@@ 22,6 22,8 @@
.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;