mirror of
https://github.com/aurora-dot/pastel.codes.git
synced 2024-11-16 05:12:19 +00:00
E
8449b30401
* Add dev-dependancies * Security update npm packages * Force audit fix * Add linting, formatting and precommit * Format files
292 lines
5.4 KiB
Sass
292 lines
5.4 KiB
Sass
$pink: #CC7A98
|
|
$black: #002234
|
|
$green: #CDE7B0
|
|
|
|
@font-face
|
|
font-family: 'Titling Gothic FB'
|
|
src: url("../fonts/TITLINGGOTHICFB-WIDE.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%
|
|
|
|
body
|
|
background-color: $black
|
|
color: $pink
|
|
|
|
h1
|
|
font-family: "Gilroy", sans-serif
|
|
|
|
h2
|
|
font-weight: bold
|
|
font-family: "Apercu Mono", monospace
|
|
|
|
p, label, input, textarea
|
|
font-family: "Apercu Mono", monospace
|
|
|
|
label
|
|
font-size: 3vh
|
|
|
|
a:hover
|
|
color: $green
|
|
|
|
article
|
|
min-height: 100%
|
|
display: grid
|
|
grid-template-rows: auto 1fr auto
|
|
grid-template-columns: 100%
|
|
|
|
header
|
|
nav
|
|
a
|
|
span
|
|
font-size: 2rem
|
|
font-family: 'Titling Gothic FB', sans-serif
|
|
color: $pink
|
|
|
|
#navbarSupportedContent23
|
|
ul
|
|
background-color: $pink
|
|
li
|
|
transition: 0.5s
|
|
background-color: $pink
|
|
text-align: center
|
|
a
|
|
span
|
|
transition: 0.2s
|
|
color: $black
|
|
font-family: "Apercu Mono", monospace
|
|
|
|
li:hover
|
|
background-color: $black
|
|
a
|
|
span
|
|
color: $pink
|
|
|
|
.active
|
|
background-color: $black
|
|
a
|
|
span
|
|
color: $green
|
|
|
|
.active:hover
|
|
background-color: $pink
|
|
a
|
|
span
|
|
color: $black
|
|
main
|
|
padding: 0.5rem
|
|
h1
|
|
padding-bottom: 1rem
|
|
font-size: 4.5rem
|
|
span
|
|
text-decoration: underline $pink
|
|
text-decoration-style: wavy
|
|
p
|
|
font-size: 2rem
|
|
margin-bottom: 5px
|
|
|
|
footer
|
|
text-align: center
|
|
font-size: 1rem
|
|
padding: 0.5rem
|
|
a
|
|
color: $pink
|
|
text-decoration: underline $pink
|
|
|
|
.ef
|
|
max-height: 85vh
|
|
min-height: 85vh !important
|
|
|
|
.error
|
|
text-align: center
|
|
|
|
.pink-block
|
|
background-color: $pink
|
|
min-height: 100vh
|
|
|
|
.center-v
|
|
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
|
|
|
|
.center-v-h
|
|
display: flex
|
|
justify-content: center
|
|
align-items: center
|
|
min-height: 100vh
|
|
|
|
.logos-container
|
|
width: 3.5rem
|
|
|
|
.logo
|
|
width: auto
|
|
height: 3.5rem
|
|
fill: $black
|
|
margin-bottom: 2.5rem
|
|
|
|
.logo-container
|
|
cursor: pointer
|
|
|
|
.about-pos
|
|
p
|
|
font-size: 3vh
|
|
margin-bottom: 3vh
|
|
|
|
.pr
|
|
img
|
|
width: 100%
|
|
border: 2vh solid $pink
|
|
margin-bottom: 3vh
|
|
margin-top: 1vh
|
|
|
|
.pr-text
|
|
a
|
|
color: $pink
|
|
h1
|
|
|
|
font-size: 4vh
|
|
margin-bottom: 0
|
|
padding-bottom: 0
|
|
a:hover
|
|
color: $green
|
|
p
|
|
font-size: 3vh
|
|
|
|
.start
|
|
margin-top: 3vh
|
|
|
|
#contact-message
|
|
margin-top: 2vh
|
|
p
|
|
color: $green
|
|
span
|
|
text-decoration: underline $green
|
|
|
|
.h-captcha
|
|
margin-bottom: 0.5vh
|
|
|
|
.button-c
|
|
display: inline-block
|
|
font-weight: 400
|
|
color: #212529
|
|
text-align: center
|
|
vertical-align: middle
|
|
cursor: pointer
|
|
user-select: none
|
|
border: 1px solid $black
|
|
padding: 0.375rem 0.75rem
|
|
font-size: 1rem
|
|
line-height: 1.5
|
|
border-radius: 0.25rem
|
|
transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out
|
|
font-family: "Apercu Mono"
|
|
|
|
.button-c
|
|
background-color: $pink
|
|
|
|
.button-c:hover
|
|
background-color: $black
|
|
color: $pink
|
|
border-color: $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: 0
|
|
|
|
.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%
|
|
|
|
@media only screen and (max-height: 421px)
|
|
.pr-text
|
|
margin-bottom: 5vh !important
|
|
|
|
@media only screen and (max-width: 575px)
|
|
.logo
|
|
height: 5rem
|
|
.logos-container
|
|
width: 5rem
|
|
.aaa
|
|
min-height: 40vh !important
|
|
.aaaa
|
|
margin-top: 5vh !important
|
|
.ef
|
|
max-height: none !important
|
|
min-height: 0 !important
|
|
.ff
|
|
min-height: 82.8vh !important
|
|
|
|
@media only screen and (max-height: 815px)
|
|
.ef
|
|
max-height: none !important
|
|
min-height: 0 !important
|