ztimson/map-alliance
1
0
Fork 0
Code Issues Pull Requests Actions Packages Releases 1 Activity

Updated angular version to latest
Some checks failed
Build Functions / Build NPM Project (push) Successful in 18s
Details
Build Website / Build NPM Project (push) Failing after 24s
Details
Build Website / Tag Version (push) Has been skipped
Details
Build Website / Build & Push Dockerfile (push) Has been skipped
Details

Browse Source
This commit is contained in:
Zakary Timson
2023-12-11 21:32:05 -05:00
parent f62bbe1467
commit b0d74321c8
48 changed files with 21875 additions and 1240 deletions
Download Patch File Download Diff File Expand all files Collapse all files

112
src/app/components/starrySky/starrySky.component.scss
View File

@ -1,75 +1,75 @@
@function stars ($n) {
$value: '#{random(2000)}px #{random(2000)}px #FFF';
@for $i from 2 through $n {
$value: '#{$value} , #{random(2000)}px #{random(2000)}px #FFF';
}
@return unquote($value)
$value: '#{random(4000)}px #{random(4000)}px #ffffff';
@for $i from 2 through $n {
$value: '#{$value} , #{random(4000)}px #{random(4000)}px #ffffff';
}
@return unquote($value)
}
.sky {
height: 100%;
width: 100%;
background: radial-gradient(ellipse at bottom, #1B2735 0%, #090A0F 100%);
overflow: hidden
height: 100%;
width: 100%;
background: radial-gradient(ellipse at bottom, #1B2735 0%, #090A0F 100%);
overflow: hidden
}
.shooting-star {
position: absolute;
top: 110%;
width: 30px;
height: 3px;
border-radius: 50%;
background-color: white;
animation: shoot 20s linear infinite;
animation-delay: 1s;
transform: rotate(-30deg);
position: absolute;
top: 110%;
width: 30px;
height: 3px;
border-radius: 50%;
background-color: white;
animation: shoot 20s linear infinite;
animation-delay: 1s;
transform: rotate(-40deg);
}
.stars {
background: transparent;
border-radius: 50%;
background: transparent;
border-radius: 50%;
&.foreground {
width: 1px;
height: 1px;
box-shadow: stars(1000);
animation: spin 200s linear infinite;
}
&.foreground {
width: 1px;
height: 1px;
box-shadow: stars(4000);
animation: spin 200s linear infinite;
}
&.midground {
width: 2px;
height: 2px;
box-shadow: stars(750);
animation: spin 300s linear infinite;
}
&.midground {
width: 2px;
height: 2px;
box-shadow: stars(2000);
animation: spin 300s linear infinite;
}
&.background {
width: 4px;
height: 4px;
box-shadow: stars(500);
animation: spin 350s linear infinite;
}
&.background {
width: 4px;
height: 4px;
box-shadow: stars(1000);
animation: spin 350s linear infinite;
}
}
@keyframes shoot{
0%{
top: -10%;
left: 80%;
}
5%{
top: 110%;
left: 20%;
}
100% {
top: 110%;
}
@keyframes shoot {
0% {
top: -10%;
left: 80%;
}
5% {
top: 110%;
left: 20%;
}
100% {
top: 110%;
}
}
@keyframes spin {
from {
transform: translateY(0);
}
to {
transform: translateY(-2000px);
}
from {
transform: translateY(0);
}
to {
transform: translateY(-2000px);
}
}