diff --git a/quartz/plugins/transformers/ofm.ts b/quartz/plugins/transformers/ofm.ts index 0c8a2764..0fa41a4d 100644 --- a/quartz/plugins/transformers/ofm.ts +++ b/quartz/plugins/transformers/ofm.ts @@ -272,6 +272,13 @@ export const ObsidianFlavoredMarkdown: QuartzTransformerPlugin type: "html", value: ``, } + // MMW - assign custom styling to .zip embed download link + } else if ([".zip", ".7z"].includes(ext)) { + const downloadText = alias ? alias : fp + return { + type: "html", + value: `Download ${downloadText}`, + } } else { const block = anchor return { diff --git a/quartz/styles/custom.scss b/quartz/styles/custom.scss index fd3b58c2..c87e080a 100644 --- a/quartz/styles/custom.scss +++ b/quartz/styles/custom.scss @@ -1088,3 +1088,44 @@ kbd:active kbd { color: #db8942; text-align: center; } + +/* ===================== */ + +/* --- Download Link --- */ + +a.mmw-download-link:link, a.mmw-download-link:visited { + background-color: #8f9fa926; + border: none; + text-align: center; + text-decoration: none; + display: inline-block; + font-size: 1.2rem; + width: 100%; + transition: .4s; + padding: 6px; +} + +a.mmw-download-link:hover, a.mmw-download-link:active { + background-color: #8f9fa93d; +} + +a.mmw-download-link::before { + /* display download icon before link text */ + display: inherit; + vertical-align: middle; + padding-right: 5px; +} + + /*change svg stroke='' based on dark/light theme*/ +[saved-theme="light"]a.mmw-download-link::before { + content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1.2rem' height='1.2rem' viewBox='0 0 24 24' fill='none' stroke='%232b2b2b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='lucide lucide-download'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpolyline points='7 10 12 15 17 10'/%3E%3Cline x1='12' x2='12' y1='15' y2='3'/%3E%3C/svg%3E"); +} + +[saved-theme="dark"]a.mmw-download-link::before { + content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1.2rem' height='1.2rem' viewBox='0 0 24 24' fill='none' stroke='%23ebebec' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='lucide lucide-download'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpolyline points='7 10 12 15 17 10'/%3E%3Cline x1='12' x2='12' y1='15' y2='3'/%3E%3C/svg%3E"); +} + +a.mmw-download-link div.popover { + display: none; + /* prevent link popover from appearing */ +}