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

slightly more CSS upgrades

Browse source
This commit is contained in:
Yann Esposito (Yogsototh) 2019-11-19 23:18:41 +08:00
parent 2e26792403
commit bbe8cf6891
Signed by untrusted user who does not match committer: yogsototh
GPG key ID: 7B19A4C650D59646
4 changed files with 108 additions and 120 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

24
project.el
View file

@ -177,23 +177,23 @@
(goto-char (point-min)) (goto-char (point-min))
(search-forward "<body>") (search-forward "<body>")
(insert (mapconcat 'identity (insert (mapconcat 'identity
'("<input name=\"theme\" type=\"radio\" id=\"light\">" '("<input name=\"t\" type=\"radio\" id=\"l\">"
"<input name=\"theme\" type=\"radio\" id=\"simple\">" "<input name=\"t\" type=\"radio\" id=\"s\">"
"<input name=\"theme\" type=\"radio\" id=\"modern\">" "<input name=\"t\" type=\"radio\" id=\"m\">"
"<input name=\"theme\" type=\"radio\" id=\"dark\">" "<input name=\"t\" type=\"radio\" id=\"d\">"
"<input name=\"theme\" type=\"radio\" id=\"darksimple\">" "<input name=\"t\" type=\"radio\" id=\"c\">"
"<input name=\"theme\" type=\"radio\" id=\"matrix\">" "<input name=\"t\" type=\"radio\" id=\"x\">"
"<div id=\"labels\">" "<div id=\"labels\">"
"<div class=\"content\">" "<div class=\"content\">"
"Change theme: " "Change theme: "
"<label for=\"light\">light</label>" "<label for=\"l\">light</label>"
"(<label for=\"simple\">simple</label>," "(<label for=\"s\">contrast</label>,"
"<label for=\"modern\">modern</label>)" "<label for=\"m\">modern</label>)"
" / " " / "
"<label for=\"dark\">dark</label>" "<label for=\"d\">dark</label>"
"(<label for=\"darksimple\">simple</label>," "(<label for=\"c\">contrast</label>,"
"<label for=\"matrix\">matrix</label>)" "<label for=\"x\">matrix</label>)"
"</div>" "</div>"
"</div>" "</div>"
"<div class=\"main\">") "<div class=\"main\">")

BIN
project.el.sig
View file

Binary file not shown.

200
src/css/minimalist.css
View file

@ -233,8 +233,8 @@ nav > a {
--rfg: var(--base1); --rfg: var(--base1);
--rbg: var(--base02); --rbg: var(--base02);
--bdr: var(--base02); --bdr: var(--base02);
--todo-txt: #000; --l-fg: var(--bg);
--link: var(--green); --l-bg: var(--green);
} }
/* org colors */ /* org colors */
@ -247,8 +247,8 @@ nav > a {
--rfg: var(--base01); --rfg: var(--base01);
--rbg: var(--base2); --rbg: var(--base2);
--bdr: var(--base2); --bdr: var(--base2);
--todo-txt: #FFF; --l-fg: var(--bg);
--link: var(--orange); --l-bg: var(--orange);
} }
} }
/* Dark themes soften and darken images */ /* Dark themes soften and darken images */
@ -268,31 +268,31 @@ nav > a {
} }
/* Light themes does not soften and darken images */ /* Light themes does not soften and darken images */
#light:checked ~ .main img, #l:checked ~ .main img,
#simple:checked ~ .main img , #s:checked ~ .main img ,
#modern:checked ~ .main img { #m:checked ~ .main img {
filter: none; filter: none;
} }
#dark:checked ~ .main img, #d:checked ~ .main img,
#darksimple:checked ~ .main img { #c:checked ~ .main img {
filter: saturate(0.8) brightness(0.8); filter: saturate(0.8) brightness(0.8);
} }
#matrix:checked ~ .main img { #x:checked ~ .main img {
filter: brightness(0.8) sepia(100%) hue-rotate(55deg) saturate(2.5); filter: brightness(0.8) sepia(100%) hue-rotate(55deg) saturate(2.5);
} }
#simple:checked ~ .main #preamble:after, #s:checked ~ .main #preamble:after,
#simple:checked ~ .main #postamble:before, #s:checked ~ .main #postamble:before,
#darksimple:checked ~ .main #preamble:after, #c:checked ~ .main #preamble:after,
#darksimple:checked ~ .main #postamble:before, #c:checked ~ .main #postamble:before,
#modern:checked ~ .main #preamble:after, #m:checked ~ .main #preamble:after,
#modern:checked ~ .main #postamble:before #m:checked ~ .main #postamble:before
{ {
display: none; display: none;
} }
/* --------------------------------------------------------------------------- */ /* --------------------------------------------------------------------------- */
/* Dark theme selected */ /* Dark theme selected */
#dark:checked ~ .main, #dark:checked ~ #labels { #d:checked ~ .main, #d:checked ~ #labels {
--bg: var(--base03); --bg: var(--base03);
--fg: var(--base0); --fg: var(--base0);
--bg2: var(--base02); --bg2: var(--base02);
@ -300,13 +300,13 @@ nav > a {
--rfg: var(--base1); --rfg: var(--base1);
--rbg: var(--base02); --rbg: var(--base02);
--bdr: var(--base02); --bdr: var(--base02);
--todo-txt: #000; --l-fg: var(--bg);
--link: var(--green); --l-bg: var(--green);
} }
/* --------------------------------------------------------------------------- */ /* --------------------------------------------------------------------------- */
/* Light theme selected */ /* Light theme selected */
#light:checked ~ .main, #light:checked ~ #labels { #l:checked ~ .main, #l:checked ~ #labels {
--bg: var(--base3); --bg: var(--base3);
--fg: var(--base01); --fg: var(--base01);
--bg2: var(--base2); --bg2: var(--base2);
@ -314,41 +314,39 @@ nav > a {
--rfg: var(--base01); --rfg: var(--base01);
--rbg: var(--base2); --rbg: var(--base2);
--bdr: var(--base2); --bdr: var(--base2);
--todo-txt: #FFF; --l-fg: var(--bg);
--link: var(--orange); --l-bg: var(--orange);
} }
/* --------------------------------------------------------------------------- */ /* --------------------------------------------------------------------------- */
/* Light simple theme selected */ /* Light simple theme selected */
#simple:checked ~ .main, #simple:checked ~ #labels { #c:checked ~ .main, #c:checked ~ #labels,
#s:checked ~ .main, #s:checked ~ #labels {
--bg: #fff; --bg: #fff;
--fg: #333; --fg: #333;
--bg2: #eee; --bg2: #eee;
--fg2: #222; --fg2: #222;
--rfg: #000; --rfg: #111;
--rbg: #fff; --rbg: #eee;
--bdr: #CCC; --bdr: #CCC;
--todo-txt: #333; --l-fg: var(--bg);
--link: var(--orange); --l-bg: var(--orange);
font-family: "Helvetica Neue"; font-family: sans-serif;
font-size: 16px; font-size: 16px;
line-height: 1.5em; line-height: 1.5em;
} }
#simple:checked ~ #labels .content{ #c:checked ~ #labels .content,
#s:checked ~ #labels .content,
#c:checked ~ .main .content,
#c:checked ~ .main #content,
#s:checked ~ .main .content,
#s:checked ~ .main #content {
margin: 0 auto; margin: 0 auto;
} }
#simple:checked ~ .main .content,
#simple:checked ~ .main #content {
margin: 0 auto;
}
#simple:checked ~ .main code,
#simple:checked ~ .main pre{
font-family: monospace;
}
/* --------------------------------------------------------------------------- */ /* --------------------------------------------------------------------------- */
/* Dark matrix theme selected */ /* Dark matrix theme selected */
#matrix:checked ~ .main, #matrix:checked ~ #labels { #x:checked ~ .main, #x:checked ~ #labels {
--bg: #000; --bg: #000;
--fg: #0b0; --fg: #0b0;
--bg2: #040; --bg2: #040;
@ -356,8 +354,8 @@ nav > a {
--rfg: #0f0; --rfg: #0f0;
--rbg: #000; --rbg: #000;
--bdr: #080; --bdr: #080;
--todo-txt: #0b0; --l-fg: #0f0;
--link: #080; --l-bg: var(--bg);
--yellow: #0f0; --yellow: #0f0;
--orange: #0e0; --orange: #0e0;
--red: #0d0; --red: #0d0;
@ -369,16 +367,17 @@ nav > a {
--base03: #020; --base03: #020;
--base02: #030; --base02: #030;
--base3: #0f0; --base3: #0f0;
--base2: #0e0;
font-family: monospace; font-family: monospace;
} }
#matrix:checked ~ .main code, #x:checked ~ .main code,
#matrix:checked ~ .main pre { #x:checked ~ .main pre {
font-family: monospace; font-family: monospace;
} }
/* --------------------------------------------------------------------------- */ /* --------------------------------------------------------------------------- */
/* Light modern theme selected */ /* Light modern theme selected */
#modern:checked ~ .main, #modern:checked ~ #labels { #m:checked ~ .main, #m:checked ~ #labels {
--bg: #fff; --bg: #fff;
--fg: #444; --fg: #444;
--bg2: #eee; --bg2: #eee;
@ -386,33 +385,33 @@ nav > a {
--rfg: #000; --rfg: #000;
--rbg: #eee; --rbg: #eee;
--bdr: #ddd; --bdr: #ddd;
--todo-txt: #000; --l-fg: var(--bg);
--link: var(--magenta); --l-bg: var(--magenta);
font-family: "Helvetica Neue", sans-serif; font-family: "Helvetica Neue", sans-serif;
font-weight: 300; font-weight: 300;
font-size: 16px; font-size: 16px;
line-height: 1.5em; line-height: 1.5em;
} }
#modern:checked ~ #labels a { #m:checked ~ #labels a {
color: #fff; color: #fff;
} }
#modern:checked ~ .main .content, #m:checked ~ .main .content,
#modern:checked ~ .main #content { #m:checked ~ .main #content {
margin: 0 auto; margin: 0 auto;
} }
#modern:checked ~ .main blockquote:after { #m:checked ~ .main blockquote:after {
display: none; display: none;
} }
#modern:checked ~ .main blockquote { #m:checked ~ .main blockquote {
font-family: "Hoefler Text", Georgia, serif; font-family: "Hoefler Text", Georgia, serif;
font-style: italic; font-style: italic;
font-size: 20px; font-size: 20px;
line-height: 30px; line-height: 30px;
border-left: solid 10px; border-left: solid 10px;
} }
#modern:checked ~ .main h1, #m:checked ~ .main h1,
#modern:checked ~ .main h2 { #m:checked ~ .main h2 {
font-family: "Hoefler Text", Georgia, serif; font-family: "Hoefler Text", Georgia, serif;
font-style: italic; font-style: italic;
font-size: 2em; font-size: 2em;
@ -421,106 +420,101 @@ nav > a {
color: var(--rfg); color: var(--rfg);
} }
#modern:checked ~ .main h3, #m:checked ~ .main h3,
#modern:checked ~ .main h4, #m:checked ~ .main h4,
#modern:checked ~ .main h5, #m:checked ~ .main h5,
#modern:checked ~ .main h6 { #m:checked ~ .main h6 {
font-weight: 200; font-weight: 200;
font-size: 1.5em; font-size: 1.5em;
line-height: 1.5em; line-height: 1.5em;
margin: 1em 0; margin: 1em 0;
color: var(--rfg); color: var(--rfg);
} }
#modern:checked ~ .main h4{ #m:checked ~ .main h4{
font-size: 1.25em; font-size: 1.25em;
line-height: 1.25em; line-height: 1.25em;
} }
#modern:checked ~ .main h5, #m:checked ~ .main h5,
#modern:checked ~ .main h6 { #m:checked ~ .main h6 {
font-size: 1em; font-size: 1em;
line-height: 1em; line-height: 1em;
} }
#modern:checked ~ .main #preamble { #m:checked ~ .main #preamble {
border-bottom: solid 1px rgba(0,0,0,0.2); border-bottom: solid 1px rgba(0,0,0,0.2);
} }
#modern:checked ~ .main #postamble { #m:checked ~ .main #postamble {
border-top: solid 1px rgba(0,0,0,0.2); border-top: solid 1px rgba(0,0,0,0.2);
} }
#modern:checked ~ .main #preamble h1 { #m:checked ~ .main #preamble h1 {
font-size: 4em; font-size: 4em;
line-height: 1.5em; line-height: 1.5em;
margin: .5em 0; margin: .5em 0;
} }
#modern:checked ~ .main h1::before, #m:checked ~ .main h1::before,
#modern:checked ~ .main h2::before, #m:checked ~ .main h2::before,
#modern:checked ~ .main h3::before, #m:checked ~ .main h3::before,
#modern:checked ~ .main h4::before, #m:checked ~ .main h4::before,
#modern:checked ~ .main h5::before, #m:checked ~ .main h5::before,
#modern:checked ~ .main h6::before { #m:checked ~ .main h6::before {
content: ""; content: "";
} }
#modern:checked ~ .main pre { #m:checked ~ .main pre {
font-size: 14px; font-size: 14px;
line-height: 1em; line-height: 1em;
border-left: solid 4px var(--fg2); border-left: solid 4px var(--fg2);
padding-left: 1em; padding-left: 1em;
} }
#modern:checked ~ .main pre::before, #m:checked ~ .main pre::before,
#modern:checked ~ .main pre::after { #m:checked ~ .main pre::after {
content: ""; content: "";
} }
#modern:checked ~ .main #preamble, #m:checked ~ .main #preamble,
#modern:checked ~ .main #postamble { #m:checked ~ .main #postamble {
background: var(--cyan); background: var(--cyan);
padding: 1em 0; padding: 1em 0;
} }
#modern:checked ~ .main #preamble { #m:checked ~ .main #preamble {
margin-bottom: 2em; margin-bottom: 2em;
} }
#modern:checked ~ .main #postamble { #m:checked ~ .main #postamble {
margin-top: 2em; margin-top: 2em;
} }
#modern:checked ~ .main #postamble code { #m:checked ~ .main #postamble code {
background: transparent; background: transparent;
} }
#modern:checked ~ .main #preamble *, #m:checked ~ .main #preamble *,
#modern:checked ~ .main #postamble * { #m:checked ~ .main #postamble * {
color: #fff; color: #fff;
} }
#modern:checked ~ #labels { #m:checked ~ #labels {
background: var(--cyan); background: var(--cyan);
color: #fff; color: #fff;
} }
#modern:checked ~ #labels .content { #m:checked ~ #labels .content {
margin: 0 auto; margin: 0 auto;
} }
/* --------------------------------------------------------------------------- */ /* --------------------------------------------------------------------------- */
/* Dark simple theme selected */ /* Dark simple theme selected */
#darksimple:checked ~ .main, #darksimple:checked ~ #labels { #c:checked ~ .main, #c:checked ~ #labels {
--bg: #000; --bg: #000;
--fg: #ccc; --fg: #ccc;
--bg2: #111; --bg2: #111;
--fg2: #ddd; --fg2: #ddd;
--rfg: #fff; --rfg: #eee;
--rbg: #000; --rbg: #111;
--bdr: #ccc; --bdr: #333;
--todo-txt: #ccc;
--link: var(--green); --link: var(--green);
font-family: "Helvetica Neue", sans-serif;
font-weight: 300;
font-size: 16px;
line-height: 1.5em;
} }
#darksimple:checked ~ #labels .content{ #c:checked ~ #labels .content{
margin: 0 auto; margin: 0 auto;
} }
#darksimple:checked ~ .main code, #c:checked ~ .main code,
#darksimple:checked ~ .main pre { #c:checked ~ .main pre {
font-family: monospace; font-family: monospace;
} }
#darksimple:checked ~ .main .content, #c:checked ~ .main .content,
#darksimple:checked ~ .main #content { #c:checked ~ .main #content {
margin: 0 auto; margin: 0 auto;
} }
@ -571,21 +565,15 @@ pre::after,pre::before,hr:after,
.main pre::after,.main pre::before,.main hr:after { .main pre::after,.main pre::before,.main hr:after {
color: var(--fg2); color: var(--fg2);
} }
#labels label:hover, nav a, nav a:visited, .main nav a,.main nav a:visited {
a:hover, a:active, a:focus,
.main a:hover,.main a:active,.main a:focus {
color: white;
background: var(--link);
}
nav a, nav a:visited,
.main nav a,.main nav a:visited {
color: var(--fg2); color: var(--fg2);
} }
nav a:focus, nav a:hover, #labels label:hover, a:hover, a:active, a:focus, .main a:hover,.main a:active,.main a:focus,
.main nav a:focus,.main nav a:hover { nav a:focus, nav a:hover, .main nav a:focus,.main nav a:hover {
color: white; color: var(--l-fg);
background: var(--link); background: var(--l-bg);
} }
thead, .main thead, tr:hover, .main tr:hover { thead, .main thead, tr:hover, .main tr:hover {
background: var(--rbg); background: var(--rbg);
color: var(--rfg); color: var(--rfg);

4
src/index.org
View file

@ -10,8 +10,8 @@
@@html: @@html:
<div style="text-align:center"> <div style="text-align:center">
<svg width="128" height="128" viewBox="0 0 64 64"> <svg width="10em" viewBox="0 0 64 64">
<circle cx="32" cy="32" r="31" stroke="var(--base02)" stroke-width="1" fill="var(--base03)"/> <circle cx="32" cy="32" r="31" stroke="var(--base2)" stroke-width="1" fill="var(--base03)"/>
<circle cx="32" cy="32" r="16" stroke="var(--red)" stroke-width="1" fill="var(--orange)"/> <circle cx="32" cy="32" r="16" stroke="var(--red)" stroke-width="1" fill="var(--orange)"/>
<circle cx="32" cy="32" r="8" stroke-width="0" fill="var(--yellow)"/> <circle cx="32" cy="32" r="8" stroke-width="0" fill="var(--yellow)"/>
<ellipse cx="32" cy="12" rx="16" ry="10" stroke-width="0" fill="var(--base3)"/> <ellipse cx="32" cy="12" rx="16" ry="10" stroke-width="0" fill="var(--base3)"/>