M _sass/minimal-mistakes/_archive.scss => _sass/minimal-mistakes/_archive.scss +10 -54
@@ 130,69 130,25 @@
/*
Grid view
========================================================================== */
+.grid__wrapper {
+ display: grid;
+ grid-template-columns: 1fr;
-.archive {
- .grid__wrapper {
- /* extend grid elements to the right */
-
- @include breakpoint($large) {
- margin-right: -1 * $right-sidebar-width-narrow;
- }
+ @include breakpoint($small) {
+ grid-template-columns: 1fr 1fr;
+ }
- @include breakpoint($x-large) {
- margin-right: -1 * $right-sidebar-width;
- }
+ @include breakpoint($medium) {
+ grid-template-columns: repeat(4, 1fr);
}
+
+ gap: 8px;
}
.grid__item {
margin-bottom: 2em;
overflow: hidden;
- @include breakpoint($small) {
- float: left;
- width: span(5 of 10);
-
- &:nth-child(2n + 1) {
- clear: both;
- margin-left: 0;
- }
-
- &:nth-child(2n + 2) {
- clear: none;
- margin-left: gutter(of 10);
- }
- }
-
- @include breakpoint($medium) {
- margin-left: 0; /* override margin*/
- margin-right: 0; /* override margin*/
- width: span(3 of 12);
-
- &:nth-child(2n + 1) {
- clear: none;
- }
-
- &:nth-child(4n + 1) {
- clear: both;
- }
-
- &:nth-child(4n + 2) {
- clear: none;
- margin-left: gutter(1 of 12);
- }
-
- &:nth-child(4n + 3) {
- clear: none;
- margin-left: gutter(1 of 12);
- }
-
- &:nth-child(4n + 4) {
- clear: none;
- margin-left: gutter(1 of 12);
- }
- }
-
.page__meta {
margin: 0 0 4px;
font-size: 0.6em;