rocky/OSGKeyboard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style(site): unify platform download badges

Browse Source 
Give App Store and macOS downloads matching dimensions and two-line typography so platform choice stays clear without extra labels.
This commit is contained in:
Rocky
2026-07-30 13:12:55 +08:00
parent 1f4f3e695e
commit fcc9c4155a
8 changed files with 54 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/assets/badges/ios-en.svg
+11
View File
@@ -0,0 +1,11 @@
<svg xmlns="http://www.w3.org/2000/svg" width="144" height="40" viewBox="0 0 144 40" role="img" aria-labelledby="title">
<title id="title">Download now - App Store</title>
<rect width="144" height="40" rx="7" fill="#000"/>
<rect x=".75" y=".75" width="142.5" height="38.5" rx="6.25" fill="none" stroke="#a6a6a6" stroke-width="1.5"/>
<g fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.7">
<rect x="15" y="6.5" width="13" height="26.5" rx="3"/>
<path d="M19 9.5h5M19.5 29.5h4"/>
</g>
<text x="40" y="14" fill="#fff" font-family="-apple-system, BlinkMacSystemFont, sans-serif" font-size="7.2">DOWNLOAD NOW</text>
<text x="40" y="29" fill="#fff" font-family="-apple-system, BlinkMacSystemFont, sans-serif" font-size="15.5" font-weight="600">App Store</text>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 824 B

docs/assets/badges/ios-zh.svg
+11
View File
@@ -0,0 +1,11 @@
<svg xmlns="http://www.w3.org/2000/svg" width="144" height="40" viewBox="0 0 144 40" role="img" aria-labelledby="title">
<title id="title">&#31435;&#21363;&#19979;&#36733; App Store</title>
<rect width="144" height="40" rx="7" fill="#000"/>
<rect x=".75" y=".75" width="142.5" height="38.5" rx="6.25" fill="none" stroke="#a6a6a6" stroke-width="1.5"/>
<g fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.7">
<rect x="15" y="6.5" width="13" height="26.5" rx="3"/>
<path d="M19 9.5h5M19.5 29.5h4"/>
</g>
<text x="40" y="14" fill="#fff" font-family="-apple-system, BlinkMacSystemFont, sans-serif" font-size="7.2">&#31435;&#21363;&#19979;&#36733;</text>
<text x="40" y="29" fill="#fff" font-family="-apple-system, BlinkMacSystemFont, sans-serif" font-size="15.5" font-weight="600">App Store</text>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 862 B

docs/assets/badges/macos-en.svg
+6 -6
View File
@@ -1,11 +1,11 @@
<svg xmlns="http://www.w3.org/2000/svg" width="128" height="40" viewBox="0 0 128 40" role="img" aria-labelledby="title">
<title id="title">Download for macOS</title>
<rect width="128" height="40" rx="7" fill="#000"/>
<rect x=".75" y=".75" width="126.5" height="38.5" rx="6.25" fill="none" stroke="#a6a6a6" stroke-width="1.5"/>
<svg xmlns="http://www.w3.org/2000/svg" width="144" height="40" viewBox="0 0 144 40" role="img" aria-labelledby="title">
<title id="title">Download now — macOS version</title>
<rect width="144" height="40" rx="7" fill="#000"/>
<rect x=".75" y=".75" width="142.5" height="38.5" rx="6.25" fill="none" stroke="#a6a6a6" stroke-width="1.5"/>
<g fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.7">
<rect x="10.5" y="8.5" width="22" height="15.5" rx="2"/>
<path d="M17.5 29.5h8M21.5 24v5.5M17.5 20.5h8"/>
</g>
<text x="40" y="14" fill="#fff" font-family="-apple-system, BlinkMacSystemFont, sans-serif" font-size="6.6">DIRECT DOWNLOAD</text>
<text x="40" y="29" fill="#fff" font-family="-apple-system, BlinkMacSystemFont, sans-serif" font-size="16" font-weight="600">macOS</text>
<text x="40" y="14" fill="#fff" font-family="-apple-system, BlinkMacSystemFont, sans-serif" font-size="7.2">DOWNLOAD NOW</text>
<text x="40" y="29" fill="#fff" font-family="-apple-system, BlinkMacSystemFont, sans-serif" font-size="15.5" font-weight="600">macOS version</text>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 832 B

After

Width:  |  Height:  |  Size: 851 B

