1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
|
@import 'colors.css';
::selection {
background-color: var(--bg-hl-alt-intense);
}
*, *:before, *:after {
box-sizing: border-box;
}
body {
color: var(--fg-main);
background-color: var(--bg-main);
font-family: "Iosevka Aile", sans-serif;
margin: 4em auto;
max-width: 90%;
line-height: 1.5;
}
h1 { color: var(--fg); }
h2 { color: var(--fg-special-warm); }
h3 { color: var(--fg-special-cold); }
h4 { color: var(--fg-special-mild); }
h5 { color: var(--fg-special-calm); }
h6 { color: var(--yellow-nuanced-fg); }
h1, h2, h3, h4, h5, h6, .title {
font-family: "Iosevka Etoile", serif;
}
hr { color: var(--fg-alt); }
a { color: var(--blue-alt-other); }
a:hover, a:focus {
color: var(--fg-dim);
background-color: var(--blue-subtle-bg);
}
a:visited { color: var(--cyan); }
a:visited:hover, a:visited:focus {
color: var(--fg-dim);
background-color: var(--cyan-subtle-bg);
}
img {
display: block;
max-width: 100%;
box-shadow: var(--bg-inactive) 0px 0px 0px 1px,
var(--fg-inactive) 0px 0px 0px 1px inset;
}
input, .alert {
color: var(--fg-main);
background-color: var(--bg-main);
border: 1px var(--bg-active) solid;
padding: 0.5em;
margin: 0.4em;
min-width: 30%;
}
img, .text { width: 384px; }
.heading { width: 364px; }
.heading {
box-shadow: var(--blue-intense-bg) 0px 0px 0px 2px inset,
var(--bg-main) 10px -10px 0px -3px,
var(--green-subtle-bg) 10px -10px,
var(--bg-main) 20px -20px 0px -3px,
var(--yellow-intense-bg) 20px -20px,
var(--bg-main) 30px -30px 0px -3px,
var(--red-subtle-bg) 30px -30px,
var(--bg-main) 40px -40px 0px -3px,
var(--red-intense-bg) 40px -40px;
padding: 1em;
}
.text {
box-shadow: var(--magenta-intense-bg) 0px 0px 0px 3px,
var(--green-subtle-bg) 0px 0px 0px 6px,
var(--yellow-intense-bg) 0px 0px 0px 9px,
var(--red-subtle-bg) 0px 0px 0px 12px,
var(--red-intense-bg) 0px 0px 0px 15px;
padding: 1em;
}
/* .gallery { */
/* column-count: auto; */
/* column-width: 384px; */
/* column-fill: balance; */
/* } */
.gallery img {
transform-origin: center;
transform: perspective(800px) rotateY(2deg);
transition: 0.4s;
}
.gallery:hover img { opacity: 0.4; }
.gallery img:hover {
transform: perspective(800px) rotateY(0deg) scale(1.1);
box-shadow: var(--bg-active) 0px 20px 30px -10px;
opacity: 1;
}
.alert {
background-color: var(--red-subtle-bg);
}
|