Issue#934

src/css/base/_all.scss

@@ -7,7 +7,7 @@
 *::before,
 *::after {
 	box-sizing: border-box;
-	margin: 0;
-	padding: 0;
+	margin: $m-0;
+	padding: $p-0;
 	vertical-align: baseline;
 }

src/css/base/_html.scss

@@ -11,9 +11,9 @@ html {
 	font-size: $global-type-size;
 	font-weight: $font-weight-regular;
 	line-height: $line-height-loose;
-	margin: 0;
+	margin: $m-0;
 	min-height: 100%;
-	padding: 0;
+	padding: $p-0;
 	text-size-adjust: 100%;
 
 	// Typography

src/css/base/_resets.scss

@@ -4,18 +4,15 @@
 //
 // Styleguide Base.resets
 
-
 a img {
 	border: none; // Removes borders from linked images
 }
 
-
 abbr[title],
 dfn[title] {
 	cursor: help; // Give a help cursor to elements that give extra info on `:hover`.
 }
 
-
 b,
 strong {
 	font-weight: $font-weight-bold;
@@ -26,19 +23,17 @@ strong {
 	}
 }
 
-
 button,
 input[type="button"] {
 	border: 0;
 
 	// Vendor
 	&::-moz-focus-inner {
 		border: 0;
-		padding: 0;
+		padding: $p-0;
 	}
 }
 
-
 em,
 cite,
 i {
@@ -52,7 +47,6 @@ i {
 	}
 }
 
-
 iframe,
 object,
 audio,
@@ -61,7 +55,6 @@ canvas {
 	@include responsify();
 }
 
-
 img,
 figure,
 picture {
@@ -79,7 +72,6 @@ picture {
 	// TODO: Broken images fallback: https://bitsofco.de/styling-broken-images/
 }
 
-
 h1,
 h2,
 h3,
@@ -94,7 +86,6 @@ ins {
 	text-decoration: none;
 }
 
-
 // Selects all content in a read-only input field
 input:not([type="button"]):not([type="checkbox"]):not([type="radio"]),
 textarea {
@@ -103,12 +94,10 @@ textarea {
 	}
 }
 
-
 label {
 	cursor: pointer;
 }
 
-
 // Prevent zooming on mobile viewports when tapped
 input[type="text"],
 input[type="email"],
@@ -134,7 +123,6 @@ mark {
 	@include var(color, mark-text);
 }
 
-
 sub {
 	text-transform: lowercase;
 	font-size: inherit;
@@ -146,7 +134,7 @@ sub {
 		-webkit-font-feature-settings: "subs", "subs";
 		font-feature-settings: "subs", "subs";
 
-		@supports ((-webkit-font-feature-settings: "subs") or (font-feature-settings: "subs")) {
+		@supports ((-webkit-font-feature-settings: "subs") or (font-feature-settings:"subs")) {
 			vertical-align: baseline;
 		}
 
@@ -157,7 +145,6 @@ sub {
 	}
 }
 
-
 sup {
 	text-transform: lowercase;
 	font-variant-position: super;
@@ -178,7 +165,6 @@ sup {
 	}
 }
 
-
 // Remove default table spacing
 table {
 	border-collapse: collapse;
@@ -222,7 +208,6 @@ table {
 	}
 
 	tbody {
-
 		tr {
 			th {
 				font-weight: $font-weight-regular;
@@ -231,13 +216,11 @@ table {
 	}
 }
 
-
 textarea {
 	overflow: auto;
 	resize: vertical;
 }
 
-
 time {
 	font-variant-numeric: tabular-nums;
 
@@ -276,7 +259,6 @@ time {
 	}
 }
 
-
 var {
 	font-style: normal;
 }

src/css/components/_c-a11y-summary.scss

@@ -23,8 +23,8 @@
 }
 
 .c-a11y-summary__explanation {
-	margin-top: 0;
-	margin-bottom: 0;
+	margin-top: $m-0;
+	margin-bottom: $m-0;
 	text-align: center;
 
 	// Breakpoints
@@ -74,7 +74,7 @@
 .c-a11y-summary__mission {
 	font-family: $font-family-secondary;
 	font-size: $font-size-body;
-	margin-top: 2rem;
+	margin-top: $m-4;
 	max-width: 40ch;
 	text-align: center;
 

src/css/components/_c-banner.scss

@@ -1,6 +1,5 @@
 $_banner-triangle-size: 1.49rem;
 
-
 .c-banner {
 	@include var(background-color, card-accent);
 	background-image: url("#{$path-to-img}/resource-banner-inset-lightmode.svg");
@@ -10,7 +9,7 @@ $_banner-triangle-size: 1.49rem;
 	font-family: $font-family-secondary;
 	letter-spacing: $font-tracking-slight;
 	line-height: $line-height-single;
-	margin-top: 1.5rem;
+	margin-top: $m-3;
 	padding: 0.1rem 1rem 0.6rem 0.3rem;
 
 	// [1] Magic number to position the triangle
@@ -26,28 +25,28 @@ $_banner-triangle-size: 1.49rem;
 		right: 0.275rem; // [1]
 		z-index: -1;
 
-			// User Queries
+		// User Queries
 		@media screen and (-ms-high-contrast: active) {
 			display: none;
 		}
 	}
 
-  @media (prefers-color-scheme: dark) {
-    :root:not([data-user-theme="light"]) & {
+	@media (prefers-color-scheme: dark) {
+		:root:not([data-user-theme="light"]) & {
 			background-image: url("#{$path-to-img}/resource-banner-inset-darkmode.svg");
-    }
-  }
+		}
+	}
 
-  [data-user-theme="dark"] &  {
+	[data-user-theme="dark"] & {
 		background-image: url("#{$path-to-img}/resource-banner-inset-darkmode.svg");
-  }
+	}
 
 	// Contexts
 	&.c-banner--resource {
 		@include var(background-color, featured-card-accent);
 		background-image: none;
 		@include var(color, featured-card-accent-text);
-		margin-top: 0;
+		margin-top: $m-0;
 
 		&::before {
 			@include var(border-right-color, featured-card-accent-shadow);
@@ -56,11 +55,10 @@ $_banner-triangle-size: 1.49rem;
 
 	&.c-banner--post {
 		background-image: none;
-		margin-top: 0;
+		margin-top: $m-0;
 	}
 }
 
-
 .c-banner__icon {
 	fill: currentColor;
 	height: 0.75rem;

src/css/components/_c-card-resource.scss

@@ -7,7 +7,7 @@
 .c-card-resource__body {
 	@include var(background-color, card-background);
 	margin-right: 1.25rem;
-	margin-left: 1.5rem;
+	margin-left: $m-3;
 	padding: 1.5rem 2rem;
 	transition:
 		$animation-duration-shorter $animation-easing-character background-color,
@@ -31,7 +31,6 @@
 	}
 }
 
-
 .c-card-resource__title {
 	@include var(color, card-heading-text);
 	letter-spacing: $font-tracking-tight;
@@ -47,13 +46,11 @@
 	}
 }
 
-
 .c-card-resource__meta {
 	@include var(color, card-meta-text);
 	line-height: $line-height-tight;
 }
 
-
 .c-card-resource__description {
 	max-width: $global-type-measure;
 }

src/css/components/_c-card.scss

@@ -2,6 +2,6 @@ $_card-inset: 1.5rem;
 $_card-outline: $border-thinner solid;
 
 .c-card__wrapper {
-	margin-bottom: 3rem;
+	margin-bottom: $m-6;
 	max-width: $global-type-measure * 1.1;
 }

src/css/components/_c-changelog.scss

@@ -1,11 +1,10 @@
 .c-changelog__version {
 	@include var(background-color, tag-background);
 	border-radius: 0.25rem;
-	margin-right: 0.5rem;
+	margin-right: $m-1;
 	padding: 0.25rem 0.5rem;
 }
 
-
 .c-changelog__date {
 	@include var(color, text-accent);
 	font-size: $font-size-body-small;