Skip to content

Commit 089d849

Browse files
committed
add: animation for install instructions
1 parent fcd9282 commit 089d849

File tree

1 file changed

+49
-7
lines changed

1 file changed

+49
-7
lines changed

src/pages/index.astro

Lines changed: 49 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -550,7 +550,7 @@ exec "<path-to-directory>/bin/lua-language-server" "$@&quot
550550
span.description {
551551
margin: 0px;
552552
border-radius: 0px 99em 99em 0px;
553-
border-left: 2px solid white
553+
border-left: 2px solid white;
554554
}
555555
}
556556

@@ -647,8 +647,54 @@ exec "<path-to-directory>/bin/lua-language-server" "$@&quot
647647
align-items: center;
648648
gap: 0.3em;
649649
position: relative;
650-
box-shadow: var(--brand-primary) 0px 0px 0px 0px;
651-
transition: box-shadow ease-in-out 0.5s;
650+
651+
&::before {
652+
content: "";
653+
position: absolute;
654+
z-index: -1;
655+
top: 0%;
656+
left: 0%;
657+
width: 100%;
658+
height: 100%;
659+
border-radius: 99em;
660+
background-color: var(--brand-primary);
661+
transition: opacity ease-in-out 0.5s;
662+
opacity: 0;
663+
filter: blur(10px);
664+
}
665+
666+
&.active::before {
667+
opacity: 0.7;
668+
}
669+
670+
&::after {
671+
content: "";
672+
position: absolute;
673+
z-index: -2;
674+
top: 10%;
675+
left: 10%;
676+
width: 80%;
677+
height: 80%;
678+
border-radius: 20%;
679+
background-color: var(--brand-primary);
680+
transition: opacity ease-in-out 0.5s;
681+
opacity: 0;
682+
}
683+
684+
&.active::after {
685+
filter: brightness(150%) hue-rotate(30deg) blur(15px);
686+
animation: spin 3s infinite both linear;
687+
opacity: 1;
688+
}
689+
690+
@keyframes spin {
691+
0% {
692+
transform: rotate(0deg);
693+
}
694+
100% {
695+
transform: rotate(360deg);
696+
}
697+
}
652698

653699
&.vscode {
654700
--brand-primary: #23a9f2;
@@ -667,10 +713,6 @@ exec "<path-to-directory>/bin/lua-language-server" "$@&quot
667713
cursor: pointer;
668714
}
669715

670-
&.active {
671-
box-shadow: var(--brand-primary) 0px 0px 15px 3px;
672-
}
673-
674716
img,
675717
:global(i) {
676718
height: 1em;

0 commit comments

Comments
 (0)