split css into multiples files, and animations count only 4 frames now

index.html

@@ -8,7 +8,9 @@
 		<title>hugulumu.fr</title>
 		<meta name="description" content="site web de hugo lamy, developpeur">
 		<script type="text/javascript" src="./scripts/load_html.js" defer></script>
-		<link href="./style.css" type="text/css" rel="stylesheet">
+		<link href="./style/style.css" type="text/css" rel="stylesheet">
+		<link href="./style/frames.css" type="text/css" rel="stylesheet">
+		<link href="./style/banners.css" type="text/css" rel="stylesheet">
 		<!--
 		-->
 	</head>
@@ -22,24 +24,8 @@
 •   • ••••• ••••• •••••     ••••• •   • •   •   •
 </pre>
 
-<div class="mouse_container">
+<div class="frames_container mouse_4">
-<pre class="mouse f1">
+<pre class="frame f1">
-                 •     
-                  •    
-           ••     •    
-           • •     •   
-            •••••••••  
-              • •  ••  
-              •   • •  
-        ••••• •  •   • 
-       •     • ••     •
-  •   •       •        
-  •   •       ••       
-  •    •      • •      
-   •   ••    •         
-    •••  ••••          
-</pre>
-<pre class="mouse f2">
                  •     
                   •    
            ••     •    
@@ -50,12 +36,12 @@
         ••••• •  •   • 
        •     • ••     •
    •  •       •        
-   •  •       ••       
+  •   •       ••       
   •    •      • •      
    •   ••    •         
     •••  ••••          
 </pre>
-<pre class="mouse f3">
+<pre class="frame f2">
                   •   
                   •   
            ••      •  
@@ -71,99 +57,23 @@
    •   ••    •        
     •••  ••••         
 </pre>
-<pre class="mouse f4">
+<pre class="frame f3">
                    •  
                   •   
            ••      •  
            • •     •  
             ••••••••• 
-              • •  •• 
+              •  • •• 
               •   • • 
-        ••••• •  •   •
+        ••••• •  •  • 
-       •     • ••    •
+       •     • ••   • 
     • •       •       
    •  •       ••      
-  •    •      • •     
+   •   •      • •     
    •   ••    •        
     •••  ••••         
 </pre>
-<pre class="mouse f5">
+<pre class="frame f4">
-                   •  
-                  •   
-           ••      •  
-           • •     •  
-            ••••••••• 
-              • •  •• 
-              •   • • 
-        ••••• •  •   •
-       •     • ••    •
-   •  •       •       
-  •   •       ••      
-  •    •      • •     
-   •   ••    •        
-    •••  ••••         
-</pre>
-<pre class="mouse f6">
-                   •  
-                  •   
-           ••      •  
-           • •     •  
-            ••••••••• 
-              • •  •• 
-              •   • • 
-        ••••• •  •   •
-       •     • ••    •
- •    •       •       
-  •   •       ••      
-  •    •      • •     
-   •   ••    •        
-    •••  ••••         
-</pre>
-<pre class="mouse f7">
-                   •  
-                  •   
-           ••      •  
-           • •     •  
-            ••••••••• 
-              • •  •• 
-              •   • • 
-        ••••• •  •   •
-       •     • ••    •
-•     •       •       
- •    •       ••      
-  •    •      • •     
-   •   ••    •        
-    •••  ••••         
-</pre>
-<pre class="mouse f8">
-                ••        
-                • •      •
-                 ••     •
-                 •  •   • 
-                • •  •  • 
-         ••••• •      ••  
-        •     • ••••••••• 
-       •       •       •  
-••    •       •••    •   
-  •    •      •       •   
-   •   ••    •        •   
-    •••  ••••             
-</pre>
-<pre class="mouse f9">
-                ••        
-                • •      •
-                 ••     •
-                 •  •    •
-                • •  •  • 
-         ••••• •      ••  
-        •     • ••••••••• 
- •     •       •       •  
- •     •       •••    •   
-  •    •      •       •   
-   •   ••    •         •  
-    •••  ••••             
-</pre>
-<pre class="mouse f10">
                       
                 ••        
                 • •      •
@@ -179,21 +89,6 @@
     •••  ••••             
 </pre>
 </div>
-<!--
-                •                      -                          
-         ••     •               --     -                    ••     
-         • •     •              - -     -                   • •      •
-          •••••••••              ---------                   ••      •
-            • •  ••                - -  --                   •  •   •
-            •   • •                -   - -                  • •  •  •
-      ••••• •  •   •         ----- -  -   -          ••••• •      ••
-     •     • ••     •       -     - --    -         •     • •••••••••
-    •       •              -       -               •       •       •
-•   •       ••         -   -       --       ••     •       •••   •
-•    •      • •        -    -      - -        •    •      •      •
- •   ••    •            -   --    -            •   ••    •        •
-  •••  ••••              ---  ----              •••  ••••         
--->
 
 <pre>
                    •

style.css

