Convert the skills section to use BEM convention

6 files changed, 70 insertions, 62 deletions

diff --git a/app/assets/index.html b/app/assets/index.html
index a8a633c..871a859 100644
--- a/app/assets/index.html
+++ b/app/assets/index.html
@@ -60,43 +60,43 @@
       </article>
       <article class="skills">
         <h1 class="skills__header section-header">Skills</h1>
-        <dl>
-          <dt>DevOps</dt>
-          <dd>Ansible, Terraform, Docker, Vagrant, Makefile, certbot.</dd>
+        <dl class="skills__content">
+          <dt class="skills__content__title">DevOps</dt>
+          <dd class="skills__content__items">Ansible, Terraform, Docker, Vagrant, Makefile, certbot.</dd>
 
-          <dt>Back-end</dt>
-          <dd>Ruby on Rails, PostgreSQL, Redis, MongoDB, MySQL, Django.</dd>
+          <dt class="skills__content__title">Back-end</dt>
+          <dd class="skills__content__items">Ruby on Rails, PostgreSQL, Redis, MongoDB, MySQL, Django.</dd>
 
-          <dt>Front-end</dt>
-          <dd>ReactJS, HTML5, Next.js, StimulusJS, TypeScript.</dd>
+          <dt class="skills__content__title">Front-end</dt>
+          <dd class="skills__content__items">ReactJS, HTML5, Next.js, StimulusJS, TypeScript.</dd>
 
-          <dt>Programming</dt>
-          <dd>Ruby, Python, Bash, TypeScript, Rust.</dd>
+          <dt class="skills__content__title">Programming</dt>
+          <dd class="skills__content__items">Ruby, Python, Bash, TypeScript, Rust.</dd>
 
-          <dt>Paradigms</dt>
-          <dd>
+          <dt class="skills__content__title">Paradigms</dt>
+          <dd class="skills__content__items">
             Design Patterns, Test Driven Development (<abbr>TDD</abbr>), Behavior Driven Development (<abbr>BDD</abbr>),
             Continuous Integration and Delivery (<abbr>CI/CD</abbr>), RESTful APIs.
           </dd>
 
-          <dt>Tools</dt>
-          <dd>
+          <dt class="skills__content__title">Tools</dt>
+          <dd class="skills__content__items">
             Vim, Git, tmux, ssh, Asana, Atlassian, CircleCI, TravisCI, Terminal, bash, Notion, Sidekiq, ...
           </dd>
 
-          <dt>Security</dt>
-          <dd>
+          <dt class="skills__content__title">Security</dt>
+          <dd class="skills__content__items">
             nc, nmap, curl, ffuf, gobuster, sqlmap, xxd, searchsploit, meta-sploit, commix, gdb, ltrace, ...
           </dd>
 
-          <dt>Platforms</dt>
-          <dd>
+          <dt class="skills__content__title">Platforms</dt>
+          <dd class="skills__content__items">
             Amazon Web Services (<abbr>AWS</abbr>), DigitalOcean, Heroku, Google Cloud Platform (<abbr>GCP</abbr>),
             Ubuntu/CentOS/ParrotOS Linux.
           </dd>
 
-          <dt>Languages</dt>
-          <dd>English (Professional), German (Basic), Arabic (Native).</dd>
+          <dt class="skills__content__title">Languages</dt>
+          <dd class="skills__content__items">English (Professional), German (Basic), Arabic (Native).</dd>
         </dl>
       </article>
 
diff --git a/app/base.styl b/app/base.styl
index b135591..88894c5 100644
--- a/app/base.styl
+++ b/app/base.styl
@@ -44,32 +44,7 @@ a:link, a:visited, a:hover, a:active {
 
 @require "stylesheets/web/header.styl"
 @require "stylesheets/web/summary.styl"
-
-.skills {
-  dl {
-    display: flex
-    flex-flow: row wrap
-  }
-
-  dt {
-    min-width: 15%
-    font-weight: 900
-    text-align: right
-    @media screen and (max-width: 740px) {
-      text-align: left
-    }
-  }
-
-  dd {
-    width: 80%
-    margin-left: 30px
-    margin-bottom: 0.1em
-    @media screen and (max-width: 740px) {
-      margin-bottom: 1em
-      width: 100%
-    }
-  }
-}
+@require "stylesheets/web/skills.styl"
 
 .work {
   article {
diff --git a/app/media.styl b/app/media.styl
index 0f8eb63..82e4a85 100644
--- a/app/media.styl
+++ b/app/media.styl
@@ -12,3 +12,13 @@
   }
 }
 
+@media screen and (max-width: 780px) {
+  .skills__content__title {
+    text-align: left
+  }
+
+  .skills__content__items {
+    margin-bottom: 1em
+    width: 100%
+  }
+}
diff --git a/app/print.styl b/app/print.styl
index 86c20b8..8642f61 100644
--- a/app/print.styl
+++ b/app/print.styl
@@ -1,6 +1,6 @@
 @page {
-  padding-left: 1cm
-  padding-right: 1cm
+  margin-left: 1cm
+  margin-right: 1cm
   padding-top: 1cm
   padding-bottom: 0.3cm
 }
@@ -16,21 +16,7 @@ body {
 
 @require "stylesheets/print/header.styl"
 @require "stylesheets/print/summary.styl"
-
-.skills {
-  dl {
-    margin-top: 1.5em
-  }
-  dt {
-    min-width: 12%
-  }
-
-  dd {
-    width: 80%
-    margin-left: 20px
-    margin-bottom: 0
-  }
-}
+@require "stylesheets/print/skills.styl"
 
 .work {
   // avoid page breaks inside a work experience section
diff --git a/app/stylesheets/print/skills.styl b/app/stylesheets/print/skills.styl
new file mode 100644
index 0000000..63c04d6
--- /dev/null
+++ b/app/stylesheets/print/skills.styl
@@ -0,0 +1,13 @@
+.skills__content {
+  margin-top: 1.5em
+}
+
+.skills__content__title {
+  min-width: 12%
+  margin-left: 15px
+}
+
+.skills__content__items {
+  margin-bottom: 0.1em
+  margin-left: 15px
+}
diff --git a/app/stylesheets/web/skills.styl b/app/stylesheets/web/skills.styl
new file mode 100644
index 0000000..9432b96
--- /dev/null
+++ b/app/stylesheets/web/skills.styl
@@ -0,0 +1,24 @@
+.skills {
+}
+
+.skills__header {
+}
+
+.skills__content {
+  display: flex
+  flex-flow: row wrap
+
+}
+
+.skills__content__title {
+  min-width: 14%
+  text-align: right
+  font-weight: 900
+}
+
+.skills__content__items {
+  width: 80%
+  margin-bottom: 0.1em
+  margin-left: 25px
+}
+