20256426/Map-Jurnal
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

changed the location of the travel summary to left

Browse Source
This commit is contained in:
haerikimmm
2026-06-11 13:30:18 +09:00
parent 0848418453
commit 326b52b858
8 changed files with 204 additions and 220 deletions
Download Patch File Download Diff File Expand all files Collapse all files

83
src/app.css
View File

@@ -2,24 +2,25 @@
/* ── Color tokens ─────────────────────────────────────────── */ /* ── Color tokens ─────────────────────────────────────────── */
:root { :root {
/* Indigo & Lavender palette */ --accent: #7c3aed; /* indigo-600 */
--accent: #6366f1; /* indigo-500 */ --accent-dark: #5b21b6;
--accent-dark: #4f46e5; /* indigo-600 */ --accent-light: #a78bfa;
--accent-light: #818cf8; /* indigo-400 */ --accent-bg: rgba(124, 58, 237, 0.07);
--accent-bg: rgba(99, 102, 241, 0.08); --accent-border: rgba(124, 58, 237, 0.2);
--accent-border: rgba(99, 102, 241, 0.35);
--lavender: #c4b5fd; /* violet-300 — lavender highlight */ --lavender: #a78bfa;
--lavender-bg: rgba(196, 181, 253, 0.15); --lavender-bg: rgba(167, 139, 250, 0.1);
/* Neutrals */ /* Light-first neutrals */
--text: #6b7280; /* body copy */ --text: #52525b; /* zinc-600 */
--text-h: #1e1b4b; /* headings — deep indigo-950 */ --text-h: #18181b; /* zinc-900 */
--text-sub: #9ca3af; /* captions / secondary */ --text-sub: #a1a1aa; /* zinc-400 */
--bg: #fafafe; /* faint indigo tint on white */ --bg: #ffffff; /* white */
--bg-raised: #ffffff; --bg-raised: #fafafa; /* off-white */
--border: #e0e7ff; /* indigo-100 */ --bg-subtle: #f4f4f5; /* zinc-100 */
--shadow: rgba(99, 102, 241, 0.12) 0 4px 24px -4px; --border: #e4e4e7; /* zinc-200 */
--border-bright: #d4d4d8; /* zinc-300 */
--shadow: 0 4px 24px rgba(0,0,0,0.08);
/* Typography */ /* Typography */
--sans: 'Bricolage Grotesque', system-ui, sans-serif; --sans: 'Bricolage Grotesque', system-ui, sans-serif;
@@ -32,13 +33,13 @@
--text-base: 14px; --text-base: 14px;
--text-md: 16px; --text-md: 16px;
--text-lg: 20px; --text-lg: 20px;
--text-xl: 26px; --text-xl: 28px;
--text-2xl: 32px; --text-2xl: 40px;
font-family: var(--sans); font-family: var(--sans);
font-size: var(--text-base); font-size: var(--text-base);
line-height: 1.6; line-height: 1.6;
font-weight: 400; font-weight: 300;
letter-spacing: 0.01em; letter-spacing: 0.01em;
color: var(--text); color: var(--text);
background: var(--bg); background: var(--bg);
@@ -48,28 +49,6 @@
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
} }
/* ── Dark mode ────────────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
:root {
--accent: #818cf8;
--accent-dark: #6366f1;
--accent-light: #a5b4fc;
--accent-bg: rgba(129, 140, 248, 0.12);
--accent-border: rgba(129, 140, 248, 0.35);
--lavender: #a78bfa;
--lavender-bg: rgba(167, 139, 250, 0.12);
--text: #9ca3af;
--text-h: #e0e7ff;
--text-sub: #6b7280;
--bg: #0f0e1a;
--bg-raised: #16152a;
--border: #2e2a5e;
--shadow: rgba(0, 0, 0, 0.5) 0 4px 24px -4px;
}
}
/* ── Reset ────────────────────────────────────────────────── */ /* ── Reset ────────────────────────────────────────────────── */
*, *::before, *::after { *, *::before, *::after {
box-sizing: border-box; box-sizing: border-box;
@@ -87,16 +66,16 @@ html, body, #app {
h1 { h1 {
font-size: var(--text-2xl); font-size: var(--text-2xl);
font-weight: 400; font-weight: 400;
line-height: 1.15; line-height: 1.1;
letter-spacing: -0.6px; letter-spacing: -1px;
color: var(--text-h); color: var(--text-h);
} }
h2 { h2 {
font-size: var(--text-xl); font-size: var(--text-xl);
font-weight: 400; font-weight: 400;
line-height: 1.2; line-height: 1.15;
letter-spacing: -0.4px; letter-spacing: -0.5px;
color: var(--text-h); color: var(--text-h);
} }
@@ -113,16 +92,4 @@ h4, h5, h6 {
color: var(--text-h); color: var(--text-h);
} }
p { p { margin: 0; color: var(--text); }
margin: 0;
color: var(--text);
}
/* Eyebrow / label style */
.label-xs {
font-size: var(--text-xs);
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--accent);
}

