Add the section-header component style

3 files changed, 21 insertions, 22 deletions

diff --git a/app/assets/index.html b/app/assets/index.html
index 5ee3a4d..a8a633c 100644
--- a/app/assets/index.html
+++ b/app/assets/index.html
@@ -59,7 +59,7 @@
         </p>
       </article>
       <article class="skills">
-        <h1>Skills</h1>
+        <h1 class="skills__header section-header">Skills</h1>
         <dl>
           <dt>DevOps</dt>
           <dd>Ansible, Terraform, Docker, Vagrant, Makefile, certbot.</dd>
diff --git a/app/base.styl b/app/base.styl
index 662b7f3..b135591 100644
--- a/app/base.styl
+++ b/app/base.styl
@@ -20,30 +20,31 @@ a:link, a:visited, a:hover, a:active {
   border-bottom: 1px solid secondaryColor
 }
 
-@require "stylesheets/web/header.styl"
-@require "stylesheets/web/summary.styl"
+.section-header {
+  display: flex
+  flex-direction: row
+  margin-bottom: -0.3em
 
-article {
-  h1 {
-    display: flex
-    flex-direction: row
-  }
-
-  h1:before, h1:after {
+  &:before {
     content: "";
     border-bottom: 1px solid
     margin: auto;
-  }
-  h1:before {
-    margin-right: 0.3em
+    margin-right: 0.5em
     flex: 5 5;
   }
-  h1:after {
-    margin-left: 0.3em
+
+  &:after {
+    content: "";
+    border-bottom: 1px solid
+    margin: auto;
+    margin-left: 0.5em
     flex: 100 0;
   }
 }
 
+@require "stylesheets/web/header.styl"
+@require "stylesheets/web/summary.styl"
+
 .skills {
   dl {
     display: flex
diff --git a/app/print.styl b/app/print.styl
index 426ea64..86c20b8 100644
--- a/app/print.styl
+++ b/app/print.styl
@@ -9,16 +9,14 @@ body {
   font-size: 9pt
 }
 
+.section-header {
+  font-size: 18pt
+  margin-bottom: -0.6em
+}
+
 @require "stylesheets/print/header.styl"
 @require "stylesheets/print/summary.styl"
 
-article {
-  h1 {
-    font-size: 18pt
-    margin-bottom: -0.5em
-  }
-}
-
 .skills {
   dl {
     margin-top: 1.5em