-
- •
- •
- •• •
- • • •
- •••••••••
- • • ••
- • • •
- ••••• • • •
- • • •• •
- • • •
- • • ••
- • • • •
- • •• •
- ••• ••••
-
-
+
+
•
•
•• •
@@ -50,12 +36,12 @@
••••• • • •
• • •• •
• • •
- • • ••
+ • • ••
• • • •
• •• •
••• ••••
-
+
•
•
•• •
@@ -71,99 +57,23 @@
• •• •
••• ••••
-
+
•
•
•• •
• • •
•••••••••
- • • ••
+ • • ••
• • •
- ••••• • • •
- • • •• •
+ ••••• • • •
+ • • •• •
• • •
• • ••
- • • • •
+ • • • •
• •• •
••• ••••
-
- •
- •
- •• •
- • • •
- •••••••••
- • • ••
- • • •
- ••••• • • •
- • • •• •
- • • •
- • • ••
- • • • •
- • •• •
- ••• ••••
-
-
- •
- •
- •• •
- • • •
- •••••••••
- • • ••
- • • •
- ••••• • • •
- • • •• •
- • • •
- • • ••
- • • • •
- • •• •
- ••• ••••
-
-
- •
- •
- •• •
- • • •
- •••••••••
- • • ••
- • • •
- ••••• • • •
- • • •• •
-• • •
- • • ••
- • • • •
- • •• •
- ••• ••••
-
-
- ••
- • • •
- •• •
- • • •
- • • • •
- ••••• • ••
- • • •••••••••
- • • •
-•• • ••• •
- • • • •
- • •• • •
- ••• ••••
-
-
- ••
- • • •
- •• •
- • • •
- • • • •
- ••••• • ••
- • • •••••••••
- • • • •
- • • ••• •
- • • • •
- • •• • •
- ••• ••••
-
-
+
••
• • •
@@ -179,21 +89,6 @@
••• ••••
•
diff --git a/style.css b/style.css
deleted file mode 100644
index b5d2291..0000000
--- a/style.css
+++ /dev/null
@@ -1,122 +0,0 @@
-body {
- /*
- */
- overflow-x: hidden;
-}
-body * {
- display: flex;
- margin: auto;
-}
-script, style {
- display: none;
-}
-p, pre {
- line-height: 0.8;
- font-size: 12px;
- font-family: monospace;
-}
-pre {
- margin: 10px 0px;
-}
-
-div.banner {
- flex-wrap: wrap;
- overflow: hidden;
- width: 99vw;
- margin: 10px 0px;
-}
-div.smallbanner {
- height: 3.5ex;
-}
-div.bigbanner {
- height: 21.5ex;
-}
-div.banner * {
- margin: 0px;
-}
-div.banner p {
- white-space: pre;
-}
-div.banner br {
- display: block;
-}
-pre.banner {
- position: relative;
- margin-left: -100px;
- animation-name: slide;
- animation-iteration-count: infinite;
- animation-duration: 2s;
- animation-timing-function: linear;
- animation-direction: normal;
-}
-pre.banner.pause {
- animation-play-state: paused;
-}
-pre.banner.reverse {
- animation-direction: reverse;
-}
-pre.banner.t0_5 {
- animation-duration: 0.5s;
-}
-pre.banner.t1_0 {
- animation-duration: 1s;
-}
-pre.banner.t1_5 {
- animation-duration: 1.5s;
-}
-@keyframes slide {
- from {left:0;}
- to {left:2.4em;}
-}
-
-.mouse_container {
- display: grid;
- width: fit-content;
- margin-left: 0px;
-
- /*
- border: 1px solid blue;
- */
-}
-pre.mouse {
- position: relative;
- grid-column: 1;
- grid-row: 1;
- margin: auto auto 0px 0px;
- /*
- width: fit-content;
- height: fit-content;
-
- border: 1px solid red;
- */
-
- opacity: 0;
- --tmouse: 2s;
- animation-name: mouse;
- animation-iteration-count: infinite;
- animation-duration: var(--tmouse);
- animation-timing-function: linear;
- animation-direction: normal;
-}
-/*
-pre.mouse:first-child {
- position: relative;
-}
-*/
-
-pre.mouse.f2 {animation-delay: calc(var(--tmouse) * 10/100);}
-pre.mouse.f3 {animation-delay: calc(var(--tmouse) * 20/100);}
-pre.mouse.f4 {animation-delay: calc(var(--tmouse) * 30/100);}
-pre.mouse.f5 {animation-delay: calc(var(--tmouse) * 40/100);}
-pre.mouse.f6 {animation-delay: calc(var(--tmouse) * 50/100);}
-pre.mouse.f7 {animation-delay: calc(var(--tmouse) * 60/100);}
-pre.mouse.f8 {animation-delay: calc(var(--tmouse) * 70/100);}
-pre.mouse.f9 {animation-delay: calc(var(--tmouse) * 80/100);}
-pre.mouse.f10 {animation-delay: calc(var(--tmouse) * 90/100);}
-@keyframes mouse {
- 0% {opacity: 1;}
- 10% {opacity: 1;}
- 10.1% {opacity: 0;}
- 100% {opacity: 0;}
-}
-
diff --git a/style/banners.css b/style/banners.css
new file mode 100644
index 0000000..d24cbac
--- /dev/null
+++ b/style/banners.css
@@ -0,0 +1,51 @@
+
+div.banner {
+ flex-wrap: wrap;
+ overflow: hidden;
+ width: 99vw;
+ margin: 10px 0px;
+}
+div.smallbanner {
+ height: 3.5ex;
+}
+div.bigbanner {
+ height: 21.5ex;
+}
+div.banner * {
+ margin: 0px;
+}
+div.banner p {
+ white-space: pre;
+}
+div.banner br {
+ display: block;
+}
+pre.banner {
+ position: relative;
+ margin-left: -100px;
+ animation-name: slide;
+ animation-iteration-count: infinite;
+ animation-duration: 2s;
+ animation-timing-function: linear;
+ animation-direction: normal;
+}
+pre.banner.pause {
+ animation-play-state: paused;
+}
+pre.banner.reverse {
+ animation-direction: reverse;
+}
+pre.banner.t0_5 {
+ animation-duration: 0.5s;
+}
+pre.banner.t1_0 {
+ animation-duration: 1s;
+}
+pre.banner.t1_5 {
+ animation-duration: 1.5s;
+}
+@keyframes slide {
+ from {left:0;}
+ to {left:2.4em;}
+}
+
diff --git a/style/frames.css b/style/frames.css
new file mode 100644
index 0000000..8bd98ae
--- /dev/null
+++ b/style/frames.css
@@ -0,0 +1,46 @@
+
+.frames_container {
+ display: grid;
+ width: fit-content;
+ margin-left: 0px;
+
+ /*
+ border: 1px solid blue;
+ */
+}
+pre.frame.hide {
+ display: none;
+}
+pre.frame {
+ position: relative;
+ grid-column: 1;
+ grid-row: 1;
+ margin: auto auto 0px 0px;
+
+ /*
+ width: fit-content;
+ height: fit-content;
+
+ border: 1px solid red;
+ */
+
+ opacity: 0;
+ --tframes: 2s;
+ animation-name: ascii_frame;
+ animation-iteration-count: infinite;
+ animation-duration: var(--tframes);
+ animation-timing-function: linear;
+ animation-direction: normal;
+}
+
+pre.frame.f2 {animation-delay: calc(var(--tframes) * 25/100);}
+pre.frame.f3 {animation-delay: calc(var(--tframes) * 50/100);}
+pre.frame.f4 {animation-delay: calc(var(--tframes) * 75/100);}
+
+@keyframes ascii_frame {
+ 0% {opacity: 1;}
+ 25% {opacity: 1;}
+ 25.1% {opacity: 0;}
+ 100% {opacity: 0;}
+}
+
diff --git a/style/style.css b/style/style.css
new file mode 100644
index 0000000..e64f974
--- /dev/null
+++ b/style/style.css
@@ -0,0 +1,22 @@
+body {
+ /*
+ */
+ overflow-x: hidden;
+}
+body * {
+ display: flex;
+ margin: auto;
+}
+script, style {
+ display: none;
+}
+p, pre {
+ line-height: 0.8;
+ font-size: 12px;
+ font-family: monospace;
+}
+pre {
+ margin: 10px 0px;
+}
+
+