Generate precompressed files, use variables for some nav-related values

7 files changed, 37 insertions, 20 deletions

diff --git a/Makefile b/Makefile
index 5a00cdc..caf9939 100644
--- a/Makefile
+++ b/Makefile
@@ -13,24 +13,33 @@ build_sass: clean
 build_content: clean
         @scripts/build_content.sh
 
-build: build_fonts build_sass build_content
-#       @pigz -R -k -9 -- `find output -type f -iregex '.*\\.\\(css\\|js\\|json\\|html\\|xml\\|txt\\|svg\\|ico\\)'`
+build_only: build_fonts build_sass build_content
 
-watch_sass: build
+compress_gz: build_only
+        @echo "[COMPRESS] Gzip"
+        @pigz -R -k -9 -- `find output -type f -iregex '.*\\.\\(css\\|js\\|json\\|html\\|xml\\|txt\\|svg\\|ico\\)'`
+
+compress_br: build_only
+        @echo "[COMPRESS] Brotli"
+        @brotli -k -- `find output -type f -iregex '.*\\.\\(css\\|js\\|json\\|html\\|xml\\|txt\\|svg\\|ico\\|woff\\)'`
+
+build: compress_gz compress_br
+
+watch_sass: build_only
         @scripts/watch_sass.sh
 
-watch_content: build
+watch_content: build_only
         @scripts/watch_content.sh
 
-watch_templates: build
+watch_templates: build_only
         @scripts/watch_templates.sh
 
-watch_metadata: build
+watch_metadata: build_only
         @scripts/watch_metadata.sh
 
 watch: watch_sass watch_content watch_templates watch_metadata
 
-serve_only: build
+serve_only: build_only
         @python -m http.server --bind 127.0.0.1 --directory output
 
 serve: watch serve_only
diff --git a/assets/css/_vars.scss b/assets/css/_vars.scss
index 1ed64a5..f9c80da 100644
--- a/assets/css/_vars.scss
+++ b/assets/css/_vars.scss
@@ -7,6 +7,11 @@ $code-block-line-height: 1.4;
 
 $content-width: 75ch;
 
+$nav-item-spacing: 4ch;
+$nav-item-spacing-sm: 3ch;
+$nav-item-pad-h: 1ch;
+$nav-item-pad-v: 1rem;
+
 $page-item-prefix-max-chars: 3ch;
 $page-item-prefix-pad: 2ch;
 $page-item-prefix-width: $page-item-prefix-max-chars + $page-item-prefix-pad;
