From c17b6d6ad4f4feed184aa2b6b8e9b55a1a1feec7 Mon Sep 17 00:00:00 2001
From: clemtre <martinlemairee@gmail.com>
Date: Thu, 7 Mar 2024 22:35:25 +0100
Subject: [PATCH] :root

---
 .README.swp             | Bin 0 -> 12288 bytes
 README                  |   4 ++--
 cssVarFilledCookies.css |   2 +-
 demo.html               |  18 ++++++++++++------
 index.html              |  14 ++++++++++++++
 style.css               |   0
 6 files changed, 29 insertions(+), 9 deletions(-)
 create mode 100644 .README.swp
 create mode 100644 index.html
 create mode 100644 style.css

diff --git a/.README.swp b/.README.swp
new file mode 100644
index 0000000000000000000000000000000000000000..b2c3625262468d2cbed45ea8ccdbb5cac01ec437
GIT binary patch
literal 12288
zcmeHNy>A>v6rUhI!bbol4WW85ML^2k#R);t<zf+;5P}F22ofP#SaZAYZpYr+S!U*J
zA9j+K`~lE{kSL%FJ)o3OkrJqBXb>d@h~Lca*@tufXefearJwh1-<!AZ{ocpe@^nvL
zy?lkvHfIH{r-e9l`ZvDw(OcrBzaJ4x-0QKiy701HE~!kJ%Yt`N38EXD23x64h665~
zZ6(%TmF88I=bX-Ky{y<amu&0pix*zGa&a$<Q63qH4D5@6q3boy9ulWd&7So7&&?d8
zBZuGJ*V3pI8Hfx-1|kEIfyh8)ATkgchz$Hc7;xnQaTB3DP=|A=z8~0jufN7yWFRsS
z8Hfx-1|kEIfyh8)ATkgchzvvqA_Mm!12Prj@Pk6U{t%qU|NqB-|Nr=u5MKbF1J{9T
zz%#(zCxy5LTmb$&B*bk%0mp!!p1^nD7LWj4;1X~U`0jBbR)90WACC#~3-B}WHE<ia
z3ETj#0at+|zyrVm;G0K<_zGACnm_~i^&o5l-vXZi9|K)L0`CDAfm6UyKma(-ApQb=
z0KNzA0PDaR;P;1x_!9UG_!M{_cosMc+yyVUfDK?B@H_>s?!#P1mm>p_f&YpD+Tluc
z;bh`o9!TR<k@En@rMTHMm{&}twpMj>Zi=o>N0i8d@Kh!VTg&MQvTl^CqE9Yk>SS(^
z&vjbiMhr_hKt-u$TO4;}nFr*wcvCy3HVtjHOj&ZAWQF=*$R|h_`6$?`S3{UdN767Q
znaWec1?isG5W+fbWFL!Ek4Ab(hI1`b(uR^;TMlN*px~WLGFkN5(kc#e`4E=5bWL$Z
zr>Zv^2e2aZAydz2IEp2X*Bss~t2O?0Ov;fef;88O%!TN*oCH5}!n50PX0GGXxkjT0
z<-XCwB85U49(Km|=5(%B7|(0_pv<eZuy~u5u1uD9w6dBhw=XOGp>u4)ODZS5KjU|w
zDc81pf;gu5g7WCAVh1a;C#RUHtaNIAL|{H06>^}!+=%*Iu#qSR&vj4dxnA{&@YO?M
zO&dFVAY_uxHU;+1)q*XC+7t*G3#y>og!smfstDTTojoVoMr%jw*pUfG{HUjLMxtFt
zE7B;RQcEc(ISL@HQjSU;$O1mYFVEv{7q7`dnWIRzjH$w^6s<%4z3bP}If&hNNR!0r
zCcUOt*o+I2*YM(jbV?U^r&%VO>0zEysw@sNj$kAZ<Xd6WM+C9uSH~tsm1sW30ZFnZ
zIX^S~9ODe?uF|b)&j-~(M=$$!IzQvvn{CGIW+*e<n{EcCXXeD1MN7F_X0p01PBrOr
z6}HcD$gJ<k(5|Z?qM+(D4MHQLmj|UbE|kQQC0XFNztZR>PMj~1lnvOLZPL6hF^s03
z%=C+<ioAd5U5pBhw%w8!WJ3!_h1fn6cRCK5@<2Czfcr3wtPC_EFl|*xaZjzG$U;h+
zV%!#ZU`~)rLp<Yl^%2x%RM$eg&;`>Fa~t7hzKA##?||*`WX@z+a^VM`%MkuF((nw-
zJ6bie^b?mw7;Z38Pgpr_PX8{SEr|q|IC`s4#hCG`z<}w=1Y>rHMFaI=s9oFKs{a$j
zYd+v=ukbrTNb=D7lzM;119~8RmtfR}fm`<;`|6r<47VE1UGGj(oz1O!So(er8xvXt
zOLxilUI|-R^jB*a3#gZcP%}iWh28aPwZ%p9de`f(({CH$#e4kN@OFqAjlPko!Zc}c
zk+!L8^lEV~h-l;ALjSN<sN~`2y>^gU<Hpn0>rC1SLT@Jw<7sv<bFj&q{Q2W*fKF<b
zMgRB<!6Vp#aAJ+Ovt4u3AE#W-ja8Mp%untltD_43ObCO$N@LRWrXB3WY)}#02r~`4
zg<Khp{n;jjKVEu|oqEfdd_M7cW8(9UA8UVhltZvb#w)Q17Esv}+tsGgh1O#AxhhLe
rRkdAgZLQVv%>~;(w8DdhJ+vxMp|pqI{QQfC-cSjq5bvxyy}`vlZ3=N4

literal 0
HcmV?d00001

diff --git a/README b/README
index 7f1581f..59936ec 100644
--- a/README
+++ b/README
@@ -5,7 +5,7 @@
                               /     \
      css variables          \/_      \     editable html table
                                  _____________________________________
-   root {                        |                                    |
+   :root {                       |                                    |
      --underline-style: wavy;    |--underline-style : wavy            |
      --title-width: 10ch;        |--title-width     : 10ch            |
      --src: url('image.png');    |--src             : url('image.png')|
@@ -45,7 +45,7 @@ variables inside a root{} statement.
 
 a css file with variables declared in this manner:
 
-root {
+:root {
     --margin: 10px;
     --gutter: 5px;
     --background: white;
diff --git a/cssVarFilledCookies.css b/cssVarFilledCookies.css
index 543083b..8755fb0 100644
--- a/cssVarFilledCookies.css
+++ b/cssVarFilledCookies.css
@@ -1,5 +1,5 @@
 #cvfc p::after {content:"?"}
-#cvfc:hover p::after {content:"!!!"}
+#cvfc:hover p::after {content:"css variables"}
 #cvfc {
     z-index:10000;
     position:fixed;
diff --git a/demo.html b/demo.html
index 061bd40..69e3b24 100644
--- a/demo.html
+++ b/demo.html
@@ -61,7 +61,8 @@ the financial times of 1996, the article is called <em>This bug in your PC is a
     --duration: 4s;
     --width-footer:min(800px, 100%);
     --indent:50px;
-    --conclusion:"Let's bake nicer cookies."
+    --conclusion:"Let's bake nicer cookies.";
+    --gradient-radius:40vw;
 }
 span{font-size:calc(var(--font-size) * 2);display:inline-block}
 span:nth-of-type(3n){color:var(--colorA);}
@@ -92,12 +93,17 @@ border-radius:100%;margin-bottom:auto
     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 .3s linear;
-animation-iteration-count:8;
-background:lightcyan;
+body {height:calc(100vh - 20px);
+    display:flex;justify-content:center;align-items:center;
+    background: radial-gradient(
+        circle at 25px 30px, var(--colorB),
+        var(--background) var(--gradient-radius))
 }
+#cvfc{
+    border-color:var(--colorA) !important;
+background:white;
+}
+#cvfc:hover{color:black;background:lightcyan}
 
 footer {position:fixed;bottom:10px;left:10px;max-width:var(--width-footer);}
 footer p, footer span, ul{font-size:var(--font-size)}
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..cc6d644
--- /dev/null
+++ b/index.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <title></title>
+        <meta charset="utf-8" />
+        <link rel="stylesheet" href="cssVarCookies.css">
+        <script defer src="cssVarCookies.js"></script>
+    </head>
+    <body>
+        <p>Amet dignissimos nesciunt eum nobis quasi sequi blanditiis ipsa neque. Tempore quia libero dolorum eum voluptatem. Magni magnam repellat optio doloremque commodi? Accusamus corrupti totam aliquid veritatis temporibus Unde laboriosam.</p>
+
+    </body>
+</html>
+
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..e69de29