pastel.codes/public/stylesheets/style.sass

138 lines
2.7 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
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
.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%