Skip to content

Commit b80e208

Browse files
csmithcsmith
committed
Make subscripts sub again!
Also reformat the CSS and fix a random leftover SCSS comment
1 parent de4a353 commit b80e208

21 files changed

Lines changed: 2170 additions & 1727 deletions

‎cmd/serve/assets/stylesheet/about.css‎

Lines changed: 178 additions & 178 deletions
Original file line numberDiff line numberDiff line change
@@ -1,214 +1,214 @@
11
.about {
2-
/* Centers the trading card when it's not floated */
3-
text-align: center;
2+
/* Centers the trading card when it's not floated */
3+
text-align: center;
44

5-
* {
6-
text-align: left;
7-
}
5+
* {
6+
text-align: left;
7+
}
88

9-
& > :last-child {
10-
flex: 100%;
11-
margin-right: var(--small-space);
12-
padding-top: var(--small-space);
9+
& > :last-child {
10+
flex: 100%;
11+
margin-right: var(--small-space);
12+
padding-top: var(--small-space);
1313

14-
@media (max-width: 500px) {
15-
margin-right: 0;
16-
}
14+
@media (max-width: 500px) {
15+
margin-right: 0;
16+
}
1717

18-
p:first-child {
19-
margin-top: var(--small-space);
20-
margin-bottom: var(--small-space);
21-
font-size: var(--font-size-large);
22-
line-height: 1.8em;
23-
}
18+
p:first-child {
19+
margin-top: var(--small-space);
20+
margin-bottom: var(--small-space);
21+
font-size: var(--font-size-large);
22+
line-height: 1.8em;
23+
}
2424

25-
.drop {
26-
font-family: "Chris Hand", sans-serif;
27-
color: var(--text-highlight-colour);
28-
font-weight: 800;
29-
font-size: var(--font-size-giant);
30-
margin-right: var(--small-space);
31-
vertical-align: baseline;
32-
line-height: 0;
25+
.drop {
26+
font-family: "Chris Hand", sans-serif;
27+
color: var(--text-highlight-colour);
28+
font-weight: 800;
29+
font-size: var(--font-size-giant);
30+
margin-right: var(--small-space);
31+
vertical-align: baseline;
32+
line-height: 0;
33+
}
3334
}
34-
}
3535
}
3636

3737
.tcg-outer {
38-
float: right;
39-
position: relative;
40-
width: min-content;
41-
cursor: help;
42-
43-
transform: rotate(4deg) translateY(40px);
44-
margin-left: var(--large-space);
45-
margin-bottom: var(--medium-space);
46-
47-
@media (max-width: 1200px) {
48-
float: none;
49-
margin-bottom: var(--large-space);
50-
margin-left: auto;
51-
margin-right: auto;
52-
}
53-
54-
@media (max-width: 800px) {
55-
transform: rotate(0deg);
56-
}
57-
58-
.tcg-front {
59-
transform: rotateY(0deg);
60-
}
61-
62-
.tcg-back {
63-
position: absolute;
64-
top: 0;
65-
left: 0;
66-
width: 100%;
67-
height: 100%;
68-
transform: rotateY(180deg);
69-
background-color: var(--accent-colour);
70-
71-
.tcg-back-emboss {
72-
position: absolute;
73-
font-size: var(--font-size-xlarge);
74-
top: 30%;
75-
left: 0;
76-
width: 100%;
77-
text-align: center;
78-
text-transform: uppercase;
79-
font-weight: bolder;
80-
color: color-mix(in srgb, var(--accent-colour), black 20%);
38+
float: right;
39+
position: relative;
40+
width: min-content;
41+
cursor: help;
42+
43+
transform: rotate(4deg) translateY(40px);
44+
margin-left: var(--large-space);
45+
margin-bottom: var(--medium-space);
46+
47+
@media (max-width: 1200px) {
48+
float: none;
49+
margin-bottom: var(--large-space);
50+
margin-left: auto;
51+
margin-right: auto;
8152
}
8253

83-
.tcg-back-hello {
84-
position: absolute;
85-
margin: 0;
86-
bottom: 0;
87-
right: 0;
88-
font-size: var(--font-size-tiny);
89-
color: color-mix(in srgb, var(--accent-colour), black 20%);
54+
@media (max-width: 800px) {
55+
transform: rotate(0deg);
9056
}
91-
}
9257

93-
.tcg-flip {
94-
transform-style: preserve-3d;
95-
transition: transform 800ms 400ms;
96-
}
58+
.tcg-front {
59+
transform: rotateY(0deg);
60+
}
9761

98-
&:hover .tcg-flip {
99-
transform: rotateY(180deg);
100-
}
62+
.tcg-back {
63+
position: absolute;
64+
top: 0;
65+
left: 0;
66+
width: 100%;
67+
height: 100%;
68+
transform: rotateY(180deg);
69+
background-color: var(--accent-colour);
70+
71+
.tcg-back-emboss {
72+
position: absolute;
73+
font-size: var(--font-size-xlarge);
74+
top: 30%;
75+
left: 0;
76+
width: 100%;
77+
text-align: center;
78+
text-transform: uppercase;
79+
font-weight: bolder;
80+
color: color-mix(in srgb, var(--accent-colour), black 20%);
81+
}
10182

102-
.tcg-front, .tcg-back {
103-
/* Firefox doesn't do anti-aliasing in a 3D context, which looks terrible
104-
as the card is rotated a bit. Adding a transparent outline somehow
105-
fixes it. https://stackoverflow.com/a/9333891 */
106-
outline: 1px solid transparent;
107-
border: 12px solid var(--accent-colour);
108-
border-radius: var(--border-radius);
109-
box-shadow: 20px 20px 5px black;
110-
backface-visibility: hidden;
111-
112-
@media (max-width: 500px) {
113-
box-shadow: 10px 10px 5px black;
83+
.tcg-back-hello {
84+
position: absolute;
85+
margin: 0;
86+
bottom: 0;
87+
right: 0;
88+
font-size: var(--font-size-tiny);
89+
color: color-mix(in srgb, var(--accent-colour), black 20%);
90+
}
11491
}
11592

116-
&::before {
117-
position: absolute;
118-
top: -12px;
119-
left: -12px;
120-
right: -12px;
121-
bottom: -12px;
122-
content: ' ';
123-
border-radius: var(--border-radius);
124-
125-
transform: translateZ(1.41px);
126-
overflow: hidden;
127-
128-
background-image: radial-gradient(
129-
farthest-corner circle at 300px 400px,
130-
hsla(0, 0%, 100%, 0.8) 10%,
131-
hsla(0, 0%, 100%, 0.65) 20%,
132-
hsla(0, 0%, 0%, 0.5) 90%
133-
);
134-
135-
mix-blend-mode: overlay;
93+
.tcg-flip {
94+
transform-style: preserve-3d;
95+
transition: transform 800ms 400ms;
13696
}
137-
}
138-
139-
.tcg-inner {
140-
width: 300px;
141-
margin: -4px;
142-
background-color: var(--background-alt-colour);
143-
border-radius: var(--border-radius);
144-
overflow: hidden;
14597

146-
display: flex;
147-
flex-direction: column;
148-
align-items: center;
98+
&:hover .tcg-flip {
99+
transform: rotateY(180deg);
100+
}
149101

150-
font-size: var(--font-size-tiny);
102+
.tcg-front,
103+
.tcg-back {
104+
/* Firefox doesn't do anti-aliasing in a 3D context, which looks terrible
105+
as the card is rotated a bit. Adding a transparent outline somehow
106+
fixes it. https://stackoverflow.com/a/9333891 */
107+
outline: 1px solid transparent;
108+
border: 12px solid var(--accent-colour);
109+
border-radius: var(--border-radius);
110+
box-shadow: 20px 20px 5px black;
111+
backface-visibility: hidden;
112+
113+
@media (max-width: 500px) {
114+
box-shadow: 10px 10px 5px black;
115+
}
151116

152-
img {
153-
width: 100%;
154-
border-bottom: 6px solid var(--accent-colour);
117+
&::before {
118+
position: absolute;
119+
top: -12px;
120+
left: -12px;
121+
right: -12px;
122+
bottom: -12px;
123+
content: " ";
124+
border-radius: var(--border-radius);
125+
126+
transform: translateZ(1.41px);
127+
overflow: hidden;
128+
129+
background-image: radial-gradient(
130+
farthest-corner circle at 300px 400px,
131+
hsla(0, 0%, 100%, 0.8) 10%,
132+
hsla(0, 0%, 100%, 0.65) 20%,
133+
hsla(0, 0%, 0%, 0.5) 90%
134+
);
135+
136+
mix-blend-mode: overlay;
137+
}
155138
}
156139

157-
.tcg-properties {
158-
width: 100%;
159-
display: grid;
160-
grid-template-columns: auto 1fr auto 1fr;
161-
padding: 10px;
162-
grid-column-gap: var(--small-space);
163-
align-items: baseline;
164-
165-
dt {
166-
font-weight: bold;
167-
text-align: right;
168-
}
169-
}
140+
.tcg-inner {
141+
width: 300px;
142+
margin: -4px;
143+
background-color: var(--background-alt-colour);
144+
border-radius: var(--border-radius);
145+
overflow: hidden;
170146

171-
.tcg-skills {
172-
margin: 0 10px;
173-
/* Safari doesn't like to calculate the width properly by itself...? */
174-
max-width: calc(100% - 20px);
175-
border-bottom: 0;
147+
display: flex;
148+
flex-direction: column;
149+
align-items: center;
176150

177-
td {
178-
border: 0;
179-
padding: 4px;
180151
font-size: var(--font-size-tiny);
181152

182-
&:first-child {
183-
// Types
184-
text-align: center;
153+
img {
154+
width: 100%;
155+
border-bottom: 6px solid var(--accent-colour);
185156
}
186-
}
187-
188-
em {
189-
font-style: normal;
190-
font-weight: bold;
191157

192-
/* The global style adds underscores around emphasis, but we don't want that here */
193-
&::before {
194-
display: none;
158+
.tcg-properties {
159+
width: 100%;
160+
display: grid;
161+
grid-template-columns: auto 1fr auto 1fr;
162+
padding: 10px;
163+
grid-column-gap: var(--small-space);
164+
align-items: baseline;
165+
166+
dt {
167+
font-weight: bold;
168+
text-align: right;
169+
}
195170
}
196171

197-
&::after {
198-
display: none;
172+
.tcg-skills {
173+
margin: 0 10px;
174+
/* Safari doesn't like to calculate the width properly by itself...? */
175+
max-width: calc(100% - 20px);
176+
border-bottom: 0;
177+
178+
td {
179+
border: 0;
180+
padding: 4px;
181+
font-size: var(--font-size-tiny);
182+
183+
&:first-child {
184+
text-align: center;
185+
}
186+
}
187+
188+
em {
189+
font-style: normal;
190+
font-weight: bold;
191+
192+
/* The global style adds underscores around emphasis, but we don't want that here */
193+
&::before {
194+
display: none;
195+
}
196+
197+
&::after {
198+
display: none;
199+
}
200+
}
199201
}
200-
}
201-
}
202202

203-
footer {
204-
width: 100%;
205-
border-top: 2px solid var(--accent-colour);
206-
margin-top: 10px;
207-
padding: 5px 10px 5px 10px;
208-
font-size: var(--font-size-tiny);
209-
font-style: italic;
210-
display: flex;
211-
justify-content: right;
203+
footer {
204+
width: 100%;
205+
border-top: 2px solid var(--accent-colour);
206+
margin-top: 10px;
207+
padding: 5px 10px 5px 10px;
208+
font-size: var(--font-size-tiny);
209+
font-style: italic;
210+
display: flex;
211+
justify-content: right;
212+
}
212213
}
213-
}
214214
}

0 commit comments

Comments
 (0)