From 39932dd71d54055692ba9985a233905f7066be7a Mon Sep 17 00:00:00 2001
From: Ahmed Abdelhalim <pm@a14m.dev>
Date: Sun, 4 Jul 2021 18:43:44 +0200
Subject: Add the section-header component style

---
 app/assets/index.html |  2 +-
 app/base.styl         | 29 +++++++++++++++--------------
 app/print.styl        | 12 +++++-------
 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
-- 
cgit v1.2.3