target only theme

This commit is contained in:
Yann Esposito (Yogsototh) 2019-08-25 00:32:42 +02:00
parent 09d68f6617
commit 44db4f1d8e
Signed by untrusted user who does not match committer: yogsototh
GPG key ID: 7B19A4C650D59646
3 changed files with 52 additions and 87 deletions

View file

@ -159,23 +159,25 @@
(goto-char (point-min))
(search-forward "<body>")
(insert (mapconcat 'identity
'("<input type=\"radio\" id=\"light\" name=\"theme\"/>"
"<input type=\"radio\" id=\"dark\" name=\"theme\"/>"
"<input type=\"radio\" id=\"raw\" name=\"theme\"/>"
"<input type=\"radio\" id=\"modern\" name=\"theme\"/>"
"<input type=\"radio\" id=\"darkraw\" name=\"theme\"/>"
'(
"<input id=\"light\">"
"<input id=\"raw\">"
"<input id=\"modern\">"
"<input id=\"dark\">"
"<input id=\"darkraw\">"
"<div id=\"labels\">"
"<div class=\"content\">"
"Change theme: "
"<label for=\"light\">Light</label>"
"(<label for=\"raw\">raw</label>,"
" <label for=\"modern\">modern</label>)"
" / "
"<label for=\"dark\">Dark</label>"
"(<label for=\"darkraw\">raw</label>)"
"</div>"
"</div>"
"<div class=\"main\">")
"<div class=\"content\">"
"Change theme: "
"<a href=\"#light\">light</a>"
"(<a href=\"#raw\">raw</a>,"
"<a href=\"#modern\">modern</a>)"
" / "
"<a href=\"#dark\">dark</a>"
"(<a href=\"#darkraw\">raw</a>)"
"</div>"
"</div>"
"<div class=\"main\">")
"\n"))
(goto-char (point-max))
(search-backward "</body>")

Binary file not shown.

View file