7
src/lib/layout/Footer.svelte
View File

@@ -8,7 +8,7 @@
<style> <style>
.footer { .footer {
height: 36px; height: 40px;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@@ -17,8 +17,9 @@
font-weight: 300; font-weight: 300;
color: var(--text-sub); color: var(--text-sub);
border-top: 1px solid var(--border); border-top: 1px solid var(--border);
background: var(--bg-raised); background: var(--bg);
flex-shrink: 0; flex-shrink: 0;
letter-spacing: 0.02em; letter-spacing: 0.06em;
text-transform: uppercase;
} }
</style> </style>

29
src/lib/layout/TopBar.svelte
View File

@@ -3,7 +3,7 @@
</script> </script>
<nav class="topbar"> <nav class="topbar">
<span class="logo">🗺 MapJournal</span> <span class="logo">Map Journal</span>
<div class="nav-links"> <div class="nav-links">
<button class="nav-btn" class:active={screen === 'worldmap'} onclick={() => onNavigate('worldmap')}>Map</button> <button class="nav-btn" class:active={screen === 'worldmap'} onclick={() => onNavigate('worldmap')}>Map</button>
<button class="nav-btn" class:active={screen === 'timeline'} onclick={() => onNavigate('timeline')}>Journal</button> <button class="nav-btn" class:active={screen === 'timeline'} onclick={() => onNavigate('timeline')}>Journal</button>
@@ -15,19 +15,20 @@
position: relative; position: relative;
display: flex; display: flex;
align-items: center; align-items: center;
padding: 0 24px; padding: 0 32px;
height: 52px; height: 52px;
border-bottom: 1px solid var(--border); border-bottom: 1px solid var(--border);
background: var(--bg-raised); background: var(--bg);
flex-shrink: 0; flex-shrink: 0;
z-index: 10;
} }
.logo { .logo {
font-family: var(--heading); font-family: var(--heading);
font-size: 15px; font-size: 14px;
font-weight: 400; font-weight: 400;
color: var(--text-h); color: var(--text-h);
letter-spacing: -0.4px; letter-spacing: 0.01em;
} }
.nav-links { .nav-links {
@@ -36,8 +37,9 @@
position: absolute; position: absolute;
left: 50%; left: 50%;
transform: translateX(-50%); transform: translateX(-50%);
background: var(--accent-bg); background: var(--bg-subtle);
border-radius: 10px; border: 1px solid var(--border);
border-radius: 8px;
padding: 3px; padding: 3px;
} }
@@ -45,18 +47,19 @@
font-family: var(--sans); font-family: var(--sans);
font-size: 13px; font-size: 13px;
font-weight: 300; font-weight: 300;
padding: 5px 16px; padding: 4px 18px;
border-radius: 8px; border-radius: 6px;
border: none; border: none;
background: none; background: none;
color: var(--text); color: var(--text);
cursor: pointer; cursor: pointer;
transition: background 0.15s, color 0.15s; transition: background 0.15s, color 0.15s;
letter-spacing: 0.01em;
} }
.nav-btn:hover { color: var(--accent); } .nav-btn:hover { color: var(--text-h); }
.nav-btn.active { .nav-btn.active {
background: var(--bg-raised); background: var(--bg);
color: var(--accent-dark); color: var(--text-h);
box-shadow: 0 1px 4px rgba(99,102,241,0.15); box-shadow: 0 1px 4px rgba(0,0,0,0.08);
} }
</style> </style>