diff --git a/assets/css/components/_nav.scss b/assets/css/components/_nav.scss
index 834b6a0..a85c7d8 100644
--- a/assets/css/components/_nav.scss
+++ b/assets/css/components/_nav.scss
@@ -8,6 +8,8 @@
 
   &__logo {
     display: inline-block;
+    margin: 0;
+    padding: $nav-item-pad-v 0;
     color: var(--nav-logo-fg);
     text-decoration: none;
 
@@ -23,8 +25,8 @@
 
   &__item {
     display: inline-block;
-    padding: 1rem 1ch calc(1rem - 2px);
-    margin: 0 -1ch 0 3ch;
+    padding: $nav-item-pad-v $nav-item-pad-h calc(#{$nav-item-pad-v} - 2px);
+    margin: 0 (-1 * $nav-item-pad-h) 0 ($nav-item-spacing - $nav-item-pad-h);
     color: var(--nav-item-idle-fg);
     text-decoration: none;
     border-bottom: 2px solid transparent;
@@ -38,7 +40,7 @@
 
   @media (max-width: map-get($breakpoints, "sm")) {
     &__item {
-      margin-left: 2ch;
+      margin-left: $nav-item-spacing-sm - $nav-item-pad-h;
     }
   }
 
diff --git a/scripts/build_content.sh b/scripts/build_content.sh
index 6ce857f..9623427 100755
--- a/scripts/build_content.sh
+++ b/scripts/build_content.sh
@@ -13,7 +13,7 @@ handle () {
     mkdir -p $(dirname "$TARGET")
 
     if [ "${1#*.}" = "md" ]; then
-        echo "[COMPILE] $1 -> $TARGET"
+        echo "[COMPILE ] $1 -> $TARGET"
 
         pandoc "$1" \
             -f markdown \
@@ -22,7 +22,7 @@ handle () {
             -o "$TARGET" \
             --metadata-file metadata/metadata.json
     else
-        echo "[COPY   ] $1 -> $TARGET"
+        echo "[  COPY  ] $1 -> $TARGET"
 
         cp "$1" "$TARGET"
     fi
@@ -45,18 +45,18 @@ elif [ "$1" = "md" ]; then
             done
 elif [ "$1" = "single" ]; then
     if [ -z "$2" ]; then
-        echo "[ERROR  ] \"single\" operation requires file argument"
+        echo "[ ERROR  ] \"single\" operation requires file argument"
     else
         handle "$2"
     fi
 elif [ "$1" = "delete" ]; then
     if [ -z "$2" ]; then
-        echo "[ERROR  ] \"delete\" operation requires file argument"
+        echo "[ ERROR  ] \"delete\" operation requires file argument"
     else
         TARGET=$(target "$2")
-        echo "[DELETE ] $2 -> $TARGET"
+        echo "[ DELETE ] $2 -> $TARGET"
         rm -rf $TARGET
     fi
 else
-    echo "[ERROR  ] Unknown operation: \"$1\""
+    echo "[ ERROR  ] Unknown operation: \"$1\""
 fi
diff --git a/scripts/build_fonts.sh b/scripts/build_fonts.sh
index 11c01db..d8ed9ea 100755
--- a/scripts/build_fonts.sh
+++ b/scripts/build_fonts.sh
@@ -1,6 +1,6 @@
 #!/bin/bash
 
-echo "[MINIFY ] assets/fonts/iosevka-term-ss09-regular.ttf -> output/iosevka-term-ss09-regular.woff2"
+echo "[ MINIFY ] assets/fonts/iosevka-term-ss09-regular.ttf -> output/iosevka-term-ss09-regular.woff2"
 
 pyftsubset assets/fonts/iosevka-term-ss09-regular.ttf \
     --text-file='assets/fonts/glyphs.txt' \
@@ -8,7 +8,7 @@ pyftsubset assets/fonts/iosevka-term-ss09-regular.ttf \
     --flavor='woff2' \
     --output-file='output/iosevka-term-ss09-regular.woff2'
 
-echo "[MINIFY ] assets/fonts/iosevka-term-ss09-bold.ttf -> output/iosevka-term-ss09-bold.woff2"
+echo "[ MINIFY ] assets/fonts/iosevka-term-ss09-bold.ttf -> output/iosevka-term-ss09-bold.woff2"
 
 pyftsubset assets/fonts/iosevka-term-ss09-bold.ttf \
     --text-file='assets/fonts/glyphs.txt' \
diff --git a/scripts/build_sass.sh b/scripts/build_sass.sh
index 2e25f10..2711a89 100755
--- a/scripts/build_sass.sh
+++ b/scripts/build_sass.sh
@@ -1,4 +1,4 @@
 #!/bin/bash
 
-echo "[COMPILE] assets/css/style.scss -> output/style.css"
+echo "[COMPILE ] assets/css/style.scss -> output/style.css"
 sassc assets/css/style.scss | node_modules/.bin/csso > output/style.css
diff --git a/templates/base.html b/templates/base.html
index d381984..cecb657 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -41,7 +41,7 @@
     <main class="s-page l-container l-container--content l-container--pad-v">
         <div class="s-page__content">
             $if(isHome)$
-                <header class="c-page-header" role="presentation">
+                <header class="c-page-header u-hidden@sm-down" role="presentation">
 ${pageHeader()}
                 </header>
             $endif$
@@ -60,6 +60,7 @@ ${pageHeaderSm()}
         var headerTemplateEl = document.getElementById("header-sm");
         var headerSmEl = headerTemplateEl.content.cloneNode("true");
 
+        headerEl.classList.remove("u-hidden@sm-down");
         headerEl.appendChild(headerSmEl);
     </script>
     $endif$