feat(header): logo mark + Lee Teong Hoe in brand, two-row mobile nav
Deploy / build (push) Successful in 29s

- brand: three-colour Hoelee mark (rasterised from the brand vector,
  transparent, public/images/hoelee-mark-96.png) followed by the name
- section links grouped in .nav-links so the mobile header puts them on
  their own row instead of wrapping past the search/lang/theme controls
- measured 320/360/390/414/600/768/1280: scrollWidth == innerWidth,
  header 91.6px two rows (<600px) / 60.3px one row, mark loads at 22/26px
This commit is contained in:
hoelee committed 2026-10-26 08:26:01 +08:00
1 parent 753e87d930
commit 18145b5db2
3 files changed
+51 -9

No files matched your search

+13 -5
View File
@@ -176,11 +176,19 @@ const nav = isZh
<body>
<header class="site-header">
<nav class="nav" aria-label="Main">
<a class="brand" href={isZh ? '/zh/' : '/'}>Mr<span class="dot"> Hoelee</span></a>
<a href={isZh ? '/zh/posts/' : '/posts/'}>{nav.posts}</a>
<a href={isZh ? '/zh/categories/' : '/categories/'}>{nav.categories}</a>
<a href={isZh ? '/zh/about/' : '/about/'}>{nav.about}</a>
<a href="/rss.xml" title={nav.rss}>{nav.rss}</a>
<a class="brand" href={isZh ? '/zh/' : '/'}>
<img class="brand-mark" src="/images/hoelee-mark-96.png" alt="" width="26" height="26" decoding="async" />
<span class="brand-name">{SITE.author}</span>
</a>
{/* Section links live in their own list so the mobile header can drop the
whole group onto a second row (`flex-basis: 100%`) instead of letting
individual links wrap around the search / language / theme controls. */}
<ul class="nav-links">
<li><a class="nav-link" href={isZh ? '/zh/posts/' : '/posts/'}>{nav.posts}</a></li>
<li><a class="nav-link" href={isZh ? '/zh/categories/' : '/categories/'}>{nav.categories}</a></li>
<li><a class="nav-link" href={isZh ? '/zh/about/' : '/about/'}>{nav.about}</a></li>
<li><a class="nav-link" href="/rss.xml" title={nav.rss}>{nav.rss}</a></li>
</ul>
<button class="search-toggle" id="search-toggle" aria-label={isZh ? '搜索' : 'Search'}>
⌕ <span class="search-hint">{isZh ? '搜索' : 'Search'}</span><kbd class="search-key">/</kbd>
</button>