171
172
173
174
175
176
177
178
179
180
181
182
183
184
...
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
...
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
|
outline: none;
@extend %glow;
}
}
select { width: 100%; }
@mixin glass {
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
backdrop-filter: blur(40px);
-webkit-backdrop-filter: blur(40px);
background-color: tone(-53%, -0.7);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
background-color: tone(-53%, -0.1);
................................................................................
//padding: calc((25% - 1em)/2) 0.15in;
&, &::after { transition: 0.3s; }
text-shadow: 1px 1px 1px black;
&:hover{
transform: scale(1.2);
}
}
> a[href].bell, a[href].gear {
height: 2em;
padding: 0.125in 0.05in;
filter: drop-shadow(1px 1px 3px tone(-5%));
&:hover {
filter: drop-shadow(1px 1px 3px tone(-5%))
drop-shadow(0 0 10px tone(-5%));
}
}
> a[href].bell { content: url(/s/bell.svg); }
> a[href].gear { content: url(/s/gear.svg); }
}
}
}
main {
@extend %content;
display: block;
................................................................................
grid-gap: 0.1in;
> .opt {
padding: 0.1in;
border-radius: 5px;
border: 1px solid transparent;
&.on {
background-color: tone(-30%, -0.7);
box-shadow: 0 0 10px tone(-30%);
border-color: tone(-20%);
}
> button, > p, > a[href] { display: block; }
> p { text-align: center; font-size: 80%; margin: 0; margin-top: 0.1in; }
> button, > a[href] {
width: max-content;
margin: auto;
}
|
|
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
...
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
...
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
|
outline: none;
@extend %glow;
}
}
select { width: 100%; }
@mixin glass {
box-shadow: inset 0 0 1.5em tone(-56%);
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
backdrop-filter: blur(40px);
-webkit-backdrop-filter: blur(40px);
background-color: tone(-53%, -0.7);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
background-color: tone(-53%, -0.1);
................................................................................
//padding: calc((25% - 1em)/2) 0.15in;
&, &::after { transition: 0.3s; }
text-shadow: 1px 1px 1px black;
&:hover{
transform: scale(1.2);
}
}
> a[href].bell, a[href].gear, a[href].pen {
height: 2em;
width: 2em;
padding: 0.125in 0.05in;
filter: drop-shadow(1px 1px 3px tone(-5%));
&:hover {
filter: drop-shadow(1px 1px 3px tone(-5%))
drop-shadow(0 0 10px tone(-5%));
}
}
> a[href].bell { content: url(/s/bell.svg); }
> a[href].gear { content: url(/s/gear.svg); }
> a[href].pen { content: url(/s/pen.svg); }
}
}
}
main {
@extend %content;
display: block;
................................................................................
grid-gap: 0.1in;
> .opt {
padding: 0.1in;
border-radius: 5px;
border: 1px solid transparent;
&.on {
background-color: tone(-30%, -0.7);
border-color: tone(-20%) transparent;
}
> button, > p, > a[href] { display: block; }
> p { text-align: center; font-size: 80%; margin: 0; margin-top: 0.1in; }
> button, > a[href] {
width: max-content;
margin: auto;
}
|