-
-
-
-
-
-
-
+
+
@@ -202,80 +124,7 @@
-
-
-
-
-
-
+
@@ -305,7 +154,7 @@
-
-
-
-
-
+
@@ -451,72 +236,7 @@
hugogogo@protonmail.com
-
-
-
-
-
-
+
diff --git a/styles/elements/banners.css b/styles/elements/banners.css
index 08f2281..4f9aae2 100644
--- a/styles/elements/banners.css
+++ b/styles/elements/banners.css
@@ -4,7 +4,7 @@
--banner_height: var(--base_banner_height); /*default*/
height: min(26vw, var(--banner_height));
- background-image: url(../img/banner_1.svg); /*default*/
+ background-image: url(../../docs/banners/banner_1.svg); /*default*/
background-size: contain;
background-repeat: repeat;
background-position-x: 0%;
@@ -55,22 +55,22 @@
*
*/
.banner_size_1 {
- background-image: url(../img/banner_1.svg);
+ background-image: url(../../docs/banners/banner_1.svg);
--banner_height: calc(var(--base_banner_height) * 1);
}
.banner_size_2 {
- background-image: url(../img/banner_2.svg);
+ background-image: url(../../docs/banners/banner_2.svg);
--banner_height: calc(var(--base_banner_height) * 2);
}
.banner_size_3 {
- background-image: url(../img/banner_3.svg);
+ background-image: url(../../docs/banners/banner_3.svg);
--banner_height: calc(var(--base_banner_height) * 3);
}
.banner_size_4 {
- background-image: url(../img/banner_4.svg);
+ background-image: url(../../docs/banners/banner_4.svg);
--banner_height: calc(var(--base_banner_height) * 4);
}
.banner_size_5 {
- background-image: url(../img/banner_5.svg);
+ background-image: url(../../docs/banners/banner_5.svg);
--banner_height: calc(var(--base_banner_height) * 5);
}
diff --git a/styles/elements/mouses.css b/styles/elements/mouses.css
index e098dc5..35550c4 100644
--- a/styles/elements/mouses.css
+++ b/styles/elements/mouses.css
@@ -1,53 +1,48 @@
+@import "./mouses/mouse_1.css";
+@import "./mouses/mouse_2.css";
+@import "./mouses/mouse_3.css";
+@import "./mouses/mouse_4.css";
.mouse {
- position: relative;
- margin: 20px 0px;
-}
-.frames_container {
- display: grid;
- grid-template-rows: 1fr;
+ margin: auto;
width: fit-content;
-}
-pre.frame.hide {
- display: none;
-}
-pre.frame {
- position: relative;
- justify-items: start;
- align-items: end;
- grid-column: 1;
- grid-row: 1;
+ overflow: hidden;
- opacity: 0;
- --tframes: 2s;
- animation-name: ascii_frame;
- animation-iteration-count: infinite;
- animation-duration: var(--tframes);
- animation-timing-function: steps(3);
- animation-direction: normal;
-}
+ > div {
+ position: relative;
+ top: 0%;
-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);}
+ /*
+ * for pseudo elements ::before and ::after
+ * for some reason it does not work when applied to them directly
+ * if they are not position absolute
+ */
+ white-space: pre;
+ line-height: 0.8;
+ font-size: 1.0rem;
-@keyframes ascii_frame {
- 0% {opacity: 1;}
- 25% {opacity: 1;}
- 25.1% {opacity: 0;}
- 100% {opacity: 0;}
-}
+ --tframes: 2s;
+ animation-name: mouse_move;
+ animation-iteration-count: infinite;
+ animation-duration: var(--tframes);
+ animation-direction: normal;
+ animation-timing-function: steps(1);
+ }
+ > div::before {
+ position: relative;
+ top: 0px;
+ left: 0px;
+ }
-#mouse_1 {
- place-self: center;
+ > div::after {
+ position: absolute;
+ top: 100%;
+ left: 0px;
+ }
}
-#mouse_2 {
- left: 10%;
+@keyframes mouse_move {
+ 0% {top: 0%;}
+ 25% {top: -100%;}
+ 50% {top: -200%;}
+ 75% {top: -300%;}
}
-#mouse_3 {
- left: 60%;
-}
-#mouse_4 {
- left: 20%;
-}
-
diff --git a/styles/elements/mouses/mouse_1.css b/styles/elements/mouses/mouse_1.css
new file mode 100644
index 0000000..bc1ce28
--- /dev/null
+++ b/styles/elements/mouses/mouse_1.css
@@ -0,0 +1,72 @@
+.mouse_1::before {
+ content:'\
+ \a
+ \a
+ \a
+ \a
+ \a
+ \a
+ \a
+ \a
+ \a
+ \a
+ \a
+ \a
+ \a
+ \a
+ \a
+ \a
+';
+}
+.mouse_1::after {
+ content:'\
+ \a
+ \a
+ \a
+ \a
+ \a
+ \a
+ \a
+ \a
+ \a
+ \a
+ \a
+ \a
+ \a
+ \a
+ \a
+ \a
+ \a
+ \a
+ \a
+ \a
+ \a
+ \a
+ \a
+ \a
+ \a
+ \a
+ \a
+ \a
+ \a
+ \a
+ \a
+ \a
+ \a
+ \a
+ \a
+ \a
+ \a
+ \a
+ \a
+ \a
+ \a
+ \a
+ \a
+ \a
+ \a
+ \a
+ \a
+ \a
+';
+}
diff --git a/styles/elements/mouses/mouse_2.css b/styles/elements/mouses/mouse_2.css
new file mode 100644
index 0000000..c47c443
--- /dev/null
+++ b/styles/elements/mouses/mouse_2.css
@@ -0,0 +1,72 @@
+.mouse_2::before {
+ content:'\
+ \a
+ \a
+ \a
+ \a
+ \a
+ \a
+ \a
+ \a
+ \a
+ \a
+ \a
+ \a
+ \a
+ \a
+ \a
+ \a
+';
+}
+.mouse_2::after {
+ content:'\
+ \a
+ \a
+ \a
+ \a
+ \a
+ \a
+ \a
+ \a
+ \a
+ \a
+ \a
+ \a
+ \a
+ \a
+ \a
+ \a
+ \a
+ \a
+ \a
+ \a
+ \a
+ \a
+ \a
+ \a
+ \a
+ \a
+ \a
+ \a
+ \a
+ \a
+ \a
+ \a
+ \a
+ \a
+ \a
+ \a
+ \a
+ \a
+ \a
+ \a
+ \a
+ \a
+ \a
+ \a
+ \a
+ \a
+ \a
+ \a
+';
+}
diff --git a/styles/elements/mouses/mouse_3.css b/styles/elements/mouses/mouse_3.css
new file mode 100644
index 0000000..db3b2ef
--- /dev/null
+++ b/styles/elements/mouses/mouse_3.css
@@ -0,0 +1,64 @@
+.mouse_3::before {
+ content:'\
+ \a
+ \a
+ \a
+ \a
+ \a
+ \a
+ \a
+ \a
+ \a
+ \a
+ \a
+ \a
+ \a
+ \a
+';
+}
+.mouse_3::after {
+ content:'\
+ \a
+ \a
+ \a
+ \a
+ \a
+ \a
+ \a
+ \a
+ \a
+ \a
+ \a
+ \a
+ \a
+ \a
+ \a
+ \a
+ \a
+ \a
+ \a
+ \a
+ \a
+ \a
+ \a
+ \a
+ \a
+ \a
+ \a
+ \a
+ \a
+ \a
+ \a
+ \a
+ \a
+ \a
+ \a
+ \a
+ \a
+ \a
+ \a
+ \a
+ \a
+ \a
+';
+}
diff --git a/styles/elements/mouses/mouse_4.css b/styles/elements/mouses/mouse_4.css
new file mode 100644
index 0000000..cad479e
--- /dev/null
+++ b/styles/elements/mouses/mouse_4.css
@@ -0,0 +1,64 @@
+.mouse_4::before {
+ content:'\
+ \a
+ \a
+ \a
+ \a
+ \a
+ \a
+ \a
+ \a
+ \a
+ \a
+ \a
+ \a
+ \a
+ \a
+';
+}
+.mouse_4::after {
+ content:'\
+ \a
+ \a
+ \a
+ \a
+ \a
+ \a
+ \a
+ \a
+ \a
+ \a
+ \a
+ \a
+ \a
+ \a
+ \a
+ \a
+ \a
+ \a
+ \a
+ \a
+ \a
+ \a
+ \a
+ \a
+ \a
+ \a
+ \a
+ \a
+ \a
+ \a
+ \a
+ \a
+ \a
+ \a
+ \a
+ \a
+ \a
+ \a
+ \a
+ \a
+ \a
+ \a
+';
+}
diff --git a/styles/style.css b/styles/style.css
index a6a825a..6bf9418 100644
--- a/styles/style.css
+++ b/styles/style.css
@@ -1,4 +1,3 @@
-
:root {
--base_font_size: 62.5%;
}