Nulo/openring
1
0
Fork 0
Code Issues Pull requests Releases 3 Packages Activity

style: keep articles from being horizontally compressed

Browse source 
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
This commit is contained in:
Jeff Kaufman 2019-06-21 02:39:46 +00:00 committed by Drew DeVault
parent f75cc73b8b
commit 9a1cd340f3
1 changed files with 4 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
in.html
View file

@ -22,6 +22,8 @@
<style> <style>
.webring .articles { .webring .articles {
display: flex; display: flex;
flex-wrap: wrap;
margin: -0.5rem;
} }
.webring .title { .webring .title {
margin: 0; margin: 0;
@ -30,15 +32,10 @@
flex: 1 1 0; flex: 1 1 0;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
margin: 0 0.5rem; margin: 0.5rem;
padding: 0.5rem; padding: 0.5rem;
background: #eee; background: #eee;
} min-width: 10rem;
.webring .article:first-child {
margin-left: 0;
}
.webring .article:last-child {
margin-right: 0;
} }
.webring .summary { .webring .summary {
font-size: 0.8rem; font-size: 0.8rem;