Sage_Software/LoperBoys
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Separate standalone leaf icon from text — favicon.svg + logo-icon.svg

Browse Source
This commit is contained in:
John Loper II
2026-05-11 17:16:03 -04:00
parent 10ca436633
commit 7f1e4b98ee
4 changed files with 49 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
css/style.css
+5
View File
@@ -168,6 +168,11 @@ img {
font-size: 1.5rem;
}
.logo-icon-svg {
width: 36px;
height: 36px;
}
.logo-text .accent {
color: var(--cyan-bright);
}
img/favicon.svg
+18 -5
View File
@@ -1,6 +1,19 @@
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
<rect width="32" height="32" rx="4" fill="#1e5128"/>
<path d="M16,6 Q22,12 16,22 Q10,16 16,6Z" fill="#5cb85c"/>
<line x1="16" y1="6" x2="16" y2="22" stroke="#1e5128" stroke-width="1.5"/>
<text x="16" y="30" text-anchor="middle" font-family="Arial, sans-serif" font-size="6" font-weight="bold" fill="white">LB</text>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32" height="32">
<!-- Background circle -->
<circle cx="16" cy="16" r="15" fill="#1e5128"/>
<!-- Leaf icon -->
<path d="M16,5
Q24,10 22,18
Q20,24 16,26
Q12,24 10,18
Q8,10 16,5Z"
fill="#4a9e4a"/>
<!-- Leaf vein -->
<line x1="16" y1="5" x2="16" y2="26" stroke="#1e5128" stroke-width="1.5"/>
<!-- Small accent lines -->
<line x1="16" y1="12" x2="12" y2="16" stroke="#1e5128" stroke-width="1" opacity="0.6"/>
<line x1="16" y1="12" x2="20" y2="16" stroke="#1e5128" stroke-width="1" opacity="0.6"/>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 415 B

After

Width:  |  Height:  |  Size: 651 B

img/logo-icon.svg
+23
View File
@@ -0,0 +1,23 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100" height="100">
<!-- Background circle -->
<circle cx="50" cy="50" r="48" fill="#1e5128"/>
<!-- Main leaf -->
<path d="M50,12
Q75,28 72,52
Q68,72 50,86
Q32,72 28,52
Q25,28 50,12Z"
fill="#4a9e4a"/>
<!-- Leaf vein (center) -->
<line x1="50" y1="12" x2="50" y2="86" stroke="#1e5128" stroke-width="2.5"/>
<!-- Side veins -->
<line x1="50" y1="30" x2="38" y2="40" stroke="#1e5128" stroke-width="2" opacity="0.6"/>
<line x1="50" y1="30" x2="62" y2="40" stroke="#1e5128" stroke-width="2" opacity="0.6"/>
<line x1="50" y1="48" x2="38" y2="56" stroke="#1e5128" stroke-width="2" opacity="0.6"/>
<line x1="50" y1="48" x2="62" y2="56" stroke="#1e5128" stroke-width="2" opacity="0.6"/>
<line x1="50" y1="66" x2="40" y2="72" stroke="#1e5128" stroke-width="2" opacity="0.6"/>
<line x1="50" y1="66" x2="60" y2="72" stroke="#1e5128" stroke-width="2" opacity="0.6"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1020 B

index.html
+3 -4
View File
@@ -27,9 +27,8 @@
<meta name="twitter:image" content="https://loperboys.com/img/og-banner.png">
<!-- Favicon -->
<link rel="icon" type="image/png" sizes="32x32" href="img/favicon.png">
<link rel="icon" type="image/png" sizes="16x16" href="img/favicon.png">
<link rel="apple-touch-icon" sizes="180x180" href="img/apple-touch-icon.png">
<link rel="icon" type="image/svg+xml" href="img/favicon.svg">
<link rel="apple-touch-icon" href="img/favicon.svg">
<!-- Structured Data (LocalBusiness) -->
<script type="application/ld+json">
@@ -63,7 +62,7 @@
<nav class="navbar" id="navbar">
<div class="nav-container">
<a href="#" class="logo">
<span class="logo-icon">🌱</span>
<img src="img/logo-icon.svg" alt="LoperBoys" class="logo-icon-svg">
<span class="logo-text">Loper<span class="accent">Boys</span></span>
</a>
<button class="nav-toggle" id="navToggle" aria-label="Toggle menu">