sqzass.git

sqzass

~ A static site generator written in Rust
git clone https://github.com/debuman/sqzass.git
commit c453f54128e6058a383d4696be7aa8a88ec4b9f8
parent 6b2845b0db346b79379f17444877e1a05e216e12
Author: sqzer <110329244+sqzer-x@users.noreply.github.com>
Date: Sun, 26 Jul 2026 00:13:10 +0900

Use the logo in the masthead and as the favicon

The source was 2816×1536 and 2.9 MB, almost all of it white space, on an opaque
white background rather than a transparent one. Cropped to the ink, given an
alpha channel derived from luminance so the antialiasing survives, and shipped
at 120 px: 6 KB for the mark and 5 KB for the icon.

The line art is black, and this site is dark by default, so the mark would have
been invisible where most people see it. It is inverted in CSS rather than
shipped twice — for pure black-on-transparent artwork, inverting produces
exactly the white version, and one file cannot drift from the other.

The favicon cannot be inverted by CSS, so that one does ship twice, selected by
`prefers-color-scheme` on the link element. A browser that does not understand
the media attribute takes the last one, which is the black mark for a light tab
bar — the more common default.

Sized at 2.2em rather than the 1.6em I started with. Below that the hatching on
the hand aliases into a smudge and the drawing stops being a drawing.

The alt attribute is empty on purpose: the wordmark sits immediately beside it,
and naming the image too makes a screen reader say "sqzass" twice.

Not wired into og:image. That would put the mark in every Slack and Discord
unfurl of every page, which is a different decision from a favicon and is one
line in base.html whenever it is wanted.

Diffstat:
Mdocs/static/css/main.css | 14++++++++++++++
Adocs/static/images/favicon-dark.png | 0binary
Adocs/static/images/favicon.png | 0binary
Adocs/static/images/logo.png | 0binary
Mdocs/templates/base.html | 13++++++++++++-
5 files changed, 26 insertion(+), 1 deletion(-)

diff --git a/docs/static/css/main.css b/docs/static/css/main.css
@@ -108,6 +108,9 @@ a:hover { text-decoration-thickness: 2px; }
 }
 
 .brand {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
   font-family: var(--mono);
   font-size: var(--s1);
   font-weight: 600;
@@ -117,6 +120,17 @@ a:hover { text-decoration-thickness: 2px; }
 }
 .brand:hover { color: var(--accent); }
 
+/* 검은 선화라 다크 배경에서는 그냥 안 보인다. 파일을 두 벌 두는 대신 반전한다 —
+   순수 흑백 선화에서는 반전이 정확히 흰 선을 만든다.
+   크기는 손등 해칭이 뭉개지지 않는 선까지 키웠다. 이보다 작으면 그림이 아니라
+   얼룩으로 읽힌다. */
+.brand img {
+  width: 2.2em;
+  height: 2.2em;
+  filter: invert(1);
+}
+:root[data-theme="light"] .brand img { filter: none; }
+
 /* The section list. Same data as the sidebar, one level up, so a reader can
    cross between parts of the documentation without returning to the index. */
 .sections {
diff --git a/docs/static/images/favicon-dark.png b/docs/static/images/favicon-dark.png
Binary files differ.
diff --git a/docs/static/images/favicon.png b/docs/static/images/favicon.png
Binary files differ.
diff --git a/docs/static/images/logo.png b/docs/static/images/logo.png
Binary files differ.
diff --git a/docs/templates/base.html b/docs/templates/base.html
@@ -16,6 +16,12 @@
 <title>{% if page.url == home %}{{ site.title }} — {{ site.description }}{% else %}{{ page.title }} · {{ site.title }}{% endif %}</title>
 {% if page.description %}<meta name="description" content="{{ page.description }}">{% endif %}
 <link rel="canonical" href="{{ page.permalink }}">
+{#- 파비콘은 CSS 필터가 닿지 않는다. 탭 배경이 어두울 때 검은 선화는 보이지
+    않으므로 흰 선 버전을 따로 준다. media를 이해 못 하는 브라우저는 마지막
+    것을 쓰므로, 밝은 탭이 기본인 쪽을 뒤에 둔다. #}
+<link rel="icon" type="image/png" media="(prefers-color-scheme: dark)" href="{{ asset("images/favicon-dark.png") }}">
+<link rel="icon" type="image/png" href="{{ asset("images/favicon.png") }}">
+<link rel="apple-touch-icon" href="{{ asset("images/favicon.png") }}">
 {#- `lang`이지 `t`가 아니다. `t`는 번역 함수이고, 루프 변수가 그 이름을 가리면
     이 블록 안에서 라벨을 하나 넣는 순간 조용히 깨진다. #}
 {%- for lang in page.translations %}
@@ -49,7 +55,12 @@
 <a class="skip" href="#content">{{ t("skip_to_content") }}</a>
 
 <header class="masthead">
-  <a class="brand" href="{{ home }}">{{ site.title }}</a>
+  {#- alt는 비운다. 바로 옆 텍스트가 이미 같은 이름을 말하므로, 여기에 이름을
+      또 넣으면 스크린리더가 "sqzass sqzass"라고 읽는다. #}
+  <a class="brand" href="{{ home }}">
+    <img src="{{ asset("images/logo.png") }}" alt="" width="121" height="120">
+    <span>{{ site.title }}</span>
+  </a>
 
   {#- The top nav is the section list. It is the same data the sidebar draws,
       one level up, so a reader can move between parts of the documentation