Made code shorter & work, started on main content

pull/1/head
Esther 2020-06-20 23:27:22 +01:00
parent 0651e89219
commit a8e5cf3015
No known key found for this signature in database
GPG Key ID: 162A307C5EBD40EA
4 changed files with 111 additions and 68 deletions

View File

@ -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 */

View File

@ -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'

View File

@ -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