summaryrefslogtreecommitdiffstats
path: root/assets/css
diff options
context:
space:
mode:
Diffstat (limited to 'assets/css')
-rw-r--r--assets/css/_basics.scss5
-rw-r--r--assets/css/_vars.scss29
-rw-r--r--assets/css/components/_card.scss45
-rw-r--r--assets/css/components/_footer.scss1
4 files changed, 30 insertions, 50 deletions
diff --git a/assets/css/_basics.scss b/assets/css/_basics.scss
index fd15836..9a6a53e 100644
--- a/assets/css/_basics.scss
+++ b/assets/css/_basics.scss
@@ -39,11 +39,6 @@ body {
39 padding: 0; 39 padding: 0;
40} 40}
41 41
42main {
43 display: flex;
44 flex-direction: column;
45}
46
47pre, 42pre,
48code { 43code {
49 font-family: $font-fam--mono; 44 font-family: $font-fam--mono;
diff --git a/assets/css/_vars.scss b/assets/css/_vars.scss
index 832c410..d650842 100644
--- a/assets/css/_vars.scss
+++ b/assets/css/_vars.scss
@@ -133,12 +133,27 @@ $content--width: 42rem;
133 $gray6: hsl(220, 7%, 16%); 133 $gray6: hsl(220, 7%, 16%);
134 $gray7: hsl(220, 7%, 0%); 134 $gray7: hsl(220, 7%, 0%);
135 135
136 $link-idle: hsl(220, 60%, 40%); 136 $theme-link-bg: hsl(
137 137 var(--colors--accent--h),
138 $theme-link-bg: change-color($link-idle, $lightness: 98.8%); 138 var(--colors--accent--s),
139 $theme-link-obj: rgba($link-idle, .5); 139 98.8%
140 $theme-link-fg-hi: mix($link-idle, $gray0, 75%); 140 );
141 $theme-link-fg: $link-idle; 141 $theme-link-obj: hsla(
142 var(--colors--accent--h),
143 var(--colors--accent--s),
144 var(--colors--accent--l),
145 .5
146 );
147 $theme-link-fg: hsl(
148 var(--colors--accent--h),
149 var(--colors--accent--s),
150 calc(var(--colors--accent--l) * .8)
151 );
152 $theme-link-fg-hi: hsl(
153 var(--colors--accent--h),
154 calc(var(--colors--accent--s) * .6),
155 calc(var(--colors--accent--l) * 1.2)
156 );
142 157
143 @include store(( 158 @include store((
144 --colors: ( 159 --colors: (
@@ -200,7 +215,7 @@ $content--width: 42rem;
200 215
201 --link: ( 216 --link: (
202 --colored: ( 217 --colored: (
203 --idle: $link-idle, //hsl(var(--colors--accent--h), 100%, 66%), // 218 --idle: hsl(220, 60%, 40%), //hsl(var(--colors--accent--h), 100%, 66%), //
204 --visited: hsl(290, 30%, 35%), //hsl(var(--colors--accent--h), 50%, 66%), // 219 --visited: hsl(290, 30%, 35%), //hsl(var(--colors--accent--h), 50%, 66%), //
205 ) 220 )
206 ), 221 ),
diff --git a/assets/css/components/_card.scss b/assets/css/components/_card.scss
index 6fdd874..d1b549d 100644
--- a/assets/css/components/_card.scss
+++ b/assets/css/components/_card.scss
@@ -30,6 +30,8 @@
30 display: flex; 30 display: flex;
31 position: relative; 31 position: relative;
32 align-items: center; 32 align-items: center;
33 padding-right: calc(.5 * #{prop(--dims --pad-x)});
34 padding-left: calc(.5 * #{prop(--dims --pad-x)});
33 transform: translateY(0); 35 transform: translateY(0);
34 transition: transform .2s, background-color .2s, color .2s; 36 transition: transform .2s, background-color .2s, color .2s;
35 background-color: prop(--colors --bg); 37 background-color: prop(--colors --bg);
@@ -83,45 +85,14 @@
83 } 85 }
84 } 86 }
85 87
86 @include element('content') { 88 @include element('block') {
87 box-sizing: border-box;
88 width: 100%;
89 padding: prop(--dims --pad-y) prop(--dims --pad-x);
90
91 @include next-twin-element {
92 width: auto;
93 }
94
95 @include modifier('flip') {
96 visibility: hidden;
97 position: absolute;
98 top: 0;
99 left: 0;
100 height: 100%;
101 transition: visibility 0s linear .2s, opacity .2s;
102 opacity: 0;
103 background-color: prop(--colors --hover --bg);
104 }
105
106 @include sibling-element('icon') {
107 padding-right: prop(--dims --pad-x);
108 padding-left: 0;
109 }
110 }
111
112 @include element('icon') {
113 display: block;
114 flex: 0 0 auto; 89 flex: 0 0 auto;
115 padding: prop(--dims --pad-y) 0 prop(--dims --pad-y) prop(--dims --pad-x); 90 padding: prop(--dims --pad-y) calc(.5 * #{prop(--dims --pad-x)});
116 }
117 91
118 @include element('image') { 92 @include modifier('main') {
119 display: block; 93 flex-shrink: 1;
120 flex: 0 0 auto; 94 width: 100%;
121 width: 4em; 95 }
122 height: 100%;
123 object-fit: cover;
124 object-position: center center;
125 } 96 }
126 } 97 }
127} 98}
diff --git a/assets/css/components/_footer.scss b/assets/css/components/_footer.scss
index cc0e827..6371411 100644
--- a/assets/css/components/_footer.scss
+++ b/assets/css/components/_footer.scss
@@ -9,7 +9,6 @@
9 9
10 @include component(namespace()) { 10 @include component(namespace()) {
11 position: relative; 11 position: relative;
12 flex: 0 0 auto;
13 min-height: prop(--dims --outer, $global: true); 12 min-height: prop(--dims --outer, $global: true);
14 margin-top: auto; 13 margin-top: auto;
15 overflow: hidden; 14 overflow: hidden;