thejayman77/upbeatBytes
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Rebrand to the azure logo + warm sand/sea/sun palette

Browse Source 
- Add the real Upbeat Bytes lockup (logo.svg) and use it in the header,
  replacing the placeholder inline mark + text wordmark.
- New square favicon: the logo's rising sun (bright gold) on azure.
- Recolor the design system around the logo's #0083ad azure: rename the
  --sage* accent vars to --accent*, with deep/soft azure tints; navy ink
  (#16263a) echoing the logo's "Bytes"; cool slate muted text; a deep gold
  for text-weight accents plus --gold-bright for decorative fills; warm
  sand paper background. No urgency colors.
- Retint the hero image overlay and the no-image card gradients to match.
- theme-color → azure.

Built clean; frontend tests/build pass.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
jay
2026-06-01 20:13:02 +00:00
parent a47a1504c8
commit 0887b4b888
12 changed files with 71 additions and 73 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/app.css
+14 -12
View File
@@ -1,16 +1,18 @@
/* goodNews calm design system.
Warm but crisp: cream surfaces, sage accent, a serif voice for headlines,
strong readable contrast, generous space. No urgency colors (no red). */
/* Upbeat Bytes calm design system.
Sand, sea, and sun: warm paper surfaces, a vivid-azure accent, gold highlight,
a serif voice for headlines, strong readable contrast, generous space.
No urgency colors (no red). Built around the logo's #0083ad azure. */
:root {
--bg: #faf6ee;
--bg: #f7f4ec;
--surface: #fffdf8;
--ink: #21281f;
--muted: #616c60;
--sage: #2f7d5b;
--sage-deep: #235e44;
--sage-soft: #e6efe6;
--line: #e7e1d4;
--gold: #a9802f;
--ink: #16263a;
--muted: #5d6b78;
--accent: #0083ad;
--accent-deep: #006b8e;
--accent-soft: #e0eef3;
--line: #e8e3d8;
--gold: #b3892b;
--gold-bright: #e6cd42;
--serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
--sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
@@ -42,7 +44,7 @@ h1, h2, h3 {
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { font-family: inherit; cursor: pointer; }
::selection { background: var(--sage-soft); }
::selection { background: var(--accent-soft); }
.container { max-width: var(--maxw); margin: 0 auto; padding: 0 20px; }
.muted { color: var(--muted); }
frontend/src/app.html
+1 -1
View File
@@ -5,7 +5,7 @@
<link rel="icon" href="%sveltekit.assets%/favicon.svg" />
<link rel="manifest" href="%sveltekit.assets%/manifest.webmanifest" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#2f7d5b" />
<meta name="theme-color" content="#0083ad" />
<meta name="description" content="Calm, constructive news worth your attention — and nothing that isn't." />
<title>Upbeat Bytes — calm, constructive news</title>
%sveltekit.head%
frontend/src/lib/components/ArticleCard.svelte
+13 -13
View File
@@ -81,16 +81,16 @@
.body { padding: 16px 18px 14px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.tags { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 0.74rem; }
.tag {
background: var(--sage); color: #fff; border-radius: 999px;
background: var(--accent); color: #fff; border-radius: 999px;
padding: 2px 9px; font-weight: 600; text-transform: capitalize;
}
.tag.soft { background: var(--sage-soft); color: var(--sage-deep); }
.tag.soft { background: var(--accent-soft); color: var(--accent-deep); }
/* Source on its own line below the tags, left-justified, for uniformity. */
.src { color: var(--muted); font-size: 0.78rem; margin: -2px 0 2px; }
h3 { font-size: 1.18rem; }
h3 a:hover { color: var(--sage-deep); }
.desc { margin: 2px 0 0; color: #3c463a; }
h3 a:hover { color: var(--accent-deep); }
.desc { margin: 2px 0 0; color: #3b4754; }
.paywall {
margin: 0; font-size: 0.78rem; color: var(--gold);
display: inline-flex; align-items: center; gap: 5px;
@@ -98,7 +98,7 @@
.paywall::before { content: '🔒'; font-size: 0.72rem; filter: grayscale(0.3); }
.why {
margin: 2px 0 0; font-style: italic; color: var(--muted);
font-size: 0.9rem; padding-left: 12px; border-left: 2px solid var(--sage-soft);
font-size: 0.9rem; padding-left: 12px; border-left: 2px solid var(--accent-soft);
}
/* Keep heights even: clamp variable-length text on tiles. */
.tile h3, .why {
@@ -113,8 +113,8 @@
background: none; border: none; padding: 0; color: var(--muted);
font-size: 0.76rem; border-bottom: 1px dotted var(--line);
}
.actions button:hover { color: var(--sage-deep); border-bottom-color: var(--sage); }
.actions .replace { color: var(--sage-deep); border-bottom-color: var(--sage-soft); }
.actions button:hover { color: var(--accent-deep); border-bottom-color: var(--accent); }
.actions .replace { color: var(--accent-deep); border-bottom-color: var(--accent-soft); }
@media (hover: hover) {
.actions button:not(.replace) { opacity: 0; transition: opacity 0.16s ease; }
article:hover .actions button:not(.replace),
@@ -126,13 +126,13 @@
.tile .body { padding-top: 18px; }
.tile .body::before {
content: ''; display: block; width: 30px; height: 3px;
background: var(--sage); border-radius: 2px; margin-bottom: 10px; opacity: 0.85;
background: var(--accent); border-radius: 2px; margin-bottom: 10px; opacity: 0.85;
}
.tile::after {
content: attr(data-topic);
position: absolute; right: 10px; bottom: -8px;
font-family: var(--serif); font-size: 3.4rem; line-height: 1;
color: var(--sage); opacity: 0.05; text-transform: lowercase; letter-spacing: -0.02em;
color: var(--accent); opacity: 0.05; text-transform: lowercase; letter-spacing: -0.02em;
pointer-events: none; user-select: none;
}
.tile .tags, .tile .src, .tile h3, .tile .why, .tile .actions { position: relative; }
@@ -141,13 +141,13 @@
.hero { display: grid; grid-template-columns: 1.1fr 1fr; }
.hero .media {
position: relative; display: block; height: 100%; min-height: 300px;
background: linear-gradient(135deg, var(--sage-soft), #f1ece0);
background: linear-gradient(135deg, var(--accent-soft), #f1ece0);
}
.hero .media img { width: 100%; height: 100%; object-fit: cover; }
/* Soft feed images read as atmospheric, not broken. */
.hero .media::after {
content: ''; position: absolute; inset: 0; pointer-events: none;
background: linear-gradient(180deg, rgba(33, 40, 31, 0) 55%, rgba(33, 40, 31, 0.16));
background: linear-gradient(180deg, rgba(10, 22, 38, 0) 55%, rgba(10, 22, 38, 0.18));
}
.hero .body { padding: 30px 32px; justify-content: center; gap: 12px; }
.hero h3 { font-size: 1.95rem; }
@@ -156,14 +156,14 @@
.herotype {
position: relative; overflow: hidden;
background:
radial-gradient(120% 140% at 100% 0%, var(--sage-soft) 0%, transparent 55%),
radial-gradient(120% 140% at 100% 0%, var(--accent-soft) 0%, transparent 55%),
var(--surface);
}
.herotype::after {
content: attr(data-topic);
position: absolute; right: 12px; bottom: -18px;
font-family: var(--serif); font-size: clamp(4rem, 12vw, 8rem); line-height: 1;
color: var(--sage); opacity: 0.07; text-transform: lowercase; letter-spacing: -0.02em;
color: var(--accent); opacity: 0.07; text-transform: lowercase; letter-spacing: -0.02em;
pointer-events: none; user-select: none;
}
.herotype .body { position: relative; padding: 40px 36px; gap: 12px; }
frontend/src/lib/components/BottomNav.svelte
+2 -2
View File
@@ -39,7 +39,7 @@
color: var(--muted); font-size: 0.7rem; letter-spacing: 0.02em;
}
.bottomnav button svg { width: 23px; height: 23px; }
.bottomnav button.active { color: var(--sage-deep); }
.bottomnav button.active svg { stroke: var(--sage); }
.bottomnav button.active { color: var(--accent-deep); }
.bottomnav button.active svg { stroke: var(--accent); }
}
</style>
frontend/src/lib/components/BoundariesPanel.svelte
+5 -5
View File
@@ -106,7 +106,7 @@
}
.head { display: flex; align-items: baseline; justify-content: space-between; }
.head h2 { font-size: 1.3rem; }
.close { background: none; border: none; color: var(--sage-deep); font-size: 0.85rem; text-decoration: underline; }
.close { background: none; border: none; color: var(--accent-deep); font-size: 0.85rem; text-decoration: underline; }
.reassure { margin: 4px 0 16px; color: var(--muted); font-size: 0.85rem; }
.group { margin-bottom: 16px; }
.label {
@@ -118,16 +118,16 @@
flex: 1; border: 1px solid var(--line); border-radius: 9px; padding: 9px 12px;
font-size: 0.92rem; background: var(--bg);
}
.addrow input:focus { outline: none; border-color: var(--sage); }
.add { border: 1px solid var(--sage); background: var(--sage); color: #fff; border-radius: 9px; padding: 9px 16px; font-size: 0.88rem; }
.addrow input:focus { outline: none; border-color: var(--accent); }
.add { border: 1px solid var(--accent); background: var(--accent); color: #fff; border-radius: 9px; padding: 9px 16px; font-size: 0.88rem; }
.pills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.pill {
display: inline-flex; align-items: center; gap: 4px;
background: var(--sage-soft); color: var(--sage-deep);
background: var(--accent-soft); color: var(--accent-deep);
border-radius: 999px; padding: 4px 6px 4px 12px; font-size: 0.85rem;
}
.pill small { color: var(--muted); }
.pill button { background: none; border: none; color: var(--sage-deep); font-size: 1.05rem; line-height: 1; cursor: pointer; padding: 0 4px; }
.pill button { background: none; border: none; color: var(--accent-deep); font-size: 1.05rem; line-height: 1; cursor: pointer; padding: 0 4px; }
.empty { margin: 0; color: var(--muted); font-size: 0.85rem; font-style: italic; }
.reset { background: none; border: none; color: var(--muted); font-size: 0.82rem; text-decoration: underline; margin-top: 4px; }
</style>
frontend/src/lib/components/Header.svelte
+6 -21
View File
@@ -5,15 +5,7 @@
<header class="appbar">
<div class="container bar">
<a class="brand" href="/" aria-label="Upbeat Bytes — home">
<svg class="mark" viewBox="0 0 40 30" aria-hidden="true">
<path d="M3 24 Q15 21 23 11 T37 5" fill="none" stroke="var(--sage)" stroke-width="2.2"
opacity="0.3" stroke-linecap="round" />
<circle cx="3" cy="24" r="2.6" fill="var(--sage)" />
<circle cx="13" cy="19" r="2.8" fill="var(--sage)" />
<circle cx="23" cy="12" r="3" fill="var(--sage)" />
<circle cx="35" cy="5" r="3.9" fill="var(--gold)" />
</svg>
<span class="word"><span class="up">Upbeat</span><span class="by">Bytes</span></span>
<img class="logo" src="/logo.svg" alt="Upbeat Bytes" width="586" height="196" />
</a>
<nav class="utils" aria-label="Your controls">
@@ -44,14 +36,8 @@
}
.bar { display: flex; align-items: center; justify-content: space-between; height: 64px; }
.brand { display: inline-flex; align-items: center; gap: 11px; }
.mark { height: 28px; width: auto; display: block; }
.word { display: inline-flex; align-items: baseline; gap: 0.28em; letter-spacing: -0.01em; }
.up { font-family: var(--serif); font-weight: 600; font-size: 1.5rem; color: var(--ink); }
.by {
font-family: var(--sans); font-weight: 700; font-size: 1.42rem; color: var(--sage);
letter-spacing: -0.02em;
}
.brand { display: inline-flex; align-items: center; }
.logo { height: 34px; width: auto; display: block; }
.utils { display: flex; gap: 6px; }
.utils button {
@@ -61,14 +47,13 @@
transition: background 0.14s ease, color 0.14s ease;
}
.utils button svg { width: 17px; height: 17px; }
.utils button:hover { background: var(--sage-soft); color: var(--sage-deep); }
.utils button.on { color: var(--sage-deep); }
.utils button:hover { background: var(--accent-soft); color: var(--accent-deep); }
.utils button.on { color: var(--accent-deep); }
/* On phones the utilities live in the bottom tab bar ("You") instead. */
@media (max-width: 720px) {
.bar { height: 58px; justify-content: center; }
.utils { display: none; }
.up { font-size: 1.35rem; }
.by { font-size: 1.28rem; }
.logo { height: 29px; }
}
</style>
frontend/src/lib/components/Lane.svelte
+1 -1
View File
@@ -22,6 +22,6 @@
.lane { margin: 34px 0; }
.lane-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 14px; }
.lane-head h2 { font-size: 1.35rem; }
.more { margin-left: auto; background: none; border: none; color: var(--sage-deep); font-size: 0.85rem; }
.more { margin-left: auto; background: none; border: none; color: var(--accent-deep); font-size: 0.85rem; }
.more:hover { text-decoration: underline; }
</style>
frontend/src/lib/components/MoodNav.svelte
+3 -3
View File
@@ -27,10 +27,10 @@
font-size: 0.92rem;
transition: all 0.14s ease;
}
button:hover { color: var(--sage-deep); border-color: var(--sage); }
button:hover { color: var(--accent-deep); border-color: var(--accent); }
button.active {
background: var(--sage);
border-color: var(--sage);
background: var(--accent);
border-color: var(--accent);
color: #fff;
box-shadow: 0 4px 14px rgba(47, 125, 91, 0.25);
}
frontend/src/routes/+layout.svelte
+1 -1
View File
@@ -19,7 +19,7 @@
padding: 26px 0 34px;
border-top: 1px solid var(--line);
}
footer.site a { color: var(--sage-deep); }
footer.site a { color: var(--accent-deep); }
/* room for the mobile bottom tab bar */
@media (max-width: 720px) {
footer.site { padding-bottom: calc(34px + 64px + env(safe-area-inset-bottom)); }
frontend/src/routes/+page.svelte
+8 -8
View File
@@ -305,7 +305,7 @@
.view-head .sub { margin: 8px 0 0; color: var(--muted); font-size: 1.02rem; }
.view-head::after {
content: ''; display: block; width: 46px; height: 3px;
background: var(--sage); border-radius: 2px; margin-top: 14px; opacity: 0.8;
background: var(--accent); border-radius: 2px; margin-top: 14px; opacity: 0.8;
}
/* Explore by topic — a quiet secondary discovery section, not a nav row. */
@@ -320,8 +320,8 @@
border-radius: 999px; padding: 7px 15px; font-size: 0.9rem; cursor: pointer; transition: all 0.14s ease;
text-transform: capitalize;
}
.explore .chip:hover { border-color: var(--sage); color: var(--sage-deep); }
.explore .chip.active { background: var(--sage); border-color: var(--sage); color: #fff; }
.explore .chip:hover { border-color: var(--accent); color: var(--accent-deep); }
.explore .chip.active { background: var(--accent); border-color: var(--accent); color: #fff; }
/* Panels (Boundaries handled by its own component; History + You here) */
.panel {
@@ -330,17 +330,17 @@
}
.phead { display: flex; align-items: baseline; justify-content: space-between; }
.phead h2 { font-size: 1.3rem; }
.close { background: none; border: none; color: var(--sage-deep); font-size: 0.85rem; text-decoration: underline; }
.close { background: none; border: none; color: var(--accent-deep); font-size: 0.85rem; text-decoration: underline; }
.reassure { margin: 4px 0 14px; color: var(--muted); font-size: 0.85rem; }
.hist { list-style: none; margin: 0; padding: 0; }
.hist li { padding: 8px 0; border-bottom: 1px solid var(--line); display: flex; gap: 12px; align-items: baseline; }
.hist li:last-child { border-bottom: none; }
.hist a { color: var(--ink); }
.hist a:hover { color: var(--sage-deep); }
.hist a:hover { color: var(--accent-deep); }
.hsrc { margin-left: auto; color: var(--muted); font-size: 0.78rem; white-space: nowrap; }
.empty { margin: 0; color: var(--muted); font-style: italic; font-size: 0.85rem; }
.reset { background: none; border: none; color: var(--muted); font-size: 0.82rem; text-decoration: underline; margin-top: 12px; }
.reset:hover { color: var(--sage-deep); }
.reset:hover { color: var(--accent-deep); }
.youmenu .yourow {
width: 100%; display: flex; align-items: center; justify-content: space-between;
@@ -348,10 +348,10 @@
padding: 14px 2px; font-size: 1rem; color: var(--ink); cursor: pointer; text-align: left;
}
.youmenu .yourow:last-child { border-bottom: none; }
.youmenu .dot { background: var(--sage-soft); color: var(--sage-deep); border-radius: 999px; padding: 1px 9px; font-size: 0.78rem; }
.youmenu .dot { background: var(--accent-soft); color: var(--accent-deep); border-radius: 999px; padding: 1px 9px; font-size: 0.78rem; }
.notice {
text-align: center; color: var(--sage-deep); background: var(--sage-soft);
text-align: center; color: var(--accent-deep); background: var(--accent-soft);
border-radius: 999px; padding: 8px 16px; margin: 10px auto 0; width: fit-content; font-size: 0.86rem;
}
.rest { margin-top: 18px; }
frontend/static/favicon.svg
+16 -6
View File
@@ -1,8 +1,18 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
<rect width="64" height="64" rx="15" fill="#2f7d5b"/>
<path d="M13 45 Q26 41 35 26 T53 14" fill="none" stroke="#faf6ee" stroke-width="3" opacity="0.32" stroke-linecap="round"/>
<circle cx="13" cy="45" r="3.6" fill="#faf6ee"/>
<circle cx="25" cy="37" r="4" fill="#faf6ee"/>
<circle cx="38" cy="26" r="4.4" fill="#faf6ee"/>
<circle cx="51" cy="14" r="6" fill="#e8c87a"/>
<rect width="64" height="64" rx="15" fill="#0083ad"/>
<g stroke="#e6cd42" stroke-width="3.4" stroke-linecap="round">
<line x1="32" y1="11" x2="32" y2="17.5" transform="rotate(0 32 32)"/>
<line x1="32" y1="11" x2="32" y2="17.5" transform="rotate(30 32 32)"/>
<line x1="32" y1="11" x2="32" y2="17.5" transform="rotate(60 32 32)"/>
<line x1="32" y1="11" x2="32" y2="17.5" transform="rotate(90 32 32)"/>
<line x1="32" y1="11" x2="32" y2="17.5" transform="rotate(120 32 32)"/>
<line x1="32" y1="11" x2="32" y2="17.5" transform="rotate(150 32 32)"/>
<line x1="32" y1="11" x2="32" y2="17.5" transform="rotate(180 32 32)"/>
<line x1="32" y1="11" x2="32" y2="17.5" transform="rotate(210 32 32)"/>
<line x1="32" y1="11" x2="32" y2="17.5" transform="rotate(240 32 32)"/>
<line x1="32" y1="11" x2="32" y2="17.5" transform="rotate(270 32 32)"/>
<line x1="32" y1="11" x2="32" y2="17.5" transform="rotate(300 32 32)"/>
<line x1="32" y1="11" x2="32" y2="17.5" transform="rotate(330 32 32)"/>
</g>
<circle cx="32" cy="32" r="9.2" fill="#e6cd42"/>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 449 B

After

Width:  |  Height:  |  Size: 1.1 KiB

frontend/static/logo.svg
+1
View File
File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 19 KiB