diff --git a/out/index.html b/out/index.html
index b013bcf..7cc07ca 100644
--- a/out/index.html
+++ b/out/index.html
@@ -12,6 +12,7 @@
<div class="textbox__text">
Welcome to <span class="textbox__span textbox__span--red">webring.umbreon.online</span>!
</div>
+ <div class="textbox__advance"></div>
</div>
<p>
diff --git a/out/style.css b/out/style.css
index 790a871..386a8ef 100644
--- a/out/style.css
+++ b/out/style.css
@@ -130,6 +130,40 @@ main {
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);
}
+.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-text-color: #C54700;
diff --git a/out/style.css.map b/out/style.css.map
index e6280aa..cb85354 100644
--- a/out/style.css.map
+++ b/out/style.css.map
@@ -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"}
\ No newline at end of file
+{"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"}
\ No newline at end of file
diff --git a/style.scss b/style.scss
index 93d75f4..7cb980d 100644
--- a/style.scss
+++ b/style.scss
@@ -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