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