Compare commits

...

2 Commits

Author SHA1 Message Date
clemtre 81118cfb69 padding 9 months ago
clemtre db4397eded readme 9 months ago
  1. 2
      README
  2. 9
      demo.html

2
README

@ -3,7 +3,7 @@
_____ _____
/ \ / \
\/_ \ css variables \/_ \ editable html table
_____________________________________ _____________________________________
root { | | root { | |
--underline-style: wavy; |--underline-style : wavy | --underline-style: wavy; |--underline-style : wavy |

9
demo.html

@ -24,6 +24,8 @@
advertisements. advertisements.
<span>Let's make nicer cookies !</span> what variables are <span>Let's make nicer cookies !</span> what variables are
you going to expose on your webpage ? you going to expose on your webpage ?
<p>cssVarFilledCookies.js 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>
<p>First public written occurrence of the term &#8220;cookies&#8221; to <p>First public written occurrence of the term &#8220;cookies&#8221; to
describe data stored client side from a browser dates to an article from describe data stored client side from a browser dates to an article from
@ -46,6 +48,7 @@ the financial times of 1996, the article is called <em>This bug in your PC is a
--colorA : violet; --colorA : violet;
--colorB : darkgreen; --colorB : darkgreen;
--colorC : purple; --colorC : purple;
--padding : 20px;
--font-size: 24px; --font-size: 24px;
--point-size: 6px; --point-size: 6px;
--angle : 8deg; --angle : 8deg;
@ -76,7 +79,11 @@ width:var(--point-size);
height:var(--point-size); height:var(--point-size);
border-radius:100%;margin-bottom:auto border-radius:100%;margin-bottom:auto
} }
.demo { width:fit-content; animation: rotation var(--duration) infinite linear; background:var(--background-text)} .demo { width:fit-content;
animation: rotation var(--duration) infinite linear;
background:var(--background-text);
padding:var(--padding);
}
body {height:calc(100vh - 20px); display:flex;justify-content:center;align-items:center} body {height:calc(100vh - 20px); display:flex;justify-content:center;align-items:center}
#cvfc{border-color:var(--colorA) !important; #cvfc{border-color:var(--colorA) !important;
animation:blink .5s alternate linear; animation:blink .5s alternate linear;

Loading…
Cancel
Save