cleaner theme

This commit is contained in:
Yann Esposito (Yogsototh) 2020-04-25 12:11:07 +02:00
parent 90f21e44ce
commit b464a131b3
Signed by untrusted user who does not match committer: yogsototh
GPG key ID: 7B19A4C650D59646
4 changed files with 68 additions and 115 deletions

View file

@ -2,7 +2,8 @@
cd "$(git rev-parse --show-toplevel)" || exit 1 cd "$(git rev-parse --show-toplevel)" || exit 1
echo "Copying to optim dir" echo "Copying to optim dir"
find _optim -mindepth 1 -delete && cp -r _site/* _optim find _optim -mindepth 1 -not -path "_optim/.gitignore" -delete && \
cp -r _site/* _optim
echo "Optim HTML size" echo "Optim HTML size"
./engine/optim-html.sh ./engine/optim-html.sh
# echo "Gen themes clones" # echo "Gen themes clones"

View file

@ -1,6 +1,6 @@
;; sign it with ;; sign it with
;; gpg --local-user yann@esposito.host --output project.el.sig --detach-sign project.el ;; gpg --local-user yann@esposito.host --output project.el.sig --detach-sign project.el
(defvar domainname "https://her.esy.fun") (defvar websiteorigin "https://her.esy.fun")
(defvar root-dir (projectile-project-root)) (defvar root-dir (projectile-project-root))
(defvar base-dir (concat root-dir "src")) (defvar base-dir (concat root-dir "src"))
(defvar publish-dir (concat root-dir "_site")) (defvar publish-dir (concat root-dir "_site"))
@ -58,16 +58,29 @@
"Pre-amble for whole blog." "Pre-amble for whole blog."
(concat (concat
"<div class=\"content\">" "<div class=\"content\">"
(when-let ((date (plist-get info :date)))
(format "<span class=\"article-date\">%s</span>"
(format-time-string "%Y-%m-%d"
(org-timestamp-to-time
(car date)))))
"<h1>" "<h1>"
(format "%s" (car (plist-get info :title))) (format "%s" (car (plist-get info :title)))
"</h1>" "</h1>"
(when-let ((subtitle (car (plist-get info :subtitle)))) (when-let ((subtitle (car (plist-get info :subtitle))))
(format "<h2>%s</h2>" subtitle)) (format "<h2>%s</h2>" subtitle))
(when-let ((date (plist-get info :date)))
(concat
"<div class=\"metas\">"
"Published "
(format "<span class=\"article-date\">%s</span>"
(format-time-string "%Y-%m-%d"
(org-timestamp-to-time
(car date))))
" on "
(format " <a href=\"%s\">Yann Esposito's blog</a>" websiteorigin)
" - "
(let ((permalink (format "%s%s"
websiteorigin
(replace-regexp-in-string ".*/_site" ""
(plist-get info :output-file)))))
(format " <a class=\"permalink\" href=\"%s\">§permalink</a>" permalink))
"</div>"))
"</div>")) "</div>"))
(defun rand-obfs (c) (defun rand-obfs (c)
@ -85,7 +98,7 @@
(concat (concat
"<div class=\"content\">" "<div class=\"content\">"
;; TODO install a comment system ;; TODO install a comment system
;; (let ((url (format "%s%s" domainname (replace-regexp-in-string base-dir "" (plist-get info :input-file))))) ;; (let ((url (format "%s%s" websiteorigin (replace-regexp-in-string base-dir "" (plist-get info :input-file)))))
;; (format "<a href=\"https://comments.esy.fun/slug/%s\">comment</a>" ;; (format "<a href=\"https://comments.esy.fun/slug/%s\">comment</a>"
;; (url-hexify-string url))) ;; (url-hexify-string url)))
"<footer>" "<footer>"
@ -185,18 +198,7 @@
(goto-char (point-min)) (goto-char (point-min))
(search-forward "<body>") (search-forward "<body>")
(insert (mapconcat 'identity (insert (mapconcat 'identity
`("<input name=\"t\" type=\"radio\" id=\"l\">" `("<div class=\"main\">")
"<input name=\"t\" type=\"radio\" id=\"d\">"
"<div id=\"labels\">"
"<div class=\"content\">"
"<a id=\"h\" href=\"/\">her.esy.fun</a>"
"<label for=\"l\">light</label>"
" / "
"<label for=\"d\">dark</label>"
"</div>"
"</div>"
"<div class=\"main\">")
"\n")) "\n"))
(goto-char (point-max)) (goto-char (point-max))
(search-backward "</body>") (search-backward "</body>")
@ -333,7 +335,7 @@ Return output file name."
(org-export-derived-backend-p backend 'html) (org-export-derived-backend-p backend 'html)
(string-match "href=\"http[^\"]+" text) (string-match "href=\"http[^\"]+" text)
(not (string-match "target=\"" text)) (not (string-match "target=\"" text))
(not (string-match (concat "href=\"" domainname "[^\"]*") text))) (not (string-match (concat "href=\"" websiteorigin "[^\"]*") text)))
(string-match "<a " text) (string-match "<a " text)
(replace-match "<a target=\"_blank\" rel=\"noopener noreferrer\" " nil nil text))) (replace-match "<a target=\"_blank\" rel=\"noopener noreferrer\" " nil nil text)))

