finxol.io
Personal site
staging.colinozanne.co.uk
portfolio
astro
refactor: make a.cover reusable
+5
-15
src/assets/styles/index.css
+5
-15
src/assets/styles/index.css
···
125
125
}
126
126
127
127
.project {
128
-
position: relative;
129
128
display: grid;
130
129
grid-template-areas:
131
130
"img img"
···
140
139
border-radius: var(--radius);
141
140
background-color: var(--teal-300);
142
141
143
-
a {
142
+
& > a {
143
+
grid-area: title;
144
+
font-size: 2rem;
145
+
font-weight: bold;
144
146
text-decoration: none;
145
-
}
146
-
147
-
a::before {
148
-
content: "";
149
-
position: absolute;
150
-
inset: 0;
151
-
z-index: 1;
147
+
color: inherit;
152
148
}
153
149
154
150
& > :not(picture) {
···
160
156
grid-area: img;
161
157
162
158
width: 100%;
163
-
}
164
-
165
-
& > h3 {
166
-
grid-area: title;
167
-
168
-
font-size: 2rem;
169
159
}
170
160
171
161
& > ul {
+20
src/assets/styles/main.css
+20
src/assets/styles/main.css
···
2
2
/* https://color.surf/ */
3
3
@import "@evilmartians/harmony/css/amber.css";
4
4
@import "@evilmartians/harmony/css/yellow.css";
5
+
@import "@evilmartians/harmony/css/lime.css";
5
6
@import "@evilmartians/harmony/css/emerald.css";
6
7
@import "@evilmartians/harmony/css/teal.css";
7
8
@import "@evilmartians/harmony/css/sky.css";
···
27
28
}
28
29
29
30
@layer components {
31
+
a svg {
32
+
--size: 1.5rem;
33
+
34
+
&.external-link {
35
+
--size: 0.75rem;
36
+
}
37
+
}
38
+
30
39
svg[data-icon] {
31
40
--size: 1.5rem;
32
41
···
36
45
}
37
46
38
47
@layer utilities {
48
+
:has(> .cover) {
49
+
position: relative;
50
+
}
51
+
52
+
a.cover::before {
53
+
content: "";
54
+
position: absolute;
55
+
inset: 0;
56
+
z-index: 1;
57
+
}
58
+
39
59
.container {
40
60
padding: var(--spacing);
41
61
width: calc(100% - 2rem * var(--spacing));