8
src/lib/timeline/JournalDetail.svelte
View File

@@ -71,9 +71,9 @@
<style> <style>
.detail-page { .detail-page {
max-width: 680px; max-width: 720px;
margin: 0 auto; margin: 0 auto;
padding: 32px 24px 80px; padding: 48px 40px 100px;
font-family: var(--sans, system-ui, sans-serif); font-family: var(--sans, system-ui, sans-serif);
} }
@@ -115,8 +115,8 @@
border-radius: 20px; border-radius: 20px;
} }
.loc-badge { background: var(--accent-bg); color: var(--accent); } .loc-badge { background: var(--accent-bg); color: var(--accent); }
.trip-badge--solo { background: rgba(245,158,11,0.12); color: #b45309; } .trip-badge--solo { background: rgba(245,158,11,0.1); color: #92400e; }
.trip-badge--friends { background: rgba(59,130,246,0.12); color: #1d4ed8; } .trip-badge--friends { background: var(--accent-bg); color: var(--accent); }
.detail-title { .detail-title {
font-size: 28px; font-size: 28px;

117
src/lib/timeline/TimelineCard.svelte
View File

@@ -8,7 +8,7 @@
}); });
} }
let mainPhoto = $derived(entry.photos[0] ?? null); let mainPhoto = $derived(entry.photos[0] ?? null);
let thumbPhotos = $derived(entry.photos.slice(1, 4)); let thumbPhotos = $derived(entry.photos.slice(1, 4));
let extraCount = $derived(entry.photos.length > 4 ? entry.photos.length - 4 : 0); let extraCount = $derived(entry.photos.length > 4 ? entry.photos.length - 4 : 0);
</script> </script>
@@ -20,20 +20,18 @@
onclick={onClick} onclick={onClick}
onkeydown={(e) => e.key === 'Enter' && onClick()}> onkeydown={(e) => e.key === 'Enter' && onClick()}>
<!-- Photo grid -->
<div class="photo-grid" class:has-thumbs={thumbPhotos.length > 0}> <div class="photo-grid" class:has-thumbs={thumbPhotos.length > 0}>
<div class="photo-main"> <div class="photo-main">
{#if mainPhoto} {#if mainPhoto}
<img src={mainPhoto} alt="photo 1" loading="lazy" /> <img src={mainPhoto} alt="" loading="lazy" />
{:else} {:else}
<div class="photo-placeholder"></div> <div class="photo-placeholder"></div>
{/if} {/if}
<!-- Overlay -->
<div class="overlay"> <div class="overlay">
<div class="overlay-top"> <div class="overlay-top">
<span class="trip-badge trip-badge--{entry.tripType}"> <span class="trip-badge trip-badge--{entry.tripType}">
{entry.tripType === 'solo' ? 'Solo' : 'With Friends'} {entry.tripType === 'solo' ? 'Solo' : 'Friends'}
</span> </span>
</div> </div>
<div class="overlay-bottom"> <div class="overlay-bottom">
@@ -48,7 +46,7 @@
<div class="photo-thumbs"> <div class="photo-thumbs">
{#each thumbPhotos as photo, i} {#each thumbPhotos as photo, i}
<div class="photo-thumb"> <div class="photo-thumb">
<img src={photo} alt="photo {i + 2}" loading="lazy" /> <img src={photo} alt="" loading="lazy" />
{#if i === 2 && extraCount > 0} {#if i === 2 && extraCount > 0}
<div class="extra-overlay">+{extraCount}</div> <div class="extra-overlay">+{extraCount}</div>
{/if} {/if}
@@ -64,50 +62,76 @@
<style> <style>
.v-item { .v-item {
display: flex; display: flex;
gap: 16px; gap: 14px;
align-items: flex-start; align-items: flex-start;
padding-bottom: 20px; padding-bottom: 24px;
position: relative;
} }
.v-item:last-child { padding-bottom: 0; } .v-item:last-child { padding-bottom: 0; }
.v-item:not(:last-child)::after {
content: '';
position: absolute;
left: 4px;
top: 30px;
bottom: 0;
width: 1px;
background: var(--border);
}
.v-dot { .v-dot {
flex-shrink: 0; flex-shrink: 0;
width: 10px; width: 9px;
height: 10px; height: 9px;
border-radius: 50%; border-radius: 50%;
background: var(--accent); background: var(--bg);
margin-top: 22px; border: 1.5px solid var(--accent);
margin-top: 20px;
z-index: 1; z-index: 1;
} }
/* Card */ /* ── Card ── */
.entry-card { .entry-card {
flex: 1; flex: 1;
min-width: 0; min-width: 0;
border-radius: 16px; border-radius: 14px;
overflow: hidden; overflow: hidden;
cursor: pointer; cursor: pointer;
border: 1px solid var(--border);
box-shadow: var(--shadow);
background: var(--bg-raised);
transition: box-shadow 0.2s, transform 0.15s; transition: box-shadow 0.2s, transform 0.15s;
box-shadow: 0 2px 12px rgba(99,102,241,0.08);
} }
.entry-card:hover { .entry-card:hover {
box-shadow: var(--shadow); box-shadow: 0 8px 32px rgba(0,0,0,0.12);
transform: translateY(-2px); transform: translateY(-2px);
} }
/* Photo grid */ /* ── Photo grid — fluid, breakpoint via container width ── */
.photo-grid { .photo-grid {
display: grid; display: grid;
grid-template-columns: 1fr; grid-template-columns: 1fr;
height: 220px; /* height adapts: taller when single photo */
background: #111; height: 200px;
background: var(--bg-subtle);
} }
.photo-grid.has-thumbs { .photo-grid.has-thumbs {
grid-template-columns: 2fr 1fr; grid-template-columns: 2fr 1fr;
gap: 2px; gap: 2px;
height: 200px;
} }
/* Main photo + overlay */ /* Collapse to single column on narrow cards (< 340px) */
@container card (max-width: 340px) {
.photo-grid.has-thumbs {
grid-template-columns: 1fr;
height: 180px;
}
.photo-thumbs { display: none; }
}
.entry-card { container-type: inline-size; container-name: card; }
/* ── Main photo ── */
.photo-main { .photo-main {
position: relative; position: relative;
overflow: hidden; overflow: hidden;
@@ -122,68 +146,61 @@
} }
.photo-placeholder { background: var(--accent-bg); } .photo-placeholder { background: var(--accent-bg); }
/* ── Overlay gradient ── */
.overlay { .overlay {
position: absolute; position: absolute;
inset: 0; inset: 0;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: space-between; justify-content: space-between;
padding: 14px; padding: 12px;
background: linear-gradient( background: linear-gradient(
to bottom, to bottom,
rgba(0,0,0,0.28) 0%, rgba(0,0,0,0.22) 0%,
transparent 35%, transparent 35%,
transparent 50%, transparent 50%,
rgba(0,0,0,0.65) 100% rgba(0,0,0,0.6) 100%
); );
} }
.overlay-top { .overlay-top { display: flex; justify-content: flex-end; }
display: flex; .overlay-bottom { display: flex; flex-direction: column; gap: 2px; }
justify-content: flex-end;
}
.overlay-bottom {
display: flex;
flex-direction: column;
gap: 2px;
}
.city { .city {
font-size: 12px; font-size: 12px;
font-weight: 300; font-weight: 300;
color: rgba(255,255,255,0.75); color: rgba(255,255,255,0.8);
letter-spacing: 0.04em; letter-spacing: 0.04em;
} }
.country { .country {
font-size: 22px; font-size: 20px;
font-weight: 400; font-weight: 400;
color: #fff; color: #fff;
letter-spacing: -0.5px; letter-spacing: -0.3px;
line-height: 1.1; line-height: 1.1;
text-shadow: 0 1px 8px rgba(0,0,0,0.4); text-shadow: 0 1px 6px rgba(0,0,0,0.35);
} }
.meta { .meta {
font-size: 12px; font-size: 11px;
font-weight: 300; font-weight: 300;
color: rgba(255,255,255,0.7); color: rgba(255,255,255,0.7);
margin-top: 4px; margin-top: 3px;
letter-spacing: 0.02em;
} }
/* Badges */ /* ── Trip badge ── */
.trip-badge { .trip-badge {
font-size: 11px; font-size: 11px;
font-weight: 400; font-weight: 300;
padding: 3px 10px; padding: 2px 9px;
border-radius: 20px; border-radius: 20px;
backdrop-filter: blur(6px); backdrop-filter: blur(8px);
letter-spacing: 0.04em;
} }
.trip-badge--solo { background: rgba(245,158,11,0.75); color: #fff; } .trip-badge--solo { background: rgba(245,158,11,0.7); color: #fff; }
.trip-badge--friends { background: rgba(99,102,241,0.75); color: #fff; } .trip-badge--friends { background: rgba(124,58,237,0.7); color: #fff; }
/* Thumbs */ /* ── Thumbs ── */
.photo-thumbs { .photo-thumbs {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@@ -205,11 +222,11 @@
.extra-overlay { .extra-overlay {
position: absolute; position: absolute;
inset: 0; inset: 0;
background: rgba(0,0,0,0.5); background: rgba(0,0,0,0.45);
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
font-size: 16px; font-size: 15px;
font-weight: 400; font-weight: 400;
color: #fff; color: #fff;
} }

61
src/lib/timeline/TimelineToolbar.svelte
View File

@@ -1,22 +1,17 @@
<script> <script>
const sortOptions = [ const sortOptions = [
{ value: 'date-desc', label: 'Newest First' }, { value: 'date-desc', label: 'Newest first' },
{ value: 'date-asc', label: 'Oldest First' }, { value: 'date-asc', label: 'Oldest first' },
{ value: 'country-asc', label: 'Country A → Z' }, { value: 'country-asc', label: 'Country A → Z' },
{ value: 'country-desc', label: 'Country Z → A' }, { value: 'country-desc', label: 'Country Z → A' },
]; ];
/** @type {{ sortKey: string, onSort: (key: string) => void }} */
let { sortKey, onSort } = $props(); let { sortKey, onSort } = $props();
</script> </script>
<header class="toolbar"> <header class="toolbar">
<div class="title-block"> <h1 class="page-title">My Journey</h1>
<p class="eyebrow">Travel Journal</p>
<h1 class="page-title">My Journey</h1>
</div>
<div class="sort-control"> <div class="sort-control">
<label for="sort-select">Sort</label>
<select id="sort-select" onchange={(e) => onSort(e.currentTarget.value)}> <select id="sort-select" onchange={(e) => onSort(e.currentTarget.value)}>
{#each sortOptions as opt} {#each sortOptions as opt}
<option value={opt.value} selected={opt.value === sortKey}>{opt.label}</option> <option value={opt.value} selected={opt.value === sortKey}>{opt.label}</option>
@@ -30,48 +25,38 @@
display: flex; display: flex;
align-items: flex-end; align-items: flex-end;
justify-content: space-between; justify-content: space-between;
flex-wrap: wrap; gap: 16px;
gap: 20px; margin-bottom: 32px;
margin-bottom: 48px;
padding-bottom: 24px; padding-bottom: 24px;
border-bottom: 1px solid var(--border, #e5e4e7); border-bottom: 1px solid var(--border);
}
.eyebrow {
font-size: 11px;
letter-spacing: 3px;
text-transform: uppercase;
color: var(--accent);
margin: 0 0 6px;
} }
.page-title { .page-title {
font-size: 32px; font-size: var(--text-xl);
font-weight: 400; font-weight: 400;
color: var(--text-h, #08060d); color: var(--text-h);
letter-spacing: -0.5px;
margin: 0; margin: 0;
letter-spacing: -0.8px;
} }
.sort-control { display: flex; align-items: center; gap: 8px; }
.sort-control label { font-size: 13px; color: var(--text, #6b6375); }
select { select {
font-size: 13px; font-family: var(--sans);
padding: 7px 28px 7px 10px; font-size: var(--text-xs);
border: 1px solid var(--border, #e5e4e7); font-weight: 300;
border-radius: 8px; letter-spacing: 0.06em;
background: var(--bg, #fff); text-transform: uppercase;
color: var(--text-h, #08060d); padding: 6px 28px 6px 12px;
border: 1px solid var(--border);
border-radius: 6px;
background: var(--bg-subtle);
color: var(--text);
cursor: pointer; cursor: pointer;
appearance: none; appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236b6375' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%2352525b' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: right 10px center; background-position: right 10px center;
transition: border-color 0.15s, color 0.15s;
} }
select:focus { outline: 2px solid var(--accent); outline-offset: 2px; } select:hover { border-color: var(--border-bright); color: var(--text-h); }
select:focus { outline: 1px solid var(--accent-border); outline-offset: 2px; }
@media (max-width: 600px) {
.page-title { font-size: 26px; }
}
</style> </style>

113
src/lib/timeline/TimelineView.svelte
View File

@@ -37,37 +37,37 @@
<div class="journal-page"> <div class="journal-page">
{#if selected} {#if selected}
<!-- Detail view: full width, scrollable -->
<div class="detail-scroll"> <div class="detail-scroll">
<JournalDetail entry={selected} onBack={() => (selected = null)} /> <JournalDetail entry={selected} onBack={() => (selected = null)} />
</div> </div>
{:else} {:else}
<!-- Two-column layout -->
<aside class="left-panel"> <aside class="left-panel">
<JournalSummary entries={sortedEntries} /> <JournalSummary entries={sortedEntries} />
</aside> </aside>
<div class="right-panel"> <div class="right-panel">
<TimelineToolbar {sortKey} onSort={(k) => (sortKey = k)} /> <div class="right-inner">
<TimelineToolbar {sortKey} onSort={(k) => (sortKey = k)} />
{#if sortedEntries.length === 0} {#if sortedEntries.length === 0}
<p class="empty">No journal entries yet.</p> <p class="empty">No journal entries yet.</p>
{:else} {:else}
<ol class="v-list"> <ol class="v-list">
{#each sortedEntries as entry, i (entry.id)} {#each sortedEntries as entry, i (entry.id)}
{#if i === 0 || getYear(entry.date) !== getYear(sortedEntries[i - 1].date)} {#if i === 0 || getYear(entry.date) !== getYear(sortedEntries[i - 1].date)}
<li class="year-marker" aria-hidden="true"> <li class="year-marker" aria-hidden="true">
<span class="year-label">{getYear(entry.date)}</span> <span class="year-label">{getYear(entry.date)}</span>
</li> </li>
{/if} {/if}
<TimelineCard {entry} onClick={() => (selected = entry)} /> <TimelineCard {entry} onClick={() => (selected = entry)} />
{/each} {/each}
</ol> </ol>
{/if} {/if}
<footer class="page-footer"> <footer class="page-footer">
{sortedEntries.length} {sortedEntries.length === 1 ? 'entry' : 'entries'} {sortedEntries.length} {sortedEntries.length === 1 ? 'entry' : 'entries'}
</footer> </footer>
</div>
</div> </div>
{/if} {/if}
@@ -83,28 +83,49 @@
overflow: hidden; overflow: hidden;
} }
/* ── Left: summary panel ── */ /* ── Left panel ── */
.left-panel { .left-panel {
width: 280px; width: 260px;
flex-shrink: 0; flex-shrink: 0;
overflow-y: auto; overflow-y: auto;
border-right: 1px solid var(--border); border-right: 1px solid var(--border);
background: var(--bg); background: var(--bg-raised);
padding: 32px 20px; padding: 40px 28px;
} }
/* ── Right: timeline ── */ /* ── Right panel ── */
.right-panel { .right-panel {
flex: 1; flex: 1;
min-width: 0; min-width: 0;
overflow-y: auto; overflow-y: auto;
padding: 32px 32px 64px; background: var(--bg);
}
/* Inner container with max-width + generous side padding */
.right-inner {
max-width: 640px;
margin: 0 auto;
padding: 40px 48px 80px;
}
/* ── Responsive: narrow viewport ── */
@media (max-width: 700px) {
.journal-page { flex-direction: column; overflow-y: auto; overflow-x: hidden; }
.left-panel {
width: 100%;
border-right: none;
border-bottom: 1px solid var(--border);
padding: 24px 20px;
}
.right-panel { overflow-y: unset; }
.right-inner { padding: 24px 20px 60px; }
} }
/* ── Detail view ── */ /* ── Detail view ── */
.detail-scroll { .detail-scroll {
flex: 1; flex: 1;
overflow-y: auto; overflow-y: auto;
background: var(--bg);
} }
/* ── Timeline list ── */ /* ── Timeline list ── */
@@ -112,44 +133,34 @@
list-style: none; list-style: none;
padding: 0; padding: 0;
margin: 0; margin: 0;
position: relative; display: flex;
} flex-direction: column;
.v-list::before { gap: 0;
content: '';
position: absolute;
left: 4px;
top: 6px;
bottom: 6px;
width: 2px;
background: var(--border);
border-radius: 1px;
} }
/* Year marker */ /* Year marker */
.year-marker { .year-marker {
display: flex; padding: 32px 0 16px;
align-items: center;
padding-bottom: 20px;
} }
.year-label { .year-label {
font-size: var(--text-2xl); font-size: 11px;
font-weight: 400; font-weight: 400;
color: var(--accent); letter-spacing: 0.12em;
letter-spacing: -1px; text-transform: uppercase;
line-height: 1; color: var(--text-sub);
position: relative;
z-index: 1;
padding-left: 24px;
} }
.page-footer { .page-footer {
margin-top: 40px; margin-top: 56px;
text-align: center; text-align: center;
font-size: 13px; font-size: 11px;
color: var(--text); font-weight: 300;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--text-sub);
padding-top: 24px; padding-top: 24px;
border-top: 1px solid var(--border); border-top: 1px solid var(--border);
} }
.empty { text-align: center; color: var(--text); padding: 80px 0; } .empty { text-align: center; color: var(--text-sub); padding: 80px 0; }
</style> </style>

6
src/lib/world-map/StatsPanel.svelte
View File

@@ -99,12 +99,12 @@
<text x={seg.lx} y={seg.ly} text-anchor="middle" dominant-baseline="middle" class="donut-label" style="font-size: {seg.angle < 20 ? 12 : 15}px">{seg.cont}</text> <text x={seg.lx} y={seg.ly} text-anchor="middle" dominant-baseline="middle" class="donut-label" style="font-size: {seg.angle < 20 ? 12 : 15}px">{seg.cont}</text>
</g> </g>
{/each} {/each}
<circle cx="90" cy="90" r="30" fill="#f8fafc" /> <circle cx="90" cy="90" r="30" fill="var(--bg-raised)" />
</svg> </svg>
{:else} {:else}
<svg viewBox="0 0 180 180" class="donut-svg"> <svg viewBox="0 0 180 180" class="donut-svg">
<circle cx="90" cy="90" r="65" fill="#e2e8f0" /> <circle cx="90" cy="90" r="65" fill="var(--border)" />
<circle cx="90" cy="90" r="30" fill="#f8fafc" /> <circle cx="90" cy="90" r="30" fill="var(--bg-raised)" />
</svg> </svg>
{/if} {/if}
</div> </div>