Update the header section to use BEM convention

author: Ahmed Abdelhalim <[email protected]> 2021-07-04 18:09:14 +0200
committer: Ahmed Abdelhalim <[email protected]> 2021-07-04 18:09:14 +0200
commit: 3913b19fc08a459ec9ef8f1773ae0c335149a37b (patch)
tree: ad0b5bf8924770f5416fbe32af5c37caca461bab /app
parent: a4a1aec1821b8da2e46eddf7c2113edc38bcd2d9 (diff)
6 files changed, 105 insertions, 81 deletions
diff --git a/app/assets/index.html b/app/assets/index.html
index c15476b..47ea414 100644
--- a/app/assets/index.html
+++ b/app/assets/index.html
@@ -23,20 +23,28 @@
 
   <body>
     <main>
-      <header>
-        <h1>Ahmed AbdelHalim</h1>
-        <em>Senior Software Developer &centerdot; DevOps</em>
-        <address>
-          <div class="loc">Berlin, Germany</div>
-          <div class="tel"><a href="tel:+491770126386">+49 (0)177 912 6386</a>&nbsp;&centerdot;&nbsp;</div>
-          <div class="email"><a href="mailto:[email protected]">[email protected]</a>&nbsp;&centerdot;&nbsp;</div>
-          <div class="web"><a href="https://a14m.me">website</a>&nbsp;&centerdot;&nbsp;</div>
-          <div class="srht"><a href="https://git.sr.ht/~a14m">sr.ht</a>&nbsp;&centerdot;&nbsp;</div>
-          <div class="github"><a href="https://github.com/a14m">Github</a>&nbsp;&centerdot;&nbsp;</div>
-          <div class="stkflw">
+      <header class="header">
+        <h1 class="header__name">Ahmed AbdelHalim</h1>
+        <em class="header__job-title">Senior Software Developer &centerdot; DevOps</em>
+        <address class="header__contact-info">
+          <div class="header__contact-info__location">Berlin, Germany</div>
+          <div class="header__contact-info__tel">
+            <a href="tel:+491770126386">+49 (0)177 912 6386</a>&nbsp;&centerdot;&nbsp;
+          </div>
+          <div class="header__contact-info__email">
+            <a href="mailto:[email protected]">[email protected]</a>&nbsp;&centerdot;&nbsp;
+          </div>
+          <div class="header__contact-info__website"><a href="https://a14m.me">website</a>&nbsp;&centerdot;&nbsp;</div>
+          <div class="header__contact-info__srht">
+            <a href="https://git.sr.ht/~a14m">sr.ht</a>&nbsp;&centerdot;&nbsp;
+          </div>
+          <div class="header__contact-info__github">
+            <a href="https://github.com/a14m">Github</a>&nbsp;&centerdot;&nbsp;
+          </div>
+          <div class="header__contact-info__stackoverflow">
             <a href="https://stackoverflow.com/users/1769515/a14m">StackOverflow</a>&nbsp;&centerdot;&nbsp;
           </div>
-          <div class="lnkdin"><a href="https://www.linkedin.com/in/a14m">LinkedIn</a></div>
+          <div class="header__contact-info__linkedin"><a href="https://www.linkedin.com/in/a14m">LinkedIn</a></div>
         </address>
       </header>
 
@@ -44,11 +52,10 @@
         <h1>Summary</h1>
         <p>
           Current senior backend and infrastructure developer at <a href="https://sapera.com">Sapera GmbH</a>, with 9+
-          years experience in development (backend/API focused), 4+ years in infrastructure automation and DevOps,
-          0+ years Security analysis and Red Team exploit testing.
-          An avid fan of automation, sustainability, design patterns, and clean code. Always interested in deriving a
-          better problem-solving method for challenging tasks, and learning sensible new technologies and tools (if the
-          need arises).
+          years experience in development (backend/API focused), 4+ years in infrastructure automation and DevOps, 0+
+          years Security analysis and Red Team exploit testing. An avid fan of automation, sustainability, design
+          patterns, and clean code. Always interested in deriving a better problem-solving method for challenging tasks,
+          and learning sensible new technologies and tools (if the need arises).
         </p>
       </article>
       <article class="skills">
@@ -173,8 +180,8 @@
             </li>
             <li>
               Reimplemented the &#8220;Extract&#8221; step in the
-              <abbr title="Extract, Transform, Load">ETL</abbr> process (using an API based crawler instead of
-              phantomJS browser).
+              <abbr title="Extract, Transform, Load">ETL</abbr> process (using an API based crawler instead of phantomJS
+              browser).
             </li>
           </ul>
         </article>
