Made code shorter & work, started on main content

This commit is contained in:
Esther
2020-06-20 23:27:22 +01:00
parent 0651e89219
commit a8e5cf3015
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'