:root

3 months ago · c17b6d6ad4
6 changed files with 29 additions and 9 deletions
--- a/.README.swp
+++ b/.README.swp
--- a/4
+++ b/4
@ -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;
--- 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;
--- 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)}
--- a/index.html
+++ 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>
+
--- a/style.css
+++ b/style.css