better img compression and css

This commit is contained in:
Yann Esposito (Yogsototh) 2019-11-22 08:42:48 +08:00
parent 6e53c77236
commit 59b68747ca
Signed by untrusted user who does not match committer: yogsototh
GPG key ID: 7B19A4C650D59646
3 changed files with 16 additions and 19 deletions

View file

@ -218,7 +218,7 @@ Return output file name."
(file-name-as-directory (expand-file-name pub-dir))) (file-name-as-directory (expand-file-name pub-dir)))
(let ((dst-file (expand-file-name (file-name-nondirectory filename) pub-dir))) (let ((dst-file (expand-file-name (file-name-nondirectory filename) pub-dir)))
(cond ((string-match-p ".*\\.\\(png\\|jpg\\|gif\\)$" filename) (cond ((string-match-p ".*\\.\\(png\\|jpg\\|gif\\)$" filename)
(shell-command (format "~/.nix-profile/bin/convert %s -resize 800x800\\> +dither -colors 16 -depth 4 %s" (shell-command (format "~/.nix-profile/bin/convert %s -resize 400x400\\> -colorspace Gray -ordered-dither o8x8,8 %s"
filename filename
dst-file))) dst-file)))
((string-match-p ".*\\.css$" filename) ((string-match-p ".*\\.css$" filename)

Binary file not shown.

View file

@ -51,8 +51,8 @@ ol > li:nth-child(n+10):before {
left: -28px; left: -28px;
} }
img { img {
max-width: 100%; width: 100%;
max-height: 800px; max-height: 100vh;
margin: 1em auto; margin: 1em auto;
} }
p > img, li > img { p > img, li > img {
@ -171,9 +171,8 @@ nav > a {
} }
/* org mode ids and classes */ /* org mode ids and classes */
.figure { figure, .figure {
margin-top: 1em; margin: 1em 0;
margin-bottom: 1em;
} }
#content,.content { #content,.content {
max-width: 46em; max-width: 46em;
@ -271,9 +270,14 @@ nav > a {
/* Dark themes soften and darken images */ /* Dark themes soften and darken images */
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
img { img {
filter: saturate(0.8) brightness(0.8); 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 { #labels {
width: 100%; width: 100%;
text-align: right; text-align: right;
@ -285,18 +289,11 @@ nav > a {
} }
/* Light themes does not soften and darken images */ /* Light themes does not soften and darken images */
#l:checked ~ .main img, #l:checked ~ .main img { filter: sepia(100%) hue-rotate(182deg) saturate(0.6); }
#s:checked ~ .main img , #s:checked ~ .main img, #m:checked ~ .main img { filter: none; }
#m:checked ~ .main img { #d:checked ~ .main img { filter: brightness(0.8) sepia(100%) hue-rotate(182deg) saturate(0.6); }
filter: none; #c:checked ~ .main img { filter: brightness(0.8); }
} #x:checked ~ .main img { filter: brightness(0.8) sepia(100%) hue-rotate(55deg) saturate(10); }
#d:checked ~ .main img,
#c:checked ~ .main img {
filter: saturate(0.8) brightness(0.8);
}
#x:checked ~ .main img {
filter: brightness(0.8) sepia(100%) hue-rotate(55deg) saturate(2.5);
}
#s:checked ~ .main #preamble:after, #s:checked ~ .main #preamble:after,
#s:checked ~ .main #postamble:before, #s:checked ~ .main #postamble:before,