better css
This commit is contained in:
Yann Esposito (Yogsototh)
parent
1d21a151a5
commit
e06d3eeb9f
GPG key ID:
7B19A4C650D59646
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue