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.scss10
-rw-r--r--assets/css/layouts/_landing.scss20
-rw-r--r--assets/css/layouts/_section.scss17
3 files changed, 36 insertions, 11 deletions
diff --git a/assets/css/layouts/_card-grid.scss b/assets/css/layouts/_card-grid.scss
index 8e9091a..cbc4388 100644
--- a/assets/css/layouts/_card-grid.scss
+++ b/assets/css/layouts/_card-grid.scss
@@ -1,7 +1,13 @@
1@include namespace('card-grid') { 1@include namespace('card-grid') {
2 @include store((
3 --dims: (
4 --card-width: 17em
5 )
6 ));
7
2 @include layout(namespace()) { 8 @include layout(namespace()) {
3 display: grid; 9 display: grid;
4 grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); 10 grid-template-columns: repeat(auto-fit, minmax(#{prop(--dims --card-width)}, 1fr));
5 gap: .7rem; 11 gap: .6rem;
6 } 12 }
7} 13}
diff --git a/assets/css/layouts/_landing.scss b/assets/css/layouts/_landing.scss
index 03af39f..a332528 100644
--- a/assets/css/layouts/_landing.scss
+++ b/assets/css/layouts/_landing.scss
@@ -13,19 +13,15 @@
13 box-sizing: border-box; 13 box-sizing: border-box;
14 flex-direction: row; 14 flex-direction: row;
15 align-items: center; 15 align-items: center;
16 min-height: 100%;
17 padding-bottom: prop(--dims --outer, $global: true);
18 16
19 @include element('banner') { 17 @include element('banner') {
20 flex-shrink: 1.2; 18 width: 70%;
21 width: 100%;
22 max-width: prop(--dims --banner-width); 19 max-width: prop(--dims --banner-width);
23 background-color: prop(--colors --banner-bg); 20 background-color: prop(--colors --banner-bg);
24 } 21 }
25 22
26 @include element('content') { 23 @include element('content') {
27 width: 100%; 24 width: 100%;
28 min-width: 0;
29 } 25 }
30 26
31 @include iro-responsive-env(('md', 'lg')) { 27 @include iro-responsive-env(('md', 'lg')) {
@@ -38,9 +34,15 @@
38 } 34 }
39 35
40 @include media('<=md') { 36 @include media('<=md') {
41 display: block; 37 display: block;
42 height: auto; 38
43 padding-bottom: 0; 39 @include element('side') {
40 display: none;
41
42 @include sibling-element('side') {
43 display: block;
44 }
45 }
44 46
45 @include element('banner', 'content') { 47 @include element('banner', 'content') {
46 width: auto; 48 width: auto;
diff --git a/assets/css/layouts/_section.scss b/assets/css/layouts/_section.scss
new file mode 100644
index 0000000..94a145b
--- /dev/null
+++ b/assets/css/layouts/_section.scss
@@ -0,0 +1,17 @@
1@include namespace('section') {
2 @include layout(namespace()) {
3 display: flex;
4 flex-direction: column;
5 align-items: flex-start;
6 min-height: 100%;
7 margin-bottom: calc(-1 * #{prop(--dims --outer, $global: true)});
8 padding-bottom: prop(--dims --outer, $global: true);
9
10 @include element('heading') {
11 position: sticky;
12 z-index: 9000;
13 top: 0;
14 left: 0;
15 }
16 }
17}