From 936e7ebc1e581ec63bc4d4fbea8dd700ce8906de Mon Sep 17 00:00:00 2001
From: Ahmed Abdelhalim <pm@a14m.dev>
Date: Mon, 5 Jul 2021 00:49:58 +0200
Subject: Convert the writing and projects section to use BEM

---
 app/assets/index.html               | 28 ++++++++++++++--------------
 app/base.styl                       | 20 ++------------------
 app/print.styl                      | 19 ++-----------------
 app/stylesheets/print/projects.styl | 12 ++++++++++++
 app/stylesheets/print/writing.styl  | 12 ++++++++++++
 app/stylesheets/web/projects.styl   | 18 ++++++++++++++++++
 app/stylesheets/web/writing.styl    | 18 ++++++++++++++++++
 7 files changed, 78 insertions(+), 49 deletions(-)
 create mode 100644 app/stylesheets/print/projects.styl
 create mode 100644 app/stylesheets/print/writing.styl
 create mode 100644 app/stylesheets/web/projects.styl
 create mode 100644 app/stylesheets/web/writing.styl

diff --git a/app/assets/index.html b/app/assets/index.html
index 871a859..33c68e0 100644
--- a/app/assets/index.html
+++ b/app/assets/index.html
@@ -206,12 +206,12 @@
       </article>
 
       <article class="writing">
-        <h1>Writing</h1>
+        <h1 class="writing__header section-header">Writing</h1>
         <article>
-          <h2>
+          <h2 class="writing__title">
             The Publish/Subscribe Pattern on Rails
           </h2>
-          <p>
+          <p class="writing__content">
             A
             <a href="https://www.toptal.com/ruby-on-rails/the-publish-subscribe-pattern-on-rails">
               Toptal published blog post
@@ -220,10 +220,10 @@
           </p>
         </article>
         <article>
-          <h2>
+          <h2 class="writing__title">
             Clean Code and the Art of Exception Handling
           </h2>
-          <p>
+          <p class="writing__content">
             A
             <a href="https://www.toptal.com/abap/clean-code-and-the-art-of-exception-handling">
               Toptal published blog post
@@ -234,14 +234,14 @@
       </article>
 
       <article class="projects">
-        <h1>Projects</h1>
+        <h1 class="projects__header section-header">Projects</h1>
         <article>
-          <h2>
+          <h2 class="project__title">
             <a href="https://git.sr.ht/~a14m/game-of-life">
               Conway's Game of Life
             </a>
           </h2>
-          <p>
+          <p class="project__content">
             A mono-repo with different command line interface (<abbr>CLI</abbr>) implementations for the
             <a href="https://en.wikipedia.org/wiki/Conway%27s_Game_of_Life">Game of Life</a> in multiple languages
             (currently Ruby/Rust), with the automation for publishing updates to different package managers using a
@@ -249,34 +249,34 @@
           </p>
         </article>
         <article>
-          <h2>
+          <h2 class="project__title">
             <a href="https://git.sr.ht/~a14m/OTW">
               Over The Wire Solutions
             </a>
           </h2>
-          <p>
+          <p class="project__content">
             Solutions for some of the <a href="https://overthewire.org/wargames/">OTW wargames</a>
             documented in a README files
           </p>
         </article>
         <article>
-          <h2>
+          <h2 class="project__title">
             <a href="https://git.sr.ht/~a14m/HTB">
               Hack The Box Solutions
             </a>
           </h2>
-          <p>
+          <p class="project__content">
             Solutions for some of the <a href="https://hackthebox.eu">HTB machines</a>
             documented in a README files (learning security analysis)
           </p>
         </article>
         <article>
-          <h2>
+          <h2 class="project__title">
             <a href="https://git.sr.ht/~a14m/a14m.srht.site">
               a14m.srht.site
             </a>
           </h2>
-          <p>
+          <p class="project__content">
             The source code, and deployment scripts for this website/CV .
           </p>
         </article>
