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 {