ui: enhancements 🧝‍

Author: nooobcoder

components/PageHead.tsx

@@ -28,6 +28,18 @@ export const PageHead: React.FC<
         name='viewport'
         content='width=device-width, initial-scale=1, shrink-to-fit=no'
       />
+      <meta
+        name='theme-color'
+        media='(prefers-color-scheme: light)'
+        content='#fefffe'
+        key='theme-color-light'
+      />
+      <meta
+        name='theme-color'
+        media='(prefers-color-scheme: dark)'
+        content='#2d3439'
+        key='theme-color-dark'
+      />
 
       <meta name='robots' content='index,follow' />
       <meta property='og:type' content='website' />

docker-compose.yaml

@@ -3,4 +3,4 @@ services:
   blog-app:
     build: .
     ports:
-      - "8888:3000"
+      - '8888:3000'

styles/notion.css

@@ -12,6 +12,10 @@
   --notion-header-height: 54px;
 }
 
+.notion-frame {
+  padding: 0;
+}
+
 .notion-page {
   padding-bottom: calc(max(5vh, 32px)) !important;
   line-height: 1.65;
@@ -34,7 +38,7 @@
   margin-bottom: 1em;
 }
 
-.notion-asset-wrapper-video > div,
+.notion-asset-wrapper-video>div,
 .notion-asset-wrapper-video video {
   width: 100% !important;
 }
@@ -98,6 +102,7 @@
 
 /* only target safari */
 @media screen and (-webkit-min-device-pixel-ratio: 0) {
+
   _::-webkit-full-page-media,
   _:future,
   :root,
@@ -180,6 +185,7 @@
 }
 
 @media only screen and (max-width: 1200px) {
+
   .notion-page-cover-wrapper,
   .notion-page-cover-wrapper span,
   .notion-page-cover-wrapper img {
@@ -229,101 +235,83 @@
   background-color: none;
 
   /* light yellow */
-  background-image: linear-gradient(
-    90deg,
-    var(--bg-color),
-    #fdeed2 10.5%,
-    #fde4b5 85.29%,
-    var(--bg-color)
-  );
+  background-image: linear-gradient(90deg,
+      var(--bg-color),
+      #fdeed2 10.5%,
+      #fde4b5 85.29%,
+      var(--bg-color));
 }
 
 .notion-purple_background {
   /* light pink */
-  background-image: linear-gradient(
-    90deg,
-    var(--bg-color),
-    #e4d3fd 10.5%,
-    #d3b6ff 85.29%,
-    var(--bg-color)
-  );
+  background-image: linear-gradient(90deg,
+      var(--bg-color),
+      #e4d3fd 10.5%,
+      #d3b6ff 85.29%,
+      var(--bg-color));
 }
 
 .notion-pink_background {
   /* light pink */
-  background-image: linear-gradient(
-    90deg,
-    var(--bg-color),
-    #ffd2e7 10.5%,
-    #ffadd3 85.29%,
-    var(--bg-color)
-  );
+  background-image: linear-gradient(90deg,
+      var(--bg-color),
+      #ffd2e7 10.5%,
+      #ffadd3 85.29%,
+      var(--bg-color));
 }
 
 .notion-gray_background {
   /* light blue */
-  background-image: linear-gradient(
-    90deg,
-    var(--bg-color),
-    #cfcfcf 10.5%,
-    #a0a0a0 85.29%,
-    var(--bg-color)
-  );
+  background-image: linear-gradient(90deg,
+      var(--bg-color),
+      #cfcfcf 10.5%,
+      #a0a0a0 85.29%,
+      var(--bg-color));
 }
 
 .notion-blue_background {
   /* light blue */
-  background-image: linear-gradient(
-    90deg,
-    var(--bg-color),
-    #d9eafd 10.5%,
-    #b3d6ff 85.29%,
-    var(--bg-color)
-  );
+  background-image: linear-gradient(90deg,
+      var(--bg-color),
+      #d9eafd 10.5%,
+      #b3d6ff 85.29%,
+      var(--bg-color));
 }
 
 .notion-red_background {
   /* light red */
-  background-image: linear-gradient(
-    90deg,
-    var(--bg-color),
-    #ffc3c3 10.5%,
-    #fba6a3 85.29%,
-    var(--bg-color)
-  );
+  background-image: linear-gradient(90deg,
+      var(--bg-color),
+      #ffc3c3 10.5%,
+      #fba6a3 85.29%,
+      var(--bg-color));
 }
 
 .notion-orange_background {
   /* light red */
-  background-image: linear-gradient(
-    90deg,
-    var(--bg-color),
-    #ffe6b1 10.5%,
-    #ffd09b 85.29%,
-    var(--bg-color)
-  );
+  background-image: linear-gradient(90deg,
+      var(--bg-color),
+      #ffe6b1 10.5%,
+      #ffd09b 85.29%,
+      var(--bg-color));
 }
 
 .notion-teal_background {
   /* light green */
-  background-image: linear-gradient(
-    90deg,
-    var(--bg-color),
-    #d4eabc 10.5%,
-    #d2eabc 85.29%,
-    var(--bg-color)
-  );
+  background-image: linear-gradient(90deg,
+      var(--bg-color),
+      #d4eabc 10.5%,
+      #d2eabc 85.29%,
+      var(--bg-color));
 }
 
 .notion-brown_background {
   /* dark blue */
-  background-image: linear-gradient(
-    90deg,
-    var(--bg-color),
-    #cab7ae 10.5%,
-    #b1998d 85.29%,
-    var(--bg-color)
-  );
+  background-image: linear-gradient(90deg,
+      var(--bg-color),
+      #cab7ae 10.5%,
+      #b1998d 85.29%,
+      var(--bg-color));
 }
 
 .dark-mode .notion-red_background,
@@ -346,6 +334,7 @@
   border-radius: 50%;
   box-shadow: 0 8px 40px 0 rgb(0 0 0 / 21%);
 }
+
 .notion-page-icon-hero.notion-page-icon-image span,
 .notion-page-icon-hero.notion-page-icon-image img {
   border-radius: 50%;
@@ -394,7 +383,8 @@
 
 .notion-aside {
   overflow-x: hidden;
-  padding-left: 24px; /* Adjust the space between the main content and the table of content here */
+  padding-left: 24px;
+  /* Adjust the space between the main content and the table of content here */
 }
 
 .notion-aside-table-of-contents {
@@ -405,3 +395,23 @@
   overflow: hidden;
   text-overflow: ellipsis;
 }
+
+::-webkit-scrollbar {
+  width: 5px;
+  height: 5px;
+  background-color: #F5F5F5;
+  background-color: var(--bg-color-1);
+}
+
+::-webkit-scrollbar-thumb {
+  border-radius: 10px;
+  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
+  background-color: #555;
+  border-radius: 10px;
+  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
+  background-color: var(--fg-color-1);
+}
+
+::-webkit-scrollbar-track {
+  background-color: var(--bg-color);
+}