feat(site): replace text 'M' logo with SVG icon

- Replace plain 'M' character with stylized SVG M monogram
- SVG uses the same white stroke-on-gradient style as before
- Add .logo .logo-mark style for hero section (32px, larger)
- Remove font-specific styles from logo-mark (now SVG-based)
- Add flex-shrink:0 to prevent icon squishing
This commit is contained in:
2026-07-23 20:18:53 +08:00
parent f080dcd1ff
commit e3142a17a8
+17 -9
View File
@@ -59,13 +59,21 @@
font-weight: 700;
font-size: 16px;
}
.nav-brand .logo-mark {
width: 28px; height: 28px;
border-radius: 7px;
background: var(--gradient);
display: flex; align-items: center; justify-content: center;
font-weight: 800; color: #fff; font-size: 15px;
}
.nav-brand .logo-mark {
width: 28px; height: 28px;
border-radius: 7px;
background: var(--gradient);
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
}
.logo .logo-mark {
width: 32px; height: 32px;
border-radius: 8px;
background: var(--gradient);
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
}
.logo-mark svg { display: block; }
.nav-links { display: flex; gap: 28px; align-items: center; }
.nav-links a {
color: var(--muted);
@@ -375,7 +383,7 @@
<nav>
<div class="nav-inner">
<a class="nav-brand" href="#">
<span class="logo-mark" title="MetonaEditor" aria-label="MetonaEditor Logo">M</span>
<span class="logo-mark" title="MetonaEditor" aria-label="MetonaEditor Logo"><svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M5 19V6l7 8 7-8v13"/></svg></span>
MetonaEditor
</a>
<div class="nav-links">
@@ -390,7 +398,7 @@
<header class="hero">
<div class="hero-deco"></div>
<div class="logo"><span class="logo-mark" title="MetonaEditor" aria-label="MetonaEditor Logo">M</span> METONA EDITOR</div>
<div class="logo"><span class="logo-mark" title="MetonaEditor" aria-label="MetonaEditor Logo"><svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M5 19V6l7 8 7-8v13"/></svg></span> METONA EDITOR</div>
<h1>现代化零依赖的<br/><span class="grad">Markdown 编辑器</span></h1>
<p class="tagline">单文件开箱即用,内置轻量解析器、分屏预览、插件系统与中文优先的国际化。为中文场景与现代 Web 应用而生。</p>
<div class="badges">