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)))
(let ((dst-file (expand-file-name (file-name-nondirectory filename) pub-dir)))
(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
dst-file)))
((string-match-p ".*\\.css$" filename)

Binary file not shown.

View file

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