From 0268844a508a60e3df7d037f68adcd3aad75a3b8 Mon Sep 17 00:00:00 2001 From: Erin Date: Wed, 19 Jul 2023 16:32:37 -0400 Subject: [PATCH] there now the text advance indicator is there --- out/index.html | 1 + out/style.css | 34 +++++++++++++++++++++++ out/style.css.map | 2 +- style.scss | 70 +++++++++++++++++++++++++++++++++++++++++++++++ 4 files changed, 106 insertions(+), 1 deletion(-) 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 @@
Welcome to webring.umbreon.online!
+

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