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 @@
Our main typography is Source Sans made by Adobe.
-
-
H1
-
Protect communications from monitoring
-
-
H2
-
Protect communications from monitoring
-
-
H3
-
Protect communications from monitoring
-
-
H4
-
Protect communications from monitoring
-
-
H5
-
Protect communications from monitoring
-
-
H6
-
Protect communications from monitoring
-
+
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;
+ }
+}