3dtours/RecipesCam
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Enlarge the landing logo and put RecipesCam back on one word

Browse Source 
.lp-logo is a flex row, so the bare text node "Recipes" and the <em>Cam</em>
were two flex items and the 6px gap landed between them: the wordmark read
"Recipes Cam". They now live in one span, so the gap only separates the icon
from the name.

Along with it: mark 22px -> 30px (24px under 680px), wordmark 18px -> 24px
(19px on phones), gap 6px -> 8px. Colours untouched — Cam is still the amber
accent, and the mark keeps its rounded corners.
This commit is contained in:
3dtours
2026-09-17 20:05:33 +07:00
parent cc88471256
commit cc313f2ea9
2 changed files with 9 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docker/frontend/src/Landing.tsx
+4 -2
View File
@@ -154,8 +154,10 @@ export function Landing() {
<nav className="lp-nav">
<div className="lp-wrap">
<a className="lp-logo" href="#top" onClick={() => setMenu(false)}>
<img className="lp-logo-mark" src="/assets/RecipesCamIcon.png" alt="" width="22" height="22" />
Recipes<em>Cam</em>
<img className="lp-logo-mark" src="/assets/RecipesCamIcon.png" alt="" width="30" height="30" />
{/* One span, not two siblings: .lp-logo is a flex row, so a bare
text node + <em> would get the 6px gap between them. */}
<span className="lp-logo-word">Recipes<em>Cam</em></span>
</a>
<div className="lp-nav-links">
{nav.map((entry) => <a key={entry.href} href={entry.href}>{c(entry.label)}</a>)}
docker/frontend/src/styles/landing.css
+5 -4
View File
@@ -110,9 +110,10 @@ html { scroll-behavior: smooth; scroll-padding-top: 78px; }
border-bottom: 1px solid var(--lp-line);
}
.lp-nav .lp-wrap { display: flex; align-items: center; gap: 18px; height: 62px; }
.lp-logo { display: flex; align-items: center; gap: 6px; font-family: var(--lp-display); font-weight: 800; font-size: 18px; }
.lp-logo { display: flex; align-items: center; gap: 8px; font-family: var(--lp-display); font-weight: 800; font-size: 24px; }
.lp-logo em { font-style: normal; color: var(--lp-ink-amber); }
.lp-logo-mark { border-radius: 6px; display: block; }
.lp-logo-word { white-space: nowrap; }
.lp-logo-mark { border-radius: 8px; display: block; width: 30px; height: 30px; }
.lp-nav-links { display: flex; gap: 16px; margin-left: 14px; font-size: 12.5px; color: var(--lp-muted); }
.lp-nav-links a:hover { color: var(--lp-text); }
.lp-nav .lp-spacer { flex: 1 1 auto; }
@@ -420,8 +421,8 @@ html { scroll-behavior: smooth; scroll-padding-top: 78px; }
@media (max-width: 680px) {
/* logo + theme + language + burger have to fit a 360px phone */
.lp-nav .lp-wrap { gap: 10px; }
.lp-logo { font-size: 15px; }
.lp-logo-mark { width: 18px; height: 18px; }
.lp-logo { font-size: 19px; }
.lp-logo-mark { width: 24px; height: 24px; }
.lp-tool { width: 30px; height: 30px; font-size: 11px; }
.lp-burger { padding: 6px; }
.lp-sec { padding: 64px 0; }