From ea781e2aac4aff0e5acb280118150a4a75ccc263 Mon Sep 17 00:00:00 2001
From: asus <asus@example.com>
Date: Sun, 19 Nov 2023 17:53:47 +0100
Subject: [PATCH] css fill possible for mouses, unlikely for banners

---
 index.html                 |   9 ++-
 styles/elements/mouses.css |   4 +-
 styles/elements/test.css   | 134 ++++++++++++++++++++-----------------
 styles/text.css            |   1 +
 4 files changed, 78 insertions(+), 70 deletions(-)

diff --git a/index.html b/index.html
index e4980f5..db24330 100644
--- a/index.html
+++ b/index.html
@@ -592,6 +592,7 @@
 
 
 
+
 		<!--
 			BANNER 4
 		-->
@@ -646,16 +647,14 @@
 		-->
 
 
-<div class="ascii" id="test"></div>
 
 <figure class="frames_container mouse" id="mouse_test">
-	<div class="ascii frame f1"></div>
-	<div class="ascii frame f2"></div>
-	<div class="ascii frame f3"></div>
-	<div class="ascii frame f4"></div>
+	<div class="ascii frame f1"></div><div class="ascii frame f2"></div><div class="ascii frame f3"></div><div class="ascii frame f4"></div>
 </figure>
 
 
+<p>here</p>
+<div id="test"></div>
 
 
 	</body>
diff --git a/styles/elements/mouses.css b/styles/elements/mouses.css
index e61aa28..6110f19 100644
--- a/styles/elements/mouses.css
+++ b/styles/elements/mouses.css
@@ -6,13 +6,11 @@
 .frames_container {
 	display: grid;
 	width: fit-content;
+
 	/*
 	border: 1px solid blue;
 	*/
 }
-.frame.hide {
-	display: none;
-}
 .frame {
 	position: relative;
 	grid-column: 1;
diff --git a/styles/elements/test.css b/styles/elements/test.css
index 6b2b029..d6f266a 100644
--- a/styles/elements/test.css
+++ b/styles/elements/test.css
@@ -1,87 +1,97 @@
+#test {
+	border: 1px solid blue;
+	width: 100px;
+	height: 100px;
+	background-image: url(" \
+		data:image/svg+xml;utf8, \
+		<svg xmlns='http://www.w3.org/2000/svg' version='1.1' height='50px' width='100%'>\
+			<text x='0' y='15'>\
+				I love SVG!\
+			</text>\
+		</svg>");
+}
+/*
 #test::after {
 	content: "              \a                 \a                \a              \a     \a         \a          \a          \a      \a         \a         \a    \a         \a        \a   \a       ";
 	white-space: pre;
 }
-
-.mouse .frame {
-	white-space: pre;
-}
+*/
 
 #mouse_test .frame.f1::before {
-	content: "									 \A 										\A 						      \A 						       \A 							\A 								   \A 								    \A 					      \A 				            \A 		          \A 		          \A 		           \A 		        \A 			  ";
+	content: "                   \A                     \A                   \A                    \A               \A                    \A                     \A                 \A                     \A               \A               \A                \A             \A         ";
 /*
-									 
-										
-						      
-						       
-							
-								   
-								    
-					      
-				            
-		          
-		          
-		           
-		        
-			  
+                   
+                    
+                  
+                   
+              
+                   
+                    
+                
+                    
+              
+              
+               
+            
+        
 */
 }
 
 #mouse_test .frame.f2::before {
-	content: "										\A 										\A 						       \A 						       \A 							\A 								   \A 								    \A 					      \A 				           \A 				       \A 		         \A 		           \A 		        \A 			  ";
+	content: "                    \A                     \A                    \A                    \A               \A                    \A                     \A                 \A                    \A                \A              \A                \A             \A         ";
 /*
-										
-										
-						       
-						       
-							
-								   
-								    
-					      
-				           
-				       
-		         
-		           
-		        
-			  
+                    
+                    
+                   
+                   
+              
+                   
+                    
+                
+                   
+               
+             
+               
+            
+        
 */
 }
 
 #mouse_test .frame.f3::before {
-	content: "										 \A 										\A 						       \A 						       \A 							\A 								   \A 								    \A 					     \A 				          \A 			        \A 		          \A 		           \A 		        \A 			  ";
+	content: "                     \A                     \A                    \A                    \A               \A                    \A                     \A                \A                   \A               \A               \A                \A             \A         ";
 /*
-										 
-										
-						       
-						       
-							
-								   
-								    
-					     
-				          
-			        
-		          
-		           
-		        
-			  
+                     
+                    
+                   
+                   
+              
+                   
+                    
+               
+                  
+              
+              
+               
+            
+        
 */
 }
 
 #mouse_test .frame.f4::before {
-	content: "									\A 									       \A 									       \A 									      \A 									     \A 					        \A 					      \A 		                  \A 		               \A 		                 \A 		                 \A 			  ";
+	content: "                  \A                          \A                          \A                         \A                        \A                   \A                 \A                       \A                    \A                      \A                      \A         ";
 /*
-									
-									       
-									       
-									      
-									     
-					        
-					      
-		                  
-		               
-		                 
-		                 
-			  
+                  
+                         
+                         
+                        
+                       
+                  
+                
+                      
+                   
+                     
+                     
+        
 */
 }
 
diff --git a/styles/text.css b/styles/text.css
index 35bfbea..d5ef4d3 100644
--- a/styles/text.css
+++ b/styles/text.css
@@ -39,4 +39,5 @@ h6 { margin: 10px 0px; font-size: 1.0rem; }
 pre, .ascii {
 	line-height: 0.8;
 	font-size: min(2.2vw, 1.0rem);
+	white-space: pre;
 }