minify theme and favicons

.gitignore

@@ -3,4 +3,8 @@ site
 NOTES.md
 
 theme/*.html
-theme/*.min
+theme/*.min.*
+
+theme/favicon.*
+theme/favicon-ex.png
+!theme/favicon.svg

Makefile

@@ -2,22 +2,43 @@
 # $@ : rule name (output)
 
 # Build the website
-site/index.html: docs/** theme/** theme/main.html theme/style.css.min theme/gruvbox-dark.css.min mkdocs.yml
+site/index.html: docs/** \
+				theme/** \
+				theme/main.html \
+				theme/style.min.css \
+				theme/gruvbox-dark.min.css \
+				mkdocs.yml
 	mkdocs build
 
 build: site/index.html
 
+# HTML
 theme/main.html: haml/main.haml
 	haml render $< > $@.tmp
 	cat $@.tmp > $@
 	rm $@.tmp
 
-theme/style.css.min: theme/style.css
+# CSS
+theme/style.min.css: theme/style.css
 	python3 -m csscompressor -o $@ $<
 
-theme/gruvbox-dark.css.min: theme/gruvbox-dark.css
+theme/gruvbox-dark.min.css: theme/gruvbox-dark.css
 	python3 -m csscompressor -o $@ $<
 
+# Favicons
+theme/favicon-ex.png: theme/favicon.svg
+	inkscape theme/favicon.svg --export-filename=theme/favicon-ex.png
+
+theme/favicon.png: theme/favicon-ex.png
+	magick theme/favicon-ex.png -compress Zip -quality 1 -resize 144x144 theme/favicon.png
+
+theme/favicon.ico: theme/favicon-ex.png
+	magick theme/favicon-ex.png -compress Zip -quality 1 -resize 144x144 theme/favicon.ico
+
+favicon_all: theme/favicon.png theme/favicon.ico
+
+# Scripts
+
 # Serve the website at http://127.0.0.1:8000/~tasiaiso/
 serve: theme/main.html
 	mkdocs serve -w theme
@@ -40,6 +61,10 @@ purge: clean format build
 clean:
 	rm -r site/
 	rm theme/main.html
-	rm theme/style.css.min
+	rm theme/style.min.css
-	rm theme/gruvbox-dark.css.min
+	rm theme/gruvbox-dark.min.css
+	rm theme/favicon-ex.png
+	rm theme/favicon.min.svg
+	rm theme/favicon.png
+	rm theme/favicon.ico
 	

docs/index.md

@@ -77,6 +77,11 @@ If you like my posts, please consider supporting me on [Liberapay](https://liber
 
 ## changelog
 
+## v1.0.3 (2024-06-xx)
+
+- minify css files
+- compress favicons
+
 ### v1.0.2 (2024-05-26)
 
 - add tea badge

haml/main.haml

@@ -5,9 +5,10 @@
     %meta(name="viewport" content="width=device-width, initial-scale=1.0")
     %link(rel="icon" type="image/png" href="/~tasiaiso/favicon.png")
     %link(rel="icon" type="image/x-icon" href="/~tasiaiso/favicon.ico")
+    %link(rel="icon" type="image/svg+xml" href="/~tasiaiso/favicon.svg" sizes="any")
 
-    %link(rel="stylesheet" href="/~tasiaiso/gruvbox-dark.css")
+    %link(rel="stylesheet" href="/~tasiaiso/gruvbox-dark.min.css")
-    %link(rel="stylesheet" href="/~tasiaiso/style.css.min")
+    %link(rel="stylesheet" href="/~tasiaiso/style.min.css")
 
     %title {% if page.title %}{{ page.title }} - {% endif %}{{ config.site_name }}
 

theme/favicon.svg

@@ -1,59 +1,10 @@
 <?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Created with Inkscape (http://www.inkscape.org/) -->
-
 <svg
-   width="512"
+  width="512"
-   height="512"
+  height="512"
-   viewBox="0 0 512 512"
+  version="1.1"
-   version="1.1"
+  xmlns="http://www.w3.org/2000/svg">
-   id="svg5"
+  <path
-   inkscape:version="1.1.2 (0a00cf5339, 2022-02-04)"
+    style="fill:#ff6600"
-   sodipodi:docname="favicon.svg"
+    d="M 0,0 512,0 0,512 256,512 512,0 0,176 Z" />
-   inkscape:export-filename="/home/zeke/Files/Dev/TS/blog/static/imgs/favicon/favicon.png"
-   inkscape:export-xdpi="12"
-   inkscape:export-ydpi="12"
-   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:svg="http://www.w3.org/2000/svg">
-  <sodipodi:namedview
-     id="namedview7"
-     pagecolor="#505050"
-     bordercolor="#ffffff"
-     borderopacity="1"
-     inkscape:pageshadow="0"
-     inkscape:pageopacity="0"
-     inkscape:pagecheckerboard="1"
-     inkscape:document-units="px"
-     showgrid="false"
-     inkscape:snap-bbox="true"
-     inkscape:bbox-paths="true"
-     inkscape:object-paths="true"
-     inkscape:snap-intersection-paths="true"
-     inkscape:snap-bbox-midpoints="true"
-     inkscape:snap-bbox-edge-midpoints="true"
-     inkscape:snap-smooth-nodes="true"
-     inkscape:snap-midpoints="true"
-     inkscape:snap-object-midpoints="true"
-     inkscape:zoom="0.5"
-     inkscape:cx="-312.01927"
-     inkscape:cy="359.9833"
-     inkscape:window-width="1600"
-     inkscape:window-height="827"
-     inkscape:window-x="0"
-     inkscape:window-y="0"
-     inkscape:window-maximized="1"
-     inkscape:current-layer="layer1" />
-  <defs
-     id="defs2" />
-  <g
-     inkscape:label="Layer 1"
-     inkscape:groupmode="layer"
-     id="layer1">
-    <path
-       style="fill:#ff6600"
-       d="M 1.2816451,-1.9939621 513.28086,-1.9923342 -6.5451305e-5,511.99922 257.28236,510.00568 513.24727,-1.9774923 0.04545549,175.89896 Z"
-       id="path2696"
-       sodipodi:nodetypes="ccccccc" />
-  </g>
 </svg>

theme/gruvbox-dark.css

@@ -1,34 +1,34 @@
 /* yv31.github.io/gruvbox-css */
 :root {
   --bg_h: #1d2021;
-  --bg: #282828;
+  /* --bg: #282828; */
-  --bg_s: #32302f;
+  /* --bg_s: #32302f; */
   --bg1: #3c3836;
-  --bg2: #504945;
+  /* --bg2: #504945; */
-  --bg3: #665c54;
+  /* --bg3: #665c54; */
-  --bg4: #7c6f64;
+  /* --bg4: #7c6f64; */
 
   --fg: #fbf1c7;
-  --fg1: #ebdbb2;
+  /* --fg1: #ebdbb2; */
-  --fg2: #d5c4a1;
+  /* --fg2: #d5c4a1; */
-  --fg3: #bdae93;
+  /* --fg3: #bdae93; */
-  --fg4: #a89984;
+  /* --fg4: #a89984; */
 
-  --red: #fb4934;
+  /* --red: #fb4934; */
-  --green: #b8bb26;
+  /* --green: #b8bb26; */
   --yellow: #fabd2f;
-  --blue: #83a598;
+  /* --blue: #83a598; */
-  --purple: #d3869b;
+  /* --purple: #d3869b; */
-  --aqua: #8ec07c;
+  /* --aqua: #8ec07c; */
-  --gray: #928374;
+  /* --gray: #928374; */
-  --orange: #fe8019;
+  /* --orange: #fe8019; */
 
-  --red-dim: #cc2412;
+  /* --red-dim: #cc2412; */
-  --green-dim: #98971a;
+  /* --green-dim: #98971a; */
-  --yellow-dim: #d79921;
+  /* --yellow-dim: #d79921; */
   --blue-dim: #458588;
   --purple-dim: #b16286;
-  --aqua-dim: #689d6a;
+  /* --aqua-dim: #689d6a; */
-  --gray-dim: #a89984;
+  /* --gray-dim: #a89984; */
-  --orange-dim: #d65d0e;
+  /* --orange-dim: #d65d0e; */
 }