pastel.codes/public/stylesheets/old-style.sass

292 lines
5.4 KiB
Sass
Raw Permalink Normal View History

2020-06-20 21:48:51 +01:00
$pink: #CC7A98
$black: #002234
2020-06-21 12:01:13 +01:00
$green: #CDE7B0
2020-06-20 21:48:51 +01:00
@font-face
font-family: 'Titling Gothic FB'
src: url("../fonts/TITLINGGOTHICFB-WIDE.OTF") format('opentype')
2020-06-20 21:48:51 +01:00
@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%
2020-06-17 22:34:29 +01:00
body
background-color: $black
color: $pink
h1
font-family: "Gilroy", sans-serif
2020-06-22 17:45:03 +01:00
h2
font-weight: bold
font-family: "Apercu Mono", monospace
2020-06-22 17:45:03 +01:00
2020-07-01 12:10:30 +01:00
p, label, input, textarea
font-family: "Apercu Mono", monospace
2020-06-20 21:48:51 +01:00
2020-07-01 12:10:30 +01:00
label
font-size: 3vh
2020-07-01 12:10:30 +01:00
2020-06-21 12:01:13 +01:00
a:hover
color: $green
2020-06-21 12:01:13 +01:00
2020-06-20 21:48:51 +01:00
article
min-height: 100%
display: grid
grid-template-rows: auto 1fr auto
grid-template-columns: 100%
2020-06-20 21:48:51 +01:00
header
nav
a
span
font-size: 2rem
font-family: 'Titling Gothic FB', sans-serif
color: $pink
2020-06-20 21:48:51 +01:00
#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
2020-06-21 12:01:13 +01:00
2020-06-21 18:20:33 +01:00
li:hover
background-color: $black
a
span
color: $pink
2020-06-20 21:48:51 +01:00
2020-06-21 18:20:33 +01:00
.active
background-color: $black
a
span
color: $green
2020-06-21 18:20:33 +01:00
.active:hover
background-color: $pink
a
span
color: $black
2020-06-20 21:48:51 +01:00
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
2020-06-20 21:48:51 +01:00
footer
text-align: center
font-size: 1rem
padding: 0.5rem
a
color: $pink
text-decoration: underline $pink
2020-06-20 21:48:51 +01:00
2020-06-22 17:45:03 +01:00
.ef
max-height: 85vh
min-height: 85vh !important
2020-06-22 17:45:03 +01:00
.error
text-align: center
2020-06-22 17:45:03 +01:00
.pink-block
background-color: $pink
min-height: 100vh
2020-06-21 12:01:13 +01:00
2020-06-21 14:55:00 +01:00
.center-v
min-height: 100% /* Fallback for browsers do NOT support vh unit */
min-height: 100vh /* These two lines are counted as one :-) */
2020-06-21 12:01:13 +01:00
display: flex
align-items: center
2020-06-21 12:01:13 +01:00
2020-06-21 14:55:00 +01:00
.center-v-h
display: flex
justify-content: center
align-items: center
min-height: 100vh
2020-06-21 14:55:00 +01:00
.logos-container
width: 3.5rem
2020-06-21 14:55:00 +01:00
.logo
width: auto
height: 3.5rem
fill: $black
margin-bottom: 2.5rem
2020-06-21 14:55:00 +01:00
.logo-container
cursor: pointer
2020-06-21 12:01:13 +01:00
2020-06-27 17:46:21 +01:00
.about-pos
p
font-size: 3vh
margin-bottom: 3vh
2020-06-27 17:46:21 +01:00
.pr
img
width: 100%
border: 2vh solid $pink
2020-06-27 17:46:21 +01:00
margin-bottom: 3vh
margin-top: 1vh
.pr-text
a
color: $pink
h1
2020-06-27 17:46:21 +01:00
font-size: 4vh
margin-bottom: 0
padding-bottom: 0
2020-06-27 17:46:21 +01:00
a:hover
color: $green
2020-06-27 17:46:21 +01:00
p
font-size: 3vh
2020-06-27 17:46:21 +01:00
.start
margin-top: 3vh
2020-06-27 17:46:21 +01:00
2020-07-01 12:10:30 +01:00
#contact-message
margin-top: 2vh
p
color: $green
span
text-decoration: underline $green
2020-07-01 12:10:30 +01:00
.h-captcha
margin-bottom: 0.5vh
2020-07-01 12:10:30 +01:00
2020-07-01 15:19:12 +01:00
.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"
2020-07-01 15:19:12 +01:00
.button-c
background-color: $pink
2020-07-01 12:10:30 +01:00
2020-07-01 15:19:12 +01:00
.button-c:hover
background-color: $black
color: $pink
border-color: $pink
2020-07-01 12:10:30 +01:00
// Nav stuff
2020-06-20 21:48:51 +01:00
.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
2020-06-20 21:48:51 +01:00
.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
2020-06-20 21:48:51 +01:00
.ham span:nth-child(1)
top: 0
2020-06-20 21:48:51 +01:00
.ham span:nth-child(2), .ham span:nth-child(3)
top: 10px
2020-06-20 21:48:51 +01:00
.ham span:nth-child(4)
top: 20px
2020-06-20 21:48:51 +01:00
.ham.open span:nth-child(1)
top: 11px
width: 0
left: 50%
2020-06-20 21:48:51 +01:00
.ham.open span:nth-child(2)
-webkit-transform: rotate(45deg)
-moz-transform: rotate(45deg)
-o-transform: rotate(45deg)
transform: rotate(45deg)
2020-06-20 21:48:51 +01:00
.ham.open span:nth-child(3)
-webkit-transform: rotate(-45deg)
-moz-transform: rotate(-45deg)
-o-transform: rotate(-45deg)
transform: rotate(-45deg)
2020-06-20 21:48:51 +01:00
2020-06-23 19:21:04 +01:00
.ham.open span:nth-child(4)
top: 11px
width: 0
left: 50%
2020-06-21 20:53:46 +01:00
2020-06-27 17:46:21 +01:00
@media only screen and (max-height: 421px)
.pr-text
margin-bottom: 5vh !important
2020-06-21 20:53:46 +01:00
@media only screen and (max-width: 575px)
.logo
height: 5rem
2020-06-22 19:36:59 +01:00
.logos-container
width: 5rem
2020-06-21 20:53:46 +01:00
.aaa
min-height: 40vh !important
2020-06-21 20:53:46 +01:00
.aaaa
margin-top: 5vh !important
2020-06-22 17:45:03 +01:00
.ef
max-height: none !important
min-height: 0 !important
2020-06-23 19:18:30 +01:00
.ff
min-height: 82.8vh !important
2020-06-22 19:26:12 +01:00
@media only screen and (max-height: 815px)
.ef
max-height: none !important
min-height: 0 !important