erin/webring-static
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

there now the text advance indicator is there

Browse source
This commit is contained in:
erin 2023-07-19 16:32:37 -04:00
parent df4f67ce8f
commit f778c69639
4 changed files with 106 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

70
style.scss
View file

@ -229,6 +229,76 @@ main {
0 1rem var(--textbox-text-shadow);
}
}
&__advance {
--background: #FFF;
--border: #000;
--shadow: #42424A;
position: absolute;
bottom: 8rem;
right: -6rem;
width: 2rem;
height: 2rem;
background: var(--background);
box-shadow:
// background
// top and middle
-1rem 0 var(--background),
-2rem -2rem var(--background),
-1rem -2rem var(--background),
1rem -2rem var(--background),
// tip of triangle
-0.5rem 1.5rem 0 -0.5rem var(--background),
-0.5rem 2.5rem 0 -0.5rem var(--background),
// borders
// top segments
-2.5rem -2.5rem 0 0.5rem var(--border),
1.5rem -2.5rem 0 0.5rem var(--border),
0 -3rem 0 0 var(--border),
// middle segments
-2rem 0 var(--border),
1rem 0 var(--border),
-1rem 2rem var(--border),
0 2rem var(--border),
// tip
-0.5rem 3.5rem 0 -0.5rem var(--border),
// shadow
// top segments
-1.5rem -1.5rem 0 0.5rem var(--shadow),
2.5rem -1.5rem 0 0.5rem var(--shadow),
1rem -2rem 0 0 var(--shadow),
// middle segments
-1rem 1rem var(--shadow),
2rem 1rem var(--shadow),
0 3rem var(--shadow),
1rem 3rem var(--shadow),
// tip
0.5rem 4.5rem 0 -0.5rem var(--shadow);
@keyframes bounce {
from {
transform: translateY(0);
}
25% {
transform: translateY(-1rem);
}
50% {
transform: translateY(-2rem);
}
75% {
transform: translateY(-1rem);
}
to {
transform: translateY(0);
}
}
@media not (prefers-reduced-motion) {
animation: calc(2 / 3 * 1s) steps(1) bounce infinite;
}
}
}
// custom text colors in text boxes