diff options
Diffstat (limited to 'assets/css/layouts')
-rw-r--r-- | assets/css/layouts/_card-grid.scss | 8 | ||||
-rw-r--r-- | assets/css/layouts/_project-grid.scss | 17 | ||||
-rw-r--r-- | assets/css/layouts/_section.scss | 7 |
3 files changed, 23 insertions, 9 deletions
diff --git a/assets/css/layouts/_card-grid.scss b/assets/css/layouts/_card-grid.scss index cbc4388..7c8ad8c 100644 --- a/assets/css/layouts/_card-grid.scss +++ b/assets/css/layouts/_card-grid.scss | |||
@@ -1,13 +1,17 @@ | |||
1 | @include namespace('card-grid') { | 1 | @include namespace('card-grid') { |
2 | @include store(( | 2 | @include store(( |
3 | --dims: ( | 3 | --dims: ( |
4 | --card-width: 17em | 4 | --col-width: 17em |
5 | ) | 5 | ) |
6 | )); | 6 | )); |
7 | 7 | ||
8 | @include layout(namespace()) { | 8 | @include layout(namespace()) { |
9 | display: grid; | 9 | display: grid; |
10 | grid-template-columns: repeat(auto-fit, minmax(#{prop(--dims --card-width)}, 1fr)); | 10 | grid-template-columns: repeat(auto-fill, minmax(#{prop(--dims --col-width)}, 1fr)); |
11 | gap: .6rem; | 11 | gap: .6rem; |
12 | |||
13 | @include media('<=sm') { | ||
14 | grid-template-columns: 1fr; | ||
15 | } | ||
12 | } | 16 | } |
13 | } | 17 | } |
diff --git a/assets/css/layouts/_project-grid.scss b/assets/css/layouts/_project-grid.scss new file mode 100644 index 0000000..df2952b --- /dev/null +++ b/assets/css/layouts/_project-grid.scss | |||
@@ -0,0 +1,17 @@ | |||
1 | @include namespace('project-grid') { | ||
2 | @include store(( | ||
3 | --dims: ( | ||
4 | --col-width: 26em | ||
5 | ) | ||
6 | )); | ||
7 | |||
8 | @include layout(namespace()) { | ||
9 | display: grid; | ||
10 | grid-template-columns: repeat(auto-fill, minmax(#{prop(--dims --col-width)}, 1fr)); | ||
11 | gap: 1rem; | ||
12 | |||
13 | @include media('<=sm') { | ||
14 | grid-template-columns: 1fr; | ||
15 | } | ||
16 | } | ||
17 | } | ||
diff --git a/assets/css/layouts/_section.scss b/assets/css/layouts/_section.scss index 70ace4c..51e3dc8 100644 --- a/assets/css/layouts/_section.scss +++ b/assets/css/layouts/_section.scss | |||
@@ -25,7 +25,6 @@ | |||
25 | left: 0; | 25 | left: 0; |
26 | flex-direction: row; | 26 | flex-direction: row; |
27 | justify-self: flex-start; | 27 | justify-self: flex-start; |
28 | padding-right: prop(--dims --outer, $global: true); | ||
29 | font-size: 1 / 16 * 15em; | 28 | font-size: 1 / 16 * 15em; |
30 | 29 | ||
31 | &::after { | 30 | &::after { |
@@ -38,11 +37,5 @@ | |||
38 | border-top: 1px solid prop(--colors --border); | 37 | border-top: 1px solid prop(--colors --border); |
39 | } | 38 | } |
40 | } | 39 | } |
41 | |||
42 | @include media('<=sm') { | ||
43 | @include element('head') { | ||
44 | padding-right: 0; | ||
45 | } | ||
46 | } | ||
47 | } | 40 | } |
48 | } | 41 | } |