Blankie/pastel.codes
1
0
Fork 0
mirror of https://github.com/aurora-dot/pastel.codes.git synced 2024-11-22 08:12:19 +00:00
Code Issues Projects Releases Wiki Activity

Added pink block and changed layout

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
public/stylesheets/style.css
View File

@ -16,8 +16,7 @@
html, body { html, body {
width: 100%; width: 100%;
height: 100%; height: 100%; }
color: white; }
body { body {
background-color: #002234; background-color: #002234;
@ -29,6 +28,9 @@ h1 {
p { p {
font-family: "Apercu Mono"; } font-family: "Apercu Mono"; }
a:hover {
color: #CDE7B0; }
article { article {
min-height: 100%; min-height: 100%;
display: grid; display: grid;
@ -36,44 +38,52 @@ article {
grid-template-columns: 100%; } grid-template-columns: 100%; }
header nav a span { header nav a span {
font-size: 3vh; font-size: 2rem;
font-family: 'Titling Gothic FB'; font-family: 'Titling Gothic FB';
color: #CC7A98; } color: #CC7A98; }
header nav a span span { header nav a span span {
font-size: 3.2vh; font-size: 2.2rem;
font-family: 'Grifter'; } font-family: 'Grifter'; }
header nav #navbarSupportedContent23 ul {
background-color: #CC7A98; }
header nav #navbarSupportedContent23 ul li { header nav #navbarSupportedContent23 ul li {
background-color: #CC7A98; background-color: #CC7A98;
text-align: center; } text-align: center; }
header nav #navbarSupportedContent23 ul li a { header nav #navbarSupportedContent23 ul li a span {
color: #002234; } color: #002234;
font-family: "Apercu Mono"; }
header nav #navbarSupportedContent23 ul .active { header nav #navbarSupportedContent23 ul .active {
background-color: #002234; } background-color: #002234; }
header nav #navbarSupportedContent23 ul .active a { header nav #navbarSupportedContent23 ul .active a span {
color: #CC7A98; } color: #CC7A98; }
main { main {
padding: 0.5rem; } padding: 0.5rem; }
main h1 { main h1 {
padding-bottom: 1rem; padding-bottom: 1rem;
font-size: 50pt; } font-size: 4.5rem; }
main h1 span { main h1 span {
text-decoration: underline #CC7A98; text-decoration: underline #CC7A98;
text-decoration-style: wavy; } text-decoration-style: wavy; }
main p { main p {
font-size: 30pt; font-size: 2rem;
margin-bottom: 5px; } margin-bottom: 5px; }
footer { footer {
text-align: center; text-align: center;
font-size: 1rem; font-size: 1rem;
padding-bottom: 0.5rem; } padding: 0.5rem; }
footer a { footer a {
color: #CC7A98; color: #CC7A98;
text-decoration: underline #CC7A98; } text-decoration: underline #CC7A98; }
.vertical-center {
min-height: 100%;
min-height: 100vh;
display: flex;
align-items: center; }
.ham { .ham {
width: 30px; width: 30px;
height: 20px; height: 20px;

30
public/stylesheets/style.sass
View File

@ -1,5 +1,6 @@
$pink: #CC7A98 $pink: #CC7A98
$black: #002234 $black: #002234
$green: #CDE7B0
@font-face @font-face
font-family: 'Titling Gothic FB' font-family: 'Titling Gothic FB'
@ -20,7 +21,6 @@ $black: #002234
html, body html, body
width: 100% width: 100%
height: 100% height: 100%
color: white
body body
background-color: $black background-color: $black
@ -32,6 +32,10 @@ h1
p p
font-family: "Apercu Mono" font-family: "Apercu Mono"
a:hover
color: $green
article article
min-height: 100% min-height: 100%
display: grid display: grid
@ -42,46 +46,60 @@ header
nav nav
a a
span span
font-size: 3vh font-size: 2rem
font-family: 'Titling Gothic FB' font-family: 'Titling Gothic FB'
color: $pink color: $pink
span span
font-size: 3.2vh font-size: 2.2rem
font-family: 'Grifter' font-family: 'Grifter'
#navbarSupportedContent23 #navbarSupportedContent23
ul ul
background-color: $pink
li li
background-color: $pink background-color: $pink
text-align: center text-align: center
a a
span
color: $black color: $black
font-family: "Apercu Mono"
.active .active
background-color: $black background-color: $black
a a
span
color: $pink color: $pink
main main
padding: 0.5rem padding: 0.5rem
h1 h1
padding-bottom: 1rem padding-bottom: 1rem
font-size: 50pt font-size: 4.5rem
span span
text-decoration: underline $pink text-decoration: underline $pink
text-decoration-style: wavy text-decoration-style: wavy
p p
font-size: 30pt font-size: 2rem
margin-bottom: 5px margin-bottom: 5px
footer footer
text-align: center text-align: center
font-size: 1rem font-size: 1rem
padding-bottom: 0.5rem padding: 0.5rem
a a
color: $pink color: $pink
text-decoration: underline $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 // Nav stuff
.ham .ham

34
views/index.pug
View File

@ -22,24 +22,31 @@ block content
ul.navbar-nav.mr-auto ul.navbar-nav.mr-auto
li.nav-item.active li.nav-item.active
a.nav-link(href='#') a.nav-link(href='#')
| Home span Home
span.sr-only (current) span.sr-only (current)
li.nav-item li.nav-item
a.nav-link(href='#') About a.nav-link(href='#')
span About
li.nav-item li.nav-item
a.nav-link(href='#') CV a.nav-link(href='#')
span CV
li.nav-item li.nav-item
a.nav-link(href='#') Projects a.nav-link(href='https://git.pastel.codes')
span Projects
li.nav-item li.nav-item
a.nav-link(href='#') Blog a.nav-link(href='https://blog.pastel.codes')
span Blog
li.nav-item li.nav-item
a.nav-link(href='#') Contact a.nav-link(href='#')
span Contact
main main
.container-fluid
// left hand text // left hand text
.home-content .row
.left .col-sm-1
.title-content-box .vertical-center.col-sm-4
div
h1 h1
| Hello, | Hello,
br br
@ -48,11 +55,14 @@ block content
span Esther span Esther
p I'm a Programmer & Designer from the UK. p I'm a Programmer & Designer from the UK.
p I like to make stuff. p I like to make stuff.
.right .col-sm-2
.pink-box div(class="col-sm" style="background-color:#CC7A98; min-height: 100vh")
//icons .col-sm-2
footer footer
p © 2020 | p © 2020 |
|
|
a(href="#") ESTR// a(href="#") ESTR//