Binary file not shown.

View file

@ -7,14 +7,14 @@
} }
body { body {
font-size: 15px; font-size: 15px;
font-family: "PT Sans","Trebuchet MS", Verdana, sans-serif; font-family: sans-serif;
line-height: var(--lh); line-height: var(--lh);
min-height: 100vh; min-height: 100vh;
} }
code, pre, pre code { code, pre, pre code {
line-height: 1em; line-height: 1em;
font-size: 14px; font-size: 14px;
font-family: "PT Mono", Menlo, monospace; font-family: monospace;
} }
blockquote pre { blockquote pre {
line-height: var(--lh); line-height: var(--lh);
@ -97,11 +97,12 @@ sup > a {
} }
/* Markdown tricks */ /* Markdown tricks */
h1,h2,h3,h4,h5,h6 { h1 { font-size: 1.5em; }
h2,h3,h4,h5,h6 {
font-size: 1em; font-size: 1em;
} }
h1:before,h2:before,h3:before,h4:before,h5:before,h6:before { h1:before,h2:before,h3:before,h4:before,h5:before,h6:before {
font-family: Menlo, monospace; font-family: monospace;
} }
h1::before { h1::before {
content: "# "; content: "# ";
@ -124,8 +125,9 @@ h6::before {
hr { hr {
border: 0; border: 0;
} }
#preamble h1 { #preamble h1, #preamble h2 {
margin-top: 0; margin-top: 0;
margin-bottom: .5em;
} }
#table-of-contents, #table-of-contents,
#table-of-contents ul, #table-of-contents ul,
@ -176,7 +178,7 @@ figure, .figure {
} }
#content,.content { #content,.content {
max-width: 35em; max-width: 35em;
margin: 0 auto; margin: 1em auto;
padding: 0 1em; padding: 0 1em;
} }
#content:last-child, .notes *:last-child, blockquote *:last-child { #content:last-child, .notes *:last-child, blockquote *:last-child {
@ -196,10 +198,8 @@ figure, .figure {
font-weight: bold; font-weight: bold;
padding: 1px 1ex; padding: 1px 1ex;
} }
.article-date { .metas {
font-size: 0.8em; font-weight: normal;
font-style: italic;
float: right;
} }
.footpara { .footpara {
display: inline; display: inline;
@ -219,9 +219,6 @@ figure, .figure {
#h { #h {
float: left; float: left;
} }
.main {
padding-top: 1em;
}
#labels { #labels {
width: 100%; width: 100%;
text-align: right; text-align: right;
@ -234,19 +231,15 @@ figure, .figure {
label + pre { label + pre {
margin-top: 0; margin-top: 0;
} }
/* colors theme */
/* --------------------------------------------------------------------------- */
/* Dark theme selected */
:root { :root {
color-scheme: light dark; /* support color scheme */ --b03: #2E3440;
--b03: #202631; --b02: #3B4252;
--b02: #2b313c;
--b01: #656b74; --b01: #656b74;
--b00: #727781; --b00: #727781;
--b0: #989ea8; --b0: #989ea8;
--b1: #b0bac7; --b1: #b0bac7;
--b2: #e5e8ed; --b2: #ECEFF4;
--b3: #f4f7ff; --b3: #fff;
--y: #a98d50; --y: #a98d50;
--o: #aa6550; --o: #aa6550;
--r: #b85a64; --r: #b85a64;
@ -257,65 +250,33 @@ label + pre {
--g: #728b5c; --g: #728b5c;
--bg: var(--b3); --bg: var(--b3);
--fg0: var(--b00);
--fg: var(--b02);
--rfg: var(--b01);
--rbg: var(--b2); --rbg: var(--b2);
--hl: var(--o); --fg0: var(--b0);
--fg: var(--b02);
--rfg: var(--b03);
--hl: var(--v);
} }
img { img {
filter: sepia(100%) hue-rotate(182deg) saturate(0.6); filter: sepia(100%) hue-rotate(182deg) saturate(0.6);
} }
@media (prefers-color-scheme: dark) {
:root {
/* Dark */
--bg: var(--b03);
--fg: var(--b0);
--fg0: var(--b00);
--rfg: var(--b1);
--rbg: var(--b02);
--hl: var(--g);
}
img {
filter: brightness(0.7) sepia(100%) hue-rotate(182deg) saturate(0.6);
}
}
#d:checked ~ .main, #d:checked ~ #labels {
--bg: var(--b03);
--fg: var(--b0);
--fg0: var(--b00);
--rfg: var(--b1);
--rbg: var(--b02);
--hl: var(--g);
}
#d:checked ~ .main img { filter: brightness(0.7) sepia(100%) hue-rotate(182deg) saturate(0.6); }
#l:checked ~ .main, #l:checked ~ #labels {
--bg: var(--b3);
--fg0: var(--b00);
--fg: var(--b02);
--rfg: var(--b01);
--rbg: var(--b2);
--hl: var(--o);
}
#l:checked ~ .main img { filter: sepia(100%) hue-rotate(182deg) saturate(0.6); }
/* --------------------------------------------------------------------------- */
/* Default color theme */ /* Default color theme */
body,.main { body {
background: var(--bg); background: var(--bg);
color: var(--fg); color: var(--fg);
} }
::selection, .main ::selection { h1, h2, h3, h4, h5, h6 {
color: var(--rbg)
}
::selection {
color: white; color: white;
background: var(--v); background: var(--v);
} }
a {
a, a:visited, color: var(--hl);
.main a, .main a:visited { }
#content a, #content a:visited {
color: var(--rfg); color: var(--rfg);
} }
@ -333,31 +294,30 @@ h1:before, h2:before, h3:before, h4:before, h5:before, h6:before {
color: var(--fg0); color: var(--fg0);
} }
.metas, .metas a, .metas a:visited {
color: var(--fg0);
}
li .keywords { li .keywords {
font-style: italic; font-style: italic;
color: var(--fg0); color: var(--fg0);
} }
nav a, nav a:visited, .main nav a,.main nav a:visited { nav a, nav a:visited {
color: var(--fg); color: var(--fg);
} }
.main ol > li:before, ol > li:before, ol > li:before, pre::after,pre::before,hr:after, label, label a, label a:visited {
pre::after,pre::before,hr:after,
.main pre::after,.main pre::before,.main hr:after,
label, label a, .main label, .main label a
label a:visited, .main label a:visited
{
color: var(--fg0); color: var(--fg0);
} }
#labels label:hover, #labels label:hover,
a:hover, a:hover,
a:hover *, a:hover *,
.main a:hover, .metas a:hover,
.main a:hover *, #content a:hover,
nav a:hover, #content a:hover *,
.main nav a:hover { nav a:hover {
color: var(--bg); color: var(--bg);
background: var(--hl); background: var(--hl);
} }
@ -366,32 +326,22 @@ abbr { border-bottom: dashed 1px;
display: inline-block; display: inline-block;
} }
thead, .main thead, tr:hover, .main tr:hover { thead, tr:hover {
background: var(--rbg); background: var(--rbg);
color: var(--rfg); color: var(--rfg);
} }
h1, .main h1, h1, h2, h3, h4, h5, h6 {
h2, .main h2,
h3, .main h3,
h4, .main h4,
h5, .main h5,
h6, .main h6,
{
color: var(--rfg); color: var(--rfg);
} }
table, td, th, table, td, th {
.main table,.main td,.main th {
border-color: var(--fg0); border-color: var(--fg0);
} }
code, .main code { code {
background: var(--rbg); background: var(--rbg);
} }
#preamble,#postamble,.main #preamble, .main #postamble {
border-color: transparent;
}
/* -------- */ /* -------- */
/* org colors */ /* org colors */
.todo, .done, .main .todo, .main .done { .todo, .done {
height: 10px; height: 10px;
display: inline-block; display: inline-block;
line-height: 12px; line-height: 12px;
@ -401,7 +351,7 @@ code, .main code {
border-right: solid 2px; border-right: solid 2px;
padding: 0 3px; padding: 0 3px;
} }
.notes, .main .notes { .notes {
background: var(--rbg); background: var(--rbg);
color: var(--rfg); color: var(--rfg);
margin: 1em 0; margin: 1em 0;
@ -409,7 +359,7 @@ code, .main code {
/* ---- SYNTAX HIGHLIGHTING ---- */ /* ---- SYNTAX HIGHLIGHTING ---- */
.org-rainbow-delimiters-depth-1, .org-rainbow-delimiters-depth-9, .org-rainbow-delimiters-depth-1, .org-rainbow-delimiters-depth-9,
.org-css-selector, .org-nix-attribute, .org-builtin, .org-css-selector, .org-nix-attribute, .org-builtin,
.IN_REVIEW, a { .IN_REVIEW {
color:var(--c); color:var(--c);
} }