Fluffy/WebsiteArchive
1
0
Fork 0
mirror of https://github.com/Fluffy-Bean/Fluffys-website.git synced 2025-05-28 22:33:13 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Move song page to a request for faster loading

Browse source 
Updated some info
This commit is contained in:
Michał Gdula 2023-02-26 19:24:11 +00:00
parent 70ded2c95e
commit 3613f90fa5
7 changed files with 285 additions and 97 deletions
Download patch file Download diff file Expand all files Collapse all files

136
static/css/style.sass
View file

@ -1,3 +1,5 @@
@use 'sass:map'
$black: #101010
$dark: #151515
$grey: #808080
@ -220,26 +222,136 @@ p.subtitle
overflow: hidden
$languages: ("python": #3776AB, "js": #F7DF1E, "html": #E34F26, "css": #1572B6, "sass": #CC6699, "php": #777BB4, "sql": #4479A1, "shell": #89E051, "rust": #CE422B)
$os: ("ubuntu": #E95420, "arch": #1793D1, "proxmox": #E57000, "manjaro": #35BF5C, "windows": #0078D6)
.sub_experiance
padding-left: 0.25rem !important
position: relative
color: $white !important
&::before
content: ''
width: 2px
height: 100%
position: absolute
top: 0
left: 0
background-color: $primary
border-radius: 2px
opacity: 0.5
z-index: -1
@each $lang, $color in $languages
&.#{$lang}
&::before
background-color: $color
@each $os, $color in $os
&.#{$os}
&::before
background-color: $color
&.vbad
&::before
width: 2px
&.bad
&::before
width: 10%
&.ok
&::before
width: 20%
&.good
&::before
width: 40%
&.vgood
&::before
width: 80%
&.excellent
&::before
width: 100%
span
font-size: 0.8rem
@keyframes loader
0%
width: 0
left: 0
30%
width: 100%
left: 0
60%
width: 100%
left: 100%
100%
width: 100%
left: 100%
.loader
margin: 1rem 0
width: 100%
height: 2px
position: relative
background-color: $black
overflow: hidden
&::after
content: ''
margin: 0
padding: 0
width: 0
height: 100%
position: absolute
top: 0
left: 0
background-color: $primary
animation: loader 1s ease-in-out infinite
.music
display: flex
flex-direction: column
gap: 1rem
.track
display: flex
flex-direction: row
gap: 1rem
position: relative
overflow: hidden
.music-image
.track-image
padding: 0px
width: 5rem
height: 5rem
border-radius: 2px
background-color: $black
transition: all 0.3s cubic-bezier(.86,0,.07,1)
img
margin: 0
padding: 0
width: 5rem
height: 5rem
width: 100%
height: 100%
display: block
float: left
@ -247,9 +359,12 @@ p.subtitle
border-radius: 2px
background-color: $dark
opacity: 1
object-fit: cover
.music-info
transition: all 0.2s cubic-bezier(.86,0,.07,1)
.track-info
display: flex
flex-direction: column
//justify-content: space-between
@ -273,10 +388,9 @@ p.subtitle
&:hover
color: $primary
p.music-nowplaying
p.track-nowplaying
color: $primary
@import "buttons"
@import "toast"
@ -292,9 +406,9 @@ p.music-nowplaying
p.subtitle
text-align: center
.music
padding-left: 0.5rem
border-left: 2px solid $primary
.track-image
width: 2px
height: auto
span, img
display: none
img
opacity: 0