From 2aff45ada5f0463bd22291cb484f9d8ad47c2474 Mon Sep 17 00:00:00 2001
From: Julien Calixte <julienc@bam.tech>
Date: Sun, 14 Mar 2021 23:20:41 +0100
Subject: [PATCH] :lipstick: (stacked note) titles are now sticky

---
 src/components/StackedNote.vue   | 13 ++++++++-----
 src/hooks/useNoteOverlay.hook.ts |  2 +-
 src/views/Home.vue               |  2 +-
 3 files changed, 10 insertions(+), 7 deletions(-)

diff --git a/src/components/StackedNote.vue b/src/components/StackedNote.vue
index a72c7a4..db812a7 100644
--- a/src/components/StackedNote.vue
+++ b/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;
-  left: 1.5rem;
-  direction: rtl;
+  top: 0;
 
   a {
     color: #363636;
+    display: block;
   }
 }
 
diff --git a/src/hooks/useNoteOverlay.hook.ts b/src/hooks/useNoteOverlay.hook.ts
index 82e69de..aedfd75 100644
--- a/src/hooks/useNoteOverlay.hook.ts
+++ b/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()
diff --git a/src/views/Home.vue b/src/views/Home.vue
index a53f5ed..8fe042b 100644
--- a/src/views/Home.vue
+++ b/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 {