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/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);
}