clemtre
/
cssVarFilledCookies.js
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

:root

main
clemtre 9 months ago
parent
a0ecccc291
commit
c17b6d6ad4
6 changed files with 29 additions and 9 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. BIN
      .README.swp
  2. 4
      README
  3. 2
      cssVarFilledCookies.css
  4. 18
      demo.html
  5. 14
      index.html
  6. 0
      style.css

BIN
.README.swp
View File

Binary file not shown.

4
README
View File

@ -5,7 +5,7 @@
/ \ / \
css variables \/_ \ editable html table css variables \/_ \ editable html table
_____________________________________ _____________________________________
root { | | :root { | |
--underline-style: wavy; |--underline-style : wavy | --underline-style: wavy; |--underline-style : wavy |
--title-width: 10ch; |--title-width : 10ch | --title-width: 10ch; |--title-width : 10ch |
--src: url('image.png'); |--src : url('image.png')| --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: a css file with variables declared in this manner:
root { :root {
--margin: 10px; --margin: 10px;
--gutter: 5px; --gutter: 5px;
--background: white; --background: white;

2
cssVarFilledCookies.css
View File

@ -1,5 +1,5 @@
#cvfc p::after {content:"?"} #cvfc p::after {content:"?"}
#cvfc:hover p::after {content:"!!!"} #cvfc:hover p::after {content:"css variables"}
#cvfc { #cvfc {
z-index:10000; z-index:10000;
position:fixed; position:fixed;

18
demo.html
View File

@ -61,7 +61,8 @@ the financial times of 1996, the article is called <em>This bug in your PC is a
--duration: 4s; --duration: 4s;
--width-footer:min(800px, 100%); --width-footer:min(800px, 100%);
--indent:50px; --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{font-size:calc(var(--font-size) * 2);display:inline-block}
span:nth-of-type(3n){color:var(--colorA);} span:nth-of-type(3n){color:var(--colorA);}
@ -92,12 +93,17 @@ border-radius:100%;margin-bottom:auto
background:var(--background-text); background:var(--background-text);
padding:var(--padding); padding:var(--padding);
} }
body {height:calc(100vh - 20px); display:flex;justify-content:center;align-items:center} body {height:calc(100vh - 20px);
#cvfc{border-color:var(--colorA) !important; display:flex;justify-content:center;align-items:center;
animation:blink .3s linear; background: radial-gradient(
animation-iteration-count:8; circle at 25px 30px, var(--colorB),
background:lightcyan; 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 {position:fixed;bottom:10px;left:10px;max-width:var(--width-footer);}
footer p, footer span, ul{font-size:var(--font-size)} footer p, footer span, ul{font-size:var(--font-size)}

14
index.html
View File

@ -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>

0
style.css
View File

Write Preview
Loading…
Cancel
Save