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
+11 -3
View File
@@ -64,8 +64,16 @@
border-radius: 7px; border-radius: 7px;
background: var(--gradient); background: var(--gradient);
display: flex; align-items: center; justify-content: center; display: flex; align-items: center; justify-content: center;
font-weight: 800; color: #fff; font-size: 15px; 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 { display: flex; gap: 28px; align-items: center; }
.nav-links a { .nav-links a {
color: var(--muted); color: var(--muted);
@@ -375,7 +383,7 @@
<nav> <nav>
<div class="nav-inner"> <div class="nav-inner">
<a class="nav-brand" href="#"> <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 MetonaEditor
</a> </a>
<div class="nav-links"> <div class="nav-links">
@@ -390,7 +398,7 @@
<header class="hero"> <header class="hero">
<div class="hero-deco"></div> <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> <h1>现代化零依赖的<br/><span class="grad">Markdown 编辑器</span></h1>
<p class="tagline">单文件开箱即用,内置轻量解析器、分屏预览、插件系统与中文优先的国际化。为中文场景与现代 Web 应用而生。</p> <p class="tagline">单文件开箱即用,内置轻量解析器、分屏预览、插件系统与中文优先的国际化。为中文场景与现代 Web 应用而生。</p>
<div class="badges"> <div class="badges">