Added pink block and changed layout

This commit is contained in:
Esther 2020-06-21 12:01:13 +01:00
parent b28918e903
commit b5835d3c4f
No known key found for this signature in database
GPG Key ID: 162A307C5EBD40EA
3 changed files with 85 additions and 47 deletions

View File

@ -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 {
background-color: #CC7A98; }
header nav #navbarSupportedContent23 ul li {
background-color: #CC7A98;
text-align: center; }
header nav #navbarSupportedContent23 ul li a {
color: #002234; }
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 {
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;

View File

@ -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
span
color: $black
font-family: "Apercu Mono"
.active
background-color: $black
a
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

View File

@ -22,24 +22,31 @@ 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
.container-fluid
// left hand text
.home-content
.left
.title-content-box
.row
.col-sm-1
.vertical-center.col-sm-4
div
h1
| Hello,
br
@ -48,11 +55,14 @@ block content
span Esther
p I'm a Programmer & Designer from the UK.
p I like to make stuff.
.right
.pink-box
//icons
.col-sm-2
div(class="col-sm" style="background-color:#CC7A98; min-height: 100vh")
.col-sm-2
footer
p © 2020 |
|
|
a(href="#") ESTR//