From 2fcb2b8db70ce8c3bc34c01f6666048337fe244a Mon Sep 17 00:00:00 2001
From: Ahmed Abdelhalim <pm@a14m.dev>
Date: Tue, 4 May 2021 14:37:25 +0200
Subject: Initial header styling

---
 app/assets/index.html | 20 +++++++++++---------
 app/base.styl         | 43 +++++++++++++++++++++++++++++++++++++++++++
 app/print.styl        |  8 ++++++++
 3 files changed, 62 insertions(+), 9 deletions(-)

diff --git a/app/assets/index.html b/app/assets/index.html
index 2ede984..d753253 100644
--- a/app/assets/index.html
+++ b/app/assets/index.html
@@ -19,16 +19,18 @@
     <main>
       <header>
         <h1>Ahmed AbdelHalim</h1>
-        <em>Senior Software Developer · DevOps</em>
+        <em>Senior Software Developer &centerdot; DevOps</em>
         <address>
-          Berlin, Germany<br />
-          <a href="tel:+491770126386">+49 (0)177 912 6386</a>
-          <a href="mailto:a14m@pm.me">a14m@pm.me</a>
-          <a href="http://a14m.me"><abbr>A14M</abbr></a>
-          <a href="https://sr.ht/~a14m"><abbr>A14M</abbr></a>
-          <a href="https://github.com/a14m"><abbr>A14M</abbr></a>
-          <a href="https://stackoverflow.com/users/1769515/a14m"><abbr>A14M</abbr></a>
-          <a href="https://www.linkedin.com/in/a14m"><abbr>A14M</abbr></a>
+          <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:a14m@pm.me">a14m@pm.me</a>&nbsp;&centerdot;&nbsp;</div>
+          <div class="web"><a href="http://a14m.me">website</a>&nbsp;&centerdot;&nbsp;</div>
+          <div class="srht"><a href="https://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">
+            <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>
         </address>
       </header>
 
diff --git a/app/base.styl b/app/base.styl
index e69de29..56f20f6 100644
--- a/app/base.styl
+++ b/app/base.styl
@@ -0,0 +1,43 @@
+baseColor = #000000
+backgroundColor = #FFFFFF
+secondaryColor = #FB4485
+
+body {
+  font-family: "PT Sans"
+  color: baseColor
+  margin: 1cm 1.5cm
+}
+
+a:link, a:visited, a:hover, a:active {
+  text-decoration: none
+  color: inherit
+  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 }
+  }
+}
diff --git a/app/print.styl b/app/print.styl
index e69de29..a4198b2 100644
--- a/app/print.styl
+++ b/app/print.styl
@@ -0,0 +1,8 @@
+// Header section styling
+header {
+  // Address/Contacts
+  address {
+    .tel { display: inline }
+    .web { display: inline }
+  }
+}
-- 
cgit v1.2.3