summaryrefslogtreecommitdiffstats
path: root/assets/css/layouts
diff options
context:
space:
mode:
authorVolpeon <git@volpeon.ink>2021-11-10 21:20:58 +0100
committerVolpeon <git@volpeon.ink>2021-11-10 21:20:58 +0100
commit8177471f70a517e78b4470cd01c375ed30121102 (patch)
tree9a3373040e70d71463ea87796578489d6aabc8d8 /assets/css/layouts
parentUpdate vlpn (diff)
downloadvolpeon.ink-8177471f70a517e78b4470cd01c375ed30121102.tar.gz
volpeon.ink-8177471f70a517e78b4470cd01c375ed30121102.tar.bz2
volpeon.ink-8177471f70a517e78b4470cd01c375ed30121102.zip
Simplified home page
Diffstat (limited to 'assets/css/layouts')
-rw-r--r--assets/css/layouts/_card-grid.scss22
-rw-r--r--assets/css/layouts/_landing.scss54
-rw-r--r--assets/css/layouts/_project-grid.scss22
-rw-r--r--assets/css/layouts/_section.scss74
4 files changed, 0 insertions, 172 deletions
diff --git a/assets/css/layouts/_card-grid.scss b/assets/css/layouts/_card-grid.scss
deleted file mode 100644
index c9d927a..0000000
--- a/assets/css/layouts/_card-grid.scss
+++ /dev/null
@@ -1,22 +0,0 @@
1@include namespace('card-grid') {
2 @include store((
3 --dims: (
4 --col-width: 17em
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: .6rem;
12 filter: drop-shadow(#{prop(--dims --obj-shadow, $global: true)} #{prop(--colors --obj-shadow, $global: true)});
13
14 @include element('card') {
15 box-shadow: none;
16 }
17
18 @include media('<=sm') {
19 grid-template-columns: 1fr;
20 }
21 }
22}
diff --git a/assets/css/layouts/_landing.scss b/assets/css/layouts/_landing.scss
deleted file mode 100644
index a81b105..0000000
--- a/assets/css/layouts/_landing.scss
+++ /dev/null
@@ -1,54 +0,0 @@
1@include namespace('landing') {
2 @include store((
3 --dims: (
4 --banner-width: 30rem,
5 ),
6 --colors: (
7 --banner-bg: prop(--colors --bg, $global: true)
8 )
9 ));
10
11 @include layout(namespace()) {
12 display: flex;
13 flex-direction: row;
14 align-items: center;
15 margin-top: auto;
16 margin-bottom: auto;
17
18 @include element('banner') {
19 width: 70%;
20 max-width: prop(--dims --banner-width);
21 background-color: prop(--colors --banner-bg);
22 }
23
24 @include element('content') {
25 width: 100%;
26 }
27
28 @include iro-responsive-env(('md', 'lg')) {
29 padding-right: iro-responsive-set((0, 3rem));
30 padding-left: iro-responsive-set((0, 6rem));
31 }
32
33 @include media('<=md') {
34 display: block;
35
36 @include element('side') {
37 display: none;
38
39 @include sibling-element('side') {
40 display: block;
41 }
42 }
43
44 @include element('banner', 'content') {
45 width: auto;
46 padding: 0;
47 }
48
49 @include element('banner') {
50 max-width: none;
51 }
52 }
53 }
54}
diff --git a/assets/css/layouts/_project-grid.scss b/assets/css/layouts/_project-grid.scss
deleted file mode 100644
index 5ed983c..0000000
--- a/assets/css/layouts/_project-grid.scss
+++ /dev/null
@@ -1,22 +0,0 @@
1@include namespace('project-grid') {
2 @include store((
3 --dims: (
4 --col-width: 20em
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: 2rem;
12 filter: drop-shadow(#{prop(--dims --obj-shadow, $global: true)} #{prop(--colors --obj-shadow, $global: true)});
13
14 @include element('project') {
15 box-shadow: none;
16 }
17
18 @include media('<=sm') {
19 grid-template-columns: 1fr;
20 }
21 }
22}
diff --git a/assets/css/layouts/_section.scss b/assets/css/layouts/_section.scss
deleted file mode 100644
index 80b8ca9..0000000
--- a/assets/css/layouts/_section.scss
+++ /dev/null
@@ -1,74 +0,0 @@
1@include namespace('section') {
2 @include store((
3 --colors: (
4 --border: prop(--colors --obj-hi, $global: true),
5 --body-bg: transparent,
6 )
7 ));
8
9 @include store((
10 --colors: (
11 --body-bg: prop(--colors --bg-hi, $global: true),
12 )
13 ), 'light');
14
15 @include layout(namespace()) {
16 position: relative;
17
18 @include modifier('flex') {
19 display: flex;
20 flex-direction: column;
21 align-items: stretch;
22 justify-content: flex-start;
23 }
24
25 @include modifier('fullscreen') {
26 box-sizing: border-box;
27 min-height: 100vh;
28 margin-bottom: calc(-1 * #{prop(--dims --outer, $global: true)});
29 padding-bottom: prop(--dims --outer, $global: true);
30 }
31
32 @include modifier('body') {
33 background-color: prop(--colors --body-bg);
34 }
35
36 @include modifier('no-header') {
37 padding-top: prop(--dims --outer, $global: true);
38 }
39
40 @include element('header') {
41 display: flex;
42 flex-direction: row;
43 align-items: center;
44 height: prop(--dims --outer, $global: true);
45 font-size: 1 / 16 * 15em;
46
47 @include modifier('sticky') {
48 position: sticky;
49 z-index: 9000;
50 top: 0;
51 left: 0;
52 }
53 }
54
55 /*@include element('footer') {
56 position: absolute;
57 z-index: 10000;
58 right: 0;
59 bottom: 0;
60 height: prop(--dims --outer, $global: true);
61 font-size: 1 / 16 * 15em;
62 }*/
63
64 @include element('header-separator') {
65 flex: 1 1 auto;
66 width: 100%;
67 height: 100%;
68 margin-top: -1px;
69 margin-right: prop(--container --dims --pad-x, $global: true);
70 margin-left: prop(--container --dims --pad-x, $global: true);
71 border-top: 1px solid prop(--colors --border);
72 }
73 }
74}