ViMaSter/hackertours-theme
Watch
0
0
Fork
You've already forked hackertours-theme
 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Switch cards component to grid from flex.

Browse source
This commit is contained in:
Fredrik Jonsson 2023-01-30 09:57:00 +01:00
commit 747bec3cc6
3 changed files with 15 additions and 9 deletions
Download patch file Download diff file Expand all files Collapse all files

7
assets/sass/components/cards/_cards.scss
View file

@ -4,7 +4,7 @@
.cards, .cards,
%cards { %cards {
@extend %flex-group; @extend %grid-group;
// Add vertical rhythm margins. // Add vertical rhythm margins.
@include margin-block(1); @include margin-block(1);
} }
@ -18,6 +18,11 @@
border-color: var(--color-highlight); border-color: var(--color-highlight);
} }
&--featured {
grid-row: span 2;
grid-column: span 2;
}
&--inverted { &--inverted {
@extend %link-inverted; @extend %link-inverted;
background: var(--color-border); background: var(--color-border);

4
assets/sass/components/flex-inline/_flex-inline.scss
View file

@ -1,8 +1,10 @@
.flex-inline, .flex-inline,
%flex-inline { %flex-inline {
--gap: .5rem;
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
gap: .5rem; gap: var(--gap);
padding: 0; padding: 0;
text-align: left; text-align: left;

13
assets/sass/components/grid-group/_grid-group.scss
View file

@ -1,15 +1,14 @@
.grid-group, .grid-group,
%grid-group { %grid-group {
$gap: 1; --column-min: 200px;
--gap: 1.5rem;
--column-min: 250px;
@include gap($gap);
display: grid; display: grid;
grid-template-columns: repeat(auto-fill, minmax(var(--column-min), 1fr)); gap: var(--gap);
grid-template-columns: repeat(auto-fit, minmax(var(--column-min), 1fr));
&--fit { &--fill {
grid-template-columns: repeat(auto-fit, minmax(var(--column-min), 1fr)); grid-template-columns: repeat(auto-fill, minmax(var(--column-min), 1fr));
} }
&--100 { &--100 {