Merge branch 'feature/timeline' into main

src/lib/layout/Layout.svelte

@@ -2,11 +2,13 @@
   import TopBar from './TopBar.svelte';
   import Footer from './Footer.svelte';
 
-  let { screen, onNavigate, children } = $props();
+  let { screen, onNavigate, hideTopBar = false, children } = $props();
 </script>
 
-<div class="layout">
-  <TopBar {screen} {onNavigate} />
+<div class="layout" class:no-topbar={hideTopBar}>
+  {#if !hideTopBar}
+    <TopBar {screen} {onNavigate} />
+  {/if}
   <main class="main">
     {@render children()}
   </main>
@@ -21,6 +23,9 @@
     grid-template-rows: auto 1fr auto;
     overflow: hidden;
   }
+  .layout.no-topbar {
+    grid-template-rows: 1fr auto;
+  }
 
   .main {
     overflow: hidden;

src/lib/layout/TopBar.svelte

@@ -20,7 +20,7 @@
 
 <div class="topbar">
   <div class="left">
-    <span class="app-name">Map Journal</span>
+    <span class="app-name">Journi</span>
   </div>
 
   <div class="center">
@@ -85,10 +85,11 @@
 
   .app-name {
     font-family: var(--heading);
-    font-size: 14px;
-    font-weight: 400;
+    font-size: 22px;
+    font-weight: 600;
     color: var(--text-h);
     white-space: nowrap;
+    letter-spacing: -0.5px;
   }
 
   .center {
@@ -133,7 +134,6 @@
     color: var(--text);
     letter-spacing: 0.01em;
   }
-
   .right {
     display: flex;
     align-items: center;