use grid instead of flex for mouses animations

2023-11-03 12:00:10 +01:00
parent 50c90cae41
commit d53e21b3be
2 changed files with 120 additions and 114 deletions
--- a/index.html
+++ b/index.html
@@ -23,118 +23,117 @@
 </pre>

 <div class="mouse_container">
-
 <pre class="mouse f1">
-                 •      
-                  •     
-           ••     •     
-           • •     •    
-            •••••••••   
-              • •  ••   
-              •   • •   
-        ••••• •  •   •  
-       •     • ••     • 
-  •   •       •         
-  •   •       ••        
-  •    •      • •       
-   •   ••    •          
-    •••  ••••           
+                 •     
+                  •    
+           ••     •    
+           • •     •   
+            •••••••••  
+              • •  ••  
+              •   • •  
+        ••••• •  •   • 
+       •     • ••     •
+  •   •       •        
+  •   •       ••       
+  •    •      • •      
+   •   ••    •         
+    •••  ••••          
 </pre>
 <pre class="mouse f2">
-                 •      
-                  •     
-           ••     •     
-           • •     •    
-            •••••••••   
-              • •  ••   
-              •   • •   
-        ••••• •  •   •  
-       •     • ••     • 
-   •  •       •         
-   •  •       ••        
-  •    •      • •       
-   •   ••    •          
-    •••  ••••           
+                 •     
+                  •    
+           ••     •    
+           • •     •   
+            •••••••••  
+              • •  ••  
+              •   • •  
+        ••••• •  •   • 
+       •     • ••     •
+   •  •       •        
+   •  •       ••       
+  •    •      • •      
+   •   ••    •         
+    •••  ••••          
 </pre>
 <pre class="mouse f3">
-                  •     
-                  •     
-           ••      •    
-           • •     •    
-            •••••••••   
-              • •  ••   
-              •   • •   
-        ••••• •  •   •  
-       •     • ••    •  
-      •       •         
-   •• •       ••        
-  •    •      • •       
-   •   ••    •          
-    •••  ••••           
+                  •   
+                  •   
+           ••      •  
+           • •     •  
+            ••••••••• 
+              • •  •• 
+              •   • • 
+        ••••• •  •   •
+       •     • ••    •
+      •       •       
+   •• •       ••      
+  •    •      • •     
+   •   ••    •        
+    •••  ••••         
 </pre>
 <pre class="mouse f4">
-                   •    
-                  •     
-           ••      •    
-           • •     •    
-            •••••••••   
-              • •  ••   
-              •   • •   
-        ••••• •  •   •  
-       •     • ••    •  
-    • •       •         
-   •  •       ••        
-  •    •      • •       
-   •   ••    •          
-    •••  ••••           
+                   •  
+                  •   
+           ••      •  
+           • •     •  
+            ••••••••• 
+              • •  •• 
+              •   • • 
+        ••••• •  •   •
+       •     • ••    •
+    • •       •       
+   •  •       ••      
+  •    •      • •     
+   •   ••    •        
+    •••  ••••         
 </pre>
 <pre class="mouse f5">
-                   •    
-                  •     
-           ••      •    
-           • •     •    
-            •••••••••   
-              • •  ••   
-              •   • •   
-        ••••• •  •   •  
-       •     • ••    •  
-   •  •       •         
-  •   •       ••        
-  •    •      • •       
-   •   ••    •          
-    •••  ••••           
+                   •  
+                  •   
+           ••      •  
+           • •     •  
+            ••••••••• 
+              • •  •• 
+              •   • • 
+        ••••• •  •   •
+       •     • ••    •
+   •  •       •       
+  •   •       ••      
+  •    •      • •     
+   •   ••    •        
+    •••  ••••         
 </pre>
 <pre class="mouse f6">
-                   •    
-                  •     
-           ••      •    
-           • •     •    
-            •••••••••   
-              • •  ••   
-              •   • •   
-        ••••• •  •   •  
-       •     • ••    •  
- •    •       •         
-  •   •       ••        
-  •    •      • •       
-   •   ••    •          
-    •••  ••••           
+                   •  
+                  •   
+           ••      •  
+           • •     •  
+            ••••••••• 
+              • •  •• 
+              •   • • 
+        ••••• •  •   •
+       •     • ••    •
+ •    •       •       
+  •   •       ••      
+  •    •      • •     
+   •   ••    •        
+    •••  ••••         
 </pre>
 <pre class="mouse f7">
-                   •    
-                  •     
-           ••      •    
-           • •     •    
-            •••••••••   
-              • •  ••   
-              •   • •   
-        ••••• •  •   •  
-       •     • ••    •  
-•     •       •         
- •    •       ••        
-  •    •      • •       
-   •   ••    •          
-    •••  ••••           
+                   •  
+                  •   
+           ••      •  
+           • •     •  
+            ••••••••• 
+              • •  •• 
+              •   • • 
+        ••••• •  •   •
+       •     • ••    •
+•     •       •       
+ •    •       ••      
+  •    •      • •     
+   •   ••    •        
+    •••  ••••         
 </pre>
 <pre class="mouse f8">
                ••        
@@ -179,7 +178,6 @@
   •   ••    •         •  
    •••  ••••             
 </pre>
-
 </div>
 <!--
                •                      -