diff --git a/README.md b/README.md index c362d7579..3f40ac2b2 100644 --- a/README.md +++ b/README.md @@ -8,7 +8,7 @@ SVG icons for popular brands. [See them all on one page at **simpleicons.org**]( - [x] Jekyll code for sorting icons by hue - [ ] JS search function - [ ] Analytics tracking for icon clicks -- [ ] CSS grid fallback +- [x] CSS grid fallback - [x] Social sharing tags - [ ] AMP support - [ ] New README.md diff --git a/_sass/_components.grid.scss b/_sass/_components.grid.scss index 7ed718015..b088d1af6 100644 --- a/_sass/_components.grid.scss +++ b/_sass/_components.grid.scss @@ -1,13 +1,17 @@ .grid { - display: grid; - grid-template-columns: repeat(auto-fill, minmax(9rem,1fr)); - grid-auto-rows: 6rem; - grid-column-gap: 0.375rem; - grid-row-gap: 0.375rem; - grid-auto-flow: dense; + display: flex; + flex-wrap: wrap; list-style: none; margin: 1.5rem; padding: 0; + @supports (display: grid) { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(9rem,1fr)); + grid-auto-rows: 6rem; + grid-column-gap: 0.375rem; + grid-row-gap: 0.375rem; + grid-auto-flow: dense; + } @media (min-width: 720px) { margin: 3rem; } @@ -16,6 +20,11 @@ .grid-item { background-color: #757575; text-align: center; + @supports not (display: grid) { + border: 0.1875rem solid #FFF; + padding: 0 0 0.75rem; + width: 20%; + } svg { height: 1.5rem; width: 1.5rem; @@ -30,6 +39,9 @@ grid-column: -2 / -1; grid-row-end: span 2; height: auto; + @supports not (display: grid) { + width: 100%; + } @media (min-width: 21.75rem) { // 21.75rem is the minimum viewport // width with multiple columns