From ac836798b90eae0bb5b0cc35f37aba0e58ca6621 Mon Sep 17 00:00:00 2001
From: asus <asus@example.com>
Date: Fri, 17 May 2024 14:09:42 +0200
Subject: [PATCH] unified dot size responsivness for banner and mouses

---
 index.html                  | 40 ++++---------------------------------
 styles/elements/banners.css | 12 ++++++++++-
 styles/elements/mouses.css  |  3 ++-
 styles/elements/nav.css     | 30 ----------------------------
 4 files changed, 17 insertions(+), 68 deletions(-)
 delete mode 100644 styles/elements/nav.css

diff --git a/index.html b/index.html
index c8ae6a6..59a9e7a 100644
--- a/index.html
+++ b/index.html
@@ -14,7 +14,6 @@
 		<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/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">
 		<link href="./styles/elements/hero.css" type="text/css" rel="stylesheet">
 		<link href="./styles/elements/projects.css" type="text/css" rel="stylesheet">
@@ -108,7 +107,7 @@
 				</ul>
 			</details>
 
-			<div class="mouse"><div class="mouse_1"></div></div>
+			<div class="mouse"><div class="mouse_1 pre"></div></div>
 			<div class="banner banner_size_3 banner_speed_30 grid_full_width margin_bottom_small" aria-label="banner delimitation in ASCII art"></div>
 
 		</section>
@@ -156,7 +155,7 @@
 				</figure>
 			</article>
 
-			<div class="mouse"><div class="mouse_2"></div></div>
+			<div class="mouse"><div class="mouse_2 pre"></div></div>
 			<div class="banner banner_size_3 banner_speed_20 banner_reverse grid_full_width" aria-label="banner delimitation in ASCII art"></div>
 
 		</section>
@@ -168,38 +167,6 @@
 
 
 
-		<!--
-			CV
-		<section id="cv" class="section">
-
-			<header>
-				<h1 aria-label="cv" id="cv_ascii">
-<span aria-hidden="true" class="pre">
-     
-        
-        
-        
-      
-</span>
-				</h1>
-			</header>
-
-			<article>
-			</article>
-
-			<div class="mouse"><div class="mouse_3"></div></div>
-			<div class="banner banner_size_3 banner_speed_50 banner_reverse" aria-label="banner delimitation in ASCII art"></div>
-
-		</section>
-		-->
-
-
-
-
-
-
-
-
 		<!--
 			INFOS
 		-->
@@ -209,7 +176,8 @@
 				<p>hugogogo@protonmail.com</p>
 			</article>
 
-			<div class="mouse"><div class="mouse_4"></div></div>
+			<div class="mouse"><div class="mouse_3 pre"></div></div>
+			<div class="mouse"><div class="mouse_4 pre"></div></div>
 
 		</section>
 
diff --git a/styles/elements/banners.css b/styles/elements/banners.css
index 1566737..d63d2b8 100644
--- a/styles/elements/banners.css
+++ b/styles/elements/banners.css
@@ -2,7 +2,9 @@
 	width: 100%;
 	--base_banner_height: 24px;
 	--banner_height: var(--base_banner_height); /*default*/
-	height: min(26vw, var(--banner_height));
+	--base_dot_size: 4.2vw;
+	--dot_size: var(--base_dot_size); /*default*/
+	height: min(var(--dot_size), var(--banner_height));
 
 	background-image: url(../../docs/banners/banner_1.svg); /*default*/
 	background-size: contain;
@@ -14,6 +16,7 @@
 	animation-iteration-count: infinite;
 	animation-timing-function: linear;
 	animation-direction: normal;
+	animation: none;
 }
 @keyframes slide_svg {
 	from {background-position-x: 0%;}
@@ -57,28 +60,35 @@
 .banner_size_0 {
 	background-image: url(../../docs/banners/banner_0.svg);
 	--banner_height: calc(var(--base_banner_height) * 1);
+	--dot_size: calc(var(--base_dot_size) * 1);
 }
 .banner_size_00 {
 	background-image: url(../../docs/banners/banner_00.svg);
 	--banner_height: calc(var(--base_banner_height) * 1);
+	--dot_size: calc(var(--base_dot_size) * 1);
 }
 .banner_size_1 {
 	background-image: url(../../docs/banners/banner_1.svg);
 	--banner_height: calc(var(--base_banner_height) * 1);
+	--dot_size: calc(var(--base_dot_size) * 1);
 }
 .banner_size_2 {
 	background-image: url(../../docs/banners/banner_2.svg);
 	--banner_height: calc(var(--base_banner_height) * 2);
+	--dot_size: calc(var(--base_dot_size) * 2);
 }
 .banner_size_3 {
 	background-image: url(../../docs/banners/banner_3.svg);
 	--banner_height: calc(var(--base_banner_height) * 3);
+	--dot_size: calc(var(--base_dot_size) * 3);
 }
 .banner_size_4 {
 	background-image: url(../../docs/banners/banner_4.svg);
 	--banner_height: calc(var(--base_banner_height) * 4);
+	--dot_size: calc(var(--base_dot_size) * 4);
 }
 .banner_size_5 {
 	background-image: url(../../docs/banners/banner_5.svg);
 	--banner_height: calc(var(--base_banner_height) * 5);
+	--dot_size: calc(var(--base_dot_size) * 5);
 }
diff --git a/styles/elements/mouses.css b/styles/elements/mouses.css
index 35550c4..621d425 100644
--- a/styles/elements/mouses.css
+++ b/styles/elements/mouses.css
@@ -16,10 +16,11 @@
 		* 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;
+		font-size: min(2.1vw, 1.0rem);
+		*/
 
 		--tframes: 2s;
 		animation-name: mouse_move;
diff --git a/styles/elements/nav.css b/styles/elements/nav.css
deleted file mode 100644
index c23bd0f..0000000
--- a/styles/elements/nav.css
+++ /dev/null
@@ -1,30 +0,0 @@
-
-nav {
-	display: flex;
-	flex-direction: row;
-	justify-content: center;
-	position: fixed;
-	top: 0;
-	background-color: #f6f6f6;
-	z-index: 1;
-	width: 100vw;
-	font-size: min(4vw, 1.5rem);
-}
-nav a {
-	position: relative;
-	padding: 10px min(5%, 20px);
-	height: fit-content;
-	text-decoration: none;
-	color: inherit;
-}
-nav a:before {
-	content: "•";
-	position: absolute;
-	left: 0px;
-}
-nav a:after {
-	content: "•";
-	position: absolute;
-	right: 0px;
-}
-