diff --git a/src/css/app.css b/src/css/app.css index 7fdd1c6..136ecc0 100644 --- a/src/css/app.css +++ b/src/css/app.css @@ -8,19 +8,6 @@ body { overflow-y: scroll; } -.grow2 { - -moz-osx-font-smoothing: grayscale; - backface-visibility: hidden; - transform: translateZ(0); - transition: transform 0.25s ease-out; -} - -.grow2:active, -.grow2:hover, -.grow2:focus { - transform: scale(1.05); -} - .focus-outline:focus { outline: 0; box-shadow: 0 0 0 .2rem rgba(201, 210, 215, .4); @@ -37,3 +24,33 @@ body { .fill-white { fill: white; } + +.CardContainer { + column-count: 4; + column-gap: 1em; +} + +.Card { + margin: 0 0 1em 0; + width: 100%; + page-break-inside: avoid; + break-inside: avoid; +} + +@media (max-width: 1000px) { + .CardContainer { + column-count: 3; + } +} + +@media (max-width: 800px) { + .CardContainer { + column-count: 2; + } +} + +@media (max-width: 600px) { + .CardContainer { + column-count: 1; + } +} \ No newline at end of file diff --git a/src/js/app.js b/src/js/app.js index fbdb9bc..d5d9560 100644 --- a/src/js/app.js +++ b/src/js/app.js @@ -28,10 +28,10 @@ function update (display) { cards.forEach((c) => { if (display.indexOf(c.dataset.ref) >= 0) { c.classList.remove('dn') - c.classList.add('flex') + c.classList.add('dib') } else { c.classList.add('dn') - c.classList.remove('flex') + c.classList.remove('dib') } }) } diff --git a/src/layouts/_default/baseof.html b/src/layouts/_default/baseof.html index 0c6e9aa..a88b661 100644 --- a/src/layouts/_default/baseof.html +++ b/src/layouts/_default/baseof.html @@ -5,8 +5,8 @@ {{ partial "analytics" . }} -
-