@ -323,9 +323,8 @@ navigation > a {
body > input { display:none; }
/* Light theme checked */
input#light:target ~ .main,
input#light:checked ~ .main {
/* Light theme selected */
input#light:target ~ .main {
--main-background: #fefaf0; /* 0.5 lighter than #fdf6e3 */
--main-foreground: var(--base01);
--second-foreground: var(--base00);
@ -334,15 +333,13 @@ input#light:checked ~ .main {
--border-color: var(--base2);
--todo-txt: #FFF;
}
input#light:target ~ #labels,
input#light:checked ~ #labels {
input#light:target ~ #labels {
background: #fefaf0;
color: var(--base00);
}
/* Dark theme checked */
input#dark:target ~ .main,
input#dark:checked ~ .main {
/* Dark theme selected */
input#dark:target ~ .main {
--main-background: var(--base03); /* 0.5 darker than #002b36; */
--main-foreground: var(--base1);
--second-foreground: var(--base0);
@ -351,15 +348,13 @@ input#dark:checked ~ .main {
--border-color: var(--base02);
--todo-txt: #000;
}
input#dark:target ~ #labels,
input#dark:checked ~ #labels {
input#dark:target ~ #labels {
background: var(--base03);
color: var(--base0);
}
/* Light raw theme checked */
input#raw:target ~ .main,
input#raw:checked ~ .main {
/* Light raw theme selected */
input#raw:target ~ .main {
--main-background: #fff;
--main-foreground: #000;
--second-foreground: #000;
@ -376,21 +371,17 @@ input#raw:checked ~ .main {
--color-link: var(--magenta);
font-family: monospace;
}
input#raw:target ~ #labels,
input#raw:checked ~ #labels {
input#raw:target ~ #labels {
background: #fff;
color: #000;
}
input#raw:target ~ .main code,
input#raw:target ~ .main pre,
input#raw:checked ~ .main code,
input#raw:checked ~ .main pre
input#raw:target ~ .main pre
{
font-family: monospace;
}
/* Light modern theme checked */
input#modern:target ~ .main,
input#modern:checked ~ .main {
/* Light modern theme selected */
input#modern:target ~ .main {
--main-background: #fff;
--main-foreground: #444;
--second-foreground: #666;
@ -404,19 +395,19 @@ input#modern:checked ~ .main {
font-size: 16px;
line-height: 1.5em;
}
input#modern:target ~ #labels a {
color: #fff;
}
input#modern:target ~ .main .content,
input#modern:target ~ .main #content,
input#modern:checked ~ .main .content,
input#modern:checked ~ .main #content {
input#modern:target ~ .main #content {
margin: 0 auto;
}
input#modern:target ~ .main blockquote:after,
input#modern:checked ~ .main blockquote:after {
input#modern:target ~ .main blockquote:after {
display: none;
}
input#modern:target ~ .main blockquote,
input#modern:checked ~ .main blockquote {
input#modern:target ~ .main blockquote {
font-family: "Hoefler Text", Georgia, serif;
font-style: italic;
font-size: 20px;
@ -424,9 +415,7 @@ input#modern:checked ~ .main blockquote {
border-left: solid 10px;
}
input#modern:target ~ .main h1,
input#modern:target ~ .main h2,
input#modern:checked ~ .main h1,
input#modern:checked ~ .main h2 {
input#modern:target ~ .main h2 {
font-family: "Hoefler Text", Georgia, serif;
font-style: italic;
font-size: 2em;
@ -437,18 +426,13 @@ input#modern:checked ~ .main h2 {
input#modern:target ~ .main h3,
input#modern:target ~ .main h4,
input#modern:target ~ .main h5,
input#modern:target ~ .main h6,
input#modern:checked ~ .main h3,
input#modern:checked ~ .main h4,
input#modern:checked ~ .main h5,
input#modern:checked ~ .main h6 {
input#modern:target ~ .main h6 {
font-weight: 200;
font-size: 1.5em;
line-height: 1.5em;
margin: 1em 0;
}
input#modern:target ~ .main #preamble h1,
input#modern:checked ~ .main #preamble h1 {
input#modern:target ~ .main #preamble h1 {
font-size: 4em;
line-height: 1.5em;
}
@ -457,58 +441,41 @@ input#modern:target ~ .main h2::before,
input#modern:target ~ .main h3::before,
input#modern:target ~ .main h4::before,
input#modern:target ~ .main h5::before,
input#modern:target ~ .main h6::before,
input#modern:checked ~ .main h1::before,
input#modern:checked ~ .main h2::before,
input#modern:checked ~ .main h3::before,
input#modern:checked ~ .main h4::before,
input#modern:checked ~ .main h5::before,
input#modern:checked ~ .main h6::before {
input#modern:target ~ .main h6::before {
content: "";
}
input#modern:target ~ .main pre,
input#modern:checked ~ .main pre {
input#modern:target ~ .main pre {
font-size: 14px;
line-height: 1em;
border-left: solid 4px var(--soft-foreground);
padding-left: 1em;
}
input#modern:target ~ .main pre::before,
input#modern:target ~ .main pre::after,
input#modern:checked ~ .main pre::before,
input#modern:checked ~ .main pre::after {
input#modern:target ~ .main pre::after {
content: "";
}
input#modern:target ~ .main #preamble,
input#modern:target ~ .main #postamble,
input#modern:checked ~ .main #preamble,
input#modern:checked ~ .main #postamble {
input#modern:target ~ .main #postamble {
background-color: var(--cyan);
padding: 2em 0;
}
input#modern:target ~ .main #postamble code,
input#modern:checked ~ .main #postamble code {
input#modern:target ~ .main #postamble code {
background-color: transparent;
}
input#modern:target ~ .main #preamble *,
input#modern:target ~ .main #postamble *,
input#modern:checked ~ .main #preamble *,
input#modern:checked ~ .main #postamble * {
input#modern:target ~ .main #postamble * {
color: #fff;
}
input#modern:target ~ #labels,
input#modern:checked ~ #labels {
input#modern:target ~ #labels {
background: var(--cyan);
color: #fff;
}
input#modern:target ~ #labels .content,
input#modern:checked ~ #labels .content {
input#modern:target ~ #labels .content {
margin: 0 auto;
}
/* Dark raw theme checked */
input#darkraw:target ~ .main,
input#darkraw:checked ~ .main {
/* Dark raw theme selected */
input#darkraw:target ~ .main {
--main-background: #000;
--main-foreground: #fff;
--second-foreground: #fff;
@ -525,16 +492,12 @@ input#darkraw:checked ~ .main {
--color-link: var(--yellow);
font-family: monospace;
}
input#darkraw:target ~ #labels,
input#darkraw:checked ~ #labels {
input#darkraw:target ~ #labels {
background: #000;
color: #fff;
}
input#darkraw:target ~ .main code,
input#darkraw:target ~ .main pre,
input#darkraw:checked ~ .main code,
input#darkraw:checked ~ .main pre
{
input#darkraw:target ~ .main pre {
font-family: monospace;
}
/* Default color theme */