timeline: bigger dynamic header

Signed-off-by: Varun Patil <radialapps@gmail.com>

src/components/Timeline.vue

@@ -26,15 +26,18 @@
       @resize="handleResizeWithDelay"
     >
       <template #before>
-        <!-- Show dynamic top matter, name of the view -->
+        <!-- Dynamic top matter, e.g. album or view name -->
         <div class="recycler-before" ref="recyclerBefore">
-          <div class="text" v-show="!$refs.topmatter.type && list.length && viewName && !isMobile()">
-            {{ viewName }}
-          </div>
-
           <!-- Gap for mobile header -->
           <div class="mobile-header-top-gap"></div>
 
+          <!-- Header -->
+          <div class="dynamic-top-matter" v-show="!$refs.topmatter.type && list.length && viewName">
+            <div class="text">
+              {{ viewName }}
+            </div>
+          </div>
+
           <!-- Horizontal scrollable OTD -->
           <OnThisDay
             v-if="routeIsBase && config.enable_top_memories"
@@ -1352,12 +1355,21 @@ export default defineComponent({
 /** Dynamic top matter */
 .recycler-before {
   width: 100%;
-  > .text {
+  > .dynamic-top-matter {
-    font-size: 1.2em;
+    > .text {
-    padding-top: 13px;
+      font-size: 2.5em;
-    padding-left: 8px;
+      padding: 25px 10px 10px 10px;
-    @media (max-width: 768px) {
+      position: relative;
-      padding-left: 48px;
+      display: block;
+      line-height: 1.1em;
+
+      @media (max-width: 768px) {
+        font-size: 1.8em;
+        padding: 15px 12px 7px 12px;
+        html.native & {
+          padding: 25px 18px 7px 18px;
+        }
+      }
     }
   }
 }

src/global.scss

@@ -40,6 +40,11 @@ body {
     .app-navigation-toggle {
       // Move up to align with back button of top matter
       top: 2px;
+      transition: opacity 0.1s ease-in-out;
+      opacity: 0.2; // It's ugly
+      &:hover {
+        opacity: 1;
+      }
     }
   }
 }