From 3747762c4f06f31ca27356199e7b52105b36d300 Mon Sep 17 00:00:00 2001
From: asus <asus@example.com>
Date: Wed, 15 May 2024 11:45:34 +0200
Subject: [PATCH] banners are now svg images

---
 index.html                              | 44 +-----------
 styles/elements/banners.css             | 95 ++++++++++++++++++-------
 styles/elements/banners_svg.css         | 21 ------
 styles/img/banner_1.svg                 | 32 +++++++++
 styles/img/banner_2.svg                 | 35 +++++++++
 styles/img/banner_3.svg                 | 38 ++++++++++
 styles/img/banner_4.svg                 | 40 +++++++++++
 styles/img/{banner.svg => banner_5.svg} |  2 +-
 8 files changed, 218 insertions(+), 89 deletions(-)
 delete mode 100644 styles/elements/banners_svg.css
 create mode 100644 styles/img/banner_1.svg
 create mode 100644 styles/img/banner_2.svg
 create mode 100644 styles/img/banner_3.svg
 create mode 100644 styles/img/banner_4.svg
 rename styles/img/{banner.svg => banner_5.svg} (99%)

diff --git a/index.html b/index.html
index eb522c5..034faa5 100644
--- a/index.html
+++ b/index.html
@@ -13,7 +13,6 @@
 		<link href="./styles/text.css" type="text/css" rel="stylesheet">
 		<link href="./styles/elements/mouses.css" type="text/css" rel="stylesheet">
 		<link href="./styles/elements/banners.css" type="text/css" rel="stylesheet">
-		<link href="./styles/elements/banners_svg.css" type="text/css" rel="stylesheet">
 		<link href="./styles/elements/title.css" type="text/css" rel="stylesheet">
 		<link href="./styles/elements/nav.css" type="text/css" rel="stylesheet">
 		<link href="./styles/elements/sections.css" type="text/css" rel="stylesheet">
@@ -46,7 +45,6 @@
 			<a href="#infos">contact</a>
 		</nav>
 		-->
-<div class="banner_svg"></div>
 
 
 		<!--
@@ -162,25 +160,7 @@
                              
 </pre>
 			</div>
-			<div id="banner_1" class="banner" role="img" aria-label="banner delimitation in ASCII art">
-<pre class="pre_banner" aria-hidden="true">
-                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    
-                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        
-                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    
-                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    
-                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        
-                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    
-                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    
-                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        
-                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    
-                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    
-                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        
-                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    
-                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    
-                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        
-                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    
-</pre>
-			</div>
+			<div class="banner banner_size_5 banner_speed_30" aria-label="banner delimitation in ASCII art"></div>
 		</section>
 
 
@@ -299,19 +279,7 @@
       
 </pre>
 			</div>
-			<div id="banner_2" class="banner" role="img" aria-label="banner delimitation in ASCII art">
-<pre class="banner reverse t05" aria-hidden="true">
-                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  
-                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       
-                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   
-                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    
-                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        
-                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    
-                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  
-                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       
-                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   
-</pre>
-			</div>
+			<div class="banner banner_size_3 banner_speed_20 banner_reverse" aria-label="banner delimitation in ASCII art"></div>
 
 		</section>
 
@@ -466,13 +434,7 @@
                    
 </pre>
 			</div>
-			<div id="banner_3" class="banner" role="img" aria-label="banner delimitation in ASCII art">
-<pre class="banner t15 reverse" aria-hidden="true">
-                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    
-                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        
-                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    
-</pre>
-			</div>
+			<div class="banner banner_size_3 banner_speed_50 banner_reverse" aria-label="banner delimitation in ASCII art"></div>
 
 		</section>
 
