header display :before is now a mixin

_site/assets/styles/main.css

@@ -67,7 +67,7 @@
 
 .header-display::before { background: #60AB60; content: " "; display: inline-block; width: 7px; }
 
-h1.header-display::before { height: 3.75rem; transform: translate(-15px, 0); margin-bottom: -0.937rem; }
+h1.header-display::before { height: 3.75rem; transform: translate(-15px, 0); margin-bottom: -0.9375rem; }
 
 h2.header-display::before { height: 3rem; transform: translate(-15px, 0); margin-bottom: -0.75rem; }
 

_site/assets/styles/vars.scss

@@ -46,3 +46,15 @@ $oc-gray-6: map-get($oc-gray-list, "6");
 $oc-gray-7: map-get($oc-gray-list, "7");
 $oc-gray-8: map-get($oc-gray-list, "8");
 $oc-gray-9: map-get($oc-gray-list, "9");
+
+// Mixins
+//
+// .header-display :before size and position
+@mixin headerDisplayBefore($size) {
+	$height: $size * 1.5;
+	$horizontalAlignment: -15px;
+	$verticalAlignment: $height * -0.25;
+	height: $height;
+	transform: translate($horizontalAlignment, 0);
+	margin-bottom: $verticalAlignment;
+}

_site/assets/styles/visuals.scss

@@ -24,33 +24,25 @@
 
 h1.header-display {
 	&::before {
-		height: 3.75rem; // 150% of text-size
+		@include headerDisplayBefore(2.5rem);
-		transform: translate(-15px, 0);
-		margin-bottom: -0.937rem; // 25% of height
 	}
 }
 
 h2.header-display {
 	&::before {
-		height: 3rem;
+		@include headerDisplayBefore(2rem);
-		transform: translate(-15px, 0);
-		margin-bottom: -0.75rem;
 	}
 }
 
 h3.header-display {
 	&::before {
-		height: 2.625rem;
+		@include headerDisplayBefore(1.75rem);
-		transform: translate(-15px, 0);
-		margin-bottom: -0.65625rem;
 	}
 }
 
 h4.header-display {
 	&::before {
-		height: 2.25rem;
+		@include headerDisplayBefore(1.5rem);
-		transform: translate(-15px, 0);
-		margin-bottom: -0.5625rem;
 	}
 }
 

assets/styles/vars.scss

@@ -46,3 +46,15 @@ $oc-gray-6: map-get($oc-gray-list, "6");
 $oc-gray-7: map-get($oc-gray-list, "7");
 $oc-gray-8: map-get($oc-gray-list, "8");
 $oc-gray-9: map-get($oc-gray-list, "9");
+
+// Mixins
+//
+// .header-display :before size and position
+@mixin headerDisplayBefore($size) {
+	$height: $size * 1.5;
+	$horizontalAlignment: -15px;
+	$verticalAlignment: $height * -0.25;
+	height: $height;
+	transform: translate($horizontalAlignment, 0);
+	margin-bottom: $verticalAlignment;
+}

assets/styles/visuals.scss

@@ -24,33 +24,25 @@
 
 h1.header-display {
 	&::before {
-		height: 3.75rem; // 150% of text-size
+		@include headerDisplayBefore(2.5rem);
-		transform: translate(-15px, 0);
-		margin-bottom: -0.937rem; // 25% of height
 	}
 }
 
 h2.header-display {
 	&::before {
-		height: 3rem;
+		@include headerDisplayBefore(2rem);
-		transform: translate(-15px, 0);
-		margin-bottom: -0.75rem;
 	}
 }
 
 h3.header-display {
 	&::before {
-		height: 2.625rem;
+		@include headerDisplayBefore(1.75rem);
-		transform: translate(-15px, 0);
-		margin-bottom: -0.65625rem;
 	}
 }
 
 h4.header-display {
 	&::before {
-		height: 2.25rem;
+		@include headerDisplayBefore(1.5rem);
-		transform: translate(-15px, 0);
-		margin-bottom: -0.5625rem;
 	}
 }