diff --git a/app/base.styl b/app/base.styl
index f6edae9..31b12d7 100644
--- a/app/base.styl
+++ b/app/base.styl
@@ -1,25 +1,11 @@
 secondaryColor = #DB0A16
 
-@media (prefers-color-scheme: dark) {
-  html {
-    color: #FFFFFF
-    background-color: #181818
-  }
-}
-
-@media (prefers-color-scheme: light) {
-  html {
-    color: #000000
-    background-color: #FFFFFF
-  }
-}
-
 body {
   font-family: "PT Sans", Arial, sans-serif
   max-width: 1024px
   min-width: 375px
-  margin: 0 auto !important
-  float: none !important
+  margin: 0 auto
+  float: none
 }
 
 main {
@@ -34,33 +20,7 @@ a:link, a:visited, a:hover, a:active {
   border-bottom: 1px solid secondaryColor
 }
 
-// Header section styling
-header {
-  text-align: center
-  line-height: 1.3
-  font-style: normal
-
-  // Name
-  h1 {
-    font-size: 3rem
-    margin-bottom: 0
-  }
-
-  // Position
-  em {
-    font-style: inherit
-  }
-
-  // Address/Contacts
-  address {
-    font-style: inherit
-
-    div { display: inline }
-    .loc { display: block }
-    .tel { display: none }
-    .web { display: none }
-  }
-}
+@require "stylesheets/web/header.styl"
 
 article {
   h1 {
diff --git a/app/media.styl b/app/media.styl
new file mode 100644
index 0000000..0f8eb63
--- /dev/null
+++ b/app/media.styl
@@ -0,0 +1,14 @@
+@media (prefers-color-scheme: dark) {
+  html {
+    color: #FFFFFF
+    background-color: #181818
+  }
+}
+
+@media (prefers-color-scheme: light) {
+  html {
+    color: #000000
+    background-color: #FFFFFF
+  }
+}
+
diff --git a/app/print.styl b/app/print.styl
index c28d6f4..043e442 100644
--- a/app/print.styl
+++ b/app/print.styl
@@ -1,32 +1,15 @@
 @page {
   margin-left: 1cm
   margin-right: 1cm
-  margin-top: 1.5cm
+  margin-top: 1cm
   margin-bottom: 0.3cm
 }
 
 body {
-  margin-left: 0
-  margin-right: 0
   font-size: 9pt
 }
 
-// Header section styling
-header {
-
-  // Name
-  h1 {
-    font-size: 27pt
-    margin-top: 0.2em
-    margin-bottom: 0
-  }
-
-  // Address/Contacts
-  address {
-    .tel { display: inline }
-    .web { display: inline }
-  }
-}
+@require "stylesheets/print/header.styl"
 
 article {
   h1 {
diff --git a/app/stylesheets/print/header.styl b/app/stylesheets/print/header.styl
new file mode 100644
index 0000000..e7a97d3
--- /dev/null
+++ b/app/stylesheets/print/header.styl
@@ -0,0 +1,24 @@
+.header {
+}
+
+.header__name {
+}
+
+.header__job-title {
+}
+
+.header__contact-info {
+}
+
+.header__contact-info__location {
+}
+
+.header__contact-info__tel,
+.header__contact-info__website,
+.header__contact-info__email,
+.header__contact-info__srht,
+.header__contact-info__github,
+.header__contact-info__stackoverflow,
+.header__contact-info__linkedin {
+  display: inline
+}
diff --git a/app/stylesheets/web/header.styl b/app/stylesheets/web/header.styl
new file mode 100644
index 0000000..147c9e3
--- /dev/null
+++ b/app/stylesheets/web/header.styl
@@ -0,0 +1,36 @@
+.header {
+  text-align: center
+  font-style: normal
+}
+
+.header__name {
+  font-size: 3.3em
+  margin-bottom: 0.1em
+}
+
+.header__job-title {
+  font-style: italic
+}
+
+.header__contact-info {
+  font-style: normal
+}
+
+.header__contact-info__location {
+  display: block
+  font-style: italic
+  margin-bottom: 1em
+}
+
+.header__contact-info__tel,
+.header__contact-info__website {
+  display: none
+}
+
+.header__contact-info__email,
+.header__contact-info__srht,
+.header__contact-info__github,
+.header__contact-info__stackoverflow,
+.header__contact-info__linkedin {
+  display: inline
+}
author	Ahmed Abdelhalim <[email protected]>	2021-07-04 18:09:14 +0200
committer	Ahmed Abdelhalim <[email protected]>	2021-07-04 18:09:14 +0200
commit	3913b19fc08a459ec9ef8f1773ae0c335149a37b (patch)
tree	ad0b5bf8924770f5416fbe32af5c37caca461bab /app
parent	a4a1aec1821b8da2e46eddf7c2113edc38bcd2d9 (diff)