From a8e5cf30153b1e138e2b24a83e0a40df447db0ba Mon Sep 17 00:00:00 2001 From: Esther Date: Sat, 20 Jun 2020 23:27:22 +0100 Subject: [PATCH] Made code shorter & work, started on main content --- ...Free-Net-ApercuMono.ttf => ApercuMono.ttf} | Bin public/stylesheets/style.css | 59 +++++++++---- public/stylesheets/style.sass | 80 ++++++++++-------- views/index.pug | 40 +++++---- 4 files changed, 111 insertions(+), 68 deletions(-) rename public/fonts/{FontsFree-Net-ApercuMono.ttf => ApercuMono.ttf} (100%) diff --git a/public/fonts/FontsFree-Net-ApercuMono.ttf b/public/fonts/ApercuMono.ttf similarity index 100% rename from public/fonts/FontsFree-Net-ApercuMono.ttf rename to public/fonts/ApercuMono.ttf diff --git a/public/stylesheets/style.css b/public/stylesheets/style.css index c9b1135..c8f4c19 100644 --- a/public/stylesheets/style.css +++ b/public/stylesheets/style.css @@ -6,8 +6,28 @@ font-family: 'Grifter'; src: url("../fonts/GRIFTER.otf") format("opentype"); } +@font-face { + font-family: 'Gilroy'; + src: url("../fonts/Gilroy-ExtraBold.otf") format("opentype"); } + +@font-face { + font-family: 'Apercu Mono'; + src: url("../fonts/ApercuMono.ttf") format("truetype"); } + +html, body { + width: 100%; + height: 100%; + color: white; } + body { - background-color: #002234; } + background-color: #002234; + color: #CC7A98; } + +h1 { + font-family: "Gilroy"; } + +p { + font-family: "Apercu Mono"; } article { min-height: 100%; @@ -15,13 +35,32 @@ article { grid-template-rows: auto 1fr auto; grid-template-columns: 100%; } +header nav a span { + font-size: 3vh; + font-family: 'Titling Gothic FB'; + color: #CC7A98; } + header nav a span span { + font-size: 3.2vh; + font-family: 'Grifter'; } + +header nav #navbarSupportedContent23 ul { + background-color: #CC7A98; } + header nav #navbarSupportedContent23 ul li { + text-align: center; } + header nav #navbarSupportedContent23 ul li a { + color: #002234; } + main { padding: 0.5rem; } + main h1 span { + text-decoration: underline #CC7A98; } + main p { + margin-bottom: 5px; } footer { + text-align: center; padding-bottom: 0.5rem; } -/* Icon 1 */ .ham { width: 30px; height: 20px; @@ -52,9 +91,7 @@ footer { -webkit-transition: .25s ease-in-out; -moz-transition: .25s ease-in-out; -o-transition: .25s ease-in-out; - transition: .25s ease-in-out; } - -.ham span { + transition: .25s ease-in-out; background: #CC7A98; } .ham span:nth-child(1) { @@ -88,16 +125,4 @@ footer { width: 0%; left: 50%; } -header { - padding-top: 0.5rem; - padding-left: 1rem; - padding-right: 1rem; } - header nav a p { - font-size: 3vh; - font-family: 'Titling Gothic FB'; - color: #CC7A98; } - header nav a p span { - font-size: 3.2vh; - font-family: 'Grifter'; } - /*# sourceMappingURL=style.css.map */ \ No newline at end of file diff --git a/public/stylesheets/style.sass b/public/stylesheets/style.sass index 803b533..35765bc 100644 --- a/public/stylesheets/style.sass +++ b/public/stylesheets/style.sass @@ -9,8 +9,28 @@ $black: #002234 font-family: 'Grifter' src: url("../fonts/GRIFTER.otf") format('opentype') +@font-face + font-family: 'Gilroy' + src: url("../fonts/Gilroy-ExtraBold.otf") format('opentype') + +@font-face + font-family: 'Apercu Mono' + src: url("../fonts/ApercuMono.ttf") format('truetype') + +html, body + width: 100% + height: 100% + color: white + body background-color: $black + color: $pink + +h1 + font-family: "Gilroy" + +p + font-family: "Apercu Mono" article min-height: 100% @@ -18,23 +38,39 @@ article grid-template-rows: auto 1fr auto grid-template-columns: 100% +header + nav + a + span + font-size: 3vh + font-family: 'Titling Gothic FB' + color: $pink + span + font-size: 3.2vh + font-family: 'Grifter' + #navbarSupportedContent23 + ul + background-color: $pink + li + text-align: center + a + color: $black main padding: 0.5rem + h1 + span + text-decoration: underline $pink + p + margin-bottom: 5px + footer + text-align: center padding-bottom: 0.5rem - - - - - - - -// nav stuff -/* Icon 1 */ +// Nav stuff .ham width: 30px @@ -51,7 +87,6 @@ footer transition: .5s ease-in-out cursor: pointer - .ham span display: block position: absolute @@ -68,60 +103,35 @@ footer -moz-transition: .25s ease-in-out -o-transition: .25s ease-in-out transition: .25s ease-in-out - - -.ham span background: $pink .ham span:nth-child(1) top: 0px - .ham span:nth-child(2), .ham span:nth-child(3) top: 10px - .ham span:nth-child(4) top: 20px - .ham.open span:nth-child(1) top: 11px width: 0% left: 50% - .ham.open span:nth-child(2) -webkit-transform: rotate(45deg) -moz-transform: rotate(45deg) -o-transform: rotate(45deg) transform: rotate(45deg) - .ham.open span:nth-child(3) -webkit-transform: rotate(-45deg) -moz-transform: rotate(-45deg) -o-transform: rotate(-45deg) transform: rotate(-45deg) - .ham.open span:nth-child(4) top: 11px width: 0% left: 50% - - -header - padding-top: 0.5rem - padding-left: 1rem - padding-right: 1rem - nav - a - p - font-size: 3vh - font-family: 'Titling Gothic FB' - color: $pink - - span - font-size: 3.2vh - font-family: 'Grifter' diff --git a/views/index.pug b/views/index.pug index 14be45f..9c9b0e4 100644 --- a/views/index.pug +++ b/views/index.pug @@ -4,13 +4,13 @@ block content article header // Navbar - nav.navbar.mb-4 + nav.navbar // Navbar brand a.navbar-brand(href='#') - p ESTR + span ESTR span // // Collapse button - button.navbar-toggler.ham-button(type='button' data-toggle='collapse' data-target='#navbarSupportedContent23' aria-controls='navbarSupportedContent23' aria-expanded='false' aria-label='Toggle navigation') + button.navbar-toggler.ham-button(type='button' data-toggle='collapse' data-target='#navbarSupportedContent23' aria-controls='navbarSupportedContent23' aria-expanded='false' aria-label='Toggle navigation' style='cursor: pointer;') .ham span span @@ -25,23 +25,31 @@ block content | Home span.sr-only (current) li.nav-item - a.nav-link(href='#') Features + a.nav-link(href='#') About li.nav-item - a.nav-link(href='#') Pricing - // Links - // Collapsible content - + a.nav-link(href='#') CV + li.nav-item + a.nav-link(href='#') Projects + li.nav-item + a.nav-link(href='#') Blog + li.nav-item + a.nav-link(href='#') Contact main // left hand text - h1 - | Hello, - br - | I'm Esther - p I'm a Programmer & Designer from the UK. - p I like to make stuff - - // The pink right block images and stuff here + .home-content + .left + 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 footer p piss