No CSS nesting

1 files changed, 56 insertions, 63 deletions

diff --git a/website/public/css/cv.css b/website/public/css/cv.css
index cdee5b1..06a93f4 100644
--- a/website/public/css/cv.css
+++ b/website/public/css/cv.css
@@ -2,91 +2,84 @@ div:has(img) {
 	width: 6rem;
 	height: 6rem;
 	margin-inline: auto;
+}
 
-	img {
-		width: 6rem;
-		height: 6rem;
-		border-radius: 1rem;
-		filter: contrast(1.25);
-	}
+div img {
+	width: 6rem;
+	height: 6rem;
+	border-radius: 1rem;
+	filter: contrast(1.25);
+}
 
-	&::after {
-		/* Colour overlay */
-		background-color: var(--colour-primary-80);
-		opacity: 0.3;
+div:has(img)::after {
+	/* Colour overlay */
+	background-color: var(--colour-primary-80);
+	opacity: 0.3;
 
-		/* Same size and shape as the img */
-		border-radius: 1rem;
-		width: 6rem;
-		height: 6rem;
+	/* Same size and shape as the img */
+	border-radius: 1rem;
+	width: 6rem;
+	height: 6rem;
 
-		/* Positioned on top of the img */
-		display: block;
-		position: relative;
-		top: -6rem;
+	/* Positioned on top of the img */
+	display: block;
+	position: relative;
+	top: -6rem;
 
-		/* A content value is needed to get the ::after to render */
-		content: '';
-	}
+	/* A content value is needed to get the ::after to render */
+	content: '';
 }
 
 header {
 	display: grid;
 	grid-template-columns: 1fr 1fr;
 	text-align: center;
+	border-block-end: 1px solid var(--colour-primary-fg);
+}
 
-	h1 {
-		grid-column: 1 / 3;
-		text-align: center;
-	}
+header h1 {
+	grid-column: 1 / 3;
+	text-align: center;
+}
 
-	border-block-end: 1px solid var(--colour-primary-fg);
+.technical-skills h3 {
+	text-align: start;
 }
 
-.technical-skills {
-	h3 {
-		text-align: start;
-	}
+.technical-skills ul {
+	color: var(--colour-primary-fg-accent);
+	margin-inline-start: var(--spacing-inline-md);
+}
 
-	ul {
-		color: var(--colour-primary-fg-accent);
-		margin-inline-start: var(--spacing-inline-md);
+@media (min-width: 46rem) {
+	.technical-skills section {
+		display: flex;
+		gap: var(--spacing-inline-sm);
+		align-items: baseline;
 	}
 
-	@media (min-width: 46rem) {
-		section {
-			display: flex;
-			gap: var(--spacing-inline-sm);
-			align-items: baseline;
-
-			h3 {
-				&::after {
-					content: '/';
-					margin-inline: var(--spacing-inline-sm);
-				}
-			}
+	.technical-skills section h3::after {
+		content: '/';
+		margin-inline: var(--spacing-inline-sm);
+	}
 
-			ul {
-				display: flex;
-				gap: var(--spacing-inline-sm);
-				list-style: none;
-				margin-inline-start: 0;
+	.technical-skills section ul {
+		display: flex;
+		gap: var(--spacing-inline-sm);
+		list-style: none;
+		margin-inline-start: 0;
+	}
 
-				li + li::before {
-					content: '•';
-					margin-inline-end: var(--spacing-inline-sm);
-				}
-			}
-		}
+	.technical-skills section ul li + li::before {
+		content: '•';
+		margin-inline-end: var(--spacing-inline-sm);
 	}
 }
 
-:is(.experience, .passions) {
-	:is(ol, ul) {
-		list-style: none;
+:is(.experience, .passions) :is(ol, ul) {
+	list-style: none;
+}
 
-		li {
-			margin-block-start: var(--spacing-block-sm);
-		}
-	}
+:is(.experience, .passions) :is(ol, ul) li {
+	margin-block-start: var(--spacing-block-sm);
 }