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

Article Back button: bolder SVG arrow, vertically centered

Browse Source 
The bare "←" glyph rendered tiny and sat low (baseline-aligned). Swap it for a
crisp SVG arrow and lay the button out as a centered inline-flex (arrow + label),
so it reads juicier and sits properly centered in the top bar.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
jay
2026-06-06 21:56:40 -04:00
parent 67d6b82ed3
commit c64d0fda09
1 changed files with 8 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
goodnews/share.py
+8 -5
View File
@@ -117,10 +117,13 @@ def render_share_page(article: dict, base_url: str, summary: str | None = None)
.bar .inner {{ max-width:680px; margin:0 auto; padding:12px 20px;
display:flex; align-items:center; justify-content:space-between; gap:12px; }}
.bar img {{ height:40px; display:block; }}
.back {{ background:none; border:1px solid var(--line); color:var(--accent-deep);
border-radius:999px; padding:7px 16px; font-size:.88rem; font-family:inherit;
cursor:pointer; line-height:1; white-space:nowrap; }}
.back:hover {{ border-color:var(--accent); }}
.back {{ display:inline-flex; align-items:center; gap:7px;
background:none; border:1px solid var(--line); color:var(--accent-deep);
border-radius:999px; padding:8px 17px 8px 14px; font-size:.92rem; font-weight:600;
font-family:inherit; cursor:pointer; line-height:1; white-space:nowrap;
transition:border-color .14s ease, background .14s ease; }}
.back svg {{ width:19px; height:19px; display:block; }}
.back:hover {{ border-color:var(--accent); background:var(--bg); }}
.wrap {{ max-width:680px; margin:0 auto; padding:24px 20px 60px; }}
.card {{ background:var(--surface); border:1px solid var(--line); border-radius:16px;
overflow:hidden; box-shadow:0 10px 30px rgba(40,38,28,.06); }}
@@ -148,7 +151,7 @@ def render_share_page(article: dict, base_url: str, summary: str | None = None)
</style>
</head>
<body>
<div class="bar"><div class="inner"><a href="/"><img src="/logo.svg" alt="Upbeat Bytes"></a><button class="back" type="button" data-back aria-label="Go back">← Back</button></div></div>
<div class="bar"><div class="inner"><a href="/"><img src="/logo.svg" alt="Upbeat Bytes"></a><button class="back" type="button" data-back aria-label="Go back"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M19 12H5M11 6l-6 6 6 6" fill="none" stroke="currentColor" stroke-width="2.1" stroke-linecap="round" stroke-linejoin="round"/></svg>Back</button></div></div>
<main class="wrap">
<article class="card">
{media}