erin/webring-static
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases 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

1
out/index.html
View file

@ -12,6 +12,7 @@
<div class="textbox__text"> <div class="textbox__text">
Welcome to <span class="textbox__span textbox__span--red">webring.umbreon.online</span>! Welcome to <span class="textbox__span textbox__span--red">webring.umbreon.online</span>!
</div> </div>
<div class="textbox__advance"></div>
</div> </div>
<p> <p>

34
out/style.css
View file

@ -130,6 +130,40 @@ main {
color: var(--textbox-text-color); color: var(--textbox-text-color);
text-shadow: 1rem 0 var(--textbox-text-shadow), 1rem 1rem var(--textbox-text-shadow), 0 1rem var(--textbox-text-shadow); text-shadow: 1rem 0 var(--textbox-text-shadow), 1rem 1rem var(--textbox-text-shadow), 0 1rem var(--textbox-text-shadow);
} }
.textbox__advance {
--background: #FFF;
--border: #000;
--shadow: #42424A;
position: absolute;
bottom: 8rem;
right: -6rem;
width: 2rem;
height: 2rem;
background: var(--background);
box-shadow: -1rem 0 var(--background), -2rem -2rem var(--background), -1rem -2rem var(--background), 1rem -2rem var(--background), -0.5rem 1.5rem 0 -0.5rem var(--background), -0.5rem 2.5rem 0 -0.5rem var(--background), -2.5rem -2.5rem 0 0.5rem var(--border), 1.5rem -2.5rem 0 0.5rem var(--border), 0 -3rem 0 0 var(--border), -2rem 0 var(--border), 1rem 0 var(--border), -1rem 2rem var(--border), 0 2rem var(--border), -0.5rem 3.5rem 0 -0.5rem var(--border), -1.5rem -1.5rem 0 0.5rem var(--shadow), 2.5rem -1.5rem 0 0.5rem var(--shadow), 1rem -2rem 0 0 var(--shadow), -1rem 1rem var(--shadow), 2rem 1rem var(--shadow), 0 3rem var(--shadow), 1rem 3rem var(--shadow), 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) {
.textbox__advance {
animation: 0.6666666667s steps(1) bounce infinite;
}
}
.textbox__span--red { .textbox__span--red {
--textbox-text-color: #C54700; --textbox-text-color: #C54700;

2
out/style.css.map
View file

@ -1 +1 @@
{"version":3,"sourceRoot":"","sources":["../style.scss"],"names":[],"mappings":"AACA;EACC;EACA;;AAGD;EACC;EACA;;AAGD;EAEC;EAGA;EAIA;AAAA;AAAA;AAAA;AAAA;AAAA;;;AASD;EACC;EACA;EACA;EACA;EAEA;EACA;EACA;;;AAGD;EACC;EACA;;;AAID;EAKC;;AAIA;EAEC;EACA;EACA;EACA;EAIA;EAGA;EACA;EAGA;;AAGA;EAEC;EACA;EACA;EACA;EACA;EACA;EAIA;EAMA;EAGA,YAEA;;AAqBD;EACC;EACA;EACA;;AAED;EACC;EACA;EACA;;AAKD;EACC;;AAEA;EACC;;AAED;EACC;;AAGD;EACC;EACA;;AAMH;EACC;EACA;EACA;EACA;;AAED;EACC;EACA;EACA;EACA;;AAED;EACC;EACA;EACA;EACA;;AAED;EACC;EACA;EACA;EACA;;AAED;EACC;EACA;EACA;EACA;;AAED;EACC;EACA;EACA;EACA;;AAKD;EAGC;EAIA;EACA;EACA;EAGA,YACQ;EAOR;EAGA;EAGA;EAEA;;AAQA;EACC;EACA,aACC;;;AASH;EACC;EACA;;AAGD;EACC;EACA;;;AAKF;EACC;EACA;EACA;EACA;EACA","file":"style.css"} {"version":3,"sourceRoot":"","sources":["../style.scss"],"names":[],"mappings":"AACA;EACC;EACA;;AAGD;EACC;EACA;;AAGD;EAEC;EAGA;EAIA;AAAA;AAAA;AAAA;AAAA;AAAA;;;AASD;EACC;EACA;EACA;EACA;EAEA;EACA;EACA;;;AAGD;EACC;EACA;;;AAID;EAKC;;AAIA;EAEC;EACA;EACA;EACA;EAIA;EAGA;EACA;EAGA;;AAGA;EAEC;EACA;EACA;EACA;EACA;EACA;EAIA;EAMA;EAGA,YAEA;;AAqBD;EACC;EACA;EACA;;AAED;EACC;EACA;EACA;;AAKD;EACC;;AAEA;EACC;;AAED;EACC;;AAGD;EACC;EACA;;AAMH;EACC;EACA;EACA;EACA;;AAED;EACC;EACA;EACA;EACA;;AAED;EACC;EACA;EACA;EACA;;AAED;EACC;EACA;EACA;EACA;;AAED;EACC;EACA;EACA;EACA;;AAED;EACC;EACA;EACA;EACA;;AAKD;EAGC;EAIA;EACA;EACA;EAGA,YACQ;EAOR;EAGA;EAGA;EAEA;;AAQA;EACC;EACA,aACC;;AAMA;EACF;EACM;EACA;EAEN;EACM;EACA;EACA;EACA;EACA;EACA,YAGI;;AAkCV;EACC;IACC;;EAED;IACC;;EAED;IACC;;EAED;IACC;;EAED;IACC;;;AAGF;EAjEE;IAkED;;;;AAOF;EACC;EACA;;AAGD;EACC;EACA;;;AAKF;EACC;EACA;EACA;EACA;EACA","file":"style.css"}

70
style.scss
View file

@ -229,6 +229,76 @@ main {
0 1rem var(--textbox-text-shadow); 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 // custom text colors in text boxes