summaryrefslogtreecommitdiffstats
path: root/assets/css/components
diff options
context:
space:
mode:
Diffstat (limited to 'assets/css/components')
-rw-r--r--assets/css/components/_card.scss15
-rw-r--r--assets/css/components/_footer.scss24
-rw-r--r--assets/css/components/_landing-banner.scss16
-rw-r--r--assets/css/components/_logo.scss19
-rw-r--r--assets/css/components/_nav.scss109
-rw-r--r--assets/css/components/_outer-button.scss67
6 files changed, 123 insertions, 127 deletions
diff --git a/assets/css/components/_card.scss b/assets/css/components/_card.scss
index 6260518..bb8b4d2 100644
--- a/assets/css/components/_card.scss
+++ b/assets/css/components/_card.scss
@@ -12,6 +12,13 @@
12 ) 12 )
13 )); 13 ));
14 14
15 @include store((
16 --dims: (
17 --pad-x: .9em,
18 --pad-y: .6em
19 )
20 ), 'md');
21
15 @include component(namespace()) { 22 @include component(namespace()) {
16 display: flex; 23 display: flex;
17 position: relative; 24 position: relative;
@@ -29,9 +36,7 @@
29 @include element('content') { 36 @include element('content') {
30 @include modifier('flip') { 37 @include modifier('flip') {
31 visibility: visible; 38 visibility: visible;
32 transition: 39 transition: visibility 0s, opacity .2s;
33 visibility 0s,
34 opacity .2s;
35 opacity: 1; 40 opacity: 1;
36 } 41 }
37 } 42 }
@@ -48,9 +53,7 @@
48 top: 0; 53 top: 0;
49 left: 0; 54 left: 0;
50 height: 100%; 55 height: 100%;
51 transition: 56 transition: visibility 0s linear .2s, opacity .2s;
52 visibility 0s linear .2s,
53 opacity .2s;
54 opacity: 0; 57 opacity: 0;
55 background-color: prop(--colors --flip --bg); 58 background-color: prop(--colors --flip --bg);
56 } 59 }
diff --git a/assets/css/components/_footer.scss b/assets/css/components/_footer.scss
index db30fcd..c20bc22 100644
--- a/assets/css/components/_footer.scss
+++ b/assets/css/components/_footer.scss
@@ -1,17 +1,25 @@
1@include namespace('footer') { 1@include namespace('footer') {
2 @include store(( 2 @include store((
3 --dims: (
4 --pad-y: .8em
5 ),
6 --colors: ( 3 --colors: (
7 --fg: prop(--colors --obj, $global: true) 4 --fg: prop(--colors --obj, $global: true),
5 --border: prop(--colors --bg-lo, $global: true),
8 ) 6 )
9 )); 7 ));
10 8
11 @include component(namespace()) { 9 @include component(namespace()) {
12 padding-top: prop(--dims --pad-y); 10 display: flex;
13 padding-bottom: prop(--dims --pad-y); 11 align-items: center;
14 color: prop(--colors --fg); 12 justify-content: space-between;
15 text-align: right; 13 height: prop(--dims --outer, $global: true);
14
15 @include element('content') {
16 width: 100%;
17 height: 100%;
18 margin-right: prop(--dims --outer-spacing, $global: true);
19 margin-left: prop(--dims --outer-spacing, $global: true);
20 border-top: 1px solid prop(--colors --border);
21 color: prop(--colors --fg);
22 line-height: prop(--dims --outer, $global: true);
23 }
16 } 24 }
17} 25}
diff --git a/assets/css/components/_landing-banner.scss b/assets/css/components/_landing-banner.scss
index 412ca8a..8f07c37 100644
--- a/assets/css/components/_landing-banner.scss
+++ b/assets/css/components/_landing-banner.scss
@@ -7,17 +7,19 @@
7 )); 7 ));
8 8
9 @include component(namespace()) { 9 @include component(namespace()) {
10 font-size: 1 / 16 * 17em;
11
12 @include element('title') { 10 @include element('title') {
13 max-width: 7em; 11 max-width: 7em;
14 margin-top: 0; 12 margin-top: 0;
15 transform: translateX(-.04em); 13 transform: translateX(-.05em);
16 font-family: $font-fam--large; 14 font-family: $font-fam--large;
17 font-weight: 350; 15 font-weight: 350;
18 text-transform: none; 16 text-transform: none;
19 } 17 }
20 18
19 @include element('text') {
20 font-size: 1 / 16 * 17em;
21 }
22
21 @include element('title-inner') { 23 @include element('title-inner') {
22 background-image: linear-gradient( 24 background-image: linear-gradient(
23 to top, 25 to top,
@@ -33,9 +35,15 @@
33 font-weight: 550; 35 font-weight: 550;
34 } 36 }
35 37
38 @include media('<=md') {
39 @include element('title') {
40 max-width: none;
41 }
42 }
43
36 @include iro-responsive-env(('md', 'lg')) { 44 @include iro-responsive-env(('md', 'lg')) {
37 @include element('title') { 45 @include element('title') {
38 font-size: iro-responsive-set((2.6rem, 3rem)); 46 font-size: iro-responsive-set((2.6rem, 3.4rem));
39 } 47 }
40 } 48 }
41 } 49 }
diff --git a/assets/css/components/_logo.scss b/assets/css/components/_logo.scss
new file mode 100644
index 0000000..13587c8
--- /dev/null
+++ b/assets/css/components/_logo.scss
@@ -0,0 +1,19 @@
1@include namespace('logo') {
2 @include store((
3 --colors: (
4 --fg: prop(--colors --fg-lo, $global: true),
5 --bg: prop(--colors --bg-hi, $global: true),
6 --hover: (
7 --fg: prop(--colors --bg-hi, $global: true),
8 --bg: prop(--colors --accent --color, $global: true),
9 )
10 )
11 ));
12
13 @include component(namespace()) {
14 position: fixed;
15 z-index: 10000;
16 top: 0;
17 left: 0;
18 }
19}
diff --git a/assets/css/components/_nav.scss b/assets/css/components/_nav.scss
deleted file mode 100644
index d0a255e..0000000
--- a/assets/css/components/_nav.scss
+++ /dev/null
@@ -1,109 +0,0 @@
1@include namespace('nav') {
2 @include store((
3 --dims: (
4 --font-size: 15px,
5 --pad-x: 2.5rem,
6 --item: (
7 --pad-x: 1rem,
8 ),
9 ),
10 --colors: (
11 --bg: prop(--colors --bg-hi, $global: true),
12 --logo: (
13 --idle: (
14 --fg: prop(--colors --accent --color, $global: true),
15 ),
16 --hover: (
17 --fg: prop(--colors --fg-lo, $global: true),
18 )
19 ),
20 --item: (
21 --idle: (
22 --fg: prop(--colors --fg, $global: true),
23 ),
24 --hover: (
25 --fg: prop(--colors --fg-lo, $global: true),
26 ),
27 --active: (
28 --fg: prop(--colors --fg-lo, $global: true),
29 )
30 )
31 )
32 ));
33
34 @include store((
35 --dims: (
36 --pad-x: prop(--container --dims --pad-x, $global: true),
37 )
38 ), 'md');
39
40 @include store((
41 --dims: (
42 --item: (
43 --pad-x: .75em,
44 ),
45 )
46 ), 'sm');
47
48 @include component(namespace()) {
49 display: flex;
50 position: fixed;
51 z-index: 10000;
52 top: 0;
53 left: 0;
54 height: prop(--dims --outer, $global: true);
55 padding: 0 prop(--dims --pad-x);
56 background-color: prop(--colors --bg);
57 font-size: prop(--dims --font-size);
58
59 @include element('logo', 'item') {
60 display: flex;
61 align-items: center;
62 height: 100%;
63 }
64
65 @include element('logo') {
66 color: prop(--colors --logo --idle --fg);
67 font-family: $font-fam--mono;
68 text-decoration: none;
69
70 &:link,
71 &:visited {
72 &:hover {
73 background-color: transparent;
74 color: prop(--colors --logo --hover --fg);
75 }
76 }
77 }
78
79 @include element('logo-symbol') {
80 display: block;
81 width: $line-height * .9em;
82 height: $line-height * 1em;
83 }
84
85 @include element('item') {
86 margin: 0 calc(-1 * #{prop(--dims --item --pad-x)}) 0 prop(--dims --item --pad-x);
87 padding: 0 prop(--dims --item --pad-x);
88 color: prop(--colors --item --idle --fg);
89 text-decoration: none;
90 text-transform: uppercase;
91
92 &:hover {
93 background-color: transparent;
94 color: prop(--colors --item --hover --fg);
95 text-decoration: underline;
96 }
97
98 @include modifier('active') {
99 border-color: prop(--colors --item --active --fg);
100 color: prop(--colors --item --active --fg);
101 font-weight: bold;
102 }
103 }
104
105 @include media('<=md') {
106 width: 100%;
107 }
108 }
109}
diff --git a/assets/css/components/_outer-button.scss b/assets/css/components/_outer-button.scss
new file mode 100644
index 0000000..13614bb
--- /dev/null
+++ b/assets/css/components/_outer-button.scss
@@ -0,0 +1,67 @@
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 --hover: (
7 --bg: prop(--colors --accent --color, $global: true),
8 --fg: prop(--colors --bg-hi, $global: true),
9 ),
10 --logo: (
11 --fg: prop(--colors --fg-lo, $global: true),
12 --bg: prop(--colors --bg-hi, $global: true),
13 --hover: (
14 --fg: prop(--colors --bg-hi, $global: true),
15 --bg: prop(--colors --accent --color, $global: true),
16 )
17 )
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-weight: 500;
28 text-decoration: none;
29
30 &:hover {
31 background-color: prop(--colors --hover --bg);
32 color: prop(--colors --hover --fg);
33 }
34
35 @include modifier('logo') {
36 background-color: prop(--colors --logo --bg);
37 color: prop(--colors --logo --fg);
38
39 &:hover {
40 background-color: prop(--colors --logo --hover --bg);
41 color: prop(--colors --logo --hover --fg);
42 }
43 }
44
45 @include element('icon') {
46 display: flex;
47 position: relative;
48 align-items: center;
49 justify-content: center;
50 width: prop(--dims --outer, $global: true);
51 height: 100%;
52 }
53
54 @include element('icon-symbol') {
55 display: block;
56 width: 1.5em;
57 height: 1.5em;
58 }
59
60 @include element('content') {
61 height: 100%;
62 padding-right: prop(--dims --outer-spacing, $global: true);
63 padding-left: prop(--dims --outer-spacing, $global: true);
64 line-height: prop(--dims --outer, $global: true);
65 }
66 }
67}
generated by cgit v1.2.3-70-g09d2 (git 2.47.0) at 2024-12-26 16:56:09 +0000