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

No CSS nesting

website/public/css/base.css

@@ -80,6 +80,7 @@ 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;
@@ -88,7 +89,6 @@ body {
 img {
   margin-inline: auto;
 }
-}
 
 @media (min-width: 36rem) {
   body {
@@ -102,6 +102,7 @@ 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;
@@ -117,7 +118,6 @@ body {
     text-align: start;
   }
 }
-}
 
 /** Headings */
 
@@ -144,72 +144,70 @@ 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 {
+dl dt {
   font-weight: bold;
+}
 
-    dd + & {
+dl dd + dt {
   margin-block-start: var(--spacing-block-md);
 }
-  }
-}
 
 /** Navigation bar */
 
 nav {
   margin-block: var(--spacing-block-sm);
+}
 
-  ul {
+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 {
+.h-feed ul {
-	ul {
 	list-style: none;
 }
-}
 
 /** Block quotes */
 blockquote {
   padding-inline-start: var(--spacing-inline-lg);
   border-inline-start: 2px solid var(--colour-primary-fg);
   font-style: italic;
+}
 
-  footer {
+ blockquote footer {
   font-style: initial;
 }
 
-  :is(em, i) {
+blockquote :is(em, i) {
   font-style: normal;
 }
-}
 
 /** Small caps */
 .small-caps {

website/public/css/cv.css

@@ -2,15 +2,16 @@ div:has(img) {
 	width: 6rem;
 	height: 6rem;
 	margin-inline: auto;
+}
 
-	img {
+div img {
 	width: 6rem;
 	height: 6rem;
 	border-radius: 1rem;
 	filter: contrast(1.25);
 }
 
-	&::after {
+div:has(img)::after {
 	/* Colour overlay */
 	background-color: var(--colour-primary-80);
 	opacity: 0.3;
@@ -28,65 +29,57 @@ div:has(img) {
 	/* 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 {
+header h1 {
 	grid-column: 1 / 3;
 	text-align: center;
 }
 
-	border-block-end: 1px solid var(--colour-primary-fg);
+.technical-skills h3 {
-}
-
-.technical-skills {
-	h3 {
 	text-align: start;
 }
 
-	ul {
+.technical-skills ul {
 	color: var(--colour-primary-fg-accent);
 	margin-inline-start: var(--spacing-inline-md);
 }
 
 @media (min-width: 46rem) {
-		section {
+	.technical-skills section {
 		display: flex;
 		gap: var(--spacing-inline-sm);
 		align-items: baseline;
+	}
 
-			h3 {
+	.technical-skills section h3::after {
-				&::after {
 		content: '/';
 		margin-inline: var(--spacing-inline-sm);
 	}
-			}
 
-			ul {
+	.technical-skills section ul {
 		display: flex;
 		gap: var(--spacing-inline-sm);
 		list-style: none;
 		margin-inline-start: 0;
+	}
 
-				li + li::before {
+	.technical-skills section ul li + li::before {
 		content: '•';
 		margin-inline-end: var(--spacing-inline-sm);
 	}
 }
-		}
-	}
-}
 
-:is(.experience, .passions) {
+:is(.experience, .passions) :is(ol, ul) {
-	:is(ol, ul) {
 	list-style: none;
+}
 
-		li {
+:is(.experience, .passions) :is(ol, ul) li {
 	margin-block-start: var(--spacing-block-sm);
 }
-	}
-}

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) {
+.h-feed :is(h2, h3, h4, h5, h6) {
 	margin-block-start: var(--spacing-block-md);
 }
 
-	.h-entry {
+.h-feed .h-entry {
 	margin-block-start: var(--spacing-block-sm);
 }
-}

website/public/css/hcard.css

@@ -1,17 +1,17 @@
-.h-card {
+.h-card div:has(img) {
-	div:has(img) {
 	width: 6rem;
 	height: 6rem;
 	margin-inline: auto;
+}
 
-		img {
+.h-card img {
 	width: 6rem;
 	height: 6rem;
 	border-radius: 1rem;
 	filter: contrast(1.25);
 }
 
-		&::after {
+.h-card div:has(img)::after {
 	/* Colour overlay */
 	background-color: var(--colour-primary-80);
 	opacity: 0.3;
@@ -29,8 +29,7 @@
 	/* A content value is needed to get the ::after to render */
 	content: '';
 }
-	}
+
-}
 
 @media (min-width: 36rem) {
 	.h-card {
@@ -41,13 +40,14 @@
 		grid-template-areas:
 			"empty heading"
 			"photo text";
+	}
 
-		div:has(img) {
+	.h-card div:has(img) {
 		grid-area: photo;
 		margin-block-start: var(--spacing-block-sm);
 	}
 
-		header {
+	.h-card header {
 		grid-area: heading;
 	}
 
@@ -55,4 +55,3 @@
 		grid-area: text;
 	}
 }
-}