vars ++

demo.html

@@ -13,7 +13,7 @@
         </p>
         <footer>
             <p>
-            Cookies, or the act of storing data client-side is an
+            Cookies, or the act of storing data client-side can be an
             interesting concept. Unfortunately, it has been used and
             abused by sending the locally stored data to a server.  Most
             of the time, the cookies are filled with a user token, while
@@ -21,13 +21,14 @@
             misuse of the cookies is rotting the internet, either
             serving the purpose of tracking a shopping card state, or
             identifying someone across websites for targeted
-            advertisements.
-            <span>Let's make nicer cookies !</span> what variables are
-            you going to expose on your webpage ?
-            <p>cssVarFilledCookies.js is released under CC4r license,
+            advertisements.</p>
+            <p id="bake"></p>
+            <p><b>cssVarFilledCookies.js</b> is released under CC4r license,
             code and documentation available at this adress → <a href="https://git.vvvvvvaria.org/clemtre/cssVarFilledCookies.js">git.vvvvvvaria.org/clemtre/cssVarFilledCookies.js</a></p>
             </p>
-<p>First public written occurrence of the term &#8220;cookies&#8221; to
+            <p>From the <a
+                            href="https://fr.wikipedia.org/wiki/Cookie_(informatique)#Historique">french
+                            wikipedia article about cookies</a>, the first public written occurrence of the term &#8220;cookies&#8221; to
 describe data stored client side from a browser dates to an article from
 the financial times of 1996, the article is called <em>This bug in your PC is a smart cookie</em> and is archived here : 
 <ul>
@@ -52,11 +53,15 @@ the financial times of 1996, the article is called <em>This bug in your PC is a
     --font-size: 24px;
     --point-size: 6px;
     --angle : 8deg;
+    --amplitude : 40deg;
+    --steps: 5;
     --background: whitesmoke;
     --background-text: lightyellow;
     --underline-style : wavy;
     --duration: 60s;
     --width-footer:min(800px, 100%);
+    --indent:50px;
+    --message-of-hope:"Let's bake nicer cookies."
 }
 span{font-size:calc(var(--font-size) * 2);display:inline-block}
 span:nth-of-type(3n){color:var(--colorA);}
@@ -65,12 +70,14 @@ span:nth-of-type(3n - 2){color:var(--colorC);}
 body {background:var(--background)}
 
 @keyframes rotation {
-    from {transform:rotate(0deg)}
-    to {transform:rotate(360deg)}
+    from {transform:skew(calc(var(--amplitude) * -1))}
+    to {transform:skew(var(--amplitude))}
 }
 @keyframes blink {
-    from {background:transparent}
-    to {background:fuchsia}
+    from {font-weight:bold}
+    50% {font-weight:bold}
+    51% {font-weight:normal}
+    to {font-weight:normal}
 }
 span:nth-of-type(2){text-decoration:underline var(--underline-style)}
 span:nth-of-type(4){transform:rotate(var(--angle))}
@@ -80,16 +87,24 @@ height:var(--point-size);
 border-radius:100%;margin-bottom:auto
 }
 .demo { width:fit-content; 
-    animation: rotation var(--duration) infinite linear;
+    animation: rotation var(--duration) alternate infinite
+        steps(var(--steps), end);
     background:var(--background-text);
     padding:var(--padding);
 }
 body {height:calc(100vh - 20px); display:flex;justify-content:center;align-items:center}
 #cvfc{border-color:var(--colorA) !important;
-animation:blink .5s alternate linear;
-animation-iteration-count:4;
+animation:blink .3s linear;
+animation-iteration-count:8;
+background:lightcyan;
 }
 
 footer {position:fixed;bottom:10px;left:10px;max-width:var(--width-footer);}
 footer p, footer span, ul{font-size:var(--font-size)}
+a {color:var(--colorB)}
+b {font-weight:normal; color:var(--colorC)}
+footer p, ul{margin:0}
+ul {padding-left:var(--indent)}
+footer p:not(:first-of-type) {text-indent:var(--indent)}
+#bake::after {display:block;content:var(--message-of-hope)}
 </style>