finxol.io
Personal site
staging.colinozanne.co.uk
portfolio
astro
chore: add css layers
+178
-161
+52
-43
src/assets/styles/index.css
+52
-43
src/assets/styles/index.css
···
61
61
}
62
62
63
63
&.content-projects {
64
-
--container-color: var(--fuchsia-400);
65
-
66
64
grid-area: content-projects;
67
65
}
68
66
}
69
67
70
-
section.container.layout {
71
-
display: grid;
72
-
grid-template-columns: auto auto 1fr;
73
-
grid-template-areas:
74
-
"aside h3 intro"
75
-
". body body";
76
-
align-items: center;
77
-
justify-content: start;
78
-
padding: calc(var(--spacing) * 2) var(--spacing) calc(var(--spacing) * 3);
79
-
grid-column-gap: var(--spacing);
68
+
section.container.content-projects {
69
+
--container-color: var(--rose-100);
80
70
81
-
@media screen and (max-width: 768px) {
82
-
grid-template-areas:
83
-
"aside h3"
84
-
". intro"
85
-
". body";
71
+
& > div {
72
+
display: grid;
86
73
}
74
+
}
87
75
88
-
& > aside {
89
-
grid-area: aside;
90
-
margin-inline: 1.5rem;
91
-
font-size: 3rem;
92
-
font-weight: bold;
76
+
@layer components {
77
+
section.container.layout {
78
+
display: grid;
79
+
grid-template-columns: auto auto 1fr;
80
+
grid-template-areas:
81
+
"aside h3 intro"
82
+
". body body";
83
+
align-items: center;
84
+
justify-content: start;
85
+
padding: calc(var(--spacing) * 2) var(--spacing)
86
+
calc(var(--spacing) * 3);
87
+
grid-column-gap: var(--spacing);
93
88
94
89
@media screen and (max-width: 768px) {
90
+
grid-template-areas:
91
+
"aside h3"
92
+
". intro"
93
+
". body";
94
+
}
95
+
96
+
& > aside {
97
+
grid-area: aside;
98
+
margin-inline: 1.5rem;
99
+
font-size: 3rem;
100
+
font-weight: bold;
101
+
102
+
@media screen and (max-width: 768px) {
103
+
font-size: 2rem;
104
+
margin-inline: 0.5rem;
105
+
}
106
+
}
107
+
108
+
& > h3 {
109
+
grid-area: h3;
110
+
margin: 0;
111
+
margin-inline-end: 2rem;
112
+
font-family: "Spagetty";
95
113
font-size: 2rem;
96
-
margin-inline: 0.5rem;
114
+
font-weight: bold;
97
115
}
98
-
}
99
116
100
-
& > h3 {
101
-
grid-area: h3;
102
-
margin: 0;
103
-
margin-inline-end: 2rem;
104
-
font-family: "Spagetty";
105
-
font-size: 2rem;
106
-
font-weight: bold;
107
-
}
117
+
& > p {
118
+
grid-area: intro;
119
+
margin: 0;
120
+
font-size: 1.2rem;
121
+
}
108
122
109
-
& > p {
110
-
grid-area: intro;
111
-
margin: 0;
112
-
font-size: 1.2rem;
113
-
}
114
-
115
-
& > div {
116
-
grid-area: body;
117
-
display: flex;
118
-
flex-direction: column;
119
-
gap: var(--spacing);
123
+
& > div {
124
+
grid-area: body;
125
+
display: flex;
126
+
flex-direction: column;
127
+
gap: var(--spacing);
128
+
}
120
129
}
121
130
}
+45
-39
src/assets/styles/main.css
+45
-39
src/assets/styles/main.css
···
13
13
@import url("@/assets/fonts/easycoast.css");
14
14
@import url("@/assets/fonts/scorekard.css");
15
15
16
+
@layer base, layout, components, utilities;
17
+
16
18
:root {
17
19
--radius: 0.75rem;
18
20
--spacing: 0.75rem;
19
21
}
20
22
21
-
.container {
22
-
padding: var(--spacing);
23
-
width: calc(100% - 2rem * var(--spacing));
24
-
border-radius: var(--radius);
25
-
color: var(--container-text-color, var(--emerald-950, black));
26
-
background-color: var(--container-color, var(--emerald-500, red));
27
-
}
23
+
@layer components {
24
+
svg[data-icon] {
25
+
--size: 1.5rem;
28
26
29
-
svg[data-icon] {
30
-
--size: 1.5rem;
31
-
32
-
width: var(--size);
33
-
height: var(--size);
27
+
width: var(--size);
28
+
height: var(--size);
29
+
}
34
30
}
35
31
36
-
@media (max-width: 768px) {
37
-
.desktop-only {
38
-
display: none;
32
+
@layer utilities {
33
+
.container {
34
+
padding: var(--spacing);
35
+
width: calc(100% - 2rem * var(--spacing));
36
+
border-radius: var(--radius);
37
+
color: var(--container-text-color, var(--emerald-950, black));
38
+
background-color: var(--container-color, var(--emerald-500, red));
39
39
}
40
-
}
41
40
42
-
.content-grid {
43
-
--padding-inline: min(2%, 1.5rem);
41
+
@media (max-width: 768px) {
42
+
.desktop-only {
43
+
display: none;
44
+
}
45
+
}
44
46
45
-
display: grid;
46
-
grid-template-columns:
47
-
[full-width-start] var(--padding-inline)
48
-
[breakout-start] var(--padding-inline)
49
-
[content-start] 1fr
50
-
[content-end]
51
-
var(--padding-inline) [breakout-end]
52
-
var(--padding-inline) [full-width-end];
53
-
justify-content: start;
54
-
align-content: start;
55
-
row-gap: calc(var(--spacing) * 4);
56
-
}
47
+
.content-grid {
48
+
--padding-inline: min(2%, 1.5rem);
57
49
58
-
.content-grid > :not(.breakout, .full-width),
59
-
.full-width > :not(.breakout, .full-width) {
60
-
grid-column: content;
61
-
}
50
+
display: grid;
51
+
grid-template-columns:
52
+
[full-width-start] var(--padding-inline)
53
+
[breakout-start] var(--padding-inline)
54
+
[content-start] 1fr
55
+
[content-end]
56
+
var(--padding-inline) [breakout-end]
57
+
var(--padding-inline) [full-width-end];
58
+
justify-content: start;
59
+
align-content: start;
60
+
row-gap: calc(var(--spacing) * 4);
61
+
}
62
62
63
-
.content-grid > .breakout {
64
-
grid-column: breakout;
65
-
}
63
+
.content-grid > :not(.breakout, .full-width),
64
+
.full-width > :not(.breakout, .full-width) {
65
+
grid-column: content;
66
+
}
67
+
68
+
.content-grid > .breakout {
69
+
grid-column: breakout;
70
+
}
66
71
67
-
.content-grid > .full-width {
68
-
grid-column: full-width;
72
+
.content-grid > .full-width {
73
+
grid-column: full-width;
74
+
}
69
75
}
+81
-79
src/assets/styles/reset.css
+81
-79
src/assets/styles/reset.css
···
1
1
/* CSS Reset by Andy Bell : https://piccalil.li/blog/a-more-modern-css-reset/ */
2
2
3
-
/* Box sizing rules */
4
-
*,
5
-
*::before,
6
-
*::after {
7
-
box-sizing: border-box;
8
-
}
3
+
@layer base {
4
+
/* Box sizing rules */
5
+
*,
6
+
*::before,
7
+
*::after {
8
+
box-sizing: border-box;
9
+
}
9
10
10
-
/* Prevent font size inflation */
11
-
html {
12
-
-moz-text-size-adjust: none;
13
-
-webkit-text-size-adjust: none;
14
-
text-size-adjust: none;
15
-
}
11
+
/* Prevent font size inflation */
12
+
html {
13
+
-moz-text-size-adjust: none;
14
+
-webkit-text-size-adjust: none;
15
+
text-size-adjust: none;
16
+
}
16
17
17
-
/* Remove default margin in favour of better control in authored CSS */
18
-
body,
19
-
h1,
20
-
h2,
21
-
h3,
22
-
h4,
23
-
p,
24
-
figure,
25
-
blockquote,
26
-
dl,
27
-
dd {
28
-
margin-block-end: 0;
29
-
}
18
+
/* Remove default margin in favour of better control in authored CSS */
19
+
body,
20
+
h1,
21
+
h2,
22
+
h3,
23
+
h4,
24
+
p,
25
+
figure,
26
+
blockquote,
27
+
dl,
28
+
dd {
29
+
margin-block-end: 0;
30
+
}
30
31
31
-
/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
32
-
ul[role="list"],
33
-
ol[role="list"] {
34
-
list-style: none;
35
-
}
32
+
/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
33
+
ul[role="list"],
34
+
ol[role="list"] {
35
+
list-style: none;
36
+
}
36
37
37
-
/* Set core body defaults */
38
-
body {
39
-
line-height: 1.3;
40
-
padding: 0;
41
-
margin: 0;
42
-
}
38
+
/* Set core body defaults */
39
+
body {
40
+
line-height: 1.3;
41
+
padding: 0;
42
+
margin: 0;
43
+
}
43
44
44
-
/* Set shorter line heights on headings and interactive elements */
45
-
h1,
46
-
h2,
47
-
h3,
48
-
h4,
49
-
button,
50
-
input,
51
-
label {
52
-
line-height: 1.1;
53
-
}
45
+
/* Set shorter line heights on headings and interactive elements */
46
+
h1,
47
+
h2,
48
+
h3,
49
+
h4,
50
+
button,
51
+
input,
52
+
label {
53
+
line-height: 1.1;
54
+
}
54
55
55
-
/* Balance text wrapping on headings */
56
-
h1,
57
-
h2,
58
-
h3,
59
-
h4 {
60
-
text-wrap: balance;
61
-
}
56
+
/* Balance text wrapping on headings */
57
+
h1,
58
+
h2,
59
+
h3,
60
+
h4 {
61
+
text-wrap: balance;
62
+
}
62
63
63
-
/* A elements that don't have a class get default styles */
64
-
a:not([class]) {
65
-
text-decoration-skip-ink: auto;
66
-
color: currentColor;
67
-
}
64
+
/* A elements that don't have a class get default styles */
65
+
a:not([class]) {
66
+
text-decoration-skip-ink: auto;
67
+
color: currentColor;
68
+
}
68
69
69
-
/* Make images easier to work with */
70
-
img,
71
-
picture {
72
-
max-width: 100%;
73
-
display: block;
74
-
}
70
+
/* Make images easier to work with */
71
+
img,
72
+
picture {
73
+
max-width: 100%;
74
+
display: block;
75
+
}
75
76
76
-
/* Inherit fonts for inputs and buttons */
77
-
input,
78
-
button,
79
-
textarea,
80
-
select {
81
-
font-family: inherit;
82
-
font-size: inherit;
83
-
}
77
+
/* Inherit fonts for inputs and buttons */
78
+
input,
79
+
button,
80
+
textarea,
81
+
select {
82
+
font-family: inherit;
83
+
font-size: inherit;
84
+
}
84
85
85
-
/* Make sure textareas without a rows attribute are not tiny */
86
-
textarea:not([rows]) {
87
-
min-height: 10em;
88
-
}
86
+
/* Make sure textareas without a rows attribute are not tiny */
87
+
textarea:not([rows]) {
88
+
min-height: 10em;
89
+
}
89
90
90
-
/* Anything that has been anchored to should have extra scroll margin */
91
-
:target {
92
-
scroll-margin-block: 5ex;
91
+
/* Anything that has been anchored to should have extra scroll margin */
92
+
:target {
93
+
scroll-margin-block: 5ex;
94
+
}
93
95
}