From 607fc7c892a09aff7bc7f4505d52c157618cc71b Mon Sep 17 00:00:00 2001 From: "Yann Esposito (Yogsototh)" Date: Sat, 23 Nov 2019 01:02:42 +0800 Subject: [PATCH] WIP --- project.el | 2 + src/css/min.css | 657 ++++++++++++++++++++++++++++++++++++++++++++++++ src/css/mk.css | 1 - 3 files changed, 659 insertions(+), 1 deletion(-) create mode 100644 src/css/min.css diff --git a/project.el b/project.el index 8b6f83a..26939ce 100644 --- a/project.el +++ b/project.el @@ -174,6 +174,7 @@ "Same as `org-html-publish-to-html' but modifies html before finishing." (let* ((file-path (org-html-publish-to-html plist filename pub-dir)) (mk-path (format "./%s.html" (replace-regexp-in-string ".*/\\([^/]*\\)\\.org$" "\\1" filename))) + (min-path (format "./%s-min.html" (replace-regexp-in-string ".*/\\([^/]*\\)\\.org$" "\\1" filename))) (sci-path (format "./%s-sci.html" (replace-regexp-in-string ".*/\\([^/]*\\)\\.org$" "\\1" filename))) (modern-path (format "./%s-modern.html" (replace-regexp-in-string ".*/\\([^/]*\\)\\.org$" "\\1" filename)))) (with-current-buffer (find-file-noselect file-path) @@ -190,6 +191,7 @@ "" " --- " ,(format "mk" mk-path) + ,(format "min" min-path) ,(format "sci" sci-path) ,(format "modern" modern-path) "" diff --git a/src/css/min.css b/src/css/min.css new file mode 100644 index 0000000..c8d2dd2 --- /dev/null +++ b/src/css/min.css @@ -0,0 +1,657 @@ +/* CSS to be used for HTML Org-mode export + Author: Yann Esposito +*/ + +/* Fonts */ +body { + font: 16px/1.4 sans-serif; + line-height: 1.5em; +} +pre, pre code { + line-height: 1em; +} +/* Layout */ +body, h1, h2, h3, h4, h5, h6, pre, code, blockquote, ol, ul, ol ol, ul ul, ul ol, ol +ul, li, p, section, header, footer, img { + float: none; + margin: 0; + padding: 0; + border: 0; + hyphens: auto; +} +h1, h2, h3, h4, h5, h6, pre, code, blockquote, p, ul, ol, section, header, +figure,table { + margin-top: 1em; + margin-bottom: 1em; +} +li { + display: block; + padding-left: 2ch; +} +ol > li:before, ul > li:before { + content: "– "; + opacity: 0.5; + float: left; + position: relative; + left: -2ch; + text-align: right; + width: 0; +} +ol { + counter-reset: ol; +} +ol > li:before { + content: counter(ol) ". "; + counter-increment: ol; +} +ol > li:nth-child(n+10) { + padding-left:3ch; +} +ol > li:nth-child(n+10):before { + left: -3ch; +} +img { + width: 100%; + max-height: 100vh; + margin: 1em auto; +} +p > img, li > img { + max-height: 1cap; + 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; +} +sup { + vertical-align: top; + position: relative; + top: -.25em; +} +sup > a { + text-decoration: none; + padding: 1px 2px; + font-weight: bold; +} + +#preamble h1 { + margin-top: 0; +} +#table-of-contents, +#table-of-contents ul, +#table-of-contents h2 +{ + padding:0; + margin:0; +} +#table-of-contents { + margin-bottom: 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; +} +blockquote,#table-of-contents { + border-left: solid 2ch; + padding-left: 2ch; +} +nav { + font-weight: bold; + display: block; + padding: 10px 0; +} +nav > a { + margin-right: 10px; +} +/* org mode ids and classes */ +figure, .figure { + margin: 1em 0; +} +#content,.content { + max-width: 46em; + margin: 0 auto; +} +#content:last-child, .notes *:last-child, blockquote *:last-child { + margin-bottom: 0; +} +#content:first-child, .notes *:first-child, blockquote *:first-child{ + margin-top: 0; +} +#postamble { + margin-top: 1em; +} +.timestamp-wrapper { + font-size: 12px; +} +.todo, .done { + font-size: 12px; + font-weight: bold; + padding: 1px 1ex; +} +.article-date { + font-size: 0.8em; + font-style: italic; + float: right; +} +.footpara { + display: inline; +} +.footdef > sup { + vertical-align: middle; +} +.footdef > sup::after { + content: ": "; +} +.notes { + padding: 5px 10px; +} +.notes::before { + content: "☞"; + float: left; + display: inline-block; + width: 1.5em; +} +.underline { + text-decoration: underline; +} +/* 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); + } +} +#labels { + width: 100%; + text-align: right; +} +#labels label { + text-decoration: underline; + cursor: pointer; + font-style: italic; +} + +/* Light themes does not soften and darken images */ +#s:checked ~ .main img, #m:checked ~ .main img { filter: none; } +#c:checked ~ .main img { filter: brightness(0.8); } + +#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 { + 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 { + --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; +} + +/* --------------------------------------------------------------------------- */ +/* Default color theme */ +body,.main { + background: var(--bg); + color: var(--fg); + min-height: 100vh; +} +::selection, .main ::selection, +::-moz-selection, .main ::-moz-selection { + color: white; + background: var(--blue); +} +a, a:visited, +.main a, .main a:visited { + color: var(--rfg); +} + +b, strong, i, em { + color: var(--rfg); +} + +sup > a { + background: var(--rbg); +} + +body > input { display:none; } + +#labels { + background: var(--bg2); + color: var(--fg2); +} + +.keywords { + color: var(--fg2); +} +li .keywords { + float: right; +} + +.main ol > li:before, ol > li:before { + color: var(--fg2) +} + +pre::after,pre::before,hr:after, +.main pre::after,.main pre::before,.main hr:after { + color: var(--fg2); +} +nav a, nav a:visited, .main nav a,.main nav a:visited { + color: var(--fg2); +} +#labels label:hover, a:hover, a:active, a:focus, .main a:hover,.main a:active,.main a:focus, +nav a:focus, nav a:hover, .main nav a:focus,.main nav a:hover { + color: var(--l-fg); + background: var(--l-bg); +} + +thead, .main thead, tr:hover, .main tr:hover { + background: var(--rbg); + color: var(--rfg); +} +.description { + color: var(--fg2); +} +h1, .main h1, +h2, .main h2, +h3, .main h3, +h4, .main h4, +h5, .main h5, +h6, .main h6, +{ + color: var(--rfg); +} +table, td, th, +.main table,.main td,.main th { + border-color: var(--bdr); +} +code, .main code { + background: var(--rbg); +} +blockquote:after, .main blockquote:after { + color: var(--fg2); +} +#preamble,#postamble,.main #preamble, .main #postamble { + border-color: transparent; +} +.article-date, .main .article-date { + color: var(--fg2); +} +/* -------- */ +/* org colors */ +.todo, .done, .main .todo, .main .done { + background: var(--rbg); + border: solid 1px; + height: 10px; + display: inline-block; + line-height: 12px; + 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-sh-heredoc, .org-diff-added, .org-string, .org-doc, .org-keyword { + color:var(--green); +} + +.org-nix-builtin, .org-variable-name, .org-function-name { + color:var(--blue); +} + +.org-type, .org-constant { + color:var(--yellow); +} + +.org-css-selector { + color:var(--cyan); +} + +.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);} + +.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);} diff --git a/src/css/mk.css b/src/css/mk.css index 5cba4c4..5121b26 100644 --- a/src/css/mk.css +++ b/src/css/mk.css @@ -1,7 +1,6 @@ /* CSS to be used for HTML Org-mode export Author: Yann Esposito */ - /* Fonts */ body { font: 14px/1.4 monospace;