removed pngs because of size constraints and network load. now using webp, with googles cwebp converter

This commit is contained in:
2025-09-23 17:54:32 +02:00
parent a149009559
commit 468717038e
20 changed files with 9 additions and 9 deletions

View File

@@ -127,10 +127,10 @@ def render_markdown(md_path: Path):
<body style="display:flex; flex-direction:column; min-height:100%; margin:0;">
<main class="container" style="flex:1;">
<h1 onclick="window.location.href='/'" style="cursor:pointer; display:flex; align-items:center; gap:8px; font-size:1.5em; margin:0;">
<img src="../css/icons/back.png" width="32" height="32" alt="Back" style="display:block;" />
<img src="../css/icons/back.webp" width="32" height="32" alt="Back" style="display:block;" />
{title}
</h1>
<img src="../css/icons/written.png" width="32" height="32" alt="write_img" loading="lazy" style="vertical-align: middle;padding-left:12px; padding-left:40px;" />
<img src="../css/icons/written.webp" width="32" height="32" alt="write_img" loading="lazy" style="vertical-align: middle;padding-left:12px; padding-left:40px;" />
<div class="meta" style="display: inline;">Written @{time.asctime(time.localtime())}</div>
<hr style="margin:10px 0;" />
{html_body}
@@ -138,11 +138,11 @@ def render_markdown(md_path: Path):
<footer style="margin-top:auto; width:100%;">
<hr style="margin:10px 0;" />
<img src="../css/icons/date.png" width="16" height="16" alt="date" loading="lazy" style="vertical-align: middle;" />
<img src="../css/icons/date.webp" width="16" height="16" alt="date" loading="lazy" style="vertical-align: middle;" />
{time.strftime("%Y-%m-%d %H:%M:%S")}<br/>
<img src="../css/icons/magnifier.png" width="16" height="16" alt="Hash1" loading="lazy" style="display:inline; vertical-align:middle;" />
<img src="../css/icons/magnifier.webp" width="16" height="16" alt="Hash1" loading="lazy" style="display:inline; vertical-align:middle;" />
Hash 1 (<b>UTF-8</b>)<i>:{base64.b64encode(hash1.encode("utf-8")).decode("utf-8")}</i><br />
<img src="../css/icons/magnifier.png" width="16" height="16" alt="Hash2" loading="lazy" style="display:inline; vertical-align:middle;" />
<img src="../css/icons/magnifier.webp" width="16" height="16" alt="Hash2" loading="lazy" style="display:inline; vertical-align:middle;" />
Hash 2 (<b>Windows-1252</b>)<i>:{base64.b64encode(hash2.encode("windows-1252")).decode("windows-1252")}</i><br />
</footer>
</body>

Binary file not shown.

Before

Width:  |  Height:  |  Size: 200 KiB

BIN
css/icons/available.webp Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 34 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 187 KiB

BIN
css/icons/back.webp Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 19 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 382 KiB

BIN
css/icons/date.webp Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 54 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 283 KiB

BIN
css/icons/folder.webp Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 46 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 185 KiB

BIN
css/icons/forward.webp Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 19 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 115 KiB

BIN
css/icons/item.webp Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 12 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 558 KiB

BIN
css/icons/magnifier.webp Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 31 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 176 KiB

BIN
css/icons/script.webp Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 18 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 203 KiB

BIN
css/icons/written.webp Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 55 KiB

View File

@@ -5,7 +5,7 @@
<style>
body { font-family: Arial, sans-serif; margin: 20px; }
h1 { color: #333; }
li { list-style: none; background: url("../../css/icons/item.png") no-repeat left center; background-size: 15px 20px; padding-left: 25px; transition: font-size 0.5s cubic-bezier(0.075, 0.82, 0.165, 1); }
li { list-style: none; background: url("../../css/icons/item.webp") no-repeat left center; background-size: 15px 20px; padding-left: 25px; transition: font-size 0.5s cubic-bezier(0.075, 0.82, 0.165, 1); }
li:hover { font-size: larger; }
#available { padding-left: 40px;}
ul { padding-left: 100px;}
@@ -20,7 +20,7 @@
<body>
<noscript>
<div style="display: inline-flex; align-items: center;">
<img src="../../css/icons/script.png" width="45" height="45" style="vertical-align: middle; margin-right: 8px;" />
<img src="../../css/icons/script.webp" width="45" height="45" style="vertical-align: middle; margin-right: 8px;" />
<h1 id="nojs" style="margin: 0;">Please enable Javascript!</h1>
</div>
<p>
@@ -35,10 +35,10 @@
// we just repurpouse the nojs from css
// much easier than adding a new element
console.log("javascript is enabled! good!")
document.write('<h1 id="nojs" style="color:black; display: flex; align-items: center;"><img src="../../css/icons/folder.png" width="45" height="45" style="vertical-align: middle; margin-right: 8px;" />Index of PyPost</h1>');
document.write('<h1 id="nojs" style="color:black; display: flex; align-items: center;"><img src="../../css/icons/folder.webp" width="45" height="45" style="vertical-align: middle; margin-right: 8px;" />Index of PyPost</h1>');
</script>
<p id="available">
<img src="../../css/icons/available.png" width="32" height="32" style="vertical-align: middle; display: inline; margin-right: 8px;" />
<img src="../../css/icons/available.webp" width="32" height="32" style="vertical-align: middle; display: inline; margin-right: 8px;" />
Available pages:
</p>
<!-- CONTENT -->