From b5835d3c4fd0d84ca51f8c19016c48f4cadd910d Mon Sep 17 00:00:00 2001 From: Esther Date: Sun, 21 Jun 2020 12:01:13 +0100 Subject: [PATCH] Added pink block and changed layout --- public/stylesheets/style.css | 44 +++++++++++++++++----------- public/stylesheets/style.sass | 34 ++++++++++++++++------ views/index.pug | 54 +++++++++++++++++++++-------------- 3 files changed, 85 insertions(+), 47 deletions(-) diff --git a/public/stylesheets/style.css b/public/stylesheets/style.css index 9dd2879..89c21d7 100644 --- a/public/stylesheets/style.css +++ b/public/stylesheets/style.css @@ -16,8 +16,7 @@ html, body { width: 100%; - height: 100%; - color: white; } + height: 100%; } body { background-color: #002234; @@ -29,6 +28,9 @@ h1 { p { font-family: "Apercu Mono"; } +a:hover { + color: #CDE7B0; } + article { min-height: 100%; display: grid; @@ -36,44 +38,52 @@ article { grid-template-columns: 100%; } header nav a span { - font-size: 3vh; + font-size: 2rem; font-family: 'Titling Gothic FB'; color: #CC7A98; } header nav a span span { - font-size: 3.2vh; + font-size: 2.2rem; font-family: 'Grifter'; } -header nav #navbarSupportedContent23 ul li { - background-color: #CC7A98; - text-align: center; } - header nav #navbarSupportedContent23 ul li a { - color: #002234; } - -header nav #navbarSupportedContent23 ul .active { - background-color: #002234; } - header nav #navbarSupportedContent23 ul .active a { - color: #CC7A98; } +header nav #navbarSupportedContent23 ul { + background-color: #CC7A98; } + header nav #navbarSupportedContent23 ul li { + background-color: #CC7A98; + text-align: center; } + header nav #navbarSupportedContent23 ul li a span { + color: #002234; + font-family: "Apercu Mono"; } + header nav #navbarSupportedContent23 ul .active { + background-color: #002234; } + header nav #navbarSupportedContent23 ul .active a span { + color: #CC7A98; } main { padding: 0.5rem; } main h1 { padding-bottom: 1rem; - font-size: 50pt; } + font-size: 4.5rem; } main h1 span { text-decoration: underline #CC7A98; text-decoration-style: wavy; } main p { - font-size: 30pt; + font-size: 2rem; margin-bottom: 5px; } footer { text-align: center; font-size: 1rem; - padding-bottom: 0.5rem; } + padding: 0.5rem; } footer a { color: #CC7A98; text-decoration: underline #CC7A98; } +.vertical-center { + min-height: 100%; + min-height: 100vh; + display: flex; + align-items: center; } + .ham { width: 30px; height: 20px; diff --git a/public/stylesheets/style.sass b/public/stylesheets/style.sass index 00c99c5..1bf552c 100644 --- a/public/stylesheets/style.sass +++ b/public/stylesheets/style.sass @@ -1,5 +1,6 @@ $pink: #CC7A98 $black: #002234 +$green: #CDE7B0 @font-face font-family: 'Titling Gothic FB' @@ -20,7 +21,6 @@ $black: #002234 html, body width: 100% height: 100% - color: white body background-color: $black @@ -32,6 +32,10 @@ h1 p font-family: "Apercu Mono" +a:hover + color: $green + + article min-height: 100% display: grid @@ -42,46 +46,60 @@ header nav a span - font-size: 3vh + font-size: 2rem font-family: 'Titling Gothic FB' color: $pink span - font-size: 3.2vh + font-size: 2.2rem font-family: 'Grifter' #navbarSupportedContent23 ul + background-color: $pink li background-color: $pink text-align: center a - color: $black + span + color: $black + font-family: "Apercu Mono" + .active background-color: $black a - color: $pink + span + color: $pink main padding: 0.5rem h1 padding-bottom: 1rem - font-size: 50pt + font-size: 4.5rem span text-decoration: underline $pink text-decoration-style: wavy p - font-size: 30pt + font-size: 2rem margin-bottom: 5px footer text-align: center font-size: 1rem - padding-bottom: 0.5rem + padding: 0.5rem a color: $pink text-decoration: underline $pink + +.vertical-center + min-height: 100% /* Fallback for browsers do NOT support vh unit */ + min-height: 100vh /* These two lines are counted as one :-) */ + + display: flex + align-items: center + + // Nav stuff .ham diff --git a/views/index.pug b/views/index.pug index fc1e578..da570a7 100644 --- a/views/index.pug +++ b/views/index.pug @@ -22,37 +22,47 @@ block content ul.navbar-nav.mr-auto li.nav-item.active a.nav-link(href='#') - | Home + span Home span.sr-only (current) li.nav-item - a.nav-link(href='#') About + a.nav-link(href='#') + span About li.nav-item - a.nav-link(href='#') CV + a.nav-link(href='#') + span CV li.nav-item - a.nav-link(href='#') Projects + a.nav-link(href='https://git.pastel.codes') + span Projects li.nav-item - a.nav-link(href='#') Blog + a.nav-link(href='https://blog.pastel.codes') + span Blog li.nav-item - a.nav-link(href='#') Contact + a.nav-link(href='#') + span Contact main - // left hand text - .home-content - .left - .title-content-box - h1 - | Hello, - br - | I'm - | - span Esther - p I'm a Programmer & Designer from the UK. - p I like to make stuff. - .right - .pink-box - //icons + .container-fluid + // left hand text + .row + .col-sm-1 + .vertical-center.col-sm-4 + div + h1 + | Hello, + br + | I'm + | + span Esther + p I'm a Programmer & Designer from the UK. + p I like to make stuff. + .col-sm-2 + div(class="col-sm" style="background-color:#CC7A98; min-height: 100vh") + .col-sm-2 - footer + + footer p © 2020 | + | + | a(href="#") ESTR//