Closed github-actions[bot] closed 4 years ago
CSS: Refactor into a grid layout componenet
https://github.com/aimementoring/website/blob/d6d0ed9e6a1d9676677bb91abe31fd1db3554630/pages/reports/reports.module.scss#L19
.banner { composes: banner from '../../styles/patterns/patternBanner.module.scss'; background: url($cdnRoot+"assets/images/banner/bg-pattern-purple@2x.jpg") no-repeat top center / cover #050301; } .filterListContainer { min-width: 280px; padding: 2em 2em 0; ul { display: flex; flex-wrap: wrap; } } // @todo: CSS: Refactor into a grid layout componenet // Or at least into a CSS modules pattern to start .reportsGrid { display: grid; grid-gap: 1em; margin: 0 auto; padding-top: 0; flex-wrap: wrap; max-width: 81.25em; padding: 2em 2em 4em; grid-template-columns: repeat(auto-fill, minmax(15.5em, 1fr)); } .reportCategoryItem { display: block; cursor: pointer; border: 1px solid $watermelon; color: $watermelon; border-radius: 3px; padding: .5em 1em; margin-right: .5em; margin-top: 1em; text-transform: uppercase; font-family: $body-font-family-bold; &.active { background: $watermelon; color: $white; } } @media screen and (max-width: $lg) { .filterListContainer { padding: 0 2em 0; } } ew file mode 100644 ndex 000000000..57eb27253 ++ b/pages/stories/[categorySlug]/index.js
b67ee357f740eeee84502df738ea2ad09795e139
CSS: Refactor into a grid layout componenet
https://github.com/aimementoring/website/blob/d6d0ed9e6a1d9676677bb91abe31fd1db3554630/pages/reports/reports.module.scss#L19
b67ee357f740eeee84502df738ea2ad09795e139