Initial header styling

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:[email protected]">[email protected]</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:[email protected]">[email protected]</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 }
+  }
+}