Quartz sync: Jun 4, 2025, 10:46 AM

Author: codeyoma

quartz/components/scripts/slide.inline.ts

@@ -109,53 +109,6 @@ function appendRemark(option: SlideOptions) {
   const data = unwrapSlideNote(unwrapFootnotesSection(collapseSeparators(injectSeparators(header + tags + body))))
   document.body.innerHTML = ""
 
-  const style = document.createElement("style")
-  style.textContent = `
-  .remark-slide-content {
-    background-color: var(--light);
-
-    h1,
-    h2,
-    h3,
-    h4,
-    h5,
-    h6 {
-      position: sticky;
-      top: 0;
-      z-index: 1;
-      // background-color: rgba(255, 255, 255, 0.8);
-      backdrop-filter: blur(8px);
-    }
-
-    h1 {
-      color: var(--primary);
-    }
-
-    .tags {
-      gap: .6rem;
-    }
-
-    li {
-      line-height: 2;
-      list-style-type: disc;
-    }
-
-    p {
-      margin: 0;
-    }
-
-    .remark-slide-number{
-    }
-
-    pre {
-      padding: 0;
-    }
-  }
-
-  `
-
-  document.head.appendChild(style)
-
   const script = document.createElement("script")
   script.src = `${window.location.origin}/static/scripts/slide.js`
   // script.src = `https://codeyoma.github.io/static/scripts/remark.js`

quartz/components/styles/slide.scss

@@ -1,51 +1,5 @@
 @use "../../styles/variables.scss" as *;
 
-
-.global-slide {
-
-  &>.global-slide-outer {
-    position: fixed;
-    z-index: 500;
-    left: 0;
-    top: 0;
-    width: 100vw;
-    height: 100%;
-    backdrop-filter: blur(4px);
-    display: none;
-
-    &.active {
-      display: inline-block;
-    }
-
-    &>.global-slide-container {
-      border: 1px solid var(--lightgray);
-      background-color: var(--light);
-      border-radius: 5px;
-      box-sizing: border-box;
-      position: fixed;
-      top: 50%;
-      left: 50%;
-      transform: translate(-50%, -50%);
-      height: 90vh;
-      width: 90vw;
-      overflow: scroll;
-
-      @media all and not ($desktop) {
-        width: 90%;
-      }
-
-      &.fullscreen {
-        top: 0;
-        left: 0;
-        transform: none;
-        width: 100vw;
-        height: 100vh;
-      }
-    }
-  }
-
-}
-
 .slide-button {
   .slide-icon {
     cursor: pointer;

quartz/styles/custom.scss

@@ -262,3 +262,78 @@ em {
   }
 
 }
+
+.remark-slide-container .remark-slide-content {
+  background-color: var(--light);
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    position: sticky;
+    top: 0;
+    z-index: 1;
+    background-color: color-mix(in srgb, var(--light) 80%, transparent);
+    backdrop-filter: blur(8px);
+    -webkit-backdrop-filter: blur(5px);
+    margin-top: 0;
+    margin-bottom: 0;
+    padding-top: 2.0rem;
+  }
+
+  h1 {
+    color: var(--primary);
+  }
+
+  .tags {
+    gap: .6rem;
+  }
+
+  li {
+    line-height: 1.8;
+    list-style-type: disc;
+    list-style-position: outside;
+
+    img,
+    video,
+    audio,
+    iframe {
+      vertical-align: top;
+    }
+
+    blockquote {
+      margin-left: 0;
+    }
+
+  }
+
+  p {
+    margin: 0;
+  }
+
+  .remark-slide-number {}
+
+  pre {
+    padding: 0;
+  }
+
+  .remark-code {
+    padding: 7px;
+  }
+
+  img {
+    margin: 0 0;
+  }
+
+  video,
+  audio,
+  iframe {
+    margin: 10px 0;
+  }
+
+  .callout-title .callout-icon {
+    margin: auto 0;
+  }
+}