📱 (note)

src/components/StackedNote.vue

@@ -1,7 +1,11 @@
 <template>
   <div
     class="stacked-note"
-    :class="{ [className]: true, overlay: displayNoteOverlay }"
+    :class="{
+      [className]: true,
+      overlay: displayNoteOverlay,
+      [`note-${sha}`]: true
+    }"
   >
     <div class="title-stacked-note" :class="titleClassName">
       <a @click.prevent="focus">
@@ -75,8 +79,6 @@ $border-color: rgba(18, 19, 58, 0.2);
 
 .title-stacked-note {
   position: sticky;
-  transform-origin: 0 0;
-  transform: rotate(90deg);
   top: 0;
 
   a {
@@ -86,8 +88,17 @@ $border-color: rgba(18, 19, 58, 0.2);
 }
 
 @media screen and (max-width: 768px) {
-  .title-stacked-note {
-    display: none;
+  .stacked-note {
+    padding: 0 1.5rem;
+
+    .title-stacked-note {
+      padding: 1rem 0 0;
+      background-color: white;
+    }
+
+    section {
+      padding: 1rem 0;
+    }
   }
 }
 
@@ -96,5 +107,11 @@ $border-color: rgba(18, 19, 58, 0.2);
     border-top: 0;
     border-left: 1px solid $border-color;
   }
+
+  .title-stacked-note {
+    padding: 0 1rem;
+    transform-origin: 0 0;
+    transform: rotate(90deg);
+  }
 }
 </style>

src/components/WelcomeWorld.vue

@@ -71,7 +71,7 @@
           target="_blank"
           rel="noopener noreferrer"
           >Andy Matuschak's website</a
-        >. May "Lite note" be useful to everyone.
+        >.
       </p>
 
       <p>
@@ -101,6 +101,7 @@ export default defineComponent({
 
 <style lang="scss" scoped>
 .welcome-world {
+  padding: 1rem;
   margin: auto;
   display: flex;
   flex-direction: column;