yogsototh/her.esy.fun
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

back to css playground

Browse source
This commit is contained in:
Yann Esposito (Yogsototh) 2020-11-02 11:39:26 +01:00
parent 480b87009c
commit 56a9afd6f7
Signed by untrusted user who does not match committer: yogsototh
GPG key ID: 7B19A4C650D59646
3 changed files with 41 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

35
src/css/y.css
View file

@ -158,6 +158,8 @@ input#d:checked ~ div {
--fg0: var(--b00);
--rfg: var(--b1);
--hl: var(--g);
--b03: var(--bg);
--b2: hsl(218,15%,23%);
}
input#d:checked ~ div img {
filter: brightness(0.7) saturate(0.5);
@ -169,6 +171,39 @@ input#d:checked ~ div pre {
em,strong,b,i,h1,h2,h3,h4,h5,h6 { color: var(--rfg); }
/* geek checked */
input#g:checked ~ div {
--y: #6A0;
--o: #8A0;
--r: #AA0;
--m: #6A6;
--v: #4A8;
--b: #0A8;
--c: #0A4;
--g: #0A0;
--bg: #020;
--rbg: #040;
--fg: #0B0;
--fg0: #090;
--rfg: #0C0;
--hl: #0D0;
--b03: #020;
--b2: #080;
font-family: Courier, monospace;
font-size: 14px;
line-height: 1.1em;
}
input#g:checked ~ div img {
filter: brightness(0.8) sepia(100%) hue-rotate(55deg) saturate(3);
}
input#g:checked ~ div pre {
background: var(--bg);
border-color: var(--rbg);
}
em,strong,b,i,h1,h2,h3,h4,h5,h6 { color: var(--rfg); }
/* ---- */
::selection {
background: var(--m);

2
templates/main.mustache
View file

@ -14,6 +14,7 @@
<body>
<input name="t" type="radio" id="l">
<input name="t" type="radio" id="d">
<input name="t" type="radio" id="g">
<div id="labels">
<div class="content">
<label for="l">light</label>
@ -28,6 +29,7 @@
</a>
</span>
<label for="d">dark</label>
/ <label for="g">geek</label>
</div>
</div>
<div class="main">

5
templates/post.mustache
View file

@ -9,8 +9,10 @@
<meta name="keywords" content="{{#tags}}{{.}}{{^last}} {{/last}}{{/tags}}">
<link rel="stylesheet" href="/css/y.css"/><link rel="alternate" type="application/rss+xml" href="/rss.xml" /><link rel="icon" href="/favicon.ico">
</head>
<body><input name="t" type="radio" id="l">
<body>
<input name="t" type="radio" id="l">
<input name="t" type="radio" id="d">
<input name="t" type="radio" id="g">
<div id="labels">
<div class="content">
<label for="l">light</label>
@ -25,6 +27,7 @@
</a>
</span>
<label for="d">dark</label>
/ <label for="g">geek</label>
</div>
</div>
<div class="main">