From 8d83b47495873bdeaac56c0a7dc018fd302e9911 Mon Sep 17 00:00:00 2001
From: eupiteco <eupiteco@gmail.com>
Date: Wed, 5 Sep 2018 22:01:20 -0300
Subject: [PATCH] header display :before is now a mixin

---
 _site/assets/styles/main.css     |  2 +-
 _site/assets/styles/vars.scss    | 12 ++++++++++++
 _site/assets/styles/visuals.scss | 16 ++++------------
 assets/styles/vars.scss          | 12 ++++++++++++
 assets/styles/visuals.scss       | 16 ++++------------
 5 files changed, 33 insertions(+), 25 deletions(-)

diff --git a/_site/assets/styles/main.css b/_site/assets/styles/main.css
index a4835bc..6639424 100644
--- a/_site/assets/styles/main.css
+++ b/_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; }
 
diff --git a/_site/assets/styles/vars.scss b/_site/assets/styles/vars.scss
index be6081c..59321e8 100644
--- a/_site/assets/styles/vars.scss
+++ b/_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;
+}
diff --git a/_site/assets/styles/visuals.scss b/_site/assets/styles/visuals.scss
index 9ebbc30..3c05f59 100644
--- a/_site/assets/styles/visuals.scss
+++ b/_site/assets/styles/visuals.scss
@@ -24,33 +24,25 @@
 
 h1.header-display {
 	&::before {
-		height: 3.75rem; // 150% of text-size
-		transform: translate(-15px, 0);
-		margin-bottom: -0.937rem; // 25% of height
+		@include headerDisplayBefore(2.5rem);
 	}
 }
 
 h2.header-display {
 	&::before {
-		height: 3rem;
-		transform: translate(-15px, 0);
-		margin-bottom: -0.75rem;
+		@include headerDisplayBefore(2rem);
 	}
 }
 
 h3.header-display {
 	&::before {
-		height: 2.625rem;
-		transform: translate(-15px, 0);
-		margin-bottom: -0.65625rem;
+		@include headerDisplayBefore(1.75rem);
 	}
 }
 
 h4.header-display {
 	&::before {
-		height: 2.25rem;
-		transform: translate(-15px, 0);
-		margin-bottom: -0.5625rem;
+		@include headerDisplayBefore(1.5rem);
 	}
 }
 
diff --git a/assets/styles/vars.scss b/assets/styles/vars.scss
index be6081c..59321e8 100644
--- a/assets/styles/vars.scss
+++ b/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;
+}
diff --git a/assets/styles/visuals.scss b/assets/styles/visuals.scss
index 9ebbc30..3c05f59 100644
--- a/assets/styles/visuals.scss
+++ b/assets/styles/visuals.scss
@@ -24,33 +24,25 @@
 
 h1.header-display {
 	&::before {
-		height: 3.75rem; // 150% of text-size
-		transform: translate(-15px, 0);
-		margin-bottom: -0.937rem; // 25% of height
+		@include headerDisplayBefore(2.5rem);
 	}
 }
 
 h2.header-display {
 	&::before {
-		height: 3rem;
-		transform: translate(-15px, 0);
-		margin-bottom: -0.75rem;
+		@include headerDisplayBefore(2rem);
 	}
 }
 
 h3.header-display {
 	&::before {
-		height: 2.625rem;
-		transform: translate(-15px, 0);
-		margin-bottom: -0.65625rem;
+		@include headerDisplayBefore(1.75rem);
 	}
 }
 
 h4.header-display {
 	&::before {
-		height: 2.25rem;
-		transform: translate(-15px, 0);
-		margin-bottom: -0.5625rem;
+		@include headerDisplayBefore(1.5rem);
 	}
 }