docs/assets/badges/macos-zh.svg
+6 -6
View File
@@ -1,11 +1,11 @@
<svg xmlns="http://www.w3.org/2000/svg" width="120" height="40" viewBox="0 0 120 40" role="img" aria-labelledby="title">
<title id="title">&#30452;&#25509;&#19979;&#36733; macOS &#29256;</title>
<rect width="120" height="40" rx="7" fill="#000"/>
<rect x=".75" y=".75" width="118.5" height="38.5" rx="6.25" fill="none" stroke="#a6a6a6" stroke-width="1.5"/>
<svg xmlns="http://www.w3.org/2000/svg" width="144" height="40" viewBox="0 0 144 40" role="img" aria-labelledby="title">
<title id="title">&#31435;&#21363;&#19979;&#36733; macOS &#29256;&#26412;</title>
<rect width="144" height="40" rx="7" fill="#000"/>
<rect x=".75" y=".75" width="142.5" height="38.5" rx="6.25" fill="none" stroke="#a6a6a6" stroke-width="1.5"/>
<g fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.7">
<rect x="10.5" y="8.5" width="22" height="15.5" rx="2"/>
<path d="M17.5 29.5h8M21.5 24v5.5M17.5 20.5h8"/>
</g>
<text x="40" y="14" fill="#fff" font-family="-apple-system, BlinkMacSystemFont, sans-serif" font-size="7.2">&#30452;&#25509;&#19979;&#36733;</text>
<text x="40" y="29" fill="#fff" font-family="-apple-system, BlinkMacSystemFont, sans-serif" font-size="15.5" font-weight="600">macOS &#29256;</text>
<text x="40" y="14" fill="#fff" font-family="-apple-system, BlinkMacSystemFont, sans-serif" font-size="7.2">&#31435;&#21363;&#19979;&#36733;</text>
<text x="40" y="29" fill="#fff" font-family="-apple-system, BlinkMacSystemFont, sans-serif" font-size="15.5" font-weight="600">macOS &#29256;&#26412;</text>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 889 B

After

Width:  |  Height:  |  Size: 905 B

docs/index.html
+10 -10
View File
@@ -931,10 +931,10 @@
<p class="lead" data-i18n="hero.lead">免费开源的跨端语音输入。本地识别，自带 API Key 润色，避免重复订阅。iPhone、iPad、Mac — 说完即落字。</p>
<div class="hero-cta">
<a class="store-badge" id="heroStoreBadge" href="https://apps.apple.com/cn/app/osgkeyboard/id6781553267" rel="noopener" aria-label="Download for iPhone and iPad">
<img id="heroStoreBadgeImg" src="assets/badges/appstore-zh.svg" width="109" height="40" alt="下载 iPhone / iPad 版">
<img id="heroStoreBadgeImg" src="assets/badges/ios-zh.svg" width="144" height="40" alt="立即下载 App Store 版">
</a>
<a class="store-badge" href="https://github.com/hkgood/OSGKeyboard/releases/download/v1.1-mac/OSGKeyboard-1.1.dmg" rel="noopener" aria-label="Download for macOS">
<img class="macos-badge-img" src="assets/badges/macos-zh.svg" width="120" height="40" alt="直接下载 macOS 版">
<img class="macos-badge-img" src="assets/badges/macos-zh.svg" width="144" height="40" alt="立即下载 macOS 版本">
</a>
<a class="btn btn-ghost" href="https://github.com/hkgood/OSGKeyboard" rel="noopener">
<span class="material-symbols-outlined" aria-hidden="true">terminal</span>
@@ -1261,10 +1261,10 @@
</div>
<div class="platform-downloads">
<a class="store-badge" id="footerStoreBadge" href="https://apps.apple.com/cn/app/osgkeyboard/id6781553267" rel="noopener" aria-label="Download for iPhone and iPad">
<img id="footerStoreBadgeImg" src="assets/badges/appstore-zh.svg" width="109" height="40" alt="下载 iPhone / iPad 版">
<img id="footerStoreBadgeImg" src="assets/badges/ios-zh.svg" width="144" height="40" alt="立即下载 App Store 版">
</a>
<a class="store-badge" href="https://github.com/hkgood/OSGKeyboard/releases/download/v1.1-mac/OSGKeyboard-1.1.dmg" rel="noopener" aria-label="Download for macOS">
<img class="macos-badge-img" src="assets/badges/macos-zh.svg" width="120" height="40" alt="直接下载 macOS 版">
<img class="macos-badge-img" src="assets/badges/macos-zh.svg" width="144" height="40" alt="立即下载 macOS 版本">
</a>
</div>
<div class="hero-cta" style="margin-bottom:0">
@@ -1529,17 +1529,17 @@
const STORE = {
zh: {
href: "https://apps.apple.com/cn/app/osgkeyboard/id6781553267",
src: "assets/badges/appstore-zh.svg",
alt: "下载 iPhone / iPad 版",
src: "assets/badges/ios-zh.svg",
alt: "立即下载 App Store 版",
macSrc: "assets/badges/macos-zh.svg",
macAlt: "直接下载 macOS 版"
macAlt: "立即下载 macOS 版本"
},
en: {
href: "https://apps.apple.com/app/osgkeyboard/id6781553267",
src: "assets/badges/appstore-en.svg",
alt: "Download for iPhone and iPad",
src: "assets/badges/ios-en.svg",
alt: "Download now from the App Store",
macSrc: "assets/badges/macos-en.svg",
macAlt: "Download for macOS"
macAlt: "Download now — macOS version"
}
};