style(notes): distinguish scrollable column from canvas

Tint the surrounding viewport and add a soft right-edge shadow on
the leftmost note so users can see where scrolling actually applies.

src/components/FluxNote.vue

@@ -212,16 +212,14 @@ $header-height: 40px;
     flex-direction: column;
     overflow-y: auto;
 
-    &:not(:first-child) {
-      border-top: 1px solid rgba(18, 19, 58, 0.2);
-    }
-
     .title {
       text-align: left;
     }
   }
 
   @media screen and (min-width: 769px) {
+    background-color: var(--note-canvas-bg);
+
     .repo-title-breadcrumb {
       padding: 0.5rem 1rem 0;
       transform-origin: 0 0;
@@ -238,6 +236,11 @@ $header-height: 40px;
     .note {
       min-width: var(--note-width);
       max-width: var(--note-width);
+      background-color: var(--color-base-100);
+    }
+
+    .readme {
+      box-shadow: var(--note-sheet-shadow);
     }
   }
 }

src/styles/app.css

@@ -13,6 +13,8 @@
   --light-link: lighten(#445fb9, 45%);
   --background-color: #ffffff;
   --note-width: 500px;
+  --note-canvas-bg: color-mix(in oklch, var(--color-base-100) 60%, var(--color-base-200));
+  --note-sheet-shadow: 1px 0 8px rgb(0 0 0 / 6%);
   --color-contrast-content: var(--color-success);
   --notyf-margin: 0.5rem;
 }

src/views/PublicNoteView.vue

@@ -248,6 +248,8 @@ watch(
   }
 
   @media screen and (min-width: 769px) {
+    background-color: var(--note-canvas-bg);
+
     .repo-title-breadcrumb {
       padding: 0.5rem 1rem 0;
       transform-origin: 0 0;
@@ -265,6 +267,11 @@ watch(
     .note {
       min-width: var(--note-width);
       max-width: var(--note-width);
+      background-color: var(--color-base-100);
+    }
+
+    .article {
+      box-shadow: var(--note-sheet-shadow);
     }
   }