@@ -1,122 +0,0 @@
-body {
-	/*
-	*/
-	overflow-x: hidden;
-}
-body * {
-	display: flex;
-	margin: auto;
-}
-script, style {
-	display: none;
-}
-p, pre {
-	line-height: 0.8;
-	font-size: 12px;
-	font-family: monospace;
-}
-pre {
-	margin: 10px 0px;
-}
-
-div.banner {
-	flex-wrap: wrap;
-	overflow: hidden;
-	width: 99vw;
-	margin: 10px 0px;
-}
-div.smallbanner {
-	height: 3.5ex;
-}
-div.bigbanner {
-	height: 21.5ex;
-}
-div.banner * {
-	margin: 0px;
-}
-div.banner p {
-	white-space: pre;
-}
-div.banner br {
-	display: block;
-}
-pre.banner {
-	position: relative;
-	margin-left: -100px;
-	animation-name: slide;
-	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.t0_5 {
-	animation-duration: 0.5s;
-}
-pre.banner.t1_0 {
-	animation-duration: 1s;
-}
-pre.banner.t1_5 {
-	animation-duration: 1.5s;
-}
-@keyframes slide {
-	from {left:0;}
-	to {left:2.4em;}
-}
-
-.mouse_container {
-	display: grid;
-	width: fit-content;
-	margin-left: 0px;
-
-	/*
-	border: 1px solid blue;
-	*/
-}
-pre.mouse {
-	position: relative;
-	grid-column: 1;
-	grid-row: 1;
-	margin: auto auto 0px 0px;
-	/*
-	width: fit-content;
-	height: fit-content;
-
-	border: 1px solid red;
-	*/
-
-	opacity: 0;
-	--tmouse: 2s;
-	animation-name: mouse;
-	animation-iteration-count: infinite;
-	animation-duration: var(--tmouse);
-	animation-timing-function: linear;
-	animation-direction: normal;
-}
-/*
-pre.mouse:first-child {
-	position: relative;
-}
-*/
-
-pre.mouse.f2  {animation-delay: calc(var(--tmouse) * 10/100);}
-pre.mouse.f3  {animation-delay: calc(var(--tmouse) * 20/100);}
-pre.mouse.f4  {animation-delay: calc(var(--tmouse) * 30/100);}
-pre.mouse.f5  {animation-delay: calc(var(--tmouse) * 40/100);}
-pre.mouse.f6  {animation-delay: calc(var(--tmouse) * 50/100);}
-pre.mouse.f7  {animation-delay: calc(var(--tmouse) * 60/100);}
-pre.mouse.f8  {animation-delay: calc(var(--tmouse) * 70/100);}
-pre.mouse.f9  {animation-delay: calc(var(--tmouse) * 80/100);}
-pre.mouse.f10 {animation-delay: calc(var(--tmouse) * 90/100);}
-@keyframes mouse {
-	0%    {opacity: 1;}
-	10%   {opacity: 1;}
-	10.1% {opacity: 0;}
-	100%  {opacity: 0;}
-}
-

style/banners.css

@@ -0,0 +1,51 @@
+
+div.banner {
+	flex-wrap: wrap;
+	overflow: hidden;
+	width: 99vw;
+	margin: 10px 0px;
+}
+div.smallbanner {
+	height: 3.5ex;
+}
+div.bigbanner {
+	height: 21.5ex;
+}
+div.banner * {
+	margin: 0px;
+}
+div.banner p {
+	white-space: pre;
+}
+div.banner br {
+	display: block;
+}
+pre.banner {
+	position: relative;
+	margin-left: -100px;
+	animation-name: slide;
+	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.t0_5 {
+	animation-duration: 0.5s;
+}
+pre.banner.t1_0 {
+	animation-duration: 1s;
+}
+pre.banner.t1_5 {
+	animation-duration: 1.5s;
+}
+@keyframes slide {
+	from {left:0;}
+	to {left:2.4em;}
+}
+

style/frames.css

@@ -0,0 +1,46 @@
+
+.frames_container {
+	display: grid;
+	width: fit-content;
+	margin-left: 0px;
+
+	/*
+	border: 1px solid blue;
+	*/
+}
+pre.frame.hide {
+	display: none;
+}
+pre.frame {
+	position: relative;
+	grid-column: 1;
+	grid-row: 1;
+	margin: auto auto 0px 0px;
+
+	/*
+	width: fit-content;
+	height: fit-content;
+
+	border: 1px solid red;
+	*/
+
+	opacity: 0;
+	--tframes: 2s;
+	animation-name: ascii_frame;
+	animation-iteration-count: infinite;
+	animation-duration: var(--tframes);
+	animation-timing-function: linear;
+	animation-direction: normal;
+}
+
+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);}
+
+@keyframes ascii_frame {
+	0%    {opacity: 1;}
+	25%   {opacity: 1;}
+	25.1% {opacity: 0;}
+	100%  {opacity: 0;}
+}
+

style/style.css

@@ -0,0 +1,22 @@
+body {
+	/*
+	*/
+	overflow-x: hidden;
+}
+body * {
+	display: flex;
+	margin: auto;
+}
+script, style {
+	display: none;
+}
+p, pre {
+	line-height: 0.8;
+	font-size: 12px;
+	font-family: monospace;
+}
+pre {
+	margin: 10px 0px;
+}
+
+