150 lines
3.1 KiB
Sass
150 lines
3.1 KiB
Sass
$pink: #CC7A98
|
|
$black: #002234
|
|
|
|
@font-face
|
|
font-family: 'Titling Gothic FB'
|
|
src: url("../fonts/TITLINGGOTHICFB-WIDE.OTF") format('opentype')
|
|
|
|
@font-face
|
|
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%
|
|
display: grid
|
|
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
|
|
li
|
|
background-color: $pink
|
|
text-align: center
|
|
a
|
|
color: $black
|
|
.active
|
|
background-color: $black
|
|
a
|
|
color: $pink
|
|
|
|
main
|
|
padding: 0.5rem
|
|
h1
|
|
padding-bottom: 1rem
|
|
font-size: 50pt
|
|
span
|
|
text-decoration: underline $pink
|
|
text-decoration-style: wavy
|
|
p
|
|
font-size: 30pt
|
|
margin-bottom: 5px
|
|
|
|
|
|
footer
|
|
text-align: center
|
|
font-size: 1rem
|
|
padding-bottom: 0.5rem
|
|
a
|
|
color: $pink
|
|
text-decoration: underline $pink
|
|
|
|
// Nav stuff
|
|
|
|
.ham
|
|
width: 30px
|
|
height: 20px
|
|
position: relative
|
|
margin: 0px
|
|
-webkit-transform: rotate(0deg)
|
|
-moz-transform: rotate(0deg)
|
|
-o-transform: rotate(0deg)
|
|
transform: rotate(0deg)
|
|
-webkit-transition: .5s ease-in-out
|
|
-moz-transition: .5s ease-in-out
|
|
-o-transition: .5s ease-in-out
|
|
transition: .5s ease-in-out
|
|
cursor: pointer
|
|
|
|
.ham span
|
|
display: block
|
|
position: absolute
|
|
height: 3px
|
|
width: 100%
|
|
border-radius: 9px
|
|
opacity: 1
|
|
left: 0
|
|
-webkit-transform: rotate(0deg)
|
|
-moz-transform: rotate(0deg)
|
|
-o-transform: rotate(0deg)
|
|
transform: rotate(0deg)
|
|
-webkit-transition: .25s ease-in-out
|
|
-moz-transition: .25s ease-in-out
|
|
-o-transition: .25s ease-in-out
|
|
transition: .25s ease-in-out
|
|
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%
|