diff --git a/src/css/minimalist.css b/src/css/minimalist.css index a5b079c..ae9883c 100644 --- a/src/css/minimalist.css +++ b/src/css/minimalist.css @@ -38,6 +38,11 @@ ul, li, p, section, header, footer { margin: 0; padding: 0; } +footer { + font-size: .8em; + line-height: 1.25em; + padding: 1em 0; +} h1, h2, h3, h4, h5, h6, pre, code, blockquote, p, ul, ol, section, header, figure { margin-top: 1em; @@ -289,6 +294,7 @@ navigation > a { /* Solaryzed accented colors */ --main-background: var(--base03); --main-foreground: var(--base0); + --second-background: var(--base02); --second-foreground: var(--base01); --reveal-foreground: var(--base1); --reveal-background: var(--base02); @@ -309,6 +315,7 @@ navigation > a { :root { --main-background: var(--base3); --main-foreground: var(--base00); + --second-background: var(--base2); --second-foreground: var(--base1); --reveal-foreground: var(--base01); --reveal-background: var(--base2); @@ -340,20 +347,17 @@ img { } /* Light themes does not soften and darken images */ input#light:checked ~ .main img, -input#light:target ~ .main img, input#simple:checked ~ .main img, -input#simple:target ~ .main img, -input#modern:checked ~ .main img, -input#modern:target ~ .main img { +input#modern:checked ~ .main img { filter: none; } /* --------------------------------------------------------------------------- */ /* Dark theme selected */ -input#dark:checked ~ .main , -input#dark:target ~ .main { +input#dark:checked ~ .main, input#dark:checked ~ #labels { --main-background: var(--base03); --main-foreground: var(--base0); + --second-background: var(--base02); --second-foreground: var(--base01); --reveal-foreground: var(--base1); --reveal-background: var(--base02); @@ -368,18 +372,13 @@ input#dark:target ~ .main { --color-h6: var(--reveal-foreground); --color-link: var(--green); } -input#dark:checked ~ #labels , -input#dark:target ~ #labels { - background: var(--base03); - color: var(--base0); -} /* --------------------------------------------------------------------------- */ /* Light theme selected */ -input#light:checked ~ .main , -input#light:target ~ .main { +input#light:checked ~ .main, input#light:checked ~ #labels { --main-background: var(--base3); --main-foreground: var(--base01); + --second-background: var(--base2); --second-foreground: var(--base00); --reveal-foreground: var(--base01); --reveal-background: var(--base2); @@ -394,23 +393,18 @@ input#light:target ~ .main { --color-h6: var(--reveal-foreground); --color-link: var(--orange); } -input#light:checked ~ #labels , -input#light:target ~ #labels { - background: var(--base3); - color: var(--base00); -} /* --------------------------------------------------------------------------- */ /* Light simple theme selected */ -input#simple:checked ~ .main , -input#simple:target ~ .main { +input#simple:checked ~ .main, input#simple:checked ~ #labels { --main-background: #fff; --main-foreground: #333; - --second-foreground: #333; + --second-background: #eee; + --second-foreground: #222; --reveal-foreground: #000; --reveal-background: #fff; --soft-foreground: #555; - --border-color: #333; + --border-color: #CCC; --todo-txt: #333; --color-h1: #333; --color-h2: #333; @@ -423,38 +417,24 @@ input#simple:target ~ .main { font-size: 14px; line-height: 1.5em; } -input#simple:checked ~ #labels , -input#simple:target ~ #labels { - background: #fff; - color: #333; - font-family: "Helvetica Neue"; - font-size: 14px; - line-height: 1.5em; -} -input#simple:checked ~ #labels .content, -input#simple:target ~ #labels .content { +input#simple:checked ~ #labels .content{ margin: 0 auto; } input#simple:checked ~ .main .content, -input#simple:target ~ .main .content, -input#simple:checked ~ .main #content , -input#simple:target ~ .main #content { +input#simple:checked ~ .main #content { margin: 0 auto; } input#simple:checked ~ .main code, -input#simple:target ~ .main code, -input#simple:checked ~ .main pre, -input#simple:target ~ .main pre -{ +input#simple:checked ~ .main pre{ font-family: monospace; } /* --------------------------------------------------------------------------- */ /* Dark matrix theme selected */ -input#matrix:checked ~ .main , -input#matrix:target ~ .main { +input#matrix:checked ~ .main, input#matrix:checked ~ #labels { --main-background: #000; --main-foreground: #0b0; + --second-background: #040; --second-foreground: #080; --reveal-foreground: #0f0; --reveal-background: #000; @@ -470,24 +450,17 @@ input#matrix:target ~ .main { --color-link: #080; font-family: monospace; } -input#matrix:checked ~ #labels , -input#matrix:target ~ #labels { - background: #000; - color: #0b0; -} input#matrix:checked ~ .main code, -input#matrix:target ~ .main code, -input#matrix:checked ~ .main pre , -input#matrix:target ~ .main pre { +input#matrix:checked ~ .main pre { font-family: monospace; } /* --------------------------------------------------------------------------- */ /* Light modern theme selected */ -input#modern:checked ~ .main , -input#modern:target ~ .main { +input#modern:checked ~ .main, input#modern:checked ~ #labels { --main-background: #fff; --main-foreground: #444; + --second-background: #eee; --second-foreground: #aaa; --reveal-foreground: #000; --reveal-background: #eee; @@ -501,22 +474,17 @@ input#modern:target ~ .main { line-height: 1.5em; } -input#modern:checked ~ #labels a , -input#modern:target ~ #labels a { +input#modern:checked ~ #labels a { color: #fff; } input#modern:checked ~ .main .content, -input#modern:target ~ .main .content, -input#modern:checked ~ .main #content , -input#modern:target ~ .main #content { +input#modern:checked ~ .main #content { margin: 0 auto; } -input#modern:checked ~ .main blockquote:after , -input#modern:target ~ .main blockquote:after { +input#modern:checked ~ .main blockquote:after { display: none; } -input#modern:checked ~ .main blockquote , -input#modern:target ~ .main blockquote { +input#modern:checked ~ .main blockquote { font-family: "Hoefler Text", Georgia, serif; font-style: italic; font-size: 20px; @@ -524,9 +492,7 @@ input#modern:target ~ .main blockquote { border-left: solid 10px; } input#modern:checked ~ .main h1, -input#modern:target ~ .main h1, -input#modern:checked ~ .main h2 , -input#modern:target ~ .main h2 { +input#modern:checked ~ .main h2 { font-family: "Hoefler Text", Georgia, serif; font-style: italic; font-size: 2em; @@ -536,114 +502,86 @@ input#modern:target ~ .main h2 { } input#modern:checked ~ .main h3, -input#modern:target ~ .main h3, input#modern:checked ~ .main h4, -input#modern:target ~ .main h4, input#modern:checked ~ .main h5, -input#modern:target ~ .main h5, -input#modern:checked ~ .main h6 , -input#modern:target ~ .main h6 { +input#modern:checked ~ .main h6 { font-weight: 200; font-size: 1.5em; line-height: 1.5em; margin: 1em 0; color: var(--reveal-foreground); } -input#modern:checked ~ .main h4, -input#modern:target ~ .main h4 { +input#modern:checked ~ .main h4{ font-size: 1.25em; line-height: 1.25em; } input#modern:checked ~ .main h5, -input#modern:target ~ .main h5, -input#modern:checked ~ .main h6 , -input#modern:target ~ .main h6 { +input#modern:checked ~ .main h6 { font-size: 1em; line-height: 1em; } -input#modern:checked ~ .main #preamble , -input#modern:target ~ .main #preamble { +input#modern:checked ~ .main #preamble { border-bottom: solid 1px rgba(0,0,0,0.2); } -input#modern:checked ~ .main #postamble , -input#modern:target ~ .main #postamble { +input#modern:checked ~ .main #postamble { border-top: solid 1px rgba(0,0,0,0.2); } -input#modern:checked ~ .main #preamble h1 , -input#modern:target ~ .main #preamble h1 { +input#modern:checked ~ .main #preamble h1 { font-size: 4em; line-height: 1.5em; margin: .5em 0; } input#modern:checked ~ .main h1::before, -input#modern:target ~ .main h1::before, input#modern:checked ~ .main h2::before, -input#modern:target ~ .main h2::before, input#modern:checked ~ .main h3::before, -input#modern:target ~ .main h3::before, input#modern:checked ~ .main h4::before, -input#modern:target ~ .main h4::before, input#modern:checked ~ .main h5::before, -input#modern:target ~ .main h5::before, -input#modern:checked ~ .main h6::before , -input#modern:target ~ .main h6::before { +input#modern:checked ~ .main h6::before { content: ""; } -input#modern:checked ~ .main pre , -input#modern:target ~ .main pre { +input#modern:checked ~ .main pre { font-size: 14px; line-height: 1em; border-left: solid 4px var(--soft-foreground); padding-left: 1em; } input#modern:checked ~ .main pre::before, -input#modern:target ~ .main pre::before, -input#modern:checked ~ .main pre::after , -input#modern:target ~ .main pre::after { +input#modern:checked ~ .main pre::after { content: ""; } input#modern:checked ~ .main #preamble, -input#modern:target ~ .main #preamble, -input#modern:checked ~ .main #postamble , -input#modern:target ~ .main #postamble { +input#modern:checked ~ .main #postamble { background-color: var(--cyan); padding: 1em 0; } -input#modern:checked ~ .main #preamble , -input#modern:target ~ .main #preamble { +input#modern:checked ~ .main #preamble { margin-bottom: 2em; } -input#modern:checked ~ .main #postamble , -input#modern:target ~ .main #postamble { +input#modern:checked ~ .main #postamble { margin-top: 2em; } -input#modern:checked ~ .main #postamble code , -input#modern:target ~ .main #postamble code { +input#modern:checked ~ .main #postamble code { background-color: transparent; } input#modern:checked ~ .main #preamble *, -input#modern:target ~ .main #preamble *, -input#modern:checked ~ .main #postamble * , -input#modern:target ~ .main #postamble * { +input#modern:checked ~ .main #postamble * { color: #fff; } -input#modern:checked ~ #labels , -input#modern:target ~ #labels { +input#modern:checked ~ #labels { background: var(--cyan); color: #fff; } -input#modern:checked ~ #labels .content , -input#modern:target ~ #labels .content { +input#modern:checked ~ #labels .content { margin: 0 auto; } /* --------------------------------------------------------------------------- */ /* Dark simple theme selected */ -input#darksimple:checked ~ .main , -input#darksimple:target ~ .main { +input#darksimple:checked ~ .main, input#darksimple:checked ~ #labels { --main-background: #000; --main-foreground: #ccc; - --second-foreground: #ccc; + --second-background: #111; + --second-foreground: #ddd; --reveal-foreground: #fff; --reveal-background: #000; --soft-foreground: #ccc; @@ -661,29 +599,15 @@ input#darksimple:target ~ .main { font-size: 14px; line-height: 1.5em; } -input#darksimple:checked ~ #labels .content, -input#darksimple:target ~ #labels .content { +input#darksimple:checked ~ #labels .content{ margin: 0 auto; } -input#darksimple:checked ~ #labels , -input#darksimple:target ~ #labels { - background: #000; - color: #ccc; - font-family: "Helvetica Neue", sans-serif; - font-weight: 300; - font-size: 14px; - line-height: 1.5em; -} input#darksimple:checked ~ .main code, -input#darksimple:target ~ .main code, -input#darksimple:checked ~ .main pre , -input#darksimple:target ~ .main pre { +input#darksimple:checked ~ .main pre { font-family: monospace; } input#darksimple:checked ~ .main .content, -input#darksimple:target ~ .main .content, -input#darksimple:checked ~ .main #content , -input#darksimple:target ~ .main #content { +input#darksimple:checked ~ .main #content { margin: 0 auto; } @@ -710,6 +634,11 @@ b, strong, i, em { body > input { display:none; } +#labels { + background: var(--second-background); + color: var(--second-foreground); +} + .keywords { color: var(--second-foreground); } @@ -783,6 +712,7 @@ blockquote:after, .main blockquote:after { } #preamble,#postamble,.main #preamble, .main #postamble { border-color: var(--transparent); + background: var(--second-background); } .article-date, .main .article-date { color: var(--soft-foreground); diff --git a/src/posts/new-blog.org b/src/posts/new-blog.org index 77a35da..cfff69a 100644 --- a/src/posts/new-blog.org +++ b/src/posts/new-blog.org @@ -185,11 +185,11 @@ Finally in the CSS you can write things like: --light-color: #fff; --dark-color: #000; } - input#light:target ~ .main { + input#light:checked ~ .main { background-color: var(--light-color); color: var(--dark-color); } - input#dark:target ~ .main { + input#dark:checked ~ .main { background-color: var(--dark-color); color: var(--light-color); }