tech: script setup 1/?

src/assets/sass/app.scss

@@ -13,4 +13,5 @@
 @import './notice';
 @import './pane';
 @import './table';
-@import './shake';
+@import './shake';
+@import './marked';

src/assets/sass/form.scss

@@ -39,7 +39,7 @@
 }
 
 .form-control {
-  background: 0;
+  background-color: transparent;
   min-width: 0;
   font-family: inherit;
   font-size: 1rem;

src/assets/sass/layout.scss

@@ -126,8 +126,8 @@ body {
 }
 
 blockquote {
-  padding: 0.25rem 0.5rem;
-  margin-left: 0;
+  padding: 0 1rem;
+  margin-left: 1rem;
   margin-bottom: 0;
   border-left: 1px solid white;
   opacity: 0.6;

src/assets/sass/marked.scss

@@ -0,0 +1,61 @@
+.marked {
+  .monaco-editor {
+    --vscode-editor-background: var(--theme-background-50);
+    --vscode-editorGutter-background: var(--theme-background-50);
+  }
+
+  p {
+    line-height: 1.4;
+  }
+
+  code {
+    font-size: 0.75rem;
+  }
+
+  h1,
+  h2,
+  h3 {
+    color: var(--theme-color-base);
+  }
+
+  h2 {
+    margin-block: 1rem;
+    font-size: 1.25rem;
+  }
+
+  ol,
+  ul {
+    padding-left: 1.5rem;
+  }
+
+  blockquote {
+    code {
+      color: inherit;
+    }
+
+    p {
+      margin: 0;
+    }
+  }
+
+  img {
+    width: 100%;
+  }
+
+  code {
+    border: 1px solid var(--theme-background-200);
+    border-radius: 0.25rem;
+    padding: 0.5rem;
+    color: var(--theme-color-50);
+
+    &.-monaco {
+      border: 0;
+      padding: 0;
+      color: inherit;
+    }
+
+    &.-filled {
+      padding: 0.125rem;
+    }
+  }
+}

src/assets/sass/mixins.scss

@@ -1,23 +1,31 @@
 
 @mixin shimmer(
   $width: 100%,
-  $main-color: $ds-color-standard-6,
-  $shining-color: $ds-color-standard-5
+  $main-color: var(--theme-background-100),
+  $shining-color: var(--theme-background-200)
 ) {
-  background-image: linear-gradient(
+  background: linear-gradient(
     270deg,
     $main-color,
     $shining-color,
     $main-color
   );
   background-size: 600% 600%;
-  animation: shimmer 1s ease infinite;
-  animation-direction: reverse;
+  animation: shimmer 1s $ease-in-out-expo infinite both alternate-reverse;
 
   @if ($width != null) {
     width: $width;
   }
   * {
     visibility: hidden;
   }
+}
+
+@keyframes shimmer {
+  0% { background-position: 0% 50%; }
+  100% { background-position: 100% 50%; }
+}
+
+.shimmer {
+  @include shimmer()
 }