From 3913b19fc08a459ec9ef8f1773ae0c335149a37b Mon Sep 17 00:00:00 2001 From: Ahmed Abdelhalim Date: Sun, 4 Jul 2021 18:09:14 +0200 Subject: Update the header section to use BEM convention --- app/assets/index.html | 45 ++++++++++++++++++++++---------------- app/base.styl | 46 +++------------------------------------ app/media.styl | 14 ++++++++++++ app/print.styl | 21 ++---------------- app/stylesheets/print/header.styl | 24 ++++++++++++++++++++ app/stylesheets/web/header.styl | 36 ++++++++++++++++++++++++++++++ brunch-config.js | 2 +- 7 files changed, 106 insertions(+), 82 deletions(-) create mode 100644 app/media.styl create mode 100644 app/stylesheets/print/header.styl create mode 100644 app/stylesheets/web/header.styl diff --git a/app/assets/index.html b/app/assets/index.html index c15476b..47ea414 100644 --- a/app/assets/index.html +++ b/app/assets/index.html @@ -23,20 +23,28 @@
-
-

Ahmed AbdelHalim

- Senior Software Developer · DevOps -
-
Berlin, Germany
-
+49 (0)177 912 6386 · 
- -
website · 
-
sr.ht · 
-
Github · 
-
+
+

Ahmed AbdelHalim

+ Senior Software Developer · DevOps +
+
Berlin, Germany
+
+ +49 (0)177 912 6386 ·  +
+ +
website · 
+
+ sr.ht ·  +
+
+ Github ·  +
+
StackOverflow · 
-
LinkedIn
+
LinkedIn
@@ -44,11 +52,10 @@

Summary

Current senior backend and infrastructure developer at Sapera GmbH, with 9+ - years experience in development (backend/API focused), 4+ years in infrastructure automation and DevOps, - 0+ years Security analysis and Red Team exploit testing. - An avid fan of automation, sustainability, design patterns, and clean code. Always interested in deriving a - better problem-solving method for challenging tasks, and learning sensible new technologies and tools (if the - need arises). + years experience in development (backend/API focused), 4+ years in infrastructure automation and DevOps, 0+ + years Security analysis and Red Team exploit testing. An avid fan of automation, sustainability, design + patterns, and clean code. Always interested in deriving a better problem-solving method for challenging tasks, + and learning sensible new technologies and tools (if the need arises).

@@ -173,8 +180,8 @@
  • Reimplemented the “Extract” step in the - ETL process (using an API based crawler instead of - phantomJS browser). + ETL process (using an API based crawler instead of phantomJS + browser).
    • diff --git a/app/base.styl b/app/base.styl index f6edae9..31b12d7 100644 --- a/app/base.styl +++ b/app/base.styl @@ -1,25 +1,11 @@ secondaryColor = #DB0A16 -@media (prefers-color-scheme: dark) { - html { - color: #FFFFFF - background-color: #181818 - } -} - -@media (prefers-color-scheme: light) { - html { - color: #000000 - background-color: #FFFFFF - } -} - body { font-family: "PT Sans", Arial, sans-serif max-width: 1024px min-width: 375px - margin: 0 auto !important - float: none !important + margin: 0 auto + float: none } main { @@ -34,33 +20,7 @@ a:link, a:visited, a:hover, a:active { 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 } - } -} +@require "stylesheets/web/header.styl" article { h1 { diff --git a/app/media.styl b/app/media.styl new file mode 100644 index 0000000..0f8eb63 --- /dev/null +++ b/app/media.styl @@ -0,0 +1,14 @@ +@media (prefers-color-scheme: dark) { + html { + color: #FFFFFF + background-color: #181818 + } +} + +@media (prefers-color-scheme: light) { + html { + color: #000000 + background-color: #FFFFFF + } +} + diff --git a/app/print.styl b/app/print.styl index c28d6f4..043e442 100644 --- a/app/print.styl +++ b/app/print.styl @@ -1,32 +1,15 @@ @page { margin-left: 1cm margin-right: 1cm - margin-top: 1.5cm + margin-top: 1cm margin-bottom: 0.3cm } body { - margin-left: 0 - margin-right: 0 font-size: 9pt } -// Header section styling -header { - - // Name - h1 { - font-size: 27pt - margin-top: 0.2em - margin-bottom: 0 - } - - // Address/Contacts - address { - .tel { display: inline } - .web { display: inline } - } -} +@require "stylesheets/print/header.styl" article { h1 { diff --git a/app/stylesheets/print/header.styl b/app/stylesheets/print/header.styl new file mode 100644 index 0000000..e7a97d3 --- /dev/null +++ b/app/stylesheets/print/header.styl @@ -0,0 +1,24 @@ +.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 { + display: inline +} diff --git a/app/stylesheets/web/header.styl b/app/stylesheets/web/header.styl new file mode 100644 index 0000000..147c9e3 --- /dev/null +++ b/app/stylesheets/web/header.styl @@ -0,0 +1,36 @@ +.header { + text-align: center + font-style: normal +} + +.header__name { + font-size: 3.3em + margin-bottom: 0.1em +} + +.header__job-title { + font-style: italic +} + +.header__contact-info { + font-style: normal +} + +.header__contact-info__location { + display: block + font-style: italic + margin-bottom: 1em +} + +.header__contact-info__tel, +.header__contact-info__website { + display: none +} + +.header__contact-info__email, +.header__contact-info__srht, +.header__contact-info__github, +.header__contact-info__stackoverflow, +.header__contact-info__linkedin { + display: inline +} diff --git a/brunch-config.js b/brunch-config.js index 3502d03..2c04ba5 100644 --- a/brunch-config.js +++ b/brunch-config.js @@ -3,7 +3,7 @@ module.exports = { javascripts: { joinTo: "app.js" }, stylesheets: { joinTo: { - "base.css": "app/base.styl", + "base.css": ["app/base.styl", "app/media.styl"], "print.css": "app/print.styl", }, }, -- cgit v1.2.3