feat(brand): adopt the new M↓ brand kit; fix CI tool downloads
Branding: - All app icons regenerated from the new vector brand kit (M↓ mark): icon.png/icon@2x (app + packaging), favicon.png, tray-icon.png, and the full assets/icons/ size set — generate-icons.js now rasterizes app-icon.svg directly (docico1.png removed) - index.html gets proper favicon/apple-touch links from the kit - Welcome tab hero shows the new mark; README gets the horizontal wordmark - assets/logo.png (ConcreteInfo) intentionally untouched CI release fixes (win/mac jobs were failing): - FiraCode download moved from moving raw/master URLs (hash drifted upstream, tripping the pin) to the immutable 6.2 release asset; repo fonts updated to the pinned 6.2 bits - macOS pandoc extractor locates the binary in the archive instead of assuming a bin/ layout that the macOS zip doesn't have Stray upload archive (markdown-converter-assets (1).zip) excluded.
@@ -0,0 +1,95 @@
|
||||
# Markdown Converter — Brand Assets
|
||||
|
||||
Visual identity for [markdown-converter](https://github.com/amitwh/markdown-converter): a cross-platform Markdown editor & document converter powered by Pandoc.
|
||||
|
||||
## Concept
|
||||
|
||||
The mark is a stylized **M** whose right descender becomes a downward chevron — a literal "**M↓**" for **Markdown**, suggesting the source document flowing downward into rendered output (PDF, DOCX, PPTX, …).
|
||||
|
||||
The palette is a vibrant orange-to-deep-orange gradient (`#FB923C → #C2410C`) on a white mark — warm, energetic, distinctive. The mark itself is **white** on light surfaces, and a luminous peach-to-orange gradient (`#FFEDD5 → #FB923C`) on dark surfaces.
|
||||
|
||||
## Files
|
||||
|
||||
### App icon (vector, primary)
|
||||
|
||||
These are **true SVG app icons** — clean vector paths, no rasters. Drop them straight into a macOS/Windows/Linux app bundle, a PWA manifest, an iOS asset catalog, an Electron build, or any HTML page.
|
||||
|
||||
| File | Use it for |
|
||||
| --- | --- |
|
||||
| `app-icon.svg` | **Primary app icon.** Emerald→teal vertical gradient, subtle white highlight upper-left, white M↓ mark. |
|
||||
| `app-icon-dark.svg` | **Dark-mode app icon.** Charcoal gradient background, soft teal radial glow upper-left, mint-to-emerald gradient on the M↓ mark. |
|
||||
| `app-icon-flat.svg` | **Flat solid variant.** Single emerald background, white M↓ mark. Use when you can't render gradients (print, stickers, single-color contexts). |
|
||||
|
||||
### Logo (wordmark)
|
||||
|
||||
| File | Use it for |
|
||||
| --- | --- |
|
||||
| `logo-horizontal.jpg` (2752×1536) | High-res raster master. README hero, press kit. |
|
||||
| `logo-horizontal-1600w.jpg` (1600×893) | Web-ready compressed version. |
|
||||
| `logo-horizontal.svg` | Vector wordmark. Use in HTML, CSS, anywhere that needs to scale. |
|
||||
|
||||
### Vector mark (for code & inline use)
|
||||
|
||||
| File | Use it for |
|
||||
| --- | --- |
|
||||
| `mark.svg` | Gradient SVG mark. Drop into HTML, use as a UI element, or rasterize at any size. |
|
||||
| `mark-mono.svg` | Monochrome SVG. Uses `currentColor` — style it from CSS (`color: white;`) for any single-color context. |
|
||||
| `mark-standalone.jpg` (2048×2048) | Raster M↓ on white, for places that need a PNG (GitHub avatar, doc thumbnails). |
|
||||
|
||||
### Favicons (rasterized from `app-icon.svg`)
|
||||
|
||||
In the `favicons/` directory:
|
||||
|
||||
| File | Use it for |
|
||||
| --- | --- |
|
||||
| `favicon.ico` | Legacy `.ico` (16/32/48/64 embedded). Drop at the site root. |
|
||||
| `favicon-16x16.png`, `favicon-32x32.png`, `favicon-48x48.png` | Standard browser favicons. |
|
||||
| `apple-touch-icon.png` (180×180) | iOS home screen & "Add to Home Screen". |
|
||||
| `icon-192.png`, `icon-512.png` | Android home screen, PWA manifest, web app. |
|
||||
|
||||
### Social preview
|
||||
|
||||
| File | Use it for |
|
||||
| --- | --- |
|
||||
| `og-social-preview-1200x630.jpg` | **GitHub social preview** — set as the repository's social card image (Settings → Social preview). Also works as Open Graph / Twitter Card. |
|
||||
|
||||
## Usage in the repo
|
||||
|
||||
Drop the vector icons + favicon set into the repo root or a `/brand` folder, then in `README.md`:
|
||||
|
||||
```markdown
|
||||
<p align="left">
|
||||
<img src="./brand/app-icon.svg" width="80" alt="Markdown Converter">
|
||||
</p>
|
||||
```
|
||||
|
||||
For the favicon, in `index.html` (or any HTML site):
|
||||
|
||||
```html
|
||||
<link rel="icon" type="image/x-icon" href="/favicon.ico">
|
||||
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
|
||||
```
|
||||
|
||||
For an Electron app, point `build.icon` at the SVG (or a 512×512 PNG export):
|
||||
|
||||
```json
|
||||
{
|
||||
"build": {
|
||||
"icon": "brand/icon-512.png"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## Color tokens
|
||||
|
||||
```
|
||||
--mc-orange-400: #FB923C /* gradient start (light) */
|
||||
--mc-orange-700: #C2410C /* gradient end (light) */
|
||||
--mc-orange-500: #F97316 /* flat / accent */
|
||||
--mc-peach-100: #FFEDD5 /* dark-mode mark start */
|
||||
--mc-orange-300: #FDBA74 /* dark-mode mark mid */
|
||||
--mc-ink-900: #0F172A /* primary text */
|
||||
--mc-ink-500: #475569 /* secondary text */
|
||||
--mc-ink-400: #94A3B8 /* tagline / muted */
|
||||
```
|
||||
@@ -0,0 +1,27 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" role="img" aria-label="Markdown Converter app icon (dark)">
|
||||
<title>Markdown Converter (dark)</title>
|
||||
<defs>
|
||||
<linearGradient id="darkBg" x1="0" y1="0" x2="0" y2="1024" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0%" stop-color="#1C1917"/>
|
||||
<stop offset="100%" stop-color="#0C0A09"/>
|
||||
</linearGradient>
|
||||
<radialGradient id="darkGlow" cx="280" cy="180" r="780" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0%" stop-color="#EA580C" stop-opacity="0.65"/>
|
||||
<stop offset="60%" stop-color="#9A3412" stop-opacity="0.15"/>
|
||||
<stop offset="100%" stop-color="#9A3412" stop-opacity="0"/>
|
||||
</radialGradient>
|
||||
<linearGradient id="darkMark" x1="0" y1="180" x2="0" y2="844" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0%" stop-color="#FFEDD5"/>
|
||||
<stop offset="100%" stop-color="#FB923C"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<rect width="1024" height="1024" rx="224" ry="224" fill="url(#darkBg)"/>
|
||||
<rect width="1024" height="1024" rx="224" ry="224" fill="url(#darkGlow)"/>
|
||||
<g transform="translate(154, 176) scale(7.16)" fill="none" stroke="url(#darkMark)" stroke-width="9" stroke-linecap="round" stroke-linejoin="round">
|
||||
<line x1="26" y1="22" x2="26" y2="72"/>
|
||||
<line x1="63" y1="22" x2="63" y2="75"/>
|
||||
<polyline points="22,18 44.5,56 67,18"/>
|
||||
<polyline points="48,60 63,76 78,60"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.4 KiB |
@@ -0,0 +1,11 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" role="img" aria-label="Markdown Converter app icon (flat)">
|
||||
<title>Markdown Converter (flat)</title>
|
||||
<rect width="1024" height="1024" rx="224" ry="224" fill="#F97316"/>
|
||||
<g transform="translate(154, 176) scale(7.16)" fill="none" stroke="#FFFFFF" stroke-width="9" stroke-linecap="round" stroke-linejoin="round">
|
||||
<line x1="26" y1="22" x2="26" y2="72"/>
|
||||
<line x1="63" y1="22" x2="63" y2="75"/>
|
||||
<polyline points="22,18 44.5,56 67,18"/>
|
||||
<polyline points="48,60 63,76 78,60"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 609 B |
@@ -0,0 +1,22 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" role="img" aria-label="Markdown Converter app icon">
|
||||
<title>Markdown Converter</title>
|
||||
<defs>
|
||||
<linearGradient id="iconBg" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#FB923C"/>
|
||||
<stop offset="100%" stop-color="#C2410C"/>
|
||||
</linearGradient>
|
||||
<radialGradient id="iconHighlight" cx="0.28" cy="0.18" r="0.55">
|
||||
<stop offset="0%" stop-color="#FFFFFF" stop-opacity="0.28"/>
|
||||
<stop offset="60%" stop-color="#FFFFFF" stop-opacity="0"/>
|
||||
</radialGradient>
|
||||
</defs>
|
||||
<rect width="1024" height="1024" rx="224" ry="224" fill="url(#iconBg)"/>
|
||||
<rect width="1024" height="1024" rx="224" ry="224" fill="url(#iconHighlight)"/>
|
||||
<g transform="translate(154, 176) scale(7.16)" fill="none" stroke="#FFFFFF" stroke-width="9" stroke-linecap="round" stroke-linejoin="round">
|
||||
<line x1="26" y1="22" x2="26" y2="72"/>
|
||||
<line x1="63" y1="22" x2="63" y2="75"/>
|
||||
<polyline points="22,18 44.5,56 67,18"/>
|
||||
<polyline points="48,60 63,76 78,60"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.1 KiB |
|
After Width: | Height: | Size: 12 KiB |
|
After Width: | Height: | Size: 8.5 KiB |
|
After Width: | Height: | Size: 724 B |
|
After Width: | Height: | Size: 1.6 KiB |
|
After Width: | Height: | Size: 2.6 KiB |
|
After Width: | Height: | Size: 3.7 KiB |
|
After Width: | Height: | Size: 5.9 KiB |
|
After Width: | Height: | Size: 9.0 KiB |
|
After Width: | Height: | Size: 59 KiB |
|
After Width: | Height: | Size: 13 KiB |
|
After Width: | Height: | Size: 19 KiB |
|
After Width: | Height: | Size: 43 KiB |
|
After Width: | Height: | Size: 79 KiB |
|
After Width: | Height: | Size: 253 KiB |
@@ -0,0 +1,25 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 720 180" role="img" aria-label="Markdown Converter">
|
||||
<title>Markdown Converter</title>
|
||||
<defs>
|
||||
<linearGradient id="lg" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#FB923C"/>
|
||||
<stop offset="100%" stop-color="#C2410C"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<!-- Mark, scaled and translated to fit left side -->
|
||||
<g transform="translate(20, 20) scale(1.4)">
|
||||
<g fill="none" stroke="url(#lg)" stroke-width="9" stroke-linecap="round" stroke-linejoin="round">
|
||||
<line x1="26" y1="22" x2="26" y2="72"/>
|
||||
<line x1="63" y1="22" x2="63" y2="75"/>
|
||||
<polyline points="22,18 44.5,56 67,18"/>
|
||||
<polyline points="48,60 63,76 78,60"/>
|
||||
</g>
|
||||
</g>
|
||||
<!-- Wordmark -->
|
||||
<g font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Inter', 'Helvetica Neue', Arial, sans-serif">
|
||||
<text x="180" y="100" font-size="58" font-weight="700" fill="#0F172A" letter-spacing="-1.5">Markdown</text>
|
||||
<text x="424" y="100" font-size="58" font-weight="400" fill="#475569" letter-spacing="-1.2">Converter</text>
|
||||
<text x="182" y="138" font-family="'SF Mono', 'JetBrains Mono', Menlo, Consolas, monospace" font-size="16" font-weight="500" fill="#94A3B8" letter-spacing="4.5">PANDOC × ELECTRON</text>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.3 KiB |
@@ -0,0 +1,10 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" role="img" aria-label="Markdown Converter mark (monochrome)">
|
||||
<title>Markdown Converter (monochrome)</title>
|
||||
<g fill="none" stroke="currentColor" stroke-width="9" stroke-linecap="round" stroke-linejoin="round">
|
||||
<line x1="26" y1="22" x2="26" y2="72"/>
|
||||
<line x1="63" y1="22" x2="63" y2="75"/>
|
||||
<polyline points="22,18 44.5,56 67,18"/>
|
||||
<polyline points="48,60 63,76 78,60"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 506 B |
|
After Width: | Height: | Size: 76 KiB |
@@ -0,0 +1,16 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" role="img" aria-label="Markdown Converter mark">
|
||||
<title>Markdown Converter</title>
|
||||
<defs>
|
||||
<linearGradient id="mcg" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#FB923C"/>
|
||||
<stop offset="100%" stop-color="#C2410C"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<g fill="none" stroke="url(#mcg)" stroke-width="9" stroke-linecap="round" stroke-linejoin="round">
|
||||
<line x1="26" y1="22" x2="26" y2="72"/>
|
||||
<line x1="63" y1="22" x2="63" y2="75"/>
|
||||
<polyline points="22,18 44.5,56 67,18"/>
|
||||
<polyline points="48,60 63,76 78,60"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 672 B |
|
After Width: | Height: | Size: 67 KiB |