diff --git a/app/base.styl b/app/base.styl
index 88894c5..7603ba1 100644
--- a/app/base.styl
+++ b/app/base.styl
@@ -45,6 +45,8 @@ a:link, a:visited, a:hover, a:active {
 @require "stylesheets/web/header.styl"
 @require "stylesheets/web/summary.styl"
 @require "stylesheets/web/skills.styl"
+@require "stylesheets/web/writing.styl"
+@require "stylesheets/web/projects.styl"
 
 .work {
   article {
@@ -115,24 +117,6 @@ a:link, a:visited, a:hover, a:active {
   }
 }
 
-.writing, .projects {
-  article {
-    // title
-    h2 {
-      margin-bottom: 0
-      font-size: 1.2em
-    }
-
-    // description
-    p {
-      margin-left: 1.2em
-      margin-right: 1.2em
-      margin-top: 0.3em
-      margin-bottom: 1.5em
-    }
-  }
-}
-
 .education {
   article {
     display: flex
diff --git a/app/print.styl b/app/print.styl
index 8642f61..c2173be 100644
--- a/app/print.styl
+++ b/app/print.styl
@@ -17,6 +17,8 @@ body {
 @require "stylesheets/print/header.styl"
 @require "stylesheets/print/summary.styl"
 @require "stylesheets/print/skills.styl"
+@require "stylesheets/print/writing.styl"
+@require "stylesheets/print/projects.styl"
 
 .work {
   // avoid page breaks inside a work experience section
@@ -32,23 +34,6 @@ body {
   }
 }
 
-.writing, .projects {
-  // avoid page breaks inside the writing and projects sections
-  page-break-inside: avoid
-
-  article {
-    // title
-    h2 {
-      margin-top: 1.2em
-    }
-
-    // description
-    p {
-      margin-bottom: -0.4em
-    }
-  }
-}
-
 .education {
   // avoid page breaks inside the education section
   page-break-inside: avoid
diff --git a/app/stylesheets/print/projects.styl b/app/stylesheets/print/projects.styl
new file mode 100644
index 0000000..96f4309
--- /dev/null
+++ b/app/stylesheets/print/projects.styl
@@ -0,0 +1,12 @@
+.projects {
+  page-break-inside: avoid
+}
+
+.projects__header {
+}
+
+.project__title {
+}
+
+.project__content {
+}
diff --git a/app/stylesheets/print/writing.styl b/app/stylesheets/print/writing.styl
new file mode 100644
index 0000000..2f36735
--- /dev/null
+++ b/app/stylesheets/print/writing.styl
@@ -0,0 +1,12 @@
+.writing {
+  page-break-inside: avoid
+}
+
+.writing__header {
+}
+
+.writing__title {
+}
+
+.writing__content {
+}
diff --git a/app/stylesheets/web/projects.styl b/app/stylesheets/web/projects.styl
new file mode 100644
index 0000000..6e8441a
--- /dev/null
+++ b/app/stylesheets/web/projects.styl
@@ -0,0 +1,18 @@
+.projects {
+}
+
+.projects__header {
+}
+
+.project__title {
+  margin-bottom: 0
+  font-size: 1.1em
+
+}
+
+.project__content {
+  margin-left: 1.2em
+  margin-right: 1.2em
+  margin-top: 0.3em
+  margin-bottom: 1.5em
+}
diff --git a/app/stylesheets/web/writing.styl b/app/stylesheets/web/writing.styl
new file mode 100644
index 0000000..3cbf52a
--- /dev/null
+++ b/app/stylesheets/web/writing.styl
@@ -0,0 +1,18 @@
+.writing {
+}
+
+.writing__header {
+}
+
+.writing__title {
+  margin-bottom: 0
+  font-size: 1.1em
+
+}
+
+.writing__content {
+  margin-left: 1.2em
+  margin-right: 1.2em
+  margin-top: 0.3em
+  margin-bottom: 1.5em
+}
-- 
cgit v1.2.3