alex/assets/sass/index.sass
2021-10-19 12:17:51 +02:00

111 lines
1.9 KiB
Sass

// @import url('https://manekit.now.sh/assets/css/manekit.min.css')
$instagram: #E4405F
$twitter: #1DA1F2
$twitch: #9146FF
@import url('https://fonts.googleapis.com/css2?family=Orbitron&display=swap')
*
margin: 0
padding: 0
/* Hide scrollbar for Chrome, Safari and Opera */
::-webkit-scrollbar
display: none
// MAKE SVGS FILL WITH THEIR COLOR ON HOVER
body
background: #000
color: #fff
font-family: 'Orbitron', sans-serif
-ms-overflow-style: none /* IE and Edge */
scrollbar-width: none /* Firefox */
.logo
width: 150px
text-align: center
margin: auto
justify-content: center
display: flex
a
color: white
font-size: 2vw
text-decoration: none
&:hover
color: grey
.twitch svg:hover
fill: $twitch
.twitter svg:hover
fill: $twitter
.instagram svg:hover
fill: $instagram
svg
fill: white
padding: 0 10px
width: 50px
height: 50px
.sub-nav
text-align: center
margin: auto
justify-content: center
display: flex
.bar
position: absolute
width: 99%
height: 20px
background-color: white
mix-blend-mode: difference
color: black
font-size: 15px
margin: auto
display: flex
padding-left: 1%
a
font-size: inherit
color: black
.top
top: 50px
.bottom
bottom: 50px
section
height: 100vh
width: 100vw
.music
display: flex
text-align: center
margin: auto
justify-content: space-between
padding-top: 5vh
margin: 0 100px
.title
font-size: 3vh
display: flex
text-align: left
margin: auto
justify-content: space-between
padding-top: 2vh
img
height: 30vh
@media screen and ( max-width: 1350px )
.music
display: table
margin: auto
.title
padding-bottom: 20px
img
height: 20vh
.top
top: 60px
.bottom
position: sticky
bottom: 0