💄 (stacked note) titles are now sticky

src/components/StackedNote.vue

@@ -60,25 +60,28 @@ export default defineComponent({
 $border-color: rgba(18, 19, 58, 0.2);
 
 .stacked-note {
-  padding: 1rem 3rem;
+  padding: 1rem 1.5rem;
 
   transition: cubic-bezier(0.39, 0.575, 0.565, 1) 0.3s;
 
   &.overlay {
     box-shadow: -3px 0 0.4em $border-color;
   }
+
+  section {
+    padding: 0 1rem;
+  }
 }
 
 .title-stacked-note {
-  position: absolute;
+  position: sticky;
   transform-origin: 0 0;
   transform: rotate(90deg);
-  top: 1rem;
+  top: 0;
-  left: 1.5rem;
-  direction: rtl;
 
   a {
     color: #363636;
+    display: block;
   }
 }
 

src/hooks/useNoteOverlay.hook.ts

@@ -3,7 +3,7 @@ import { computed, onMounted } from '@vue/runtime-core'
 import { useOverlay } from '@/hooks/useOverlay.hook'
 import { NOTE_WIDTH } from '@/constants/note-width'
 
-const BOOKMARK_WIDTH = 2
+const BOOKMARK_WIDTH = 1.5
 
 export const useNoteOverlay = (className: string, index: number) => {
   const { x } = useOverlay()

src/views/Home.vue

@@ -79,7 +79,7 @@ export default defineComponent({
   .readme {
     position: sticky;
     left: 0;
-    padding: 0 2rem 1rem;
+    padding: 0 1.5rem 1rem;
   }
 
   .note {