You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
116 lines
4.3 KiB
116 lines
4.3 KiB
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title></title>
|
|
<meta charset="utf-8" />
|
|
<link rel="stylesheet" href="cssVarFilledCookies.css">
|
|
<link rel="stylesheet" href="style.css">
|
|
<script defer src="cssVarFilledCookies.js"></script>
|
|
</head>
|
|
<body>
|
|
<p class="demo">
|
|
<span>css</span><span>Var</span><span>Filled</span><span>Cookies</span><span></span><span>js</span>
|
|
</p>
|
|
<footer>
|
|
<p>
|
|
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
|
|
the actual data is stored server-side. This centralized
|
|
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.</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>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 “cookies” 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>
|
|
<li>
|
|
<a href="https://archive.org/stream/FinancialTimes1996UKEnglish/Feb%2012%201996%2C%20Financial%20Times%2C%20%2312%2C%20UK%20%28en%29_djvu.txt">Financial Times · 1996/02/12 · txt</a>
|
|
</li>
|
|
<li>
|
|
<a href="https://ia600607.us.archive.org/24/items/FinancialTimes1996UKEnglish/Feb%2012%201996%2C%20Financial%20Times%2C%20%2312%2C%20UK%20%28en%29_text.pdf">Financial Times · 1996/02/12 · pdf</a></p>
|
|
</li>
|
|
|
|
</ul>
|
|
</footer>
|
|
|
|
</body>
|
|
</html>
|
|
<style>
|
|
:root {
|
|
--colorA : violet;
|
|
--colorB : darkgreen;
|
|
--colorC : purple;
|
|
--padding : 20px;
|
|
--font-size: 20px;
|
|
--point-size: 6px;
|
|
--angle : 8deg;
|
|
--amplitude : 40deg;
|
|
--steps: 5;
|
|
--background: whitesmoke;
|
|
--background-text: lightyellow;
|
|
--underline-style : wavy;
|
|
--duration: 4s;
|
|
--width-footer:min(800px, 100%);
|
|
--indent:50px;
|
|
--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);}
|
|
span:nth-of-type(3n - 1){color:var(--colorB);}
|
|
span:nth-of-type(3n - 2){color:var(--colorC);}
|
|
body {background:var(--background)}
|
|
|
|
@keyframes rotation {
|
|
from {transform:skew(calc(var(--amplitude) * -1))}
|
|
to {transform:skew(var(--amplitude))}
|
|
}
|
|
@keyframes blink {
|
|
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))}
|
|
span:nth-of-type(5){background:var(--colorB);
|
|
width:var(--point-size);
|
|
height:var(--point-size);
|
|
border-radius:100%;margin-bottom:auto
|
|
}
|
|
.demo { width:fit-content;
|
|
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;
|
|
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 {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(--conclusion)}
|
|
</style>
|
|
|