From e3e3c3d909d545377c05223f62a601391d656d4c Mon Sep 17 00:00:00 2001 From: "Yann Esposito (Yogsototh)" Date: Thu, 28 Nov 2019 17:56:57 +0100 Subject: [PATCH] Updated the CSS themes --- project.el | 2 +- project.el.sig | Bin 586 -> 586 bytes src/css/min.css | 211 ++++--------------- src/css/mk.css | 37 +--- src/css/modern.css | 371 +++++++-------------------------- src/css/sci.css | 498 ++++++++++++++------------------------------- 6 files changed, 271 insertions(+), 848 deletions(-) diff --git a/project.el b/project.el index 05ddcfa..797dc65 100644 --- a/project.el +++ b/project.el @@ -197,7 +197,7 @@ "" " / " "" - " --- " + " - " ,(format "mk" mk-path) ,(format "min" min-path) ,(format "sci" sci-path) diff --git a/project.el.sig b/project.el.sig index 7cc0736733d56dcdac28d094556b9dec57247a49..0abcca489fe2fdd93ef85bf0b534a9ea56398832 100644 GIT binary patch delta 534 zcmV+x0_pwA1j+=EBLm;-vXLere`Deh0E_vJ>qKXxrFFEix0T&wS5Yo0eefl13~7S+ z!3Jpc?&UHVxe@nWz{E7GL>D)sbI#Wr!lfB*w$(RHBJ<08UYH1HwX_diXKCWq+b2&8 ztPrcsG(z^ql4}w>rr88ME|aa7@!e}vB4Ti>O|;?)TFseP8l=7L0WY=0eT&LJ~yw!(h$O}hm89ENiiRkB2Y;(Yzi zfgwfpA+epX%}}jf!c6McMv@US-5Sc^ir9O0Sk4WSwaFu*_XDpB*aHA61kYEL8g>_U zEjSaG^d!fEFpbmhv?rr+e{)CFHL$h5a4O(DrDjSFCS+KZvE+Z1}d}9*c_h&YW1|9gAHVe~hJ3IJ4Tr?SEd8 z_1Jaf37!mra;#+s2xGXZ_1lKI8Nx#bfB*mh delta 534 zcmV+x0_pwA1j+=EBLm*MCXpr}fBEYV`T`GI+#VVPZ!c+F+@%a+wpU zSBR5&KkGiIx^&SgQ_qzPqGq2N3dX;~ZZViI%famt;{Whd;k{btRt{YABI2>$8n7ol zoNcMwsn*F!u6CmQ!BX+xvw7WGCy9ZP|M<7hi!f-wZ=e*lJ_EKKva>p;+_ zR|FG1GG#gIM$fbO>wm$Lr2u((h0{rBme;2Bv`V|g0)}u`u3nz}U>(!U6vHqRy86AK(Pp_d3eGN_H(D{I)9j YUm4jSiP9ouAC3L;2%sQbDV|X9D-#R_>Hq)$ diff --git a/src/css/min.css b/src/css/min.css index ab064ca..356c05c 100644 --- a/src/css/min.css +++ b/src/css/min.css @@ -1,202 +1,69 @@ -/* CSS to be used for HTML Org-mode export - Author: Yann Esposito -*/ - /* Fonts */ -body { +html,body { font: 16px/1.4 sans-serif; line-height: 1.5em; + margin:0; + padding:0; } pre, pre code { line-height: 1em; + font-size: .8em; } +img { width: 100%; } +label {color:#b56;} +label:hover { cursor:pointer; } #content,.content { max-width: 48em; padding: 0 1em; margin: 0 auto; } pre { + border: dashed 1px; + padding: 1ex; max-width: 100%; overflow-x: scroll; overflow-y: hidden; } -figure { margin: 0 1em; } -img { - width: 100%; - max-height: 100vh; - margin: 1em auto; -} -p > img, li > img { - max-height: 1em; - width: auto; - margin: 0; - vertical-align: middle; -} -table { - display: block; /* for overflow to work */ - max-width: 100%; - border-collapse: collapse; - border: solid 1px; - overflow: scroll; -} -td, th { - height: 1em; - padding: 0 10px; - text-align: left; - vertical-align: middle; - border-right: solid 1px; - border-left: solid 1px; -} -#labels { margin: 0; } -.main {padding-top: 1em; } -/* colors theme */ -:root { - color-scheme: light dark; /* support color scheme */ - --b03: #222; - --b02: #333; - --b01: #666; - --b00: #777; - --b0: #999; - --b1: #AAA; - --b2: #EEE; - --b3: #FFF; - --y: #af8700; - --o: #d75f00; - --r: #d70000; - --m: #af005f; - --v: #5f5faf; - --b: #0087ff; - --c: #00afaf; - --g: #5f8700; - - /* default dark */ - --bg: var(--b03); - --fg: var(--b0); - --bg2: var(--b02); - --fg2: var(--b01); - --rfg: var(--b1); - --rbg: var(--b02); - --bdr: var(--b02); - --l-fg: var(--bg); - --l-bg: var(--g); -} - -/* Dark themes soften and darken images */ -@media (prefers-color-scheme: dark) { - :root { - --bg: var(--b03); - --fg: var(--b0); - --bg2: var(--b02); - --fg2: var(--b01); - --rfg: var(--b1); - --rbg: var(--b02); - --bdr: var(--b02); - --l-fg: var(--bg); - --l-bg: var(--g); - } - img { - filter: brightness(0.8) sepia(100%) hue-rotate(182deg) saturate(0.6); - } -} body > input { display:none; } -@media (prefers-color-scheme: light) { - :root { - --bg: var(--b3); - --fg: var(--b00); - --bg2: var(--b2); - --fg2: var(--b1); - --rfg: var(--b01); - --rbg: var(--b2); - --bdr: var(--b2); - --l-fg: var(--bg); - --l-bg: var(--o); +.main { + padding-top: 1em; + min-height:calc(100vh - 2.5em); +} +:root { + --b2: #fff; + --b3: #fffa; + --y: #ca2; + --o: #a65; + --r: #b56;} +/* --------------------------------------------------------------------------- */ +/* Default color theme */ +/* colors theme */ +/* Dark themes soften and darken images */ +@media (prefers-color-scheme: dark) { + body { + background: #000; + color: #bbb; } + a { color: #8cf } + a:visited { color: #fcf } img { - filter: sepia(100%) hue-rotate(182deg) saturate(0.6); + filter: brightness(0.8); } } -#d:checked ~ .main, #d:checked ~ #labels { - --bg: var(--b03); - --fg: var(--b0); - --bg2: var(--b02); - --fg2: var(--b01); - --rfg: var(--b1); - --rbg: var(--b02); - --bdr: var(--b02); - --l-fg: var(--bg); - --l-bg: var(--g); +/* Manually checked colortheme */ +#d:checked ~ * { + background: #000; + color: #bbb; } +#d:checked ~ * a { color: #8cf; } +#d:checked ~ * a:visited { color: #fcf; } /* --------------------------------------------------------------------------- */ /* Light theme selected */ -#l:checked ~ .main, #l:checked ~ #labels { - --bg: var(--b3); - --fg: var(--b00); - --bg2: var(--b2); - --fg2: var(--b1); - --rfg: var(--b01); - --rbg: var(--b2); - --bdr: var(--b2); - --l-fg: var(--bg); - --l-bg: var(--o); +#l:checked ~ * { + background: #FFF; + color: #333; } - -#labels { - background: var(--bg2); - color: var(--fg2); -} -/* --------------------------------------------------------------------------- */ -/* Default color theme */ -body,.main { - background: var(--bg); - color: var(--fg); - min-height: 100vh; -} -a { color: var(--l-bg); } - -.org-rainbow-delimiters-depth-1, .org-rainbow-delimiters-depth-9, -.org-css-selector, .org-nix-attribute, .org-builtin { - color:var(--c); -} - -.org-rainbow-delimiters-depth-2, .org-nix-builtin, .org-variable-name, -.org-function-name, .org-diff-changed { - color:var(--b); -} - -.org-rainbow-delimiters-depth-3 { - color:var(--v); -} - -.org-rainbow-delimiters-depth-4, .org-diff-hunk-header, .org-sh-quoted-exec { - color:var(--m); -} -.org-rainbow-delimiters-depth-5, .org-diff-removed { - color:var(--r); -} -.org-rainbow-delimiters-depth-6 { - color:var(--o); -} -.org-rainbow-delimiters-depth-7, .org-type, .org-constant, .org-diff-header { - color:var(--y); -} -.org-rainbow-delimiters-depth-8, .org-sh-heredoc, .org-diff-added, .org-string, -.org-doc, .org-keyword { - color:var(--g); -} - -.org-diff-none, .org-preprocessor, .org-comment-delimiter, .org-comment, -.org-outshine-level-1, .org-outshine-level-2, .org-outshine-level-3, -.org-outshine-level-4, .org-outshine-level-5, .org-outshine-level-6, -.org-outshine-level-7, .org-outshine-level-8, .org-outshine-level-9 { - color:var(--fg2); -} - -.org-highlight-number-number { - color:var(--rfg); -} - - diff --git a/src/css/mk.css b/src/css/mk.css index dd1a5cc..a9c8db2 100644 --- a/src/css/mk.css +++ b/src/css/mk.css @@ -426,27 +426,6 @@ blockquote:after, .main blockquote:after { font-weight: bold; font-size: 10px; } -.TODO, .main .TODO { - color: var(--r); -} -.IN_PROGRESS, .main .IN_PROGRESS { - color: var(--y); -} -.IN_REVIEW, .main .IN_REVIEW { - color: var(--cyan); -} -.HOLD, .main .HOLD { - color: var(--violet); -} -.WAITING, .main .WAITING { - color: var(--violet); -} -.DONE, .main .DONE { - color: var(--g); -} -.CANCELED, .main .CANCELED { - color: var(--m); -} .notes, .main .notes { background: var(--rbg); color: var(--rfg); @@ -454,7 +433,7 @@ blockquote:after, .main blockquote:after { /* ---- SYNTAX HIGHLIGHTING ---- */ .org-rainbow-delimiters-depth-1, .org-rainbow-delimiters-depth-9, .org-css-selector, .org-nix-attribute, .org-builtin, -a { +.IN_REVIEW, a { color:var(--c); } @@ -463,24 +442,26 @@ a { color:var(--b); } -.org-rainbow-delimiters-depth-3 { +.org-rainbow-delimiters-depth-3, .HOLD, .WAITING { color:var(--v); } -.org-rainbow-delimiters-depth-4, .org-diff-hunk-header, .org-sh-quoted-exec { +.org-rainbow-delimiters-depth-4, .org-diff-hunk-header, .org-sh-quoted-exec, +.CANCELED { color:var(--m); } -.org-rainbow-delimiters-depth-5, .org-diff-removed { +.org-rainbow-delimiters-depth-5, .org-diff-removed, .TODO { color:var(--r); } .org-rainbow-delimiters-depth-6 { color:var(--o); } -.org-rainbow-delimiters-depth-7, .org-type, .org-constant, .org-diff-header { +.org-rainbow-delimiters-depth-7, .org-type, .org-constant, .org-diff-header, +.IN_PROGRESS { color:var(--y); } .org-rainbow-delimiters-depth-8, .org-sh-heredoc, .org-diff-added, .org-string, -.org-doc, .org-keyword { +.org-doc, .org-keyword, .DONE { color:var(--g); } @@ -491,6 +472,6 @@ a { color:var(--fg2); } -.org-highlight-number-number { +.org-highlight-number-number { color:var(--rfg); } diff --git a/src/css/modern.css b/src/css/modern.css index 827cea4..99fad0a 100644 --- a/src/css/modern.css +++ b/src/css/modern.css @@ -4,8 +4,10 @@ /* Fonts */ body { - font: 14px/1.4 monospace; - line-height: 16px; + font-family: "Helvetica Neue", sans-serif; + font-weight: 300; + font-size: 16px/1.6; + line-height: 1.5em; } pre, pre code { line-height: 1em; @@ -91,27 +93,6 @@ sup > a { h1,h2,h3,h4,h5,h6 { font-size: 1em; } -h1::before { - content: "# "; -} -h2::before { - content: "## "; -} -h3::before { - content: "### "; -} -h4::before { - content: "#### "; -} -h5::before { - content: "##### "; -} -h6::before { - content: "###### "; -} -hr { - border: 0; -} #preamble h1 { margin-top: 0; } @@ -125,26 +106,11 @@ hr { #table-of-contents { margin-bottom: 1em; } -#postamble:before, hr:after { - text-align: center; - content: "-----------------------------------------------------------------------------"; - display:block; - width: 100%; - overflow: hidden; - opacity: .5; - height: 1em; -} pre { max-width: 100%; overflow-x: scroll; overflow-y: hidden; } -pre:after,pre:before { - content: "~~~~~~~~~"; - display: block; } -pre:before { - content: "~~~~~~~~~ " attr(class); -} pre code { background: none; } @@ -155,13 +121,6 @@ blockquote,#table-of-contents { padding-left: 2ch; overflow: hidden; } -#table-of-contents:after, blockquote:after { - content: ">\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>"; - white-space: pre; - position: absolute; - top: 0; - left: 0; -} nav { font-weight: bold; display: block; @@ -243,43 +202,37 @@ figure, .figure { --cyan: #4c8493; --green: #728b5c; - /* Solaryzed accented colors */ - --bg: var(--base03); - --fg: var(--base0); - --bg2: var(--base02); - --fg2: var(--base01); - --rfg: var(--base1); - --rbg: var(--base02); - --bdr: var(--base02); + --bg: #fff; + --fg: #444; + --bg2: #eee; + --fg2: #333; + --rfg: #000; + --rbg: #eee; + --bdr: #ddd; --l-fg: var(--bg); - --l-bg: var(--green); + --l-bg: var(--magenta); } /* org colors */ @media (prefers-color-scheme: light) { :root { - --bg: var(--base3); - --fg: var(--base00); - --bg2: var(--base2); - --fg2: var(--base1); - --rfg: var(--base01); - --rbg: var(--base2); - --bdr: var(--base2); + --bg: #fff; + --fg: #444; + --bg2: #eee; + --fg2: #333; + --rfg: #000; + --rbg: #eee; + --bdr: #ddd; --l-fg: var(--bg); - --l-bg: var(--orange); + --l-bg: var(--magenta); } } /* Dark themes soften and darken images */ @media (prefers-color-scheme: dark) { img { - filter: brightness(0.8) sepia(100%) hue-rotate(182deg) saturate(0.6); + filter: brightness(0.8); } } -@media (prefers-color-scheme: light) { - img { - filter: sepia(100%) hue-rotate(182deg) saturate(0.6); - } -} #h { float: left; } @@ -293,145 +246,23 @@ figure, .figure { font-style: italic; } -/* Light themes does not soften and darken images */ -#l:checked ~ .main img { filter: sepia(100%) hue-rotate(182deg) saturate(0.6); } -#s:checked ~ .main img, #m:checked ~ .main img { filter: none; } -#d:checked ~ .main img { filter: brightness(0.8) sepia(100%) hue-rotate(182deg) saturate(0.6); } -#c:checked ~ .main img { filter: brightness(0.8); } -#x:checked ~ .main img { filter: brightness(0.8) sepia(100%) hue-rotate(55deg) saturate(10); } - -#s:checked ~ .main #preamble:after, -#s:checked ~ .main #postamble:before, -#c:checked ~ .main #preamble:after, -#c:checked ~ .main #postamble:before, -#m:checked ~ .main #preamble:after, -#m:checked ~ .main #postamble:before -{ - display: none; -} -/* --------------------------------------------------------------------------- */ -/* Dark theme selected */ -#d:checked ~ .main, #d:checked ~ #labels { - --bg: var(--base03); - --fg: var(--base0); - --bg2: var(--base02); - --fg2: var(--base01); - --rfg: var(--base1); - --rbg: var(--base02); - --bdr: var(--base02); - --l-fg: var(--bg); - --l-bg: var(--green); -} - -/* --------------------------------------------------------------------------- */ -/* Light theme selected */ -#l:checked ~ .main, #l:checked ~ #labels { - --bg: var(--base3); - --fg: var(--base01); - --bg2: var(--base2); - --fg2: var(--base00); - --rfg: var(--base01); - --rbg: var(--base2); - --bdr: var(--base2); - --l-fg: var(--bg); - --l-bg: var(--orange); -} - -/* --------------------------------------------------------------------------- */ -/* Light simple theme selected */ -#c:checked ~ .main, #c:checked ~ #labels, -#s:checked ~ .main, #s:checked ~ #labels { - --bg: #fff; - --fg: #333; - --bg2: #eee; - --fg2: #222; - --rfg: #111; - --rbg: #eee; - --bdr: #CCC; - --l-fg: var(--bg); - --l-bg: var(--orange); - font-family: sans-serif; - font-size: 16px; - line-height: 1.5em; -} -#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; -} - -/* --------------------------------------------------------------------------- */ -/* Dark matrix theme selected */ -#x:checked ~ .main, #x:checked ~ #labels { - --bg: #000; - --fg: #0b0; - --bg2: #040; - --fg2: #080; - --rfg: #0f0; - --rbg: #000; - --bdr: #080; - --l-fg: #0f0; - --l-bg: var(--bg); - --yellow: #0f0; - --orange: #0e0; - --red: #0d0; - --magenta: #0f0; - --violet: #0f0; - --blue: #080; - --cyan: #080; - --green: #080; - --base03: #020; - --base02: #030; - --base3: #0f0; - --base2: #0e0; - font-family: monospace; -} -#x:checked ~ .main code, -#x:checked ~ .main pre { - font-family: monospace; -} - /* --------------------------------------------------------------------------- */ /* Light modern theme selected */ -#m:checked ~ .main, #m:checked ~ #labels { - --bg: #fff; - --fg: #444; - --bg2: #eee; - --fg2: #333; - --rfg: #000; - --rbg: #eee; - --bdr: #ddd; - --l-fg: var(--bg); - --l-bg: var(--magenta); - font-family: "Helvetica Neue", sans-serif; - font-weight: 300; - font-size: 16px; - line-height: 1.5em; -} -#m:checked ~ #labels a { +#labels a { color: #fff; } -#m:checked ~ .main .content, -#m:checked ~ .main #content { +.content, #content { margin: 0 auto; } -#m:checked ~ .main #table-of-contents:after, -#m:checked ~ .main blockquote:after { - display: none; -} -#m:checked ~ .main blockquote { +blockquote { font-family: "Hoefler Text", Georgia, serif; font-style: italic; font-size: 20px; line-height: 30px; border-left: solid 10px; } -#m:checked ~ .main h1, -#m:checked ~ .main h2 { +h1, h2 { font-family: "Hoefler Text", Georgia, serif; font-style: italic; font-size: 2em; @@ -440,101 +271,64 @@ figure, .figure { color: var(--rfg); } -#m:checked ~ .main h3, -#m:checked ~ .main h4, -#m:checked ~ .main h5, -#m:checked ~ .main h6 { +h3, h4, h5, h6 { font-weight: 200; font-size: 1.5em; line-height: 1.5em; margin: 1em 0; color: var(--rfg); } -#m:checked ~ .main h4{ +h4{ font-size: 1.25em; line-height: 1.25em; } -#m:checked ~ .main h5, -#m:checked ~ .main h6 { +h5, h6 { font-size: 1em; line-height: 1em; } -#m:checked ~ .main #preamble { +#preamble { border-bottom: solid 1px rgba(0,0,0,0.2); } -#m:checked ~ .main #postamble { +#postamble { border-top: solid 1px rgba(0,0,0,0.2); } -#m:checked ~ .main #preamble h1 { +#preamble h1 { font-size: 4em; line-height: 1.5em; margin: .5em 0; } -#m:checked ~ .main h1::before, -#m:checked ~ .main h2::before, -#m:checked ~ .main h3::before, -#m:checked ~ .main h4::before, -#m:checked ~ .main h5::before, -#m:checked ~ .main h6::before { - content: ""; -} -#m:checked ~ .main pre { +pre { font-size: 14px; line-height: 1em; border-left: solid 4px var(--fg2); padding-left: 1em; } -#m:checked ~ .main pre::before, -#m:checked ~ .main pre::after { +pre::before, +pre::after { content: ""; } -#m:checked ~ .main #preamble, -#m:checked ~ .main #postamble { +#preamble, #postamble { background: var(--cyan); padding: 1em 0; } -#m:checked ~ .main #preamble { +#preamble { margin-bottom: 2em; } -#m:checked ~ .main #postamble { - margin-top: 2em; +#postamble { +rgin-top: 2em; } -#m:checked ~ .main #postamble code { - background: transparent; +#postamble code { +ckground: transparent; } -#m:checked ~ .main #preamble *, -#m:checked ~ .main #postamble * { +#preamble *, +#postamble * { color: #fff; } -#m:checked ~ #labels { +#labels { background: var(--cyan); color: #fff; } -#m:checked ~ #labels .content { - margin: 0 auto; -} - -/* --------------------------------------------------------------------------- */ -/* Dark simple theme selected */ -#c:checked ~ .main, #c:checked ~ #labels { - --bg: #000; - --fg: #ccc; - --bg2: #111; - --fg2: #ddd; - --rfg: #eee; - --rbg: #111; - --bdr: #333; - --link: var(--green); -} -#c:checked ~ #labels .content{ - margin: 0 auto; -} -#c:checked ~ .main code, -#c:checked ~ .main pre { - font-family: monospace; -} -#c:checked ~ .main .content, -#c:checked ~ .main #content { +#labels .content { margin: 0 auto; } @@ -639,50 +433,43 @@ blockquote:after, .main blockquote:after { font-weight: bold; font-size: 10px; } -.TODO, .main .TODO { - color: var(--red); -} -.IN_PROGRESS, .main .IN_PROGRESS { - color: var(--yellow); -} -.IN_REVIEW, .main .IN_REVIEW { - color: var(--cyan); -} -.HOLD, .main .HOLD { - color: var(--violet); -} -.WAITING, .main .WAITING { - color: var(--violet); -} -.DONE, .main .DONE { - color: var(--green); -} -.CANCELED, .main .CANCELED { - color: var(--magenta); -} .notes, .main .notes { background: var(--rbg); color: var(--rfg); } /* ---- SYNTAX HIGHLIGHTING ---- */ -.org-nix-attribute, .org-builtin { - color:var(--cyan); +.org-rainbow-delimiters-depth-1, .org-rainbow-delimiters-depth-9, +.org-css-selector, .org-nix-attribute, .org-builtin, +.IN_REVIEW, a { + color:var(--c); } -.org-sh-heredoc, .org-diff-added, .org-string, .org-doc, .org-keyword { - color:var(--green); +.org-rainbow-delimiters-depth-2, .org-nix-builtin, .org-variable-name, +.org-function-name, .org-diff-changed { + color:var(--b); } -.org-nix-builtin, .org-variable-name, .org-function-name { - color:var(--blue); +.org-rainbow-delimiters-depth-3, .HOLD, .WAITING { + color:var(--v); } -.org-type, .org-constant { - color:var(--yellow); +.org-rainbow-delimiters-depth-4, .org-diff-hunk-header, .org-sh-quoted-exec, +.CANCELED { + color:var(--m); } - -.org-css-selector { - color:var(--cyan); +.org-rainbow-delimiters-depth-5, .org-diff-removed, .TODO { + color:var(--r); +} +.org-rainbow-delimiters-depth-6 { + color:var(--o); +} +.org-rainbow-delimiters-depth-7, .org-type, .org-constant, .org-diff-header, +.IN_PROGRESS { + color:var(--y); +} +.org-rainbow-delimiters-depth-8, .org-sh-heredoc, .org-diff-added, .org-string, +.org-doc, .org-keyword, .DONE { + color:var(--g); } .org-diff-none, .org-preprocessor, .org-comment-delimiter, .org-comment, @@ -692,20 +479,6 @@ blockquote:after, .main blockquote:after { color:var(--fg2); } -.org-highlight-number-number {color:var(--rfg);} - -.org-rainbow-delimiters-depth-1 {color:var(--cyan);} -.org-rainbow-delimiters-depth-2 {color:var(--blue);} -.org-rainbow-delimiters-depth-3 {color:var(--violet);} -.org-rainbow-delimiters-depth-4 {color:var(--magenta);} -.org-rainbow-delimiters-depth-5 {color:var(--red);} -.org-rainbow-delimiters-depth-6 {color:var(--orange);} -.org-rainbow-delimiters-depth-7 {color:var(--yellow);} -.org-rainbow-delimiters-depth-8 {color:var(--green);} -.org-rainbow-delimiters-depth-9 {color:var(--cyan);} - -.org-sh-quoted-exec {color:var(--magenta);} -.org-diff-changed {color:var(--blue);} -.org-diff-header {color:var(--yellow);} -.org-diff-hunk-header {color:var(--magenta);} -.org-diff-removed {color:var(--red);} +.org-highlight-number-number { + color:var(--rfg); +} diff --git a/src/css/sci.css b/src/css/sci.css index 9e89497..5293ce8 100644 --- a/src/css/sci.css +++ b/src/css/sci.css @@ -176,7 +176,7 @@ figure, .figure { margin: 1em 0; } #content,.content { - max-width: 46em; + max-width: 48em; margin: 0 auto; padding: 0 1em; } @@ -226,147 +226,6 @@ figure, .figure { /* colors theme */ :root { color-scheme: light dark; /* support color scheme */ - --base03: #202631; - --base02: #2B313C; - --base01: #656B74; - --base00: #727781; - --base0: #8B919B; - --base1: #989EA8; - --base2: #E5E8ED; - --base3: #F4F7FC; - --yellow: #A98D50; - --orange: #aa6550; - --red: #b85a64; - --magenta: #af53b0; - --violet: #846f93; - --blue: #5679a4; - --cyan: #4c8493; - --green: #728b5c; - - /* Solaryzed accented colors */ - --bg: var(--base03); - --fg: var(--base0); - --bg2: var(--base02); - --fg2: var(--base01); - --rfg: var(--base1); - --rbg: var(--base02); - --bdr: var(--base02); - --l-fg: var(--bg); - --l-bg: var(--green); -} - -/* org colors */ -@media (prefers-color-scheme: light) { - :root { - --bg: var(--base3); - --fg: var(--base00); - --bg2: var(--base2); - --fg2: var(--base1); - --rfg: var(--base01); - --rbg: var(--base2); - --bdr: var(--base2); - --l-fg: var(--bg); - --l-bg: var(--orange); - } -} -/* Dark themes soften and darken images */ -@media (prefers-color-scheme: dark) { - img { - filter: brightness(0.8) sepia(100%) hue-rotate(182deg) saturate(0.6); - } -} -@media (prefers-color-scheme: light) { - img { - filter: sepia(100%) hue-rotate(182deg) saturate(0.6); - } -} -#h { - float: left; -} -#labels { - width: 100%; - text-align: right; - margin-bottom: 1em; -} -#labels label { - text-decoration: underline; - cursor: pointer; - font-style: italic; -} - -/* Light themes does not soften and darken images */ -#l:checked ~ .main img { filter: sepia(100%) hue-rotate(182deg) saturate(0.6); } -#s:checked ~ .main img, #m:checked ~ .main img { filter: none; } -#d:checked ~ .main img { filter: brightness(0.8) sepia(100%) hue-rotate(182deg) saturate(0.6); } -#c:checked ~ .main img { filter: brightness(0.8); } -#x:checked ~ .main img { filter: brightness(0.8) sepia(100%) hue-rotate(55deg) saturate(10); } - -#s:checked ~ .main #preamble:after, -#s:checked ~ .main #postamble:before, -#c:checked ~ .main #preamble:after, -#c:checked ~ .main #postamble:before, -#m:checked ~ .main #preamble:after, -#m:checked ~ .main #postamble:before -{ - display: none; -} -/* --------------------------------------------------------------------------- */ -/* Dark theme selected */ -#d:checked ~ .main, #d:checked ~ #labels { - --bg: var(--base03); - --fg: var(--base0); - --bg2: var(--base02); - --fg2: var(--base01); - --rfg: var(--base1); - --rbg: var(--base02); - --bdr: var(--base02); - --l-fg: var(--bg); - --l-bg: var(--green); -} - -/* --------------------------------------------------------------------------- */ -/* Light theme selected */ -#l:checked ~ .main, #l:checked ~ #labels { - --bg: var(--base3); - --fg: var(--base01); - --bg2: var(--base2); - --fg2: var(--base00); - --rfg: var(--base01); - --rbg: var(--base2); - --bdr: var(--base2); - --l-fg: var(--bg); - --l-bg: var(--orange); -} - -/* --------------------------------------------------------------------------- */ -/* Light simple theme selected */ -#c:checked ~ .main, #c:checked ~ #labels, -#s:checked ~ .main, #s:checked ~ #labels { - --bg: #fff; - --fg: #333; - --bg2: #eee; - --fg2: #222; - --rfg: #111; - --rbg: #eee; - --bdr: #CCC; - --l-fg: var(--bg); - --l-bg: var(--orange); - font-family: sans-serif; - font-size: 16px; - line-height: 1.5em; -} -#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; -} - -/* --------------------------------------------------------------------------- */ -/* Dark matrix theme selected */ -#x:checked ~ .main, #x:checked ~ #labels { --bg: #000; --fg: #0b0; --bg2: #040; @@ -376,167 +235,132 @@ figure, .figure { --bdr: #080; --l-fg: #0f0; --l-bg: var(--bg); - --yellow: #0f0; - --orange: #0e0; - --red: #0d0; - --magenta: #0f0; - --violet: #0f0; - --blue: #080; - --cyan: #080; - --green: #080; - --base03: #020; - --base02: #030; - --base3: #0f0; - --base2: #0e0; - font-family: monospace; -} -#x:checked ~ .main code, -#x:checked ~ .main pre { - font-family: monospace; + --y: #0f0; + --o: #0e0; + --r: #0d0; + --m: #0f0; + --v: #0f0; + --b: #080; + --c: #080; + --g: #080; + --b03: #020; + --b02: #030; + --b3: #0f0; + --b2: #0e0; } -/* --------------------------------------------------------------------------- */ -/* Light modern theme selected */ -#m:checked ~ .main, #m:checked ~ #labels { +/* org colors */ +@media (prefers-color-scheme: light) { + :root { + --y: #0ff; + --o: #0ee; + --r: #0dd; + --m: #0ff; + --v: #0ff; + --b: #088; + --c: #088; + --g: #088; + + --b03: #022; + --b02: #033; + --b3: #fff; + --b2: #cee; + + --bg: #fff; + --fg: #055; + --fg2: #044; + --bg2: #cff; + --rfg: #033; + --rbg: #aee; + --bdr: #088; + --l-fg: #000; + --l-bg: var(--bg); + } +} +/* Dark themes soften and darken images */ +img { + filter: brightness(0.8) sepia(100%) hue-rotate(55deg) saturate(10); +} +@media (prefers-color-scheme: light) { + img { + filter: brightness(1.3) sepia(100%) hue-rotate(130deg) saturate(2); + } +} +#h { + float: left; +} +#labels { + width: 100%; + text-align: right; +} +.main { + padding-top: 1em; + min-height: calc(100vh - 2.5em); +} +#labels label { + text-decoration: underline; + cursor: pointer; + font-style: italic; +} + +/* Light themes does not soften and darken images */ +#l:checked ~ .main img { + filter: brightness(1.3) sepia(100%) hue-rotate(130deg) saturate(2); +} + +#d:checked ~ .main img { + filter: brightness(0.8) sepia(100%) hue-rotate(55deg) saturate(10); +} + +#l:checked ~ * { + --y: #0ff; + --o: #0ee; + --r: #0dd; + --m: #0ff; + --v: #0ff; + --b: #088; + --c: #088; + --g: #088; + + --b03: #022; + --b02: #033; + --b3: #fff; + --b2: #cee; + --bg: #fff; - --fg: #444; - --bg2: #eee; - --fg2: #333; - --rfg: #000; - --rbg: #eee; - --bdr: #ddd; - --l-fg: var(--bg); - --l-bg: var(--magenta); - font-family: "Helvetica Neue", sans-serif; - font-weight: 300; - font-size: 16px; - line-height: 1.5em; + --fg: #055; + --fg2: #044; + --bg2: #cff; + --rfg: #033; + --rbg: #aee; + --bdr: #088; + --l-fg: #000; + --l-bg: var(--bg); } - -#m:checked ~ #labels a { - color: #fff; -} -#m:checked ~ .main .content, -#m:checked ~ .main #content { - margin: 0 auto; -} -#m:checked ~ .main #table-of-contents:after, -#m:checked ~ .main blockquote:after { - display: none; -} -#m:checked ~ .main blockquote { - font-family: "Hoefler Text", Georgia, serif; - font-style: italic; - font-size: 20px; - line-height: 30px; - border-left: solid 10px; -} -#m:checked ~ .main h1, -#m:checked ~ .main h2 { - font-family: "Hoefler Text", Georgia, serif; - font-style: italic; - font-size: 2em; - line-height: 1.5em; - margin: 1em 0; - color: var(--rfg); -} - -#m:checked ~ .main h3, -#m:checked ~ .main h4, -#m:checked ~ .main h5, -#m:checked ~ .main h6 { - font-weight: 200; - font-size: 1.5em; - line-height: 1.5em; - margin: 1em 0; - color: var(--rfg); -} -#m:checked ~ .main h4{ - font-size: 1.25em; - line-height: 1.25em; -} -#m:checked ~ .main h5, -#m:checked ~ .main h6 { - font-size: 1em; - line-height: 1em; -} -#m:checked ~ .main #preamble { - border-bottom: solid 1px rgba(0,0,0,0.2); -} -#m:checked ~ .main #postamble { - border-top: solid 1px rgba(0,0,0,0.2); -} -#m:checked ~ .main #preamble h1 { - font-size: 4em; - line-height: 1.5em; - margin: .5em 0; -} -#m:checked ~ .main h1::before, -#m:checked ~ .main h2::before, -#m:checked ~ .main h3::before, -#m:checked ~ .main h4::before, -#m:checked ~ .main h5::before, -#m:checked ~ .main h6::before { - content: ""; -} -#m:checked ~ .main pre { - font-size: 14px; - line-height: 1em; - border-left: solid 4px var(--fg2); - padding-left: 1em; -} -#m:checked ~ .main pre::before, -#m:checked ~ .main pre::after { - content: ""; -} -#m:checked ~ .main #preamble, -#m:checked ~ .main #postamble { - background: var(--cyan); - padding: 1em 0; -} -#m:checked ~ .main #preamble { - margin-bottom: 2em; -} -#m:checked ~ .main #postamble { - margin-top: 2em; -} -#m:checked ~ .main #postamble code { - background: transparent; -} -#m:checked ~ .main #preamble *, -#m:checked ~ .main #postamble * { - color: #fff; -} -#m:checked ~ #labels { - background: var(--cyan); - color: #fff; -} -#m:checked ~ #labels .content { - margin: 0 auto; -} - /* --------------------------------------------------------------------------- */ -/* Dark simple theme selected */ -#c:checked ~ .main, #c:checked ~ #labels { +/* Dark matrix theme selected */ +#d:checked ~ * { --bg: #000; - --fg: #ccc; - --bg2: #111; - --fg2: #ddd; - --rfg: #eee; - --rbg: #111; - --bdr: #333; - --link: var(--green); -} -#c:checked ~ #labels .content{ - margin: 0 auto; -} -#c:checked ~ .main code, -#c:checked ~ .main pre { - font-family: monospace; -} -#c:checked ~ .main .content, -#c:checked ~ .main #content { - margin: 0 auto; + --fg: #0b0; + --bg2: #040; + --fg2: #080; + --rfg: #0f0; + --rbg: #000; + --bdr: #080; + --l-fg: #0f0; + --l-bg: var(--bg); + --y: #0f0; + --o: #0e0; + --r: #0d0; + --m: #0f0; + --v: #0f0; + --b: #080; + --c: #080; + --g: #080; + --b03: #020; + --b02: #030; + --b3: #0f0; + --b2: #0e0; } /* --------------------------------------------------------------------------- */ @@ -544,12 +368,11 @@ figure, .figure { body,.main { background: var(--bg); color: var(--fg); - min-height: 100vh; } ::selection, .main ::selection, ::-moz-selection, .main ::-moz-selection { color: white; - background: var(--blue); + background: var(--b); } a, a:visited, .main a, .main a:visited { @@ -638,50 +461,43 @@ blockquote:after, .main blockquote:after { font-weight: bold; font-size: 10px; } -.TODO, .main .TODO { - color: var(--red); -} -.IN_PROGRESS, .main .IN_PROGRESS { - color: var(--yellow); -} -.IN_REVIEW, .main .IN_REVIEW { - color: var(--cyan); -} -.HOLD, .main .HOLD { - color: var(--violet); -} -.WAITING, .main .WAITING { - color: var(--violet); -} -.DONE, .main .DONE { - color: var(--green); -} -.CANCELED, .main .CANCELED { - color: var(--magenta); -} .notes, .main .notes { background: var(--rbg); color: var(--rfg); } /* ---- SYNTAX HIGHLIGHTING ---- */ -.org-nix-attribute, .org-builtin { - color:var(--cyan); +.org-rainbow-delimiters-depth-1, .org-rainbow-delimiters-depth-9, +.org-css-selector, .org-nix-attribute, .org-builtin, +.IN_REVIEW, a { + color:var(--c); } -.org-sh-heredoc, .org-diff-added, .org-string, .org-doc, .org-keyword { - color:var(--green); +.org-rainbow-delimiters-depth-2, .org-nix-builtin, .org-variable-name, +.org-function-name, .org-diff-changed { + color:var(--b); } -.org-nix-builtin, .org-variable-name, .org-function-name { - color:var(--blue); +.org-rainbow-delimiters-depth-3, .HOLD, .WAITING { + color:var(--v); } -.org-type, .org-constant { - color:var(--yellow); +.org-rainbow-delimiters-depth-4, .org-diff-hunk-header, .org-sh-quoted-exec, +.CANCELED { + color:var(--m); } - -.org-css-selector { - color:var(--cyan); +.org-rainbow-delimiters-depth-5, .org-diff-removed, .TODO { + color:var(--r); +} +.org-rainbow-delimiters-depth-6 { + color:var(--o); +} +.org-rainbow-delimiters-depth-7, .org-type, .org-constant, .org-diff-header, +.IN_PROGRESS { + color:var(--y); +} +.org-rainbow-delimiters-depth-8, .org-sh-heredoc, .org-diff-added, .org-string, +.org-doc, .org-keyword, .DONE { + color:var(--g); } .org-diff-none, .org-preprocessor, .org-comment-delimiter, .org-comment, @@ -691,20 +507,6 @@ blockquote:after, .main blockquote:after { color:var(--fg2); } -.org-highlight-number-number {color:var(--rfg);} - -.org-rainbow-delimiters-depth-1 {color:var(--cyan);} -.org-rainbow-delimiters-depth-2 {color:var(--blue);} -.org-rainbow-delimiters-depth-3 {color:var(--violet);} -.org-rainbow-delimiters-depth-4 {color:var(--magenta);} -.org-rainbow-delimiters-depth-5 {color:var(--red);} -.org-rainbow-delimiters-depth-6 {color:var(--orange);} -.org-rainbow-delimiters-depth-7 {color:var(--yellow);} -.org-rainbow-delimiters-depth-8 {color:var(--green);} -.org-rainbow-delimiters-depth-9 {color:var(--cyan);} - -.org-sh-quoted-exec {color:var(--magenta);} -.org-diff-changed {color:var(--blue);} -.org-diff-header {color:var(--yellow);} -.org-diff-hunk-header {color:var(--magenta);} -.org-diff-removed {color:var(--red);} +.org-highlight-number-number { + color:var(--rfg); +}