summaryrefslogtreecommitdiffstats
path: root/assets/css
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
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')
-rw-r--r--assets/css/_basics.scss11
-rw-r--r--assets/css/_vars.scss2
-rw-r--r--assets/css/components/_header.scss48
-rw-r--r--assets/css/components/_landing-banner.scss49
-rw-r--r--assets/css/components/_outer-button.scss89
-rw-r--r--assets/css/components/_post-list.scss17
-rw-r--r--assets/css/components/_project.scss68
-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
-rw-r--r--assets/css/style.scss8
12 files changed, 62 insertions, 402 deletions
diff --git a/assets/css/_basics.scss b/assets/css/_basics.scss
index 4fe73a2..71beceb 100644
--- a/assets/css/_basics.scss
+++ b/assets/css/_basics.scss
@@ -32,12 +32,6 @@ body {
32 padding: 0; 32 padding: 0;
33} 33}
34 34
35main {
36 display: flex;
37 flex-direction: column;
38 min-height: 100vh;
39}
40
41pre, 35pre,
42code { 36code {
43 font-family: $font-fam--mono; 37 font-family: $font-fam--mono;
@@ -156,6 +150,11 @@ h6 {
156 & + & { 150 & + & {
157 margin-top: $line-height * 1rem; 151 margin-top: $line-height * 1rem;
158 } 152 }
153
154 strong {
155 color: prop(--colors --accent --color, $global: true);
156 font-weight: 550;
157 }
159} 158}
160 159
161p { 160p {
diff --git a/assets/css/_vars.scss b/assets/css/_vars.scss
index 4b60518..ebbefad 100644
--- a/assets/css/_vars.scss
+++ b/assets/css/_vars.scss
@@ -22,7 +22,7 @@ $font-fam--large: 'Garet', $font-fam--text;
22$font-fam--mono: 'Iosevka Term SS09', 'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace; 22$font-fam--mono: 'Iosevka Term SS09', 'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace;
23$font-size: 16px; 23$font-size: 16px;
24$line-height: 1.7; 24$line-height: 1.7;
25$content--width: 42rem; 25$content--width: 46rem;
26 26
27@include iro-execute { 27@include iro-execute {
28 $gray0: hsl(220, 5%, 7%); 28 $gray0: hsl(220, 5%, 7%);
diff --git a/assets/css/components/_header.scss b/assets/css/components/_header.scss
index e74780b..81e4d4f 100644
--- a/assets/css/components/_header.scss
+++ b/assets/css/components/_header.scss
@@ -1,23 +1,53 @@
1@include namespace('header') { 1@include namespace('header') {
2 @include store(( 2 @include store((
3 --colors: ( 3 --colors: (
4 --fg: prop(--colors --fg-lo, $global: true), 4 --fg: prop(--colors --fg-hi, $global: true),
5 --bg: prop(--colors --bg-hi, $global: true),
6 --hover: ( 5 --hover: (
7 --fg: prop(--colors --bg-hi, $global: true), 6 --fg: prop(--colors --fg-lo, $global: true),
8 --bg: prop(--colors --accent --color, $global: true), 7 ),
8 --active: (
9 --fg: prop(--colors --fg-lo, $global: true),
9 ) 10 )
11 ),
12 --dims: (
13 --height: 4rem,
14 --pad-x: .6rem,
10 ) 15 )
11 )); 16 ));
12 17
13 @include component(namespace()) { 18 @include component(namespace()) {
14 display: flex; 19 display: flex;
15 position: fixed;
16 z-index: 10000;
17 top: 0;
18 left: 0;
19 flex-direction: row; 20 flex-direction: row;
20 justify-content: flex-start; 21 justify-content: flex-start;
21 box-shadow: prop(--dims --obj-shadow, $global: true) prop(--colors --obj-shadow, $global: true); 22 height: prop(--dims --height);
23
24 @include element('item') {
25 padding: 0 prop(--dims --pad-x);
26 line-height: prop(--dims --height);
27 color: prop(--colors --fg);
28 text-decoration: none;
29
30 &:hover {
31 color: prop(--colors --hover --fg);
32 }
33
34 @include modifier('icon') {
35 display: flex;
36 align-items: center;
37 justify-content: center;
38 padding: 0;
39 width: prop(--dims --height);
40 }
41
42 @include modifier('active') {
43 font-weight: bold;
44 color: prop(--colors --active --fg);
45 }
46 }
47
48 @include element('icon') {
49 width: 1.5em;
50 height: 1.5em;
51 }
22 } 52 }
23} 53}
diff --git a/assets/css/components/_landing-banner.scss b/assets/css/components/_landing-banner.scss
deleted file mode 100644
index f1b8595..0000000
--- a/assets/css/components/_landing-banner.scss
+++ /dev/null
@@ -1,49 +0,0 @@
1@include namespace('landing-banner') {
2 @include store((
3 --colors: (
4 --emph: (
5 --fg: prop(--colors --accent --color, $global: true),
6 --bg: prop(--colors --bg-hi, $global: true)
7 )
8 )
9 ));
10
11 @include component(namespace()) {
12 @include element('title') {
13 max-width: 7em;
14 margin-top: 0;
15 transform: translateX(-.06em);
16 font-family: $font-fam--large;
17 font-weight: 350;
18 line-height: 1.2;
19 text-transform: none;
20 }
21
22 @include element('title-inner') {
23 background-image: linear-gradient(
24 to top,
25 transparent .15em,
26 #{prop(--colors --emph --bg)} .15em,
27 #{prop(--colors --emph --bg)} .6em,
28 transparent .6em
29 );
30 }
31
32 @include element('emph') {
33 color: prop(--colors --emph --fg);
34 font-weight: 550;
35 }
36
37 @include media('<=md') {
38 @include element('title') {
39 max-width: none;
40 }
41 }
42
43 @include iro-responsive-env(('md', 'lg')) {
44 @include element('title') {
45 font-size: iro-responsive-set((2.6rem, 3.4rem));
46 }
47 }
48 }
49}
diff --git a/assets/css/components/_outer-button.scss b/assets/css/components/_outer-button.scss
deleted file mode 100644
index fb3a51e..0000000
--- a/assets/css/components/_outer-button.scss
+++ /dev/null
@@ -1,89 +0,0 @@
1@include namespace('outer-button') {
2 @include store((
3 --colors: (
4 --fg: prop(--colors --bg-hi, $global: true),
5 --bg: prop(--colors --fg-lo, $global: true),
6 --border: prop(--colors --fg, $global: true),
7 --hover: (
8 --bg: prop(--colors --accent --color, $global: true),
9 --fg: prop(--colors --bg-hi, $global: true),
10 ),
11 --inverted: (
12 --fg: prop(--colors --fg-lo, $global: true),
13 --bg: prop(--colors --bg-hi, $global: true),
14 )
15 ),
16 --dims: (
17 --pad-x: 1.7rem,
18 )
19 ));
20
21 @include component(namespace()) {
22 display: flex;
23 height: prop(--dims --outer, $global: true);
24 transition: background-color .2s, color .2s;
25 background-color: prop(--colors --bg);
26 color: prop(--colors --fg);
27 font-size: 1rem;
28 font-weight: 700;
29 letter-spacing: .5px;
30 text-decoration: none;
31 text-transform: uppercase;
32
33 @include modifier('inverted') {
34 background-color: prop(--colors --inverted --bg);
35 color: prop(--colors --inverted --fg);
36 }
37
38 @include modifier('scroll-top') {
39 position: absolute;
40 right: 0;
41 bottom: 0;
42 }
43
44 @include element('icon') {
45 display: flex;
46 position: relative;
47 flex: 0 0 auto;
48 align-items: center;
49 justify-content: center;
50 width: prop(--dims --outer, $global: true);
51 height: 100%;
52
53 @include next-element('content') {
54 margin-left: -1px;
55 border-left: 1px solid prop(--colors --border);
56 }
57 }
58
59 @include element('icon-symbol') {
60 display: block;
61 width: 1.5em;
62 height: 1.5em;
63 }
64
65 @include element('content') {
66 height: 100%;
67 padding-right: prop(--dims --pad-x);
68 padding-left: prop(--dims --pad-x);
69 transition: border-left-color .2s;
70 font-size: 1 / 16 * 14em;
71 line-height: prop(--dims --outer, $global: true);
72 white-space: nowrap;
73 }
74
75 &:link,
76 &:visited {
77 &:hover {
78 background-color: prop(--colors --hover --bg);
79 color: prop(--colors --hover --fg);
80
81 @include element('icon') {
82 @include next-element('content') {
83 border-left-color: transparent;
84 }
85 }
86 }
87 }
88 }
89}
diff --git a/assets/css/components/_post-list.scss b/assets/css/components/_post-list.scss
index 7a3b8a0..5126589 100644
--- a/assets/css/components/_post-list.scss
+++ b/assets/css/components/_post-list.scss
@@ -7,6 +7,9 @@
7 --meta: ( 7 --meta: (
8 --fg: prop(--colors --fg-hi, $global: true), 8 --fg: prop(--colors --fg-hi, $global: true),
9 ) 9 )
10 ),
11 --dims: (
12 --col-width: 17em
10 ) 13 )
11 )); 14 ));
12 15
@@ -39,5 +42,19 @@
39 margin-top: 1px; 42 margin-top: 1px;
40 } 43 }
41 } 44 }
45
46 @include modifier('grid') {
47 @include element('category-content') {
48 display: grid;
49 grid-template-columns: repeat(auto-fill, minmax(#{prop(--dims --col-width)}, 1fr));
50 gap: $line-height * .5rem;
51 }
52
53 @include element('post') {
54 @include next-twin-element {
55 margin-top: 0;
56 }
57 }
58 }
42 } 59 }
43} 60}
diff --git a/assets/css/components/_project.scss b/assets/css/components/_project.scss
deleted file mode 100644
index 5248e32..0000000
--- a/assets/css/components/_project.scss
+++ /dev/null
@@ -1,68 +0,0 @@
1@include namespace('project') {
2 @include store((
3 --colors: (
4 --bg: prop(--colors --bg-hi, $global: true),
5 )
6 ));
7
8 @include component(namespace()) {
9 position: relative;
10 overflow: hidden;
11 box-shadow: prop(--dims --obj-shadow, $global: true) prop(--colors --obj-shadow, $global: true);
12
13 &::before {
14 content: '';
15 display: block;
16 padding-top: 12em;
17 padding-bottom: 5vw;
18 background-color: prop(--colors --bg);
19 }
20
21 &:link,
22 &:visited {
23 color: currentColor;
24 text-decoration: none;
25
26 &:hover,
27 &:focus {
28 @include element('picture') {
29 opacity: .75;
30 filter: blur(0);
31 }
32
33 @include element('card') {
34 transform: translateY(#{prop(--card --dims --hover-offset, $global: true)});
35 background-color: prop(--card --colors --hover --bg, $global: true);
36 color: prop(--card --colors --hover --fg, $global: true);
37
38 * {
39 color: currentColor;
40 }
41 }
42 }
43 }
44
45 @include element('picture') {
46 display: block;
47 position: absolute;
48 z-index: 10;
49 top: 0;
50 left: 0;
51 width: 100%;
52 height: 100%;
53 object-fit: cover;
54 object-position: center center;
55 transition: opacity .2s;
56 mask-image: iro-easing-gradient(linear, 340deg, rgba(#000, .75) 7em, ease, #000 26em);
57 }
58
59 @include element('card') {
60 position: absolute;
61 z-index: 20;
62 right: 1em;
63 bottom: 1em;
64 min-width: 15em;
65 max-width: calc(100% - 2em);
66 }
67 }
68}
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}
diff --git a/assets/css/style.scss b/assets/css/style.scss
index cd27f35..99d52c1 100644
--- a/assets/css/style.scss
+++ b/assets/css/style.scss
@@ -10,22 +10,14 @@
10@import 'basics'; 10@import 'basics';
11 11
12@import 'layouts/container'; 12@import 'layouts/container';
13@import 'layouts/section';
14@import 'layouts/landing';
15 13
16@import 'objects/icon'; 14@import 'objects/icon';
17 15
18@import 'components/outer-button';
19@import 'components/header'; 16@import 'components/header';
20@import 'components/landing-banner';
21@import 'components/footer'; 17@import 'components/footer';
22@import 'components/card'; 18@import 'components/card';
23@import 'components/project';
24@import 'components/post-list'; 19@import 'components/post-list';
25 20
26@import 'layouts/card-grid';
27@import 'layouts/project-grid';
28
29@import 'scopes/colored-links'; 21@import 'scopes/colored-links';
30@import 'scopes/headlines'; 22@import 'scopes/headlines';
31@import 'scopes/body'; 23@import 'scopes/body';
generated by cgit v1.2.3-70-g09d2 (git 2.47.0) at 2024-12-25 19:03:49 +0000