diff options
| -rw-r--r-- | app/assets/index.html | 14 | ||||
| -rw-r--r-- | app/base.styl | 68 | ||||
| -rw-r--r-- | app/print.styl | 16 | ||||
| -rw-r--r-- | app/stylesheets/print/education.styl | 10 | ||||
| -rw-r--r-- | app/stylesheets/web/education.styl | 58 |
5 files changed, 77 insertions, 89 deletions
diff --git a/app/assets/index.html b/app/assets/index.html index 33c68e0..b70ce5c 100644 --- a/app/assets/index.html +++ b/app/assets/index.html @@ -283,13 +283,13 @@ </article> <article class="education"> - <h1>Education</h1> - <article> - <h2>B.E. in Computer Science and Engineering</h2> - <p>Arab Academy for Science and Technology</p> - <p>GPA 3.1/4.0 (B - Very Good)</p> - <em>Alexandria, Egypt</em> - <em>Sep. 2005 - Jan. 2011</em> + <h1 class="education__header section-header">Education</h1> + <article class="education__details"> + <h2 class="education__details__degree">B.E. in Computer Science and Engineering</h2> + <p class="education__details__university">Arab Academy for Science and Technology</p> + <p class="education__details__gpa">GPA 3.1/4.0 (B - Very Good)</p> + <em class="education__details__location">Alexandria, Egypt</em> + <em class="education__details__duration">Sep. 2005 - Jan. 2011</em> </article> </article> </main> diff --git a/app/base.styl b/app/base.styl index 7603ba1..dd17ea6 100644 --- a/app/base.styl +++ b/app/base.styl @@ -47,6 +47,7 @@ a:link, a:visited, a:hover, a:active { @require "stylesheets/web/skills.styl" @require "stylesheets/web/writing.styl" @require "stylesheets/web/projects.styl" +@require "stylesheets/web/education.styl" .work { article { @@ -116,70 +117,3 @@ a:link, a:visited, a:hover, a:active { } } } - -.education { - article { - display: flex - flex-flow: row wrap - justify-content: space-between; - @media screen and (max-width: 740px) { - flex-flow: column wrap - } - - // add empty space to the end of page (as big as the header) - margin-bottom: 160px - - // title - h2 { - order: 0 - margin: 0 - min-width: 100% - font-size: 1.2em - align-self: center - } - - p, em { - margin: 0 - min-width: 50% - } - - // University - p:nth-of-type(1) { - order: 1 - } - - // Grade - p:nth-of-type(2) { - order: 3 - - @media screen and (max-width: 740px) { - order 2 - } - } - - // Location - em:nth-of-type(1) { - order: 2 - text-align: right - align-self: flex-end - - @media screen and (max-width: 740px) { - order: 3 - text-align: left - align-self: flex-start - } - } - - // Duration - em:nth-of-type(2) { - order: 4 - text-align: right - align-self: flex-end - - @media screen and (max-width: 740px) { - text-align: left - align-self: flex-start - } - } - } -} diff --git a/app/print.styl b/app/print.styl index c2173be..5e3b05e 100644 --- a/app/print.styl +++ b/app/print.styl @@ -19,6 +19,7 @@ body { @require "stylesheets/print/skills.styl" @require "stylesheets/print/writing.styl" @require "stylesheets/print/projects.styl" +@require "stylesheets/print/education.styl" .work { // avoid page breaks inside a work experience section @@ -34,21 +35,6 @@ body { } } -.education { - // avoid page breaks inside the education section - page-break-inside: avoid - - article { - // remove the extra space added for the website - margin-bottom: 0 - - // title - h2 { - margin-top: 1.2em - } - } -} - footer { display: block position: fixed diff --git a/app/stylesheets/print/education.styl b/app/stylesheets/print/education.styl new file mode 100644 index 0000000..c3d6fd8 --- /dev/null +++ b/app/stylesheets/print/education.styl @@ -0,0 +1,10 @@ +.education { + // avoid page breaks inside the education section + page-break-inside: avoid + // remove the extra space added for the website + margin-bottom: 0 +} + +.education__details { + margin-top: 0.3em +} diff --git a/app/stylesheets/web/education.styl b/app/stylesheets/web/education.styl new file mode 100644 index 0000000..d6ea3a6 --- /dev/null +++ b/app/stylesheets/web/education.styl @@ -0,0 +1,58 @@ +.education { + // add empty space to the end of page (as big as the header) + margin-bottom: 150px +} + +.education__details { + display: flex + flex-flow: row wrap + justify-content: space-between + @media screen and (max-width: 780px) { + flex-flow: column wrap + } +} + +.education__details__degree { + min-width: 100% + align-self: center + font-size: 1.1em + margin-bottom: 0 +} + +.education__details__university +.education__details__gpa +.education__details__duration +.education__details__location { + min-width: 50% + margin: 0 +} + +.education__details__university { +} + +.education__details__gpa { + order: 3 + @media screen and (max-width: 780px) { + order: 2 + } +} + +.education__details__duration { + order: 2 + text-align: right + align-self: flex-end + @media screen and (max-width: 780px) { + text-align: left + align-self: flex-start + } +} + +.education__details__location { + order: 4 + text-align: right + align-self: flex-end + @media screen and (max-width: 780px) { + text-align: left + align-self: flex-start + } +} |