feat(header): logo mark + Lee Teong Hoe in brand, two-row mobile nav
Deploy / build (push) Successful in 29s
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:
1 parent
753e87d930
commit
18145b5db2
3 files changed
+51
-9
No files matched your search
@@ -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>
|
||||
|
||||
Reference in new issue
Block a user