Merge pull request #372 from anevins12/fix/css-coding-standards

356: CSS selectors as per coding standards

sass/blocks/_blocks.scss

@@ -165,14 +165,12 @@
 			outline: none;
 
 			&:hover {
-				cursor: pointer;
-			}
-
-			&:hover, &:focus {
 				background: $color__background-button-hover;
+				cursor: pointer;
 			}
 
 			&:focus {
+				background: $color__background-button-hover;
 				outline: thin dotted;
 				outline-offset: -4px;
 			}
@@ -304,10 +302,10 @@
 			line-height: 1.6;
 			text-transform: none;
 			color: $color__text-light;
-			
-			/* 
-			 * This requires a rem-based font size calculation instead of our normal em-based one, 
-			 * because the cite tag sometimes gets wrapped in a p tag. This is equivalent to $font-size_xs. 
+
+			/*
+			 * This requires a rem-based font size calculation instead of our normal em-based one,
+			 * because the cite tag sometimes gets wrapped in a p tag. This is equivalent to $font-size_xs.
 			 */
 			font-size: calc(1rem / (1.25 * #{$font__size-ratio}));
 		}
@@ -390,9 +388,9 @@
 		}
 
 		cite {
-			/* 
-			 * This requires a rem-based font size calculation instead of our normal em-based one, 
-			 * because the cite tag sometimes gets wrapped in a p tag. This is equivalent to $font-size_xs. 
+			/*
+			 * This requires a rem-based font size calculation instead of our normal em-based one,
+			 * because the cite tag sometimes gets wrapped in a p tag. This is equivalent to $font-size_xs.
 			 */
 			font-size: calc(1rem / (1.25 * #{$font__size-ratio}));
 		}
@@ -411,9 +409,9 @@
 
 			cite,
 			footer {
-				/* 
-				 * This requires a rem-based font size calculation instead of our normal em-based one, 
-				 * because the cite tag sometimes gets wrapped in a p tag. This is equivalent to $font-size_xs. 
+				/*
+				 * This requires a rem-based font size calculation instead of our normal em-based one,
+				 * because the cite tag sometimes gets wrapped in a p tag. This is equivalent to $font-size_xs.
 				 */
 				font-size: calc(1rem / (1.25 * #{$font__size-ratio}));
 			}
@@ -443,7 +441,7 @@
 
 		&.alignfull img {
 			width: 100vw;
-			
+
 			@include media(tablet) {
 				margin-left: auto;
 				margin-right: auto;
@@ -581,7 +579,8 @@
 	//! Table
 	.wp-block-table {
 
-		td, th {
+		th,
+		td {
 			border-color: $color__text-light;
 		}
 	}
@@ -609,14 +608,12 @@
 			}
 
 			&:hover {
-				cursor: pointer;
-			}
-
-			&:hover, &:focus {
 				background: $color__background-button-hover;
+				cursor: pointer;
 			}
 
 			&:focus {
+				background: $color__background-button-hover;
 				outline: thin dotted;
 				outline-offset: -4px;
 			}

sass/elements/_elements.scss

@@ -41,12 +41,18 @@ a:focus {
 	text-decoration: underline;
 }
 
-h1, h2, h3, h4, h5, h6 {
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
 	clear: both;
 	margin: $size__spacing-unit 0;
 }
 
-h1:not(.site-title), h2 {
+h1:not(.site-title),
+h2 {
 	@include post-section-dash;
 }
 

sass/elements/_tables.scss

@@ -3,7 +3,8 @@ table {
 	border-collapse: collapse;
 	width: 100%;
 
-	td, th {
+	td,
+	th {
 		padding: 0.5em;
 		border: 1px solid $color__text-light;
 		word-break: break-all;

sass/navigation/_next-previous.scss

@@ -4,12 +4,12 @@
 .post-navigation {
 
 	margin: calc(3 * 1rem) 0;
-	
+
 	@include media(tablet) {
 		margin: calc(3 * 1rem) $size__site-margins;
 		max-width: calc(6 * (100vw / 12));
 	}
-	
+
 	@include media(desktop) {
 		margin: calc(3 * 1rem) 0;
 		max-width: 100%;
@@ -21,7 +21,7 @@
 		max-width: 100%;
 		display: flex;
 		flex-direction: column;
-		
+
 		@include media(tablet) {
 			margin: 0;
 		}

sass/site/header/_site-featured-image.scss

@@ -1,7 +1,7 @@
 // Featured image styles
 
 .site-header.featured-image {
-	
+
 	/* Hide overflow for overflowing featured image */
 	overflow: hidden;
 
@@ -63,7 +63,7 @@
 
 	/* Entry header */
 	.site-featured-image {
-		
+
 		/* First layer: grayscale. */
 		.post-thumbnail img {
 			height: auto;
@@ -76,7 +76,7 @@
 			transform: translateX(-50%) translateY(-50%);
 			width: auto;
 			z-index: 1;
-			
+
 			@supports ( object-fit: cover ) {
 				height: 100%;
 				left: 0;
@@ -85,15 +85,15 @@
 				transform: none;
 				width: 100%;
 			}
-			
+
 			/* When image filters are active, make it grayscale to colorize it blue. */
 			.image-filters-enabled & {
 				filter: grayscale(100%);
 			}
 		}
-	
+
 		.entry-header {
-			
+
 			margin-top: calc( 4 * #{$size__spacing-unit});
 			margin-bottom: 0;
 			margin-left: 0;
@@ -232,8 +232,8 @@
 	}
 
 	/* Third layer: multiply. */
-  	/* When image filters are inactive, a black overlay is added. */
-  	.site-featured-image:after {
+	/* When image filters are inactive, a black overlay is added. */
+	.site-featured-image:after {
 		background: #000;
 		mix-blend-mode: multiply;
 		opacity: .7;
@@ -272,7 +272,7 @@
 		 * but smooth effect when resizing the screen.
 		 */
 		transition: opacity 1200ms ease-in-out;
-	  	opacity: 0.7;
+		opacity: 0.7;
 		z-index: 5;
 
 		/* When image filters are active, a blue overlay is added. */

sass/site/primary/_posts-and-pages.scss

@@ -130,7 +130,6 @@
 				width: 100%;
 			}
 		}
-
 	}
 
 	.image-filters-enabled & {
@@ -160,7 +159,8 @@
 				}
 			}
 
-			&:before, &:after {
+			&:before,
+			&:after, {
 				position: absolute;
 				display: block;
 				width: 100%;

sass/typography/_copy.scss

@@ -3,7 +3,10 @@ p {
 	-moz-osx-font-smoothing: grayscale;
 }
 
-dfn, cite, em, i {
+dfn,
+cite,
+em,
+i {
 	font-style: italic;
 }
 
@@ -23,7 +26,10 @@ pre {
 	overflow: auto;
 }
 
-code, kbd, tt, var {
+code,
+kbd,
+tt,
+var {
 	font-size: $font__size-sm;
 	font-family: $font__code;
 }
@@ -33,7 +39,8 @@ abbr, acronym {
 	cursor: help;
 }
 
-mark, ins {
+mark,
+ins {
 	background: #fff9c0;
 	text-decoration: none;
 }

sass/typography/_headings.scss

@@ -10,7 +10,12 @@ h2.author-title,
 .comment-author .fn,
 .no-comments,
 .site-title,
-h1, h2, h3, h4, h5, h6 {
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
 	font-family: $font__heading;
 	font-weight: 700;
 	letter-spacing: -0.02em;