89
90
91
92
93
94
95
96
97
98
99
100
101
102
...
259
260
261
262
263
264
265
266
267
268
269
270
271
272
...
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
....
1265
1266
1267
1268
1269
1270
1271
|
--icon: url(/s/heart.webp);
background-image: linear-gradient(to bottom,
otone(-41%),
otone(-43%) 15%,
otone(-46%) 75%,
otone(-50%)
);
&:hover, &:focus {
@extend %glow;
outline: none;
color: tone(-55%);
text-shadow: none;
background: linear-gradient(to bottom,
otone(-27%),
................................................................................
}
> 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;
position: relative;
min-height: calc(100vh - 1.1in);
margin-top: 0;
................................................................................
font-size: 80%;
vertical-align: text-top;
}
}
body.profile {
#rel {
menu {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: repeat(max-content);
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;
}
................................................................................
}
&:hover {
background-position: 0 0;
}
}
}
}
|
|
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
...
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
...
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
....
1270
1271
1272
1273
1274
1275
1276
1277
1278
1279
1280
|
--icon: url(/s/heart.webp);
background-image: linear-gradient(to bottom,
otone(-41%),
otone(-43%) 15%,
otone(-46%) 75%,
otone(-50%)
);
background-repeat: no-repeat; // necessary to keep gradients from glitching out under failfucks
&:hover, &:focus {
@extend %glow;
outline: none;
color: tone(-55%);
text-shadow: none;
background: linear-gradient(to bottom,
otone(-27%),
................................................................................
}
> 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;
position: relative;
min-height: calc(100vh - 1.1in);
margin-top: 0;
................................................................................
font-size: 80%;
vertical-align: text-top;
}
}
body.profile {
#rel {
.check-panel { margin-top: 0.6em; }
.check-panel + menu { margin-bottom: 2em; }
menu {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: repeat(max-content);
grid-gap: 0.1in;
> .opt {
padding: 0.1in;
border-radius: 5px;
border: 1px solid transparent;
&.on {
background: linear-gradient(to bottom, tone(-30%, -0.7), transparent 80%);
background-repeat: no-repeat;
border-top-color: tone(-30%);
}
> 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;
}
................................................................................
}
&:hover {
background-position: 0 0;
}
}
}
}
.modal .check-panel {
> label { margin: 0.1em; }
}
|