trude/web
1
0
Fork 0
mirror of https://github.com/TrudeEH/web.git synced 2025-12-06 08:23:37 +00:00
Code Issues Packages Projects Releases Wiki Activity

Generate bg using SASS; Background now supports 4k screens. (double the width)

Browse Source
This commit is contained in:
TrudeEH
2025-03-10 09:25:51 +00:00
parent 63437b7111
commit 9b9f29f195
2 changed files with 97 additions and 1109 deletions
Download Patch File Download Diff File Expand all files Collapse all files

65
assets/css/extended/bg-code.sass Normal file
View File

@@ -0,0 +1,65 @@
// n is number of stars required
@function multiple-box-shadow ($n)
$value: '#{random(2000)}px #{random(2000)}px #ebebeb'
@for $i from 2 through $n
$value: '#{$value} , #{random(4000)}px #{random(2000)}px #ebebeb'
@return unquote($value)
$shadows-small: multiple-box-shadow(1400)
$shadows-medium: multiple-box-shadow(400)
$shadows-big: multiple-box-shadow(200)
#stars
width: 1px
height: 1px
background: transparent
box-shadow: $shadows-small
animation: animStar 50s linear infinite
&:after
content: " "
position: absolute
top: 2000px
width: 1px
height: 1px
background: transparent
box-shadow: $shadows-small
#stars2
width: 2px
height: 2px
background: transparent
box-shadow: $shadows-medium
animation: animStar 100s linear infinite
&:after
content: " "
position: absolute
top: 2000px
width: 2px
height: 2px
background: transparent
box-shadow: $shadows-medium
#stars3
width: 3px
height: 3px
background: transparent
box-shadow: $shadows-big
animation: animStar 150s linear infinite
&:after
content: " "
position: absolute
top: 2000px
width: 3px
height: 3px
background: transparent
box-shadow: $shadows-big
@keyframes animStar
from
transform: translateY(0px)
to
transform: translateY(-2000px)