Merge pull request #5 from joeacarstairs/no-css-nesting

No CSS nesting

4 files changed, 148 insertions, 160 deletions

diff --git a/website/public/css/base.css b/website/public/css/base.css
index 5697a09..981fbed 100644
--- a/website/public/css/base.css
+++ b/website/public/css/base.css
@@ -80,14 +80,14 @@ small {
 body {
   margin-inline: var(--spacing-block-lg);
   margin-block-end: var(--spacing-block-xl);
+}
 
-  :is(h1, h2, h3, h4, h5, h6) {
-    text-align: center;
-  }
+:is(h1, h2, h3, h4, h5, h6) {
+  text-align: center;
+}
 
-  img {
-    margin-inline: auto;
-  }
+img {
+  margin-inline: auto;
 }
 
 @media (min-width: 36rem) {
@@ -102,20 +102,20 @@ body {
     margin-inline-end: 6rem;
 		column-gap: var(--spacing-block-sm);
     max-width: calc(6rem + var(--spacing-block-sm) + 30rem);
+  }
 
-    :is(main, article, nav) {
-      display: grid;
-      grid-column: media-start / content-end;
-      grid-template-columns: subgrid;
-    }
+  :is(main, article, nav) {
+    display: grid;
+    grid-column: media-start / content-end;
+    grid-template-columns: subgrid;
+  }
 
-    :is(section, header, aside) {
-      grid-column: content-start / content-end;
-    }
+  :is(section, header, aside) {
+    grid-column: content-start / content-end;
+  }
 
-    :is(h1, h2, h3, h4, h5, h6) {
-      text-align: start;
-    }
+  :is(h1, h2, h3, h4, h5, h6) {
+    text-align: start;
   }
 }
 
@@ -144,56 +144,54 @@ a:is(:link, :visited) {
   color: var(--colour-hyperlink);
   text-decoration: underline;
   display: inline;
+}
 
-  :hover {
-    text-decoration: wavy;
-  }
+a:hover {
+  text-decoration: wavy;
 }
 
 /** Definition lists */
 dl {
   margin-block-start: var(--spacing-block-md);
+}
 
-  dt {
-    font-weight: bold;
+dl dt {
+  font-weight: bold;
+}
 
-    dd + & {
-      margin-block-start: var(--spacing-block-md);
-    }
-  }
+dl dd + dt {
+  margin-block-start: var(--spacing-block-md);
 }
 
 /** Navigation bar */
 
 nav {
   margin-block: var(--spacing-block-sm);
+}
 
-  ul {
-    grid-column: media-start / content-end;
-    display: flex;
-    justify-content: center;
-    gap: var(--spacing-inline-md);
-    list-style: none;
-  }
+nav ul {
+  grid-column: media-start / content-end;
+  display: flex;
+  justify-content: center;
+  gap: var(--spacing-inline-md);
+  list-style: none;
 }
 
 @media (min-width: 36rem) {
   nav {
     display: grid;
     grid-template-columns: subgrid;
+  }
 
-    ul {
-      justify-content: end;
-    }
+  nav ul {
+    justify-content: end;
   }
 }
 
 /** Blog feed */
 
-.h-feed {
-	ul {
-		list-style: none;
-	}
+.h-feed ul {
+	list-style: none;
 }
 
 /** Block quotes */
@@ -201,14 +199,14 @@ blockquote {
   padding-inline-start: var(--spacing-inline-lg);
   border-inline-start: 2px solid var(--colour-primary-fg);
   font-style: italic;
+}
 
-  footer {
-    font-style: initial;
-  }
+ blockquote footer {
+  font-style: initial;
+}
 
-  :is(em, i) {
-    font-style: normal;
-  }
+blockquote :is(em, i) {
+  font-style: normal;
 }
 
 /** Small caps */
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);
 }
diff --git a/website/public/css/feed.css b/website/public/css/feed.css
index 699a571..f47e609 100644
--- a/website/public/css/feed.css
+++ b/website/public/css/feed.css
@@ -1,10 +1,8 @@
-.h-feed {
-	/* Assumes there is at most one level of subheading for sub-dividing entries */
-	:is(h2, h3, h4, h5, h6) {
-		margin-block-start: var(--spacing-block-md);
-	}
-	
-	.h-entry {
-		margin-block-start: var(--spacing-block-sm);
-	}
+/* Assumes there is at most one level of subheading for sub-dividing entries */
+.h-feed :is(h2, h3, h4, h5, h6) {
+	margin-block-start: var(--spacing-block-md);
+}
+
+.h-feed .h-entry {
+	margin-block-start: var(--spacing-block-sm);
 }
diff --git a/website/public/css/hcard.css b/website/public/css/hcard.css
index 414eed9..c0e2280 100644
--- a/website/public/css/hcard.css
+++ b/website/public/css/hcard.css
@@ -1,37 +1,36 @@
-.h-card {
-	div:has(img) {
-		width: 6rem;
-		height: 6rem;
-		margin-inline: auto;
-
-		img {
-			width: 6rem;
-			height: 6rem;
-			border-radius: 1rem;
-			filter: contrast(1.25);
-		}
-
-		&::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;
-
-			/* Positioned on top of the img */
-			display: block;
-			position: relative;
-			top: -6rem;
-
-			/* A content value is needed to get the ::after to render */
-			content: '';
-		}
-	}
+.h-card div:has(img) {
+	width: 6rem;
+	height: 6rem;
+	margin-inline: auto;
+}
+
+.h-card img {
+	width: 6rem;
+	height: 6rem;
+	border-radius: 1rem;
+	filter: contrast(1.25);
+}
+
+.h-card 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;
+
+	/* Positioned on top of the img */
+	display: block;
+	position: relative;
+	top: -6rem;
+
+	/* A content value is needed to get the ::after to render */
+	content: '';
 }
 
+
 @media (min-width: 36rem) {
 	.h-card {
 		grid-column: media-start / content-end;
@@ -41,18 +40,18 @@
 		grid-template-areas:
 			"empty heading"
 			"photo text";
+	}
 
-		div:has(img) {
-			grid-area: photo;
-			margin-block-start: var(--spacing-block-sm);
-		}
+	.h-card div:has(img) {
+		grid-area: photo;
+		margin-block-start: var(--spacing-block-sm);
+	}
 
-		header {
-			grid-area: heading;
-		}
+	.h-card header {
+		grid-area: heading;
+	}
 
-		.h-card__text {
-			grid-area: text;
-		}
+	.h-card__text {
+		grid-area: text;
 	}
 }