diff --git a/.README.swp b/.README.swp new file mode 100644 index 0000000..b2c3625 Binary files /dev/null and b/.README.swp differ 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 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 @@ + + + + + + + + + +

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.

+ + + + diff --git a/style.css b/style.css new file mode 100644 index 0000000..e69de29