From 34eff40627683a108324ddc03e6bee2cc9b7ab5a Mon Sep 17 00:00:00 2001 From: Ahmed Abdelhalim Date: Mon, 5 Jul 2021 12:11:46 +0200 Subject: Restructure file names for web and fix minor linting issues --- app/assets/index.html | 2 +- app/base.styl | 119 --------------------------------- app/media.styl | 24 ------- app/stylesheets/print/summary.styl | 5 ++ app/stylesheets/web/skills.styl | 9 ++- app/web.styl | 133 +++++++++++++++++++++++++++++++++++++ 6 files changed, 147 insertions(+), 145 deletions(-) delete mode 100644 app/base.styl delete mode 100644 app/media.styl create mode 100644 app/web.styl (limited to 'app') diff --git a/app/assets/index.html b/app/assets/index.html index b70ce5c..4ee82f2 100644 --- a/app/assets/index.html +++ b/app/assets/index.html @@ -3,7 +3,7 @@ A14M - + diff --git a/app/base.styl b/app/base.styl deleted file mode 100644 index dd17ea6..0000000 --- a/app/base.styl +++ /dev/null @@ -1,119 +0,0 @@ -secondaryColor = #DB0A16 - -body { - font-family: "PT Sans", Arial, sans-serif - max-width: 1024px - min-width: 375px - margin: 0 auto - float: none -} - -main { - margin-left: 1cm - margin-right: 1cm -} - - -a:link, a:visited, a:hover, a:active { - text-decoration: none - color: inherit - border-bottom: 1px solid secondaryColor -} - -.section-header { - display: flex - flex-direction: row - margin-bottom: -0.3em - - &:before { - content: ""; - border-bottom: 1px solid - margin: auto; - margin-right: 0.5em - flex: 5 5; - } - - &:after { - content: ""; - border-bottom: 1px solid - margin: auto; - margin-left: 0.5em - flex: 100 0; - } -} - -@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" -@require "stylesheets/web/education.styl" - -.work { - article { - ul { - margin-top: 0.4em - } - - p { - margin-top: 0.4em - margin-bottom: 0.4em - } - } - - article > .info { - display: flex - flex-flow: row wrap - justify-content: space-between; - number: 2 - - @media screen and (max-width: 740px) { - flex-flow: column wrap - } - - // company - h2 { - order: 0 - min-width: 50% - margin-top: 0.2em - margin-bottom: 0 - } - - // title - em:nth-of-type(1) { - order: 2 - min-width: 50% - - @media screen and (max-width: 740px) { - order: 1 - } - } - - // location - em:nth-of-type(2) { - order 1 - min-width: 50% - text-align: right - align-self: flex-end - - @media screen and (max-width: 740px) { - order: 2 - text-align: left - align-self: flex-start - } - } - - // duration - em:nth-of-type(3) { - order: 3 - min-width: 50% - text-align: right - align-self: flex-end - - @media screen and (max-width: 740px) { - text-align: left - align-self: flex-start - } - } - } -} diff --git a/app/media.styl b/app/media.styl deleted file mode 100644 index 82e4a85..0000000 --- a/app/media.styl +++ /dev/null @@ -1,24 +0,0 @@ -@media (prefers-color-scheme: dark) { - html { - color: #FFFFFF - background-color: #181818 - } -} - -@media (prefers-color-scheme: light) { - html { - color: #000000 - background-color: #FFFFFF - } -} - -@media screen and (max-width: 780px) { - .skills__content__title { - text-align: left - } - - .skills__content__items { - margin-bottom: 1em - width: 100% - } -} diff --git a/app/stylesheets/print/summary.styl b/app/stylesheets/print/summary.styl index e69de29..88d0386 100644 --- a/app/stylesheets/print/summary.styl +++ b/app/stylesheets/print/summary.styl @@ -0,0 +1,5 @@ +.section-header.summary__header { +} + +.summary__content { +} diff --git a/app/stylesheets/web/skills.styl b/app/stylesheets/web/skills.styl index 9432b96..5614523 100644 --- a/app/stylesheets/web/skills.styl +++ b/app/stylesheets/web/skills.styl @@ -14,11 +14,18 @@ min-width: 14% text-align: right font-weight: 900 + @media screen and (max-width: 780px) { + text-align: left + } } .skills__content__items { width: 80% margin-bottom: 0.1em margin-left: 25px -} + @media screen and (max-width: 780px) { + margin-bottom: 1em + width: 100% + } +} diff --git a/app/web.styl b/app/web.styl new file mode 100644 index 0000000..8f62889 --- /dev/null +++ b/app/web.styl @@ -0,0 +1,133 @@ +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 + float: none +} + +main { + margin-left: 1cm + margin-right: 1cm +} + + +a:link, a:visited, a:hover, a:active { + text-decoration: none + color: inherit + border-bottom: 1px solid secondaryColor +} + +.section-header { + display: flex + flex-direction: row + margin-bottom: -0.3em + + &:before { + content: ""; + border-bottom: 1px solid + margin: auto; + margin-right: 0.5em + flex: 5 5; + } + + &:after { + content: ""; + border-bottom: 1px solid + margin: auto; + margin-left: 0.5em + flex: 100 0; + } +} + +@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" +@require "stylesheets/web/education.styl" + +.work { + article { + ul { + margin-top: 0.4em + } + + p { + margin-top: 0.4em + margin-bottom: 0.4em + } + } + + article > .info { + display: flex + flex-flow: row wrap + justify-content: space-between; + number: 2 + + @media screen and (max-width: 740px) { + flex-flow: column wrap + } + + // company + h2 { + order: 0 + min-width: 50% + margin-top: 0.2em + margin-bottom: 0 + } + + // title + em:nth-of-type(1) { + order: 2 + min-width: 50% + + @media screen and (max-width: 740px) { + order: 1 + } + } + + // location + em:nth-of-type(2) { + order 1 + min-width: 50% + text-align: right + align-self: flex-end + + @media screen and (max-width: 740px) { + order: 2 + text-align: left + align-self: flex-start + } + } + + // duration + em:nth-of-type(3) { + order: 3 + min-width: 50% + text-align: right + align-self: flex-end + + @media screen and (max-width: 740px) { + text-align: left + align-self: flex-start + } + } + } +} -- cgit v1.2.3