add markdown styles and change the way the config backdrop is shown so notifications are above it

package.json

@@ -21,6 +21,7 @@
         "chroma-js": "^2.1.2",
         "jquery": "^3.6.0",
         "markdown-it": "^12.2.0",
+        "markdown-it-attrs": "^4.1.0",
         "moment": "^2.29.1",
         "node-vibrant": "3.1.4",
         "raw-loader": "^4.0.2"

src/js/ConfigMenu.js

@@ -1,4 +1,5 @@
 import MarkdownIt from "markdown-it";
+import MarkdownItAttrs from "markdown-it-attrs";
 
 import svgUndo from "../svg/undo.svg";
 
@@ -62,8 +63,10 @@ export default class ConfigMenu {
         this.md = MarkdownIt({
             html: true,
             breaks: true,
-            linkify: true
+            linkify: true,
+            typographer: true
         });
+        this.md.use(MarkdownItAttrs);
 
         const container = document.createElement("div");
         container.id = "dribbblish-config";

src/js/main.js

@@ -355,7 +355,7 @@ waitForElement(["#main"], () => {
         data: "Copy",
         onChange: function () {
             copyToClipboard(this.description.replace(/\`/g, ""));
-            Spicetify.showNotification("Copied Versions");
+            Spicetify.showNotification("Copied!");
         }
     });
 
@@ -546,7 +546,6 @@ DribbblishShared.config.register({
     defaultValue: "dark",
     showChildren: (val) => {
         if (val == "time") return ["darkModeOnTime", "darkModeOffTime"];
-        //if (val == 3) return [""];
         return false;
     },
     onChange: (val) => {

src/styles/ConfigMenu.scss

@@ -9,6 +9,14 @@
 
     &[active] {
         display: flex;
+
+        & ~ #main::after {
+            z-index: 4;
+            position: absolute;
+            content: "";
+            inset: 0px;
+            backdrop-filter: blur(3px) brightness(60%);
+        }
     }
 
     .dribbblish-config-container {
@@ -133,6 +141,7 @@
                                     grid-area: description;
                                     height: min-content;
                                     color: spiceColor("subtext");
+                                    line-height: calc(1em + 6px); // To have line gaps
                                 }
 
                                 .x-settings-secondColumn {
@@ -154,6 +163,5 @@
         position: absolute;
         content: "";
         inset: 0px;
-        backdrop-filter: blur(3px) brightness(60%);
     }
 }

src/styles/Markdown.scss

@@ -1,3 +1,11 @@
 *[markdown] {
-    // This would be where we change any styles associated with markdown
+    code {
+        background-color: spiceColor("subtext", 0.1);
+        padding: 0px 5px;
+        border-radius: 3px;
+    }
+
+    .muted {
+        opacity: 0.5;
+    }
 }