refactor(ui): drop redundant page headers, rework measure profile UX
Removes decorative route-label h1s across fitness, recipe and cospend pages — replaced with sr-only h1s for assistive tech and a shared .sr-only utility in app.css. On the measure page, the tucked-away profile chip becomes a dismissible setup banner that only appears when sex/height/birth year are missing, with a permanent "Edit profile" link at the foot of the page.
This commit is contained in:
+1
-1
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "homepage",
|
||||
"version": "1.38.2",
|
||||
"version": "1.39.0",
|
||||
"private": true,
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
|
||||
+13
@@ -366,6 +366,19 @@ a:focus-visible {
|
||||
transition: var(--transition-fast);
|
||||
}
|
||||
|
||||
/* Visually hidden but accessible to screen readers */
|
||||
.sr-only {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
padding: 0;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
white-space: nowrap;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
/* Interactive hover/focus effects */
|
||||
.g-interactive {
|
||||
transition: var(--transition-fast);
|
||||
|
||||
@@ -195,6 +195,13 @@ const translations: Translations = {
|
||||
// Measure page
|
||||
measure_title: { en: 'Measure', de: 'Messen' },
|
||||
profile: { en: 'Profile', de: 'Profil' },
|
||||
profile_setup_cta: {
|
||||
en: 'Add height & birth year to unlock BMI, TDEE and calorie balance stats.',
|
||||
de: 'Größe & Geburtsjahr eintragen, um BMI, TDEE und Kalorienbilanz freizuschalten.'
|
||||
},
|
||||
set_up_profile: { en: 'Set up', de: 'Einrichten' },
|
||||
edit_profile: { en: 'Edit profile', de: 'Profil bearbeiten' },
|
||||
dismiss: { en: 'Dismiss', de: 'Verwerfen' },
|
||||
new_measurement: { en: 'New Measurement', de: 'Neue Messung' },
|
||||
edit_measurement: { en: 'Edit Measurement', de: 'Messung bearbeiten' },
|
||||
weight_kg: { en: 'Weight (kg)', de: 'Gewicht (kg)' },
|
||||
|
||||
@@ -128,7 +128,7 @@
|
||||
</svelte:head>
|
||||
|
||||
<main class="cospend-main">
|
||||
<h1>{t('cospend', lang)}</h1>
|
||||
<h1 class="sr-only">{t('cospend', lang)}</h1>
|
||||
|
||||
<!-- Responsive layout for balance and chart -->
|
||||
<div class="dashboard-layout">
|
||||
@@ -272,13 +272,6 @@
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
h1 {
|
||||
text-align: center;
|
||||
font-size: 2.5rem;
|
||||
margin-block: 0.5rem 1.5rem;
|
||||
color: var(--color-text-primary);
|
||||
}
|
||||
|
||||
.loading, .error {
|
||||
text-align: center;
|
||||
padding: 2rem;
|
||||
|
||||
@@ -373,7 +373,8 @@
|
||||
<div class="shopping-page">
|
||||
<header class="page-header">
|
||||
<div class="header-row">
|
||||
<h1>{t('shopping_list_title', lang)} <SyncIndicator status={sync.status} /></h1>
|
||||
<h1 class="sr-only">{t('shopping_list_title', lang)}</h1>
|
||||
<SyncIndicator status={sync.status} />
|
||||
{#if !isGuest}
|
||||
<button class="btn-share" onclick={openShareModal} title={t('share', lang)}>
|
||||
<Share2 size={16} />
|
||||
@@ -613,11 +614,6 @@
|
||||
justify-content: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
h1 {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 700;
|
||||
margin: 0;
|
||||
}
|
||||
.btn-share {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -892,7 +888,6 @@
|
||||
|
||||
@media (max-width: 500px) {
|
||||
.shopping-page { padding: 1rem 0.75rem; }
|
||||
h1 { font-size: 1.3rem; }
|
||||
.card-grid {
|
||||
grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
|
||||
gap: 0.4rem;
|
||||
|
||||
@@ -132,7 +132,7 @@
|
||||
<main class="payments-list">
|
||||
<div class="header">
|
||||
<div class="header-content">
|
||||
<h1>{t('all_payments_title', lang)}</h1>
|
||||
<h1 class="sr-only">{t('all_payments_title', lang)}</h1>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -288,13 +288,6 @@
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin-block: 0 1rem;
|
||||
margin-inline: auto;
|
||||
color: var(--color-text-primary);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.btn {
|
||||
padding: 0.75rem 1.5rem;
|
||||
border-radius: 0.5rem;
|
||||
|
||||
@@ -368,7 +368,7 @@
|
||||
|
||||
<main class="add-payment">
|
||||
<div class="header">
|
||||
<h1>{t('add_payment_title', lang)}</h1>
|
||||
<h1 class="sr-only">{t('add_payment_title', lang)}</h1>
|
||||
<p>{t('add_payment_subtitle', lang)}</p>
|
||||
</div>
|
||||
|
||||
@@ -625,12 +625,6 @@
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.header h1 {
|
||||
margin: 0 0 0.5rem 0;
|
||||
color: var(--color-text-primary);
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.header p {
|
||||
margin: 0;
|
||||
color: var(--color-text-secondary);
|
||||
|
||||
@@ -373,7 +373,7 @@
|
||||
|
||||
<main class="edit-payment">
|
||||
<div class="header">
|
||||
<h1>{t('edit_payment_title', lang)}</h1>
|
||||
<h1 class="sr-only">{t('edit_payment_title', lang)}</h1>
|
||||
<p>{t('edit_payment_subtitle', lang)}</p>
|
||||
</div>
|
||||
|
||||
@@ -613,12 +613,6 @@
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.header h1 {
|
||||
margin: 0 0 0.5rem 0;
|
||||
color: var(--color-text-primary);
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.header p {
|
||||
margin: 0;
|
||||
color: var(--color-text-secondary);
|
||||
|
||||
@@ -103,7 +103,7 @@
|
||||
|
||||
<main class="recurring-payments">
|
||||
<div class="header">
|
||||
<h1>{t('recurring_title', lang)}</h1>
|
||||
<h1 class="sr-only">{t('recurring_title', lang)}</h1>
|
||||
<p>{t('recurring_subtitle', lang)}</p>
|
||||
</div>
|
||||
|
||||
@@ -246,12 +246,6 @@
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.header h1 {
|
||||
margin: 0 0 0.5rem 0;
|
||||
color: var(--color-text-primary);
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.header p {
|
||||
margin: 0;
|
||||
color: var(--color-text-secondary);
|
||||
|
||||
@@ -295,7 +295,7 @@
|
||||
|
||||
<main class="edit-recurring-payment">
|
||||
<div class="header">
|
||||
<h1>{t('edit_recurring_title', lang)}</h1>
|
||||
<h1 class="sr-only">{t('edit_recurring_title', lang)}</h1>
|
||||
</div>
|
||||
|
||||
{#if loadingPayment}
|
||||
@@ -507,11 +507,6 @@
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.header h1 {
|
||||
margin: 0;
|
||||
color: var(--color-text-primary);
|
||||
}
|
||||
|
||||
.loading {
|
||||
text-align: center;
|
||||
padding: 2rem;
|
||||
|
||||
@@ -152,7 +152,7 @@
|
||||
|
||||
<main class="settle-main">
|
||||
<div class="header-section">
|
||||
<h1>{t('settle_title', lang)}</h1>
|
||||
<h1 class="sr-only">{t('settle_title', lang)}</h1>
|
||||
<p>{t('settle_subtitle', lang)}</p>
|
||||
</div>
|
||||
|
||||
@@ -373,11 +373,6 @@
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.header-section h1 {
|
||||
color: var(--nord0);
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.header-section p {
|
||||
color: var(--nord3);
|
||||
font-size: 1.1rem;
|
||||
@@ -690,10 +685,6 @@
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:global(:root:not([data-theme="light"])) .header-section h1 {
|
||||
color: var(--font-default-dark);
|
||||
}
|
||||
|
||||
:global(:root:not([data-theme="light"])) .header-section p {
|
||||
color: var(--nord4);
|
||||
}
|
||||
@@ -793,9 +784,6 @@
|
||||
border-color: var(--nord2);
|
||||
}
|
||||
}
|
||||
:global(:root[data-theme="dark"]) .header-section h1 {
|
||||
color: var(--font-default-dark);
|
||||
}
|
||||
:global(:root[data-theme="dark"]) .header-section p {
|
||||
color: var(--nord4);
|
||||
}
|
||||
|
||||
@@ -14,13 +14,7 @@
|
||||
<svelte:head>
|
||||
<title>{labels.title} - {labels.siteTitle}</title>
|
||||
</svelte:head>
|
||||
<style>
|
||||
h1 {
|
||||
text-align: center;
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
</style>
|
||||
<h1>{labels.title}</h1>
|
||||
<h1 class="sr-only">{labels.title}</h1>
|
||||
<section>
|
||||
<TagCloud>
|
||||
{#each data.categories as tag}
|
||||
|
||||
@@ -43,11 +43,6 @@
|
||||
</script>
|
||||
|
||||
<style>
|
||||
h1{
|
||||
text-align: center;
|
||||
margin-bottom: 0;
|
||||
font-size: 4rem;
|
||||
}
|
||||
.subheading{
|
||||
text-align: center;
|
||||
margin-top: 0;
|
||||
@@ -87,7 +82,7 @@ h1{
|
||||
<meta name="description" content={labels.metaDescription} />
|
||||
</svelte:head>
|
||||
|
||||
<h1>{labels.title}</h1>
|
||||
<h1 class="sr-only">{labels.title}</h1>
|
||||
<p class=subheading>
|
||||
{#if data.favorites.length > 0}
|
||||
{labels.count}
|
||||
|
||||
@@ -23,10 +23,6 @@
|
||||
<title>{labels.title} - {labels.siteTitle}</title>
|
||||
</svelte:head>
|
||||
<style>
|
||||
h1 {
|
||||
font-size: 1.5rem;
|
||||
text-align: center;
|
||||
}
|
||||
.search-wrap {
|
||||
max-width: 400px;
|
||||
margin: 0 auto 1rem;
|
||||
@@ -42,7 +38,7 @@
|
||||
color: var(--color-text-primary);
|
||||
}
|
||||
</style>
|
||||
<h1>{labels.title}</h1>
|
||||
<h1 class="sr-only">{labels.title}</h1>
|
||||
<div class="search-wrap">
|
||||
<input type="search" placeholder={labels.search} bind:value={query} />
|
||||
</div>
|
||||
|
||||
@@ -101,7 +101,7 @@
|
||||
<MuscleFilter bind:selectedGroups={muscleGroups} {lang} split />
|
||||
</div>
|
||||
|
||||
<h1>{t('exercises_title', lang)}</h1>
|
||||
<h1 class="sr-only">{t('exercises_title', lang)}</h1>
|
||||
|
||||
<!-- Mobile: inline, not split -->
|
||||
<div class="mobile-filter">
|
||||
@@ -225,11 +225,6 @@
|
||||
margin: 0 auto;
|
||||
position: relative;
|
||||
}
|
||||
h1 {
|
||||
margin: 0;
|
||||
font-size: 1.4rem;
|
||||
}
|
||||
|
||||
/* Mobile: show inline filter, hide desktop split */
|
||||
.desktop-filter {
|
||||
display: none;
|
||||
|
||||
@@ -55,7 +55,7 @@
|
||||
<svelte:head><title>{t('history_title', lang)} - Bocken</title></svelte:head>
|
||||
|
||||
<div class="history-page">
|
||||
<h1>{t('history_title', lang)}</h1>
|
||||
<h1 class="sr-only">{t('history_title', lang)}</h1>
|
||||
|
||||
{#if sessions.length === 0}
|
||||
<p class="empty">{t('no_workouts_yet', lang)}</p>
|
||||
@@ -97,10 +97,6 @@
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
}
|
||||
h1 {
|
||||
margin: 0;
|
||||
font-size: 1.4rem;
|
||||
}
|
||||
.empty {
|
||||
text-align: center;
|
||||
color: var(--color-text-secondary);
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<script>
|
||||
import { page } from '$app/stores';
|
||||
import { Pencil, Trash2, ChevronRight, ChevronDown, Venus, Mars, Weight, Percent, Ruler, Plus, Minus, X } from '@lucide/svelte';
|
||||
import { Pencil, Trash2, ChevronRight, ChevronDown, Venus, Mars, Weight, Percent, Ruler, Plus, Minus, X, UserCog, Sparkles } from '@lucide/svelte';
|
||||
import { detectFitnessLang, t } from '$lib/js/fitnessI18n';
|
||||
import { toast } from '$lib/js/toast.svelte';
|
||||
import { confirm } from '$lib/js/confirmDialog.svelte';
|
||||
@@ -34,16 +34,19 @@
|
||||
let profileBirthYear = $state(data.profile?.birthYear != null ? String(data.profile.birthYear) : '');
|
||||
let profileSaving = $state(false);
|
||||
let profileEditing = $state(false);
|
||||
let bannerDismissed = $state(false);
|
||||
/** @type {HTMLElement | undefined} */
|
||||
let profileFormEl = $state(undefined);
|
||||
|
||||
const profileParts = $derived.by(() => {
|
||||
/** @type {string[]} */
|
||||
const parts = [];
|
||||
const h = data.profile?.heightCm;
|
||||
if (h) parts.push(`${h}cm`);
|
||||
const by = data.profile?.birthYear;
|
||||
if (by) parts.push(`*${by}`);
|
||||
return parts;
|
||||
});
|
||||
const profileComplete = $derived(!!(data.profile?.sex && data.profile?.heightCm && data.profile?.birthYear));
|
||||
const showSetupBanner = $derived(!profileComplete && !bannerDismissed && !profileEditing);
|
||||
|
||||
function openProfileEdit() {
|
||||
profileEditing = true;
|
||||
setTimeout(() => {
|
||||
profileFormEl?.scrollIntoView({ behavior: 'smooth', block: 'center' });
|
||||
}, 40);
|
||||
}
|
||||
|
||||
let profileDirty = $derived(
|
||||
profileSex !== (data.profile?.sex ?? 'male') ||
|
||||
@@ -222,29 +225,26 @@
|
||||
<svelte:head><title>{lang === 'en' ? 'Measure' : 'Messen'} - Bocken</title></svelte:head>
|
||||
|
||||
<div class="measure-page">
|
||||
<div class="page-header">
|
||||
<h1>{t('measure_title', lang)}</h1>
|
||||
<div class="profile-meta">
|
||||
{#if data.profile?.sex}
|
||||
<span class="profile-sex-icon">
|
||||
{#if data.profile.sex === 'female'}
|
||||
<Venus size={16} />
|
||||
{:else}
|
||||
<Mars size={16} />
|
||||
{/if}
|
||||
</span>
|
||||
{/if}
|
||||
{#if profileParts.length > 0}
|
||||
<span class="profile-summary">{profileParts.join(' · ')}</span>
|
||||
{/if}
|
||||
<button class="profile-edit-btn" onclick={() => profileEditing = !profileEditing} aria-label="Edit profile">
|
||||
<Pencil size={12} />
|
||||
<h1 class="sr-only">{t('measure_title', lang)}</h1>
|
||||
|
||||
{#if showSetupBanner}
|
||||
<div class="setup-banner" role="status">
|
||||
<span class="setup-banner-icon" aria-hidden="true"><Sparkles size={18} /></span>
|
||||
<span class="setup-banner-text">{t('profile_setup_cta', lang)}</span>
|
||||
<button type="button" class="setup-banner-cta" onclick={openProfileEdit}>
|
||||
{t('set_up_profile', lang)}
|
||||
</button>
|
||||
<button type="button" class="setup-banner-dismiss" onclick={() => bannerDismissed = true} aria-label={t('dismiss', lang)}>
|
||||
<X size={14} />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#if profileEditing}
|
||||
<div class="profile-fields">
|
||||
<div class="profile-fields" bind:this={profileFormEl}>
|
||||
<button type="button" class="profile-close-btn" onclick={() => profileEditing = false} aria-label={t('cancel', lang)}>
|
||||
<X size={14} />
|
||||
</button>
|
||||
<div class="form-group">
|
||||
<!-- svelte-ignore a11y_label_has_associated_control -->
|
||||
<label>{t('sex', lang)}</label>
|
||||
@@ -427,6 +427,13 @@
|
||||
{#each data.sharedPeriods ?? [] as shared (shared.owner)}
|
||||
<PeriodTracker periods={shared.entries} {lang} readOnly ownerName={shared.owner} />
|
||||
{/each}
|
||||
|
||||
<div class="page-footer-actions">
|
||||
<button type="button" class="edit-profile-link" onclick={openProfileEdit}>
|
||||
<UserCog size={14} />
|
||||
<span>{t('edit_profile', lang)}</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
@@ -435,57 +442,151 @@
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
}
|
||||
h1 {
|
||||
margin: 0;
|
||||
font-size: 1.4rem;
|
||||
}
|
||||
h2 {
|
||||
margin: 0 0 0.5rem;
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
/* Header with inline profile */
|
||||
.page-header {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
justify-content: space-between;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
.profile-meta {
|
||||
/* Setup banner — only visible when profile incomplete */
|
||||
.setup-banner {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.4rem;
|
||||
gap: 0.75rem;
|
||||
padding: 0.75rem 0.9rem;
|
||||
border-radius: var(--radius-lg);
|
||||
background: color-mix(in oklab, var(--color-primary) 10%, var(--color-surface));
|
||||
border: 1px solid color-mix(in oklab, var(--color-primary) 35%, transparent);
|
||||
}
|
||||
.profile-sex-icon {
|
||||
display: flex;
|
||||
color: var(--color-text-secondary);
|
||||
.setup-banner-icon {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
flex-shrink: 0;
|
||||
border-radius: 50%;
|
||||
background: color-mix(in oklab, var(--color-primary) 22%, transparent);
|
||||
color: var(--color-primary);
|
||||
}
|
||||
.profile-summary {
|
||||
.setup-banner-text {
|
||||
flex: 1;
|
||||
font-size: 0.85rem;
|
||||
line-height: 1.35;
|
||||
color: var(--color-text-primary);
|
||||
}
|
||||
.setup-banner-cta {
|
||||
flex-shrink: 0;
|
||||
padding: 0.4rem 0.85rem;
|
||||
background: var(--color-primary);
|
||||
color: var(--color-text-on-primary);
|
||||
border: none;
|
||||
border-radius: var(--radius-pill);
|
||||
font-weight: 600;
|
||||
font-size: 0.8rem;
|
||||
color: var(--color-text-secondary);
|
||||
letter-spacing: 0.02em;
|
||||
cursor: pointer;
|
||||
transition: background var(--transition-normal);
|
||||
}
|
||||
.profile-edit-btn {
|
||||
.setup-banner-cta:hover {
|
||||
background: var(--color-primary-hover);
|
||||
}
|
||||
.setup-banner-dismiss {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0.25rem;
|
||||
justify-content: center;
|
||||
width: 1.6rem;
|
||||
height: 1.6rem;
|
||||
padding: 0;
|
||||
flex-shrink: 0;
|
||||
background: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
border-radius: 50%;
|
||||
color: var(--color-text-tertiary);
|
||||
cursor: pointer;
|
||||
opacity: 0.6;
|
||||
transition: opacity 0.15s;
|
||||
transition: opacity var(--transition-fast, 120ms), background var(--transition-fast, 120ms);
|
||||
}
|
||||
.profile-edit-btn:hover {
|
||||
.setup-banner-dismiss:hover {
|
||||
opacity: 1;
|
||||
color: var(--color-text-secondary);
|
||||
background: color-mix(in oklab, var(--color-text-primary) 8%, transparent);
|
||||
}
|
||||
@media (max-width: 480px) {
|
||||
.setup-banner {
|
||||
flex-wrap: wrap;
|
||||
padding-right: 2.25rem;
|
||||
gap: 0.5rem 0.75rem;
|
||||
}
|
||||
.setup-banner-text {
|
||||
flex-basis: calc(100% - 2.75rem);
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
.setup-banner-cta {
|
||||
margin-left: auto;
|
||||
}
|
||||
.setup-banner-dismiss {
|
||||
position: absolute;
|
||||
top: 0.4rem;
|
||||
right: 0.4rem;
|
||||
}
|
||||
}
|
||||
|
||||
.profile-fields {
|
||||
position: relative;
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
align-items: flex-end;
|
||||
justify-content: flex-end;
|
||||
flex-wrap: wrap;
|
||||
padding: 0.75rem 0.9rem 0.9rem;
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-lg);
|
||||
background: var(--color-surface);
|
||||
}
|
||||
.profile-close-btn {
|
||||
position: absolute;
|
||||
top: 0.35rem;
|
||||
right: 0.35rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 1.6rem;
|
||||
height: 1.6rem;
|
||||
padding: 0;
|
||||
background: none;
|
||||
border: none;
|
||||
border-radius: 50%;
|
||||
color: var(--color-text-tertiary);
|
||||
cursor: pointer;
|
||||
opacity: 0.7;
|
||||
transition: opacity var(--transition-fast, 120ms), background var(--transition-fast, 120ms);
|
||||
}
|
||||
.profile-close-btn:hover {
|
||||
opacity: 1;
|
||||
background: color-mix(in oklab, var(--color-text-primary) 8%, transparent);
|
||||
}
|
||||
|
||||
/* Footer: slim "Edit profile" link */
|
||||
.page-footer-actions {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding-top: 0.5rem;
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
.edit-profile-link {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.35rem;
|
||||
padding: 0.4rem 0.75rem;
|
||||
background: none;
|
||||
border: none;
|
||||
color: var(--color-text-tertiary);
|
||||
font-size: 0.8rem;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
border-radius: var(--radius-pill);
|
||||
transition: color var(--transition-fast, 120ms), background var(--transition-fast, 120ms);
|
||||
}
|
||||
.edit-profile-link:hover {
|
||||
color: var(--color-text-primary);
|
||||
background: color-mix(in oklab, var(--color-text-primary) 6%, transparent);
|
||||
}
|
||||
.sex-pills {
|
||||
display: flex;
|
||||
|
||||
@@ -138,7 +138,7 @@
|
||||
<svelte:head><title>{t('stats_title', lang)} - Bocken</title></svelte:head>
|
||||
|
||||
<div class="stats-page">
|
||||
<h1>{t('stats_title', lang)}</h1>
|
||||
<h1 class="sr-only">{t('stats_title', lang)}</h1>
|
||||
|
||||
<div class="lifetime-cards">
|
||||
<div class="lifetime-card workouts">
|
||||
@@ -364,11 +364,6 @@
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
}
|
||||
h1 {
|
||||
margin: 0;
|
||||
font-size: 1.4rem;
|
||||
}
|
||||
|
||||
.lifetime-cards {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
|
||||
Reference in New Issue
Block a user