From 2148f28b1037bfce4fef59057e2fd0ff0a375381 Mon Sep 17 00:00:00 2001
From: eupiteco <eupiteco@gmail.com>
Date: Wed, 5 Sep 2018 21:34:20 -0300
Subject: [PATCH] fixed distance between headers and their labels

---
 _includes/visuals/typography.html | 72 ++++++++++++++++++-------------
 _site/assets/styles/main.css      | 11 +++--
 _site/assets/styles/visuals.scss  | 19 ++++++--
 _site/visuals/index.html          | 72 ++++++++++++++++++-------------
 assets/styles/visuals.scss        | 19 ++++++--
 5 files changed, 119 insertions(+), 74 deletions(-)

diff --git a/_includes/visuals/typography.html b/_includes/visuals/typography.html
index ec3a5a6..0b900f3 100644
--- a/_includes/visuals/typography.html
+++ b/_includes/visuals/typography.html
@@ -3,38 +3,48 @@
     <p class="text-muted">Our main typography is Source Sans made by Adobe.</p>
 </div>
 <div class="row">
-    <div class="col-12">
-        <p class="text-black small text-muted">H1
-					<h1>Protect communications from monitoring</h1>
-				</p>
-        <p class="text-black small text-muted">H2
-					<h2>Protect communications from monitoring</h2>
-				</p>
-        <p class="text-black small text-muted">H3
-					<h3>Protect communications from monitoring</h3>
-				</p>
-        <p class="text-black small text-muted">H4
-					<h4>Protect communications from monitoring</h4>
-				</p>
-        <p class="text-black small text-muted">H5
-					<h5>Protect communications from monitoring</h5>
-				</p>
-        <p class="text-black small text-muted">H6
-					<h6>Protect communications from monitoring</h6>
-				</p>
+    <div class="col-12 typography__headers">
+			<div class="typography__headers__item">
+        <p class="text-black small text-muted">H1</p>
+				<h1>Protect communications from monitoring</h1>
+			</div>
+			<div class="typography__headers__item">
+        <p class="text-black small text-muted">H2</p>
+				<h2>Protect communications from monitoring</h2>
+			</div>
+			<div class="typography__headers__item">
+        <p class="text-black small text-muted">H3</p>
+				<h3>Protect communications from monitoring</h3>
+			</div>
+			<div class="typography__headers__item">
+        <p class="text-black small text-muted">H4</p>
+				<h4>Protect communications from monitoring</h4>
+			</div>
+			<div class="typography__headers__item">
+        <p class="text-black small text-muted">H5</p>
+				<h5>Protect communications from monitoring</h5>
+			</div>
+			<div class="typography__headers__item">
+        <p class="text-black small text-muted">H6</p>
+				<h6>Protect communications from monitoring</h6>
+			</div>
 
-        <p class="text-black small pt-5 text-muted">H1 display
-					<h1 class="header-display color-secondary">I2P Anonymous Network</h1>
-				</p>
-        <p class="text-black small text-muted">H2 display
-					<h2 class="header-display color-secondary">I2P Anonymous Network</h2>
-				</p>
-        <p class="text-black small text-muted">H3 display
-					<h3 class="header-display color-secondary">I2P Anonymous Network</h3>
-				</p>
-        <p class="text-black small text-muted">H4 display
-					<h4 class="header-display color-secondary">I2P Anonymous Network</h4>
-				</p>
+			<div class="typography__headers__item">
+        <p class="text-black small pt-5 text-muted">H1 display</p>
+				<h1 class="header-display color-secondary">I2P Anonymous Network</h1>
+			</div>
+			<div class="typography__headers__item">
+        <p class="text-black small text-muted">H2 display</p>
+				<h2 class="header-display color-secondary">I2P Anonymous Network</h2>
+			</div>
+			<div class="typography__headers__item">
+        <p class="text-black small text-muted">H3 display</p>
+				<h3 class="header-display color-secondary">I2P Anonymous Network</h3>
+			</div>
+			<div class="typography__headers__item">
+        <p class="text-black small text-muted">H4 display</p>
+				<h4 class="header-display color-secondary">I2P Anonymous Network</h4>
+			</div>
     </div>
 </div>
 <div class="row pt-5">
