Added pink block and changed layout
Esther
parent
b28918e903
commit
b5835d3c4f
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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//
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue