mirror of
https://github.com/TrudeEH/web.git
synced 2025-12-06 00:13:36 +00:00
Generate bg using SASS; Background now supports 4k screens. (double the width)
This commit is contained in:
65
assets/css/extended/bg-code.sass
Normal file
65
assets/css/extended/bg-code.sass
Normal 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)
|
||||||
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user