diff --git a/_site/assets/styles/main.css b/_site/assets/styles/main.css
index 2cb43f2..a4835bc 100644
--- a/_site/assets/styles/main.css
+++ b/_site/assets/styles/main.css
@@ -67,16 +67,19 @@
 
 .header-display::before { background: #60AB60; content: " "; display: inline-block; width: 7px; }
 
-h1.header-display::before { height: 3.75rem; transform: translate(-15px, 0.9375rem); }
+h1.header-display::before { height: 3.75rem; transform: translate(-15px, 0); margin-bottom: -0.937rem; }
 
-h2.header-display::before { height: 3rem; transform: translate(-15px, 0.75rem); }
+h2.header-display::before { height: 3rem; transform: translate(-15px, 0); margin-bottom: -0.75rem; }
 
-h3.header-display::before { height: 2.625rem; transform: translate(-15px, 0.65625rem); }
+h3.header-display::before { height: 2.625rem; transform: translate(-15px, 0); margin-bottom: -0.65625rem; }
 
-h4.header-display::before { height: 2.25rem; transform: translate(-15px, 0.5625rem); }
+h4.header-display::before { height: 2.25rem; transform: translate(-15px, 0); margin-bottom: -0.5625rem; }
 
 .icon { font-size: 20px; background-color: #212529; padding: 20px; }
 
+.typography__headers__item { margin-bottom: 2rem; }
+.typography__headers__item p { margin-bottom: 0.5rem !important; }
+
 .alert { border-radius: 15px; }
 .alert-custom { color: #3b4f87; background-color: #e2e6f0; border-color: #6679ac; }
 .alert-custom hr { border-top-color: #6679ac; }
diff --git a/_site/assets/styles/visuals.scss b/_site/assets/styles/visuals.scss
index c6fdef6..9ebbc30 100644
--- a/_site/assets/styles/visuals.scss
+++ b/_site/assets/styles/visuals.scss
@@ -25,28 +25,32 @@
 h1.header-display {
 	&::before {
 		height: 3.75rem; // 150% of text-size
-		transform: translate(-15px, 0.9375rem); // 25% of height
+		transform: translate(-15px, 0);
+		margin-bottom: -0.937rem; // 25% of height
 	}
 }
 
 h2.header-display {
 	&::before {
 		height: 3rem;
-		transform: translate(-15px, 0.75rem);
+		transform: translate(-15px, 0);
+		margin-bottom: -0.75rem;
 	}
 }
 
 h3.header-display {
 	&::before {
 		height: 2.625rem;
-		transform: translate(-15px, 0.65625rem);
+		transform: translate(-15px, 0);
+		margin-bottom: -0.65625rem;
 	}
 }
 
 h4.header-display {
 	&::before {
 		height: 2.25rem;
-		transform: translate(-15px, 0.5625rem);
+		transform: translate(-15px, 0);
+		margin-bottom: -0.5625rem;
 	}
 }
 
@@ -55,3 +59,10 @@ h4.header-display {
   background-color: $oc-gray-9;
   padding: 20px;
 }
+
+.typography__headers__item {
+	margin-bottom: 2rem;
+	p {
+		margin-bottom: 0.5rem !important;
+	}
+}
diff --git a/_site/visuals/index.html b/_site/visuals/index.html
index 180ff14..b17f10c 100644
--- a/_site/visuals/index.html
+++ b/_site/visuals/index.html
@@ -317,38 +317,48 @@
     <p class="text-muted">Our main typography is Source Sans made by Adobe.</p>
 </div>
 <div class="row">
-    <div class="col-12">
-        <p class="text-black small text-muted">H1
-					<h1>Protect communications from monitoring</h1>
-				</p>
-        <p class="text-black small text-muted">H2
-					<h2>Protect communications from monitoring</h2>
-				</p>
-        <p class="text-black small text-muted">H3
-					<h3>Protect communications from monitoring</h3>
-				</p>
-        <p class="text-black small text-muted">H4
-					<h4>Protect communications from monitoring</h4>
-				</p>
-        <p class="text-black small text-muted">H5
-					<h5>Protect communications from monitoring</h5>
-				</p>
-        <p class="text-black small text-muted">H6
-					<h6>Protect communications from monitoring</h6>
-				</p>
+    <div class="col-12 typography__headers">
+			<div class="typography__headers__item">
+        <p class="text-black small text-muted">H1</p>
+				<h1>Protect communications from monitoring</h1>
+			</div>
+			<div class="typography__headers__item">
+        <p class="text-black small text-muted">H2</p>
+				<h2>Protect communications from monitoring</h2>
+			</div>
+			<div class="typography__headers__item">
+        <p class="text-black small text-muted">H3</p>
+				<h3>Protect communications from monitoring</h3>
+			</div>
+			<div class="typography__headers__item">
+        <p class="text-black small text-muted">H4</p>
+				<h4>Protect communications from monitoring</h4>
+			</div>
+			<div class="typography__headers__item">
+        <p class="text-black small text-muted">H5</p>
+				<h5>Protect communications from monitoring</h5>
+			</div>
+			<div class="typography__headers__item">
+        <p class="text-black small text-muted">H6</p>
+				<h6>Protect communications from monitoring</h6>
+			</div>
 
-        <p class="text-black small pt-5 text-muted">H1 display
-					<h1 class="header-display color-secondary">I2P Anonymous Network</h1>
-				</p>
-        <p class="text-black small text-muted">H2 display
-					<h2 class="header-display color-secondary">I2P Anonymous Network</h2>
-				</p>
-        <p class="text-black small text-muted">H3 display
-					<h3 class="header-display color-secondary">I2P Anonymous Network</h3>
-				</p>
-        <p class="text-black small text-muted">H4 display
-					<h4 class="header-display color-secondary">I2P Anonymous Network</h4>
-				</p>
+			<div class="typography__headers__item">
+        <p class="text-black small pt-5 text-muted">H1 display</p>
+				<h1 class="header-display color-secondary">I2P Anonymous Network</h1>
+			</div>
+			<div class="typography__headers__item">
+        <p class="text-black small text-muted">H2 display</p>
+				<h2 class="header-display color-secondary">I2P Anonymous Network</h2>
+			</div>
+			<div class="typography__headers__item">
+        <p class="text-black small text-muted">H3 display</p>
+				<h3 class="header-display color-secondary">I2P Anonymous Network</h3>
+			</div>
+			<div class="typography__headers__item">
+        <p class="text-black small text-muted">H4 display</p>
+				<h4 class="header-display color-secondary">I2P Anonymous Network</h4>
+			</div>
     </div>
 </div>
 <div class="row pt-5">
diff --git a/assets/styles/visuals.scss b/assets/styles/visuals.scss
index c6fdef6..9ebbc30 100644
--- a/assets/styles/visuals.scss
+++ b/assets/styles/visuals.scss
@@ -25,28 +25,32 @@
 h1.header-display {
 	&::before {
 		height: 3.75rem; // 150% of text-size
-		transform: translate(-15px, 0.9375rem); // 25% of height
+		transform: translate(-15px, 0);
+		margin-bottom: -0.937rem; // 25% of height
 	}
 }
 
 h2.header-display {
 	&::before {
 		height: 3rem;
-		transform: translate(-15px, 0.75rem);
+		transform: translate(-15px, 0);
+		margin-bottom: -0.75rem;
 	}
 }
 
 h3.header-display {
 	&::before {
 		height: 2.625rem;
-		transform: translate(-15px, 0.65625rem);
+		transform: translate(-15px, 0);
+		margin-bottom: -0.65625rem;
 	}
 }
 
 h4.header-display {
 	&::before {
 		height: 2.25rem;
-		transform: translate(-15px, 0.5625rem);
+		transform: translate(-15px, 0);
+		margin-bottom: -0.5625rem;
 	}
 }
 
@@ -55,3 +59,10 @@ h4.header-display {
   background-color: $oc-gray-9;
   padding: 20px;
 }
+
+.typography__headers__item {
+	margin-bottom: 2rem;
+	p {
+		margin-bottom: 0.5rem !important;
+	}
+}