summaryrefslogtreecommitdiffstats
path: root/assets/css/components
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/components
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/components')
-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
5 files changed, 56 insertions, 215 deletions
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}
generated by cgit v1.2.3-70-g09d2 (git 2.47.0) at 2024-12-26 05:46:59 +0000