Refactor header (better BEM)

3 files changed, 23 insertions, 38 deletions

diff --git a/app/assets/index.html b/app/assets/index.html
index 9898d2a..5461ac0 100644
--- a/app/assets/index.html
+++ b/app/assets/index.html
@@ -27,24 +27,24 @@
         <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">
+          <div class="header__location">Berlin, Germany</div>
+          <div class="header__tel">
             <a href="tel:+491770126386">+49 (0)177 912 6386</a>&nbsp;&centerdot;&nbsp;
           </div>
-          <div class="header__contact-info__email">
+          <div class="header__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">
+          <div class="header__website"><a href="https://a14m.me">website</a>&nbsp;&centerdot;&nbsp;</div>
+          <div class="header__srht">
             <a href="https://git.sr.ht/~a14m">sr.ht</a>&nbsp;&centerdot;&nbsp;
           </div>
-          <div class="header__contact-info__github">
+          <div class="header__github">
             <a href="https://github.com/a14m">Github</a>&nbsp;&centerdot;&nbsp;
           </div>
-          <div class="header__contact-info__stackoverflow">
+          <div class="header__stackoverflow">
             <a href="https://stackoverflow.com/users/1769515/a14m">StackOverflow</a>&nbsp;&centerdot;&nbsp;
           </div>
-          <div class="header__contact-info__linkedin"><a href="https://www.linkedin.com/in/a14m">LinkedIn</a></div>
+          <div class="header__linkedin"><a href="https://www.linkedin.com/in/a14m">LinkedIn</a></div>
         </address>
       </header>
 
diff --git a/app/stylesheets/print/header.styl b/app/stylesheets/print/header.styl
index e3b42c8..5b05637 100644
--- a/app/stylesheets/print/header.styl
+++ b/app/stylesheets/print/header.styl
@@ -1,24 +1,9 @@
-.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 {
+.header__tel
+.header__website
+.header__email
+.header__srht
+.header__github
+.header__stackoverflow
+.header__linkedin {
   display: inline
 }
diff --git a/app/stylesheets/web/header.styl b/app/stylesheets/web/header.styl
index 9a5a3f5..3a23a48 100644
--- a/app/stylesheets/web/header.styl
+++ b/app/stylesheets/web/header.styl
@@ -16,21 +16,21 @@
   font-style: normal
 }
 
-.header__contact-info__location {
+.header__location {
   display: block
   font-style: italic
   margin-bottom: 1em
 }
 
-.header__contact-info__tel
-.header__contact-info__website {
+.header__tel
+.header__website {
   display: none
 }
 
-.header__contact-info__email
-.header__contact-info__srht
-.header__contact-info__github
-.header__contact-info__stackoverflow
-.header__contact-info__linkedin {
+.header__email
+.header__srht
+.header__github
+.header__stackoverflow
+.header__linkedin {
   display: inline
 }