summaryrefslogtreecommitdiffstats
path: root/assets/css/layouts
diff options
context:
space:
mode:
Diffstat (limited to 'assets/css/layouts')
-rw-r--r--assets/css/layouts/_card-grid.scss8
-rw-r--r--assets/css/layouts/_project-grid.scss17
-rw-r--r--assets/css/layouts/_section.scss7
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}