diff --git a/styles/elements/banners.css b/styles/elements/banners.css
index 9cb5450..08f2281 100644
--- a/styles/elements/banners.css
+++ b/styles/elements/banners.css
@@ -1,33 +1,76 @@
+.banner {
+	width: 100%;
+	--base_banner_height: 24px;
+	--banner_height: var(--base_banner_height); /*default*/
+	height: min(26vw, var(--banner_height));
 
-.pre_banner {
-	position: relative;
-	margin: 10px 0px 10px -100px;
-	animation-name: slide;
+	background-image: url(../img/banner_1.svg); /*default*/
+	background-size: contain;
+	background-repeat: repeat;
+	background-position-x: 0%;
+
+	animation-duration: 10s; /*default*/
+	animation-name: slide_svg;
 	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.t05 {
-	animation-duration: 0.5s;
-}
-.pre_banner.t10 {
-	animation-duration: 1s;
-}
-.pre_banner.t15 {
-	animation-duration: 1.5s;
-}
-.pre_banner.t20 {
-	animation-duration: 2s;
-}
-@keyframes slide {
-	from {left:0;}
-	to {left:2.4em;}
+@keyframes slide_svg {
+	from {background-position-x: 0%;}
+	to   {background-position-x: 100%;}
 }
 
+
+
+/*
+* speeds
+*
+*/
+.banner_pause {
+	animation-play-state: paused;
+}
+.banner_reverse {
+	animation-direction: reverse;
+}
+.banner_speed_10 {
+	animation-duration: 10s;
+}
+.banner_speed_20 {
+	animation-duration: 20s;
+}
+.banner_speed_30 {
+	animation-duration: 30s;
+}
+.banner_speed_40 {
+	animation-duration: 40s;
+}
+.banner_speed_50 {
+	animation-duration: 50s;
+}
+
+
+
+/*
+* sizes
+*
+*/
+.banner_size_1 {
+	background-image: url(../img/banner_1.svg);
+	--banner_height: calc(var(--base_banner_height) * 1);
+}
+.banner_size_2 {
+	background-image: url(../img/banner_2.svg);
+	--banner_height: calc(var(--base_banner_height) * 2);
+}
+.banner_size_3 {
+	background-image: url(../img/banner_3.svg);
+	--banner_height: calc(var(--base_banner_height) * 3);
+}
+.banner_size_4 {
+	background-image: url(../img/banner_4.svg);
+	--banner_height: calc(var(--base_banner_height) * 4);
+}
+.banner_size_5 {
+	background-image: url(../img/banner_5.svg);
+	--banner_height: calc(var(--base_banner_height) * 5);
+}
diff --git a/styles/elements/banners_svg.css b/styles/elements/banners_svg.css
deleted file mode 100644
index ac48b6d..0000000
--- a/styles/elements/banners_svg.css
+++ /dev/null
@@ -1,21 +0,0 @@
-.banner_svg {
-	width: 100%;
-	height: 150px;
-	height: min(26vw, 150px);
-
-	background-image: url(../img/banner.svg);
-	background-size: contain;
-	background-repeat: no-repeat;
-	background-repeat: repeat;
-	background-position-x: 0%;
-
-	animation-name: slide_svg;
-	animation-iteration-count: infinite;
-	animation-duration: 30s;
-	animation-timing-function: linear;
-	animation-direction: normal;
-}
-@keyframes slide_ssvg {
-	from {background-position-x: 0%;}
-	to   {background-position-x: 100%;}
-}
diff --git a/styles/img/banner_1.svg b/styles/img/banner_1.svg
new file mode 100644
index 0000000..6733351
--- /dev/null
+++ b/styles/img/banner_1.svg
@@ -0,0 +1,32 @@
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	width="58"
+	height="58"
+>
+	<defs>
+		<style type="text/css">
+			@font-face {
+				font-family: "notomono_e066";
+				src: url(data:application/font-woff;charset=utf-8;base64,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) format("woff");
+				font-weight: normal;
+				font-style: normal;
+			}
+			text {
+				font-family: "notomono_e066";
+				font-size: 1.5rem;
+				font-weight: normal;
+				font-style: normal;
+				white-space: pre;
+				line-height: 0.8;
+			}
+		</style>
+	</defs>
+  <text x="0" y="0">
+   
+  
+   
+	</text>
+
+  <!-- Other SVG elements and attributes -->
+</svg>
+
diff --git a/styles/img/banner_2.svg b/styles/img/banner_2.svg
new file mode 100644
index 0000000..ea9d7c2
--- /dev/null
+++ b/styles/img/banner_2.svg
@@ -0,0 +1,35 @@
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	width="58"
+	height="116"
+>
+	<defs>
+		<style type="text/css">
+			@font-face {
+				font-family: "notomono_e066";
+				src: url(data:application/font-woff;charset=utf-8;base64,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) format("woff");
+				font-weight: normal;
+				font-style: normal;
+			}
+			text {
+				font-family: "notomono_e066";
+				font-size: 1.5rem;
+				font-weight: normal;
+				font-style: normal;
+				white-space: pre;
+				line-height: 0.8;
+			}
+		</style>
+	</defs>
+  <text x="0" y="0">
+   
+  
+   
+   
+  
+   
+	</text>
+
+  <!-- Other SVG elements and attributes -->
+</svg>
+
diff --git a/styles/img/banner_3.svg b/styles/img/banner_3.svg
new file mode 100644
index 0000000..d539c53
--- /dev/null
+++ b/styles/img/banner_3.svg
@@ -0,0 +1,38 @@
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	width="58"
+	height="174"
+>
+	<defs>
+		<style type="text/css">
+			@font-face {
+				font-family: "notomono_e066";
+				src: url(data:application/font-woff;charset=utf-8;base64,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) format("woff");
+				font-weight: normal;
+				font-style: normal;
+			}
+			text {
+				font-family: "notomono_e066";
+				font-size: 1.5rem;
+				font-weight: normal;
+				font-style: normal;
+				white-space: pre;
+				line-height: 0.8;
+			}
+		</style>
+	</defs>
+  <text x="0" y="0">
+   
+  
+   
+   
+  
+   
+   
+  
+   
+	</text>
+
+  <!-- Other SVG elements and attributes -->
+</svg>
+
diff --git a/styles/img/banner_4.svg b/styles/img/banner_4.svg
new file mode 100644
index 0000000..a54bd49
--- /dev/null
+++ b/styles/img/banner_4.svg
@@ -0,0 +1,40 @@
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	width="58"
+	height="232"
+>
+	<defs>
+		<style type="text/css">
+			@font-face {
+				font-family: "notomono_e066";
+				src: url(data:application/font-woff;charset=utf-8;base64,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) format("woff");
+				font-weight: normal;
+				font-style: normal;
+			}
+			text {
+				font-family: "notomono_e066";
+				font-size: 1.5rem;
+				font-weight: normal;
+				font-style: normal;
+				white-space: pre;
+				line-height: 0.8;
+			}
+		</style>
+	</defs>
+  <text x="0" y="0">
+   
+  
+   
+   
+  
+   
+   
+  
+   
+   
+  
+   
+	</text>
+
+  <!-- Other SVG elements and attributes -->
+</svg>
diff --git a/styles/img/banner.svg b/styles/img/banner_5.svg
similarity index 99%
rename from styles/img/banner.svg
rename to styles/img/banner_5.svg
index d509b89..2f7e858 100644
--- a/styles/img/banner.svg
+++ b/styles/img/banner_5.svg
@@ -1,7 +1,7 @@
 <svg
 	xmlns="http://www.w3.org/2000/svg"
 	width="58"
-	height="293"
+	height="290"
 >
 	<defs>
 		<style type="text/css">