From 7cf5558daf59295532f923ec61ea153902886b88 Mon Sep 17 00:00:00 2001 From: Sigrunixia Date: Fri, 30 Jun 2023 23:10:10 -0500 Subject: [PATCH] Separated out CM Selectors Refactor SCSS for blockquotes and text-links This commit refactors the SCSS for blockquotes and text-links. It moves specific edits for live preview and view modes into separate files. .Added _16-mermaid.scss for mermaid graph styling Update CSS variables to rem units in variables. Update CSS values from pixels to rem units to resolve code analysis error. Update image size units in SCSS file Changed the unit of measurement for image size from pixels to rem. Remove redundant image and iframe styles The existing CSS rules for image and iframe styling in _28-publish-image-embeds.scss file have been removed. These rules were redundant as other global styles already handle responsiveness for these elements. The change should simplify the CSS and avoid potential conflicts later. :adhesive_bandage: fix(SCSS): Added new CSS variable for Mermaid font A new CSS variable --font-mermaid was added to _02-fonts.scss file. This is to provide distinct styling for Mermaid diagrams, enabling more consistent and cleaner typography across the application. :adhesive_bandage: fix(SCSS): Rename SCSS file for clarity :adhesive_bandage: fix(SCSS): An additional entry ".idea" has been added in the .gitignore file to exclude JetBrains IDE settings and system files. :sparkles: Added basic metadata styling --- .gitignore | 1 + src/fragments/_02-fonts.scss | 1 + src/fragments/_03-core-theme-dark.scss | 6 - src/fragments/_03-core-themes-app.scss | 11 + src/fragments/_03c-modal-input.scss | 6 +- src/fragments/_03f-metadata-view.scss | 103 +++++++ src/fragments/_04-headings-hr-tags.scss | 155 +++------- src/fragments/_04a-headings-hr-tags-app.scss | 84 ++++++ src/fragments/_05-text-links.scss | 82 ++---- src/fragments/_05a-text-links-app.scss | 91 ++++++ src/fragments/_06-lists-checkboxes.scss | 12 +- src/fragments/_06b-lists-checkboxes-app.scss | 12 + src/fragments/_08-blockquote-callouts.scss | 274 ++++++++---------- .../_08a-blockquote-callouts-app.scss | 50 ++++ src/fragments/_09-codeblocks.scss | 3 - src/fragments/_09a-codeblocks-app.scss | 5 + src/fragments/_10-images-embeds.scss | 52 +--- src/fragments/_10a-images-embeds-app.scss | 30 ++ src/fragments/_16-mermaid.scss | 27 ++ src/fragments/_20-publish-variables.scss | 43 ++- src/fragments/_21-publish-container.scss | 0 src/fragments/_27-callmonitions.scss | 7 - src/fragments/_28-publish-image-embeds.scss | 19 -- src/fragments/_29-publish-code.scss | 6 - src/publish.scss | 5 +- src/theme.scss | 19 +- 26 files changed, 644 insertions(+), 460 deletions(-) create mode 100644 src/fragments/_03-core-themes-app.scss create mode 100644 src/fragments/_03f-metadata-view.scss create mode 100644 src/fragments/_04a-headings-hr-tags-app.scss create mode 100644 src/fragments/_05a-text-links-app.scss create mode 100644 src/fragments/_06b-lists-checkboxes-app.scss create mode 100644 src/fragments/_08a-blockquote-callouts-app.scss create mode 100644 src/fragments/_09a-codeblocks-app.scss create mode 100644 src/fragments/_10a-images-embeds-app.scss create mode 100644 src/fragments/_16-mermaid.scss delete mode 100644 src/fragments/_21-publish-container.scss delete mode 100644 src/fragments/_27-callmonitions.scss delete mode 100644 src/fragments/_28-publish-image-embeds.scss diff --git a/.gitignore b/.gitignore index c97db76..eadfed8 100644 --- a/.gitignore +++ b/.gitignore @@ -1,5 +1,6 @@ /node_modules .DS_Store +.idea .dev-target.json app*.css diff --git a/src/fragments/_02-fonts.scss b/src/fragments/_02-fonts.scss index 349470a..8283a14 100644 --- a/src/fragments/_02-fonts.scss +++ b/src/fragments/_02-fonts.scss @@ -12,4 +12,5 @@ body { --font-interface-theme: var(--ebw-font-text); --font-text-theme: var(--ebw-font-text); --font-monospace-theme: var(--ebw-font-monospace); + --font-mermaid: var(--ebw-font-monospace); } diff --git a/src/fragments/_03-core-theme-dark.scss b/src/fragments/_03-core-theme-dark.scss index 23748b3..1cadac5 100644 --- a/src/fragments/_03-core-theme-dark.scss +++ b/src/fragments/_03-core-theme-dark.scss @@ -64,10 +64,4 @@ --color-purple: var(--purple-2); --color-pink-rgb: var(--pink-2-rgb); --color-pink: var(--pink-2); - - &.is-tablet { - --titlebar-background: var(--background-secondary); - --titlebar-background-focused: var(--background-secondary); - --interactive-normal: var(--background-primary-alt); - } } diff --git a/src/fragments/_03-core-themes-app.scss b/src/fragments/_03-core-themes-app.scss new file mode 100644 index 0000000..812e708 --- /dev/null +++ b/src/fragments/_03-core-themes-app.scss @@ -0,0 +1,11 @@ +@use '03-core-theme-dark' as *; +@use '03-core-theme-light' as *; + + +.theme-dark { + &.is-tablet { + --titlebar-background: var(--background-secondary); + --titlebar-background-focused: var(--background-secondary); + --interactive-normal: var(--background-primary-alt); + } +} diff --git a/src/fragments/_03c-modal-input.scss b/src/fragments/_03c-modal-input.scss index f27255d..8b3c59b 100644 --- a/src/fragments/_03c-modal-input.scss +++ b/src/fragments/_03c-modal-input.scss @@ -1,7 +1,9 @@ .modal-content .vertical-tab-header { --interactive-accent: var(--interactive-accent-hover); } -select:focus, .dropdown:focus { - box-shadow: 0 0 0px 1px var(--background-modifier-border-focus); + +select:focus, +.dropdown:focus { + box-shadow: 0 0 0 0.0625rem var(--background-modifier-border-focus); outline: none; } diff --git a/src/fragments/_03f-metadata-view.scss b/src/fragments/_03f-metadata-view.scss new file mode 100644 index 0000000..5056feb --- /dev/null +++ b/src/fragments/_03f-metadata-view.scss @@ -0,0 +1,103 @@ +body { + --metadata-background: var(--background-primary-alt); // Default Transparent or none + //--metadata-max-width: none; + //--metadata-padding: var(--size-4-2) 0; + //--metadata-border-color: var(--background-modifier-border); + //--metadata-border-radius: 0; + //--metadata-border-width: 0; + //--metadata-divider-color: var(--background-modifier-border); + //--metadata-divider-color-focus: transparent; + //--metadata-divider-width: 0; + --metadata-gap: 0.3125rem; // 5px + //--metadata-property-padding: 0; + --metadata-property-radius: 0.375rem; // 6px + //--metadata-property-background: transparent; + //--metadata-property-background-hover: transparent; + //--metadata-property-background-active: var(--background-modifier-hover); + //--metadata-label-background-hover: transparent; + //--metadata-label-background-active: var(--background-modifier-hover); + //--metadata-label-font-size: var(--font-smaller); + //--metadata-label-font-weight: inherit; + //--metadata-label-font-weight: 700; + //--metadata-label-text-color: var(--text-muted); + //--metadata-label-text-color-hover: var(--text-muted); + //--metadata-label-width: 8em; + //--metadata-input-font-size: var(--font-smaller); + //--metadata-input-background: transparent; + //--metadata-input-background-hover: transparent; + //--metadata-input-background-active: var(--background-modifier-hover); + //--metadata-sidebar-label-font-size: var(--font-ui-small); + //--metadata-sidebar-input-font-size: var(--font-ui-small); +} + +//.metadata-container { +// --input-height: 1.75rem; +// border-radius: var(--metadata-border-radius); +// background-color: var(--metadata-background); +// border-color: var(--metadata-border-color); +// border-style: solid; +// border-width: var(--metadata-border-width); +// padding: var(--metadata-padding); +// color: var(--text-muted); +// position: relative; +// max-width: var(--metadata-max-width); +//} +// +// +//.metadata-properties-heading .collapse-indicator { +// position: absolute; +// left: -22px; +// padding: 0 6px; +//} + +.metadata-properties-title { + //user-select: none; + //font-size: 1em; + //color: var(--text-normal); + //font-weight: var(--font-medium); + //margin-bottom: var(--size-4-3); + //padding: 0 var(--size-4-1); + display: flex; + justify-content: center; + font-family: var(--ebw-header-font); + + &:before { + font-family: "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; + content: "✧ "; + color: var(--interactive-hover); + padding: 0 0.8em; + position: relative; + } + &::after { + font-family: "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; + content: " ✧"; + padding: 0 0.8em; + position: relative; + color: var(--interactive-hover); + } +} + +//input.metadata-property-key-input { + //border: none; + //flex-shrink: 1; + // color: var(--metadata-label-text-color); + //font-size: var(--metadata-label-font-size); + //font-weight: var(--metadata-label-font-weight); + //background-color: transparent; + //display: flex; + //align-items: center; + //text-overflow: ellipsis; + //overflow: hidden; +//} + +// .metadata-property-value { + //display: flex; + //flex: 1 1 auto; + //gap: var(--size-2-2); + //align-items: center; + //align-self: stretch; + //min-height: var(--input-height); + //background-color: var(--metadata-input-background); + //border-bottom: var(--metadata-divider-width) solid var(--metadata-divider-color); + //overflow: hidden; +//} diff --git a/src/fragments/_04-headings-hr-tags.scss b/src/fragments/_04-headings-hr-tags.scss index 903b6fa..ce33fad 100644 --- a/src/fragments/_04-headings-hr-tags.scss +++ b/src/fragments/_04-headings-hr-tags.scss @@ -27,6 +27,7 @@ body { --h5-weight: 500; --h6-weight: 500; } + .theme-dark { --h1-color: var(--yellow-2); --h2-color: var(--green-3); @@ -35,6 +36,7 @@ body { --h5-color: var(--purple-3); --h6-color: var(--pink-3); } + .theme-light { --h1-color: var(--yellow-3); --h2-color: var(--green-4); @@ -43,37 +45,20 @@ body { --h5-color: var(--purple-4); --h6-color: var(--pink-4); } -.cm-header-1 { - --heading-formatting: var(--h1-color) -} -.cm-header-2 { - --heading-formatting: var(--h2-color) -} -.cm-header-3 { - --heading-formatting: var(--h3-color) -} -.cm-header-4 { - --heading-formatting: var(--h4-color) -} -.cm-header-5 { - --heading-formatting: var(--h5-color) -} -.cm-header-6 { - --heading-formatting: var(--h6-color) -} -h1, -.markdown-rendered h1, -.cm-line:not(.HyperMD-codeblock) .cm-header-1, -.HyperMD-list-line .cm-header-1 { + +@mixin variants-caps-header-one { font-variant-caps: var(--ebw-header-font-caps-variant); } -.HyperMD-header, -.markdown-rendered, -.workspace, -.print { - .is-live-preview .HyperMD-header .cm-header::before, + +h1, +.markdown-rendered h1 { + @include variants-caps-header-one; +} + + +@mixin before-header-one { h1::before, h2::before, h3::before, @@ -87,112 +72,54 @@ h1, vertical-align: middle; font-family: var(--font-default); } - - h1 code, - h2 code, - h3 code, - h4 code, - h5 code, - h6 code { - font-weight: normal; - font-variant-caps: normal; - font-size: 75% !important; - } } -.cm-s-obsidian { - .cm-header.cm-inline-code { - font-weight: var(--font-extralight); - font-weight: normal; - font-variant-caps: normal; +.markdown-rendered, + .print { + @include before-header-one; } - .cm-line:not(.HyperMD-codeblock) .cm-header.cm-inline-code { - font-size: 65% !important; - } - - .cm-header-1.cm-hmd-codeblock:not(.cm-inline-code) { - color: var(--h1-color); - } - .cm-header-2.cm-hmd-codeblock:not(.cm-inline-code) { - color: var(--h2-color); - } - .cm-header-3.cm-hmd-codeblock:not(.cm-inline-code) { - color: var(--h3-color); - } - .cm-header-4.cm-hmd-codeblock:not(.cm-inline-code) { - color: var(--h4-color); - } - .cm-header-5.cm-hmd-codeblock:not(.cm-inline-code) { - color: var(--h5-color); - } - .cm-header-6.cm-hmd-codeblock:not(.cm-inline-code) { - color: var(--h6-color); - } -} - -/* Tag formatting */ + /* Tag formatting */ body:not(.ebullientworks-nix-tags) { --tag-background: transparent; --tag-background-hover: transparent; --tag-padding-x: 0; - &.theme-dark { + .theme-dark & { --tag-color: var(--color-accent-2); --tag-color-hover: var(--tag-3); } - & &.theme-light { + + .theme-light & { --tag-color: var(--color-accent); --tag-color-hover: var(--tag-4); } +} - a.tag, - .editor .cl-hashtag, - .markdown-source-view.mod-cm6 .cm-hashtag, - .cm-s-obsidian .cm-formatting.cm-hashtag, - .cm-s-obsidian .cm-quote.cm-hashtag, - .cm-s-obsidian .cm-hmd-codeblock.cm-hashtag { - font-family: var(--ebw-font-tags); - color: var(--tag-color); - } +@mixin tags-reg { + font-family: var(--ebw-font-tags); + color: var(--tag-color); +} - h1 a.tag, - h2 a.tag, - h3 a.tag, - h4 a.tag, - h5 a.tag, - h6 a.tag { - font-variant-caps: normal; - font-weight: var(--font-extralight); - font-size: 75% !important; - padding: 0; - background-color: transparent; - border: none; - border-radius: unset; - } - .cm-s-obsidian { - .cm-header.cm-hashtag { - font-weight: var(--font-extralight); - font-variant-caps: normal; - padding: 0; - background-color: transparent; - border: none; - border-radius: unset; - } +a.tag, +.editor .cl-hashtag { + @include tags-reg; +} - .cm-line:not(.HyperMD-codeblock) .cm-header.cm-hashtag { - font-size: 65% !important; - } - .cm-header-1.cm-hmd-codeblock.cm-hashtag:not(.cm-inline-code), - .cm-header-2.cm-hmd-codeblock.cm-hashtag:not(.cm-inline-code), - .cm-header-3.cm-hmd-codeblock.cm-hashtag:not(.cm-inline-code), - .cm-header-4.cm-hmd-codeblock.cm-hashtag:not(.cm-inline-code), - .cm-header-5.cm-hmd-codeblock.cm-hashtag:not(.cm-inline-code), - .cm-header-6.cm-hmd-codeblock.cm-hashtag:not(.cm-inline-code) { - color: var(--tag-color); - } - } +h1 a.tag, +h2 a.tag, +h3 a.tag, +h4 a.tag, +h5 a.tag, +h6 a.tag { + font-variant-caps: normal; + font-weight: var(--font-extralight); + font-size: 75% !important; + padding: 0; + background-color: transparent; + border: none; + border-radius: unset; } /* HR tags */ diff --git a/src/fragments/_04a-headings-hr-tags-app.scss b/src/fragments/_04a-headings-hr-tags-app.scss new file mode 100644 index 0000000..c4af806 --- /dev/null +++ b/src/fragments/_04a-headings-hr-tags-app.scss @@ -0,0 +1,84 @@ +@use '04-headings-hr-tags' as head; + +.cm-line:not(.HyperMD-codeblock) .cm-header-1, +.HyperMD-list-line .cm-header-1 { + @include head.variants-caps-header-one; +} + +.HyperMD-header, +.workspace { + .is-live-preview .HyperMD-header .cm-header::before, + .workspace { + @include head.before-header-one; + } +} + +.cm-s-obsidian { + .cm-header.cm-inline-code { + font-weight: var(--font-extralight); + font-weight: normal; + font-variant-caps: normal; + } + + .cm-line:not(.HyperMD-codeblock) .cm-header.cm-inline-code { + font-size: 65% !important; + } + + .cm-header-1.cm-hmd-codeblock:not(.cm-inline-code) { + color: var(--h1-color); + } + + .cm-header-2.cm-hmd-codeblock:not(.cm-inline-code) { + color: var(--h2-color); + } + + .cm-header-3.cm-hmd-codeblock:not(.cm-inline-code) { + color: var(--h3-color); + } + + .cm-header-4.cm-hmd-codeblock:not(.cm-inline-code) { + color: var(--h4-color); + } + + .cm-header-5.cm-hmd-codeblock:not(.cm-inline-code) { + color: var(--h5-color); + } + + .cm-header-6.cm-hmd-codeblock:not(.cm-inline-code) { + color: var(--h6-color); + } +} + +/* Tag formatting */ + +.editor .cl-hashtag, +.markdown-source-view.mod-cm6 .cm-hashtag, +.cm-s-obsidian .cm-formatting.cm-hashtag, +.cm-s-obsidian .cm-quote.cm-hashtag, +.cm-s-obsidian .cm-hmd-codeblock.cm-hashtag { + @include head.tags-reg; +} + +.cm-s-obsidian { + .cm-header.cm-hashtag { + font-weight: var(--font-extralight); + font-variant-caps: normal; + padding: 0; + background-color: transparent; + border: none; + border-radius: unset; + } + + .cm-line:not(.HyperMD-codeblock) .cm-header.cm-hashtag { + font-size: 65% !important; + } + + .cm-header-1.cm-hmd-codeblock.cm-hashtag:not(.cm-inline-code), + .cm-header-2.cm-hmd-codeblock.cm-hashtag:not(.cm-inline-code), + .cm-header-3.cm-hmd-codeblock.cm-hashtag:not(.cm-inline-code), + .cm-header-4.cm-hmd-codeblock.cm-hashtag:not(.cm-inline-code), + .cm-header-5.cm-hmd-codeblock.cm-hashtag:not(.cm-inline-code), + .cm-header-6.cm-hmd-codeblock.cm-hashtag:not(.cm-inline-code) { + color: var(--tag-color); + } +} diff --git a/src/fragments/_05-text-links.scss b/src/fragments/_05-text-links.scss index 869e5ac..c9694fc 100644 --- a/src/fragments/_05-text-links.scss +++ b/src/fragments/_05-text-links.scss @@ -1,3 +1,5 @@ +// This file is suitable for publish + .theme-dark { --bold-color: var(--blue-3); --italic-color: var(--pink-2); @@ -10,6 +12,7 @@ --ebw-del-link-decoration-color: rgba(203, 203, 203, 0.5); } + .theme-light { --bold-color: var(--blue-4); --italic-color: var(--pink-4); @@ -22,6 +25,7 @@ --ebw-del-link-decoration-color: rgba(100, 100, 100, 0.5); } + body { --link-decoration: underline; --link-decoration-hover: underline; @@ -38,95 +42,59 @@ body { --link-unresolved-decoration-style: dotted; --link-unresolved-decoration-color: var(--ebw-link-underline); } -.cm-s-obsidian span.cm-quote.cm-em { - color: var(--italic-color); -} -.cm-s-obsidian span.cm-quote.cm-strong { - color: var(--bold-color); -} + + +// Strong + strong em, -strong em a.internal-link, -.cm-s-obsidian span.cm-strong.cm-em, -.cm-s-obsidian span.cm-quote.cm-strong.cm-em { +strong em a.internal-link { color: var(--ebw-strong-em); } .markdown-rendered del a.external-link, .markdown-rendered del a.internal-link, -.markdown-rendered del a.internal-link.is-unresolved, -.markdown-source-view.mod-cm6 .cm-url.cm-strikethrough, -.markdown-source-view.mod-cm6 .cm-url.cm-strikethrough .cm-underline, -.markdown-source-view.mod-cm6 .cm-link.cm-strikethrough, -.markdown-source-view.mod-cm6 .cm-link.cm-strikethrough .cm-underline, -.markdown-source-view.mod-cm6 .cm-hmd-internal-link.cm-strikethrough, -.cm-s-obsidian .cm-url.cm-strikethrough, -.cm-s-obsidian .cm-link.cm-strikethrough, -.cm-s-obsidian .cm-hmd-internal-link.cm-strikethrough { +.markdown-rendered del a.internal-link.is-unresolved { text-decoration: line-through var(--link-decoration-color); } a { text-decoration-color: var(--link-decoration-color); } + del a, .markdown-rendered del a.external-link, .markdown-rendered del a.internal-link, .markdown-rendered del a.internal-link.is-unresolved { text-decoration-color: var(--ebw-del-link-decoration-color); } -.cm-s-obsidian span.cm-string.cm-url { - color: var(--ebw-link-hidden); -} + .markdown-rendered { .internal-link.is-unresolved::after { content: ' ✎'; color: var(--ebw-link-underline); } } -em a, -.cm-s-obsidian span.cm-link.cm-em { + +em a { color: var(--italic-color); text-decoration: var(--link-decoration); text-decoration-color: var(--link-decoration-color); } -strong a, -.cm-s-obsidian span.cm-link.cm-strong { + +strong a{ color: var(--bold-color); text-decoration: var(--link-decoration); } + em a:hover, -.cm-s-obsidian span.cm-link.cm-em:hover, -strong a:hover, -.cm-s-obsidian span.cm-link.cm-strong:hover { +strong a:hover { color: var(--link-color-hover); text-decoration: var(--link-decoration-hover); } + .external-link { background-position: center right; background-size: .9em; } -/* Collapse external links / markdown links in edit mode */ -body:not(.ebullientworks-show-edit-mode-links) .markdown-source-view.mod-cm6 { - div.cm-line:not(.cm-active) { - > .cm-string.cm-url:not(.cm-formatting) { - font-size: 0; - } - > .cm-string.cm-url:not(.cm-formatting)::after { - content: '\27B9'; - font-size: .8rem; - } - } -} - -// DATAVIEW TASK Skip decorations on dataview task list item indicators -.markdown-preview-view .task-list-item, -.markdown-rendered .task-list-item { - a[data-href][aria-label-position].internal-link { - border-bottom: none; - text-decoration: none; - color: var(--ebw-link-underline); - } -} - .markdown-rendered mark { color: var(--text-highlight-fg); border-radius: var(--radius-s); @@ -136,9 +104,6 @@ body:not(.ebullientworks-show-edit-mode-links) .markdown-source-view.mod-cm6 { // Highlight, matched text .markdown-preview-view mark, .markdown-rendered mark, -.search-result-file-matched-text, -.cm-s-obsidian span.obsidian-search-match-highlight, -.cm-s-obsidian span.cm-highlight, .is-flashing h1, .is-flashing h2, .is-flashing h3, @@ -149,15 +114,6 @@ body:not(.ebullientworks-show-edit-mode-links) .markdown-source-view.mod-cm6 { color: var(--text-highlight-fg); } -div.CodeMirror.cm-s-obsidian span.cm-highlight.CodeMirror-selectedtext { - --text-selection: var(--text-highlight-bg-active); -} - -.markdown-source-view.mod-cm6 .cm-selection, -::selection { - background-color: var(--text-selection); -} - .is-flashing * ::selection { background-color: var(--text-selection-active); } diff --git a/src/fragments/_05a-text-links-app.scss b/src/fragments/_05a-text-links-app.scss new file mode 100644 index 0000000..02e5b00 --- /dev/null +++ b/src/fragments/_05a-text-links-app.scss @@ -0,0 +1,91 @@ +// This file is NOT suitable for publish + +@use '05-text-links' as *; + +.cm-s-obsidian span.cm-quote.cm-em { + color: var(--italic-color); +} +.cm-s-obsidian span.cm-quote.cm-strong { + color: var(--bold-color); +} + +.cm-s-obsidian span.cm-strong.cm-em, +.cm-s-obsidian span.cm-quote.cm-strong.cm-em { + color: var(--ebw-strong-em); +} + +.markdown-source-view.mod-cm6 .cm-url.cm-strikethrough, +.markdown-source-view.mod-cm6 .cm-url.cm-strikethrough .cm-underline, +.markdown-source-view.mod-cm6 .cm-link.cm-strikethrough, +.markdown-source-view.mod-cm6 .cm-link.cm-strikethrough .cm-underline, +.markdown-source-view.mod-cm6 .cm-hmd-internal-link.cm-strikethrough, +.cm-s-obsidian .cm-url.cm-strikethrough, +.cm-s-obsidian .cm-link.cm-strikethrough, +.cm-s-obsidian .cm-hmd-internal-link.cm-strikethrough { + text-decoration: line-through var(--link-decoration-color); +} + +.cm-s-obsidian span.cm-string.cm-url { + color: var(--ebw-link-hidden); +} + +// Em A +.cm-s-obsidian span.cm-link.cm-em { + color: var(--italic-color); + text-decoration: var(--link-decoration); + text-decoration-color: var(--link-decoration-color); +} + +// Strong A + +.cm-s-obsidian span.cm-link.cm-strong { + color: var(--bold-color); + text-decoration: var(--link-decoration); +} + +// Strong and Em A Hover + +.cm-s-obsidian span.cm-link.cm-em:hover, +.cm-s-obsidian span.cm-link.cm-strong:hover { + color: var(--link-color-hover); + text-decoration: var(--link-decoration-hover); +} + +/* Collapse external links / markdown links in edit mode */ +body:not(.ebullientworks-show-edit-mode-links) .markdown-source-view.mod-cm6 { + div.cm-line:not(.cm-active) { + > .cm-string.cm-url:not(.cm-formatting) { + font-size: 0; + } + > .cm-string.cm-url:not(.cm-formatting)::after { + content: '\27B9'; + font-size: .8rem; + } + } +} + +// DATAVIEW TASK Skip decorations on dataview task list item indicators +.markdown-preview-view .task-list-item, +.markdown-rendered .task-list-item { + a[data-href][aria-label-position].internal-link { + border-bottom: none; + text-decoration: none; + color: var(--ebw-link-underline); + } +} + +// Highlight, matched text + +.cm-s-obsidian span.obsidian-search-match-highlight, +.cm-s-obsidian span.cm-highlight { + color: var(--text-highlight-fg); +} + +div.CodeMirror.cm-s-obsidian span.cm-highlight.CodeMirror-selectedtext { + --text-selection: var(--text-highlight-bg-active); +} + +.markdown-source-view.mod-cm6 .cm-selection, +::selection { + background-color: var(--text-selection); +} diff --git a/src/fragments/_06-lists-checkboxes.scss b/src/fragments/_06-lists-checkboxes.scss index 5cf2637..ec6a4a3 100644 --- a/src/fragments/_06-lists-checkboxes.scss +++ b/src/fragments/_06-lists-checkboxes.scss @@ -1,4 +1,5 @@ @use '06a-checkbox-mixin' as checkboxes; + body { --checkbox-checked: var(--green-4); --checkbox-deferred: var(--blue-3); @@ -20,17 +21,6 @@ body { --checkbox-hover: var(--gray-light-2); } -/** Set line-height on mobile */ -.mobile { - .markdown-preview-view { - ol, - ul { - display: block; - line-height: var(--line-height); - } - } -} - body:not(.ebullientworks-nix-checkbox) { /** Use style settings to disable custom checkboxes in the theme */ @include checkboxes.list; diff --git a/src/fragments/_06b-lists-checkboxes-app.scss b/src/fragments/_06b-lists-checkboxes-app.scss new file mode 100644 index 0000000..b00915f --- /dev/null +++ b/src/fragments/_06b-lists-checkboxes-app.scss @@ -0,0 +1,12 @@ +@use '06-lists-checkboxes' as *; + +/** Set line-height on mobile */ +.mobile { + .markdown-preview-view { + ol, + ul { + display: block; + line-height: var(--line-height); + } + } +} diff --git a/src/fragments/_08-blockquote-callouts.scss b/src/fragments/_08-blockquote-callouts.scss index 540e975..eda83fa 100644 --- a/src/fragments/_08-blockquote-callouts.scss +++ b/src/fragments/_08-blockquote-callouts.scss @@ -22,14 +22,15 @@ body { --ebw-callout-bug: 180, 152, 175; // purple-3 --ebw-callout-example: 142, 103, 135; // purple-4 - --ebw-callout-danger: 230,133,132; // red-3 - --ebw-callout-failure: 211,141,159; // pink-3 + --ebw-callout-danger: 230, 133, 132; // red-3 + --ebw-callout-failure: 211, 141, 159; // pink-3 --ebw-callout-reference: 183, 183, 183; // gray --ebw-callout-toc: 235, 235, 235; // gray-light-4 --blockquote-border-color: var(--secondary-accent-4); } + .theme-light { --blockquote-border-color: var(--secondary-accent-2); --ebw-callout-toc: 159, 159, 159; // gray-dark-1 @@ -41,12 +42,10 @@ body { --ebw-callout-info: 53, 119, 174; // blue-4 --ebw-callout-tip: 61, 126, 123; // cyan-4 - --ebw-callout-danger: 167,92,112; // pink-4 + --ebw-callout-danger: 167, 92, 112; // pink-4 } -.rendered-widget, -.markdown-rendered, -.markdown-preview-section { +@mixin blockquote-styles { blockquote { overflow-x: auto; padding: var(--callout-content-padding); @@ -55,183 +54,139 @@ body { > :first-child { margin-top: 0.5em; } + > :last-child { margin-bottom: 0.5em; } } } -.admonition { - margin: 1em 0; - padding: var(--callout-padding); -} -.is-live-preview { - .admonition { - margin: 0; - padding: var(--callout-padding); - .admonition-content { - > :first-child { - margin-top: 0.5em; - } - > :last-child { - margin-bottom: 0.5em; - } - > * { - margin-top: initial; - margin-bottom: initial; - } - > * br { - display: none; - } - ul, - ol { - white-space: normal; - } - .math-block > mjx-container { - padding: 0; - } - &:last-child { - margin-bottom: 0; - } +.markdown-rendered { + @include blockquote-styles; +} + +// Callout Color Types + +$callout-types: ( + "abstract": ebw-callout-abstract, + "summary": ebw-callout-abstract, + "tldr": ebw-callout-abstract, + "note": ebw-callout-note, + "info": ebw-callout-info, + "todo": ebw-callout-info, + "tip": ebw-callout-tip, + "hint": ebw-callout-tip, + "important": ebw-callout-tip, + "success": ebw-callout-success, + "check": ebw-callout-success, + "done": ebw-callout-success, + "question": ebw-callout-question, + "help": ebw-callout-question, + "faq": ebw-callout-question, + "warning": ebw-callout-warning, + "caution": ebw-callout-warning, + "attention": ebw-callout-warning, + "failure": ebw-callout-failure, + "fail": ebw-callout-failure, + "missing": ebw-callout-failure, + "danger": ebw-callout-danger, + "error": ebw-callout-danger, + "bug": ebw-callout-bug, + "example": ebw-callout-example, + "excerpt": ebw-callout-quote, + "quote": ebw-callout-quote, + "cite": ebw-callout-quote, + "chat": ebw-callout-chat, + "reference": ebw-callout-reference, + "toc": ebw-callout-toc +); + +.callout { + @each $type, $color in $callout-types { + &[data-callout="#{$type}"] { + --callout-color: var(--#{$color}); } } } -.markdown-source-view.mod-cm6 .admonition-parent > .edit-block-button { - right: calc(var(--size-4-2) + var(--icon-size) + 6px); - top: calc(var(--size-2-2) + 2px); -} -.callout[data-callout="abstract"], -.callout[data-callout="summary"], -.callout[data-callout="tldr"] { - --callout-color: var(--ebw-callout-abstract); -} -.callout[data-callout="note"] { - --callout-color: var(--ebw-callout-note); -} -.callout[data-callout="info"], -.callout[data-callout="todo"] { - --callout-color: var(--ebw-callout-info); -} -.callout[data-callout="tip"], -.callout[data-callout="hint"], -.callout[data-callout="important"] { - --callout-color: var(--ebw-callout-tip); -} -.callout[data-callout="success"], -.callout[data-callout="check"], -.callout[data-callout="done"] { - --callout-color: var(--ebw-callout-success); -} -.callout[data-callout="question"], -.callout[data-callout="help"], -.callout[data-callout="faq"] { - --callout-color: var(--ebw-callout-question); -} -.callout[data-callout="warning"], -.callout[data-callout="caution"], -.callout[data-callout="attention"] { - --callout-color: var(--ebw-callout-warning); -} -.callout[data-callout="failure"], -.callout[data-callout="fail"], -.callout[data-callout="missing"] { - --callout-color: var(--ebw-callout-failure); -} -.callout[data-callout="danger"], -.callout[data-callout="error"] { - --callout-color: var(--ebw-callout-danger); -} -.callout[data-callout="bug"] { - --callout-color: var(--ebw-callout-bug); -} -.callout[data-callout="example"] { - --callout-color: var(--ebw-callout-example); -} -.callout[data-callout="excerpt"], -.callout[data-callout="quote"], -.callout[data-callout="cite"] { - --callout-color: var(--ebw-callout-quote); -} -.callout[data-callout="chat"] { - --callout-color: var(--ebw-callout-chat); -} -.callout[data-callout="reference"] { - --callout-icon: library; - --callout-color: var(--ebw-callout-reference); -} -.callout[data-callout="toc"] { - --callout-icon: layout-list; - --callout-color: var(--ebw-callout-toc); -} + +// Color Map + +$callout-title-types: ( + "info": blue-5, + "todo": blue-5, + "note": blue-5, + "excerpt": blue-5, + "quote": blue-5, + "cite": blue-5, + "bug": purple-5, + "example": purple-5, + "abstract": purple-5, + "summary": purple-5, + "tldr": purple-5, + "question": cyan-5, + "help": cyan-5, + "faq": cyan-5, + "tip": cyan-5, + "hint": cyan-5, + "important": cyan-5, + "success": green-5, + "check": green-5, + "done": green-5, + "warning": yellow-5, + "caution": yellow-5, + "attention": yellow-5, + "danger": red-5, + "error": red-5, + "failure": red-5, + "fail": red-5, + "missing": red-5, + "toc": gray-dark-4, + "reference": gray-dark-4 +); + .theme-light { - .callout[data-callout="info"], - .callout[data-callout="todo"], - .callout[data-callout="note"], - .callout[data-callout="excerpt"], - .callout[data-callout="quote"], - .callout[data-callout="cite"] { - --callout-title-color: var(--blue-5); - } - .callout[data-callout="bug"], - .callout[data-callout="example"], - .callout[data-callout="abstract"], - .callout[data-callout="summary"], - .callout[data-callout="tldr"] { - --callout-title-color: var(--purple-5); - } - .callout[data-callout="question"], - .callout[data-callout="help"], - .callout[data-callout="faq"], - .callout[data-callout="tip"], - .callout[data-callout="hint"], - .callout[data-callout="important"] { - --callout-title-color: var(--cyan-5); - } - .callout[data-callout="success"], - .callout[data-callout="check"], - .callout[data-callout="done"] { - --callout-title-color: var(--green-5); - } - .callout[data-callout="warning"], - .callout[data-callout="caution"], - .callout[data-callout="attention"] { - --callout-title-color: var(--yellow-5); - } - .callout[data-callout="danger"], - .callout[data-callout="error"], - .callout[data-callout="failure"], - .callout[data-callout="fail"], - .callout[data-callout="missing"] { - --callout-title-color: var(--red-5); - } - .callout[data-callout="toc"], - .callout[data-callout="reference"] { - --callout-title-color: var(--gray-dark-4); + @each $type, $color in $callout-title-types { + .callout[data-callout="#{$type}"] { + --callout-title-color: var(--#{$color}); + } } } + + .callout-title { font-family: var(--ebw-font-callout-title); + + & .callout-title-inner { + flex: 2; + } } -.callout-title-inner { - flex: 2; -} + .callout-content { background-color: var(--background-primary); + > :first-child { margin-top: 0.5em; } + > :last-child { margin-bottom: 0.5em; } } + +.published-container .callout-content { + background-color: var(--background-primary-alt); +} + + // ------------------------------------------------------ // Reference Admonition -// Create callout of type 'reference' (book icon suggested) +// Create admonition of type 'reference' (book icon suggested) // ```ad-reference // Title:: Title of referenced thing // Source:: https://.... // ``` // ------------------------------------------------------ + .callout[data-callout="reference"] { .callout-content { white-space: pre-wrap; @@ -248,20 +203,23 @@ body { } } } + // ------------------------------------------------------ // TOC Admonition // List with compressed padding that floats to the right -// Create callout of type 'toc' (outline icon suggested) +// Create admonition of type 'toc' (outline icon suggested) // ```ad-toc // - List of links to document sections // ``` // ------------------------------------------------------ + .callout[data-callout="toc"] { &.callout { float: right; margin-left: .5em; - min-width: 150px; + min-width: 9.375rem; } + .callout-content { padding-right: .5em; @@ -269,12 +227,13 @@ body { display: block; margin-block-start: .5em; margin-block-end: .5em; - margin-inline-start: 0px; - margin-inline-end: 0px; - padding-inline-start: 30px; + margin-inline-start: 0; + margin-inline-end: 0; + padding-inline-start: 1.875rem; } } } + div.modal-content { .callout[data-callout="toc"] { float: unset; @@ -282,6 +241,7 @@ div.modal-content { margin-left: unset; } } + div.popover { .callout[data-callout="toc"] { display: none; diff --git a/src/fragments/_08a-blockquote-callouts-app.scss b/src/fragments/_08a-blockquote-callouts-app.scss new file mode 100644 index 0000000..0206c07 --- /dev/null +++ b/src/fragments/_08a-blockquote-callouts-app.scss @@ -0,0 +1,50 @@ +@use '08-blockquote-callouts' as callblock; + +.rendered-widget, +.markdown-preview-section { + @include callblock.blockquote-styles; +} + +// Admonition has limited support on publish. Making app only. + +.admonition { + margin: 1em 0; + padding: var(--callout-padding); +} +.is-live-preview { + .admonition { + margin: 0; + padding: var(--callout-padding); + + .admonition-content { + > :first-child { + margin-top: 0.5em; + } + > :last-child { + margin-bottom: 0.5em; + } + > * { + margin-top: initial; + margin-bottom: initial; + } + > * br { + display: none; + } + ul, + ol { + white-space: normal; + } + .math-block > mjx-container { + padding: 0; + } + &:last-child { + margin-bottom: 0; + } + } + } +} + +.markdown-source-view.mod-cm6 .admonition-parent > .edit-block-button { + right: calc(var(--size-4-2) + var(--icon-size) + 0.375rem); + top: calc(var(--size-2-2) + 0.125rem); +} diff --git a/src/fragments/_09-codeblocks.scss b/src/fragments/_09-codeblocks.scss index 20e55d9..0286fb0 100644 --- a/src/fragments/_09-codeblocks.scss +++ b/src/fragments/_09-codeblocks.scss @@ -8,6 +8,3 @@ kbd { padding: 0.1em 0.25em; background-color: var(--background-secondary-alt); } -.cm-s-obsidian .HyperMD-codeblock span.cm-inline-code { - padding: unset; -} diff --git a/src/fragments/_09a-codeblocks-app.scss b/src/fragments/_09a-codeblocks-app.scss new file mode 100644 index 0000000..ad264f3 --- /dev/null +++ b/src/fragments/_09a-codeblocks-app.scss @@ -0,0 +1,5 @@ +@use '09-codeblocks' as *; + +.cm-s-obsidian .HyperMD-codeblock span.cm-inline-code { + padding: unset; +} diff --git a/src/fragments/_10-images-embeds.scss b/src/fragments/_10-images-embeds.scss index cd4bd5d..db59d16 100644 --- a/src/fragments/_10-images-embeds.scss +++ b/src/fragments/_10-images-embeds.scss @@ -1,7 +1,7 @@ body { --ebw-embed-border-color: var(--gray-dark-7); - --embed-border-left: 1px solid var(--ebw-embed-border-color); - --embed-border-right: 1px solid var(--ebw-embed-border-color); + --embed-border-left: 0.0625rem solid var(--ebw-embed-border-color); + --embed-border-right: 0.0625rem solid var(--ebw-embed-border-color); --embed-padding: 0 var(--size-4-1); } .theme-light { @@ -25,23 +25,25 @@ div { // Use an anchor tag: ![Image](image.jpg#portrait) &[src$="#portrait"] { float: right; - margin-left: 5px; - width: 200px; + margin-left: 0.3125rem; + width: 12.5rem; + height: 12.5rem; } &[src$="#callout"] { float: right; - margin-left: 5px; + margin-left: 0.3125rem; width: 50%; } &[src$="#small-right"] { float: right; - margin-left: 5px; - width: 75px; + margin-left: 0.3125rem; + width: 4.6875rem; } } // ------------------------------------------------------ // Naked embeds // ------------------------------------------------------ + .markdown-embed { border-radius: var(--radius-l); position: relative; @@ -81,43 +83,17 @@ div { // EMBED LINK .markdown-embed-link svg { color: var(--ebw-link-underline); - height: 14px; - width: 14px; + height: 0.875rem; + width: 0.875rem; } .markdown-embed-link, .file-embed-link { - top: 0px; + top: 0; right: 0; - height: 18px; - width: 18px; + height: 1.125rem; + width: 1.125rem; text-align: center; vertical-align: middle; z-index: var(--layer-tooltip); } - -.markdown-source-view.invisible-embed, -.markdown-rendered.invisible-embed { - --embed-border-left: none; - --embed-border-right: none; - --embed-padding: 0; -} - -// ------------------------------------------------------ -// Scaled iframes -// cssclass: embedframe -//
-// ------------------------------------------------------ -.embedframe iframe { - width: 125%; - height: 750px; - -webkit-transform: scale(.8); - transform: scale(.8); - -webkit-transform-origin: 0 0; - transform-origin: 0 0; -} -.embedframe .scaled-iframe { - width: 100%; - height: 600px; - position: relative; -} diff --git a/src/fragments/_10a-images-embeds-app.scss b/src/fragments/_10a-images-embeds-app.scss new file mode 100644 index 0000000..374c770 --- /dev/null +++ b/src/fragments/_10a-images-embeds-app.scss @@ -0,0 +1,30 @@ +@use '10-images-embeds' as *; + + +.markdown-source-view.invisible-embed, +.markdown-rendered.invisible-embed { + --embed-border-left: none; + --embed-border-right: none; + --embed-padding: 0; +} + +// ------------------------------------------------------ +// Scaled iframes +// cssclass: embedframe +//
+// ------------------------------------------------------ + +.embedframe iframe { + width: 125%; + height: 46.875rem; + -webkit-transform: scale(.8); + transform: scale(.8); + -webkit-transform-origin: 0 0; + transform-origin: 0 0; +} + +.embedframe .scaled-iframe { + width: 100%; + height: 37.5rem; + position: relative; +} diff --git a/src/fragments/_16-mermaid.scss b/src/fragments/_16-mermaid.scss new file mode 100644 index 0000000..7cf08f4 --- /dev/null +++ b/src/fragments/_16-mermaid.scss @@ -0,0 +1,27 @@ +// Mermaid Core + +.mermaid { + font-family: var(--font-mermaid); + fill: red; + + & .actor { + stroke: var(--background-modifier-border); + fill: var(--background-secondary); + } + + & text.actor>tspan { + fill: var(--text-normal); + stroke: none; + } +} +.mermaid .statediagram { + + & .nodelabel { + color: red; + } + + & .edgeLabel { + background-color: black; + text-align: left; + } +} diff --git a/src/fragments/_20-publish-variables.scss b/src/fragments/_20-publish-variables.scss index 8f0a344..2700b97 100644 --- a/src/fragments/_20-publish-variables.scss +++ b/src/fragments/_20-publish-variables.scss @@ -3,7 +3,7 @@ // Page width and padding --page-width: 100%; - --page-side-padding: 48px; + --page-side-padding: 3rem /* 48/16 */; // Page titles --page-title-color: var(--h1-color); @@ -14,7 +14,6 @@ --page-title-variant: var(--h1-variant); --page-title-weight: var(--h1-weight); - // Component Titles --component-title-color: var(--text-normal); --component-title-font: inherit; @@ -25,18 +24,18 @@ --component-title-weight: var(--font-semibold); // Inputs - --input-height: 32px; + --input-height: 2rem /* 32/16 */; // Graph - --graph-height: 260px; + --graph-height: 16.25rem /* 260/16 */; // Sidebar - --sidebar-font-size: 14px; - --sidebar-left-width: 280px; + --sidebar-font-size: 0.875rem /* 14/16 */; + --sidebar-left-width: 17.5rem /* 280/16 */; --sidebar-left-background: var(--background-primary); - --sidebar-left-border-width: 1px; + --sidebar-left-border-width: 0.0625rem /* 1/16 */; --sidebar-left-border-color: var(--background-modifier-border); - --sidebar-right-width: 300px; + --sidebar-right-width: 18.75rem /* 300/16 */; --sidebar-right-background: transparent; --sidebar-right-border-width: 0px; --sidebar-right-border-color: var(--background-modifier-border); @@ -45,17 +44,17 @@ --logo-width: auto; --logo-height: auto; --logo-max-width: calc(100% - 18px); - --logo-max-height: 200px; - --logo-radius: 8px; - --header-height: 50px; + --logo-max-height: 12.5rem /* 200/16 */; + --logo-radius: 0.5rem /* 8/16 */; + --header-height: 3.125rem /* 50/16 */; --site-name-color: var(--text-normal); --site-name-color-hover: var(--text-muted); - --site-name-font: inherit; - --site-name-size: 22px; + --site-name-font: var(--ebw-font-monospace); + --site-name-size: 1.125rem; /* 18/16 */; --site-name-weight: var(--font-semibold); --site-menu-icon-color: var(--text-faint); --site-menu-icon-color-hover: var(--text-normal); - --site-menu-icon-size: 24px; + --site-menu-icon-size: 1.5rem /* 24/16 */; // Site Navigation --nav-collapse-icon-color: var(--text-faint); @@ -116,11 +115,11 @@ body { --input-height: 36px; } .published-container { - --site-name-size: 18px; - --header-height: 50px; + --site-name-size: 1.125rem; + --header-height: 3.125rem; --header-background: var(--background-primary); --page-title-size: 2em; - --page-side-padding: 24px; + --page-side-padding: 1.5rem; --footer-display: none; --list-spacing: 0.15em; } @@ -138,8 +137,8 @@ body { --header-height: var(--h2-size); --logo-height: auto; --nav-item-weight-active: 500; - --logo-max-height: 150px; - --logo-max-width: calc(100% - 18px); + --logo-max-height: 9.375rem; + --logo-max-width: calc(100% - 1.125rem); --site-menu-icon-size: 1.375rem; /* Navigation */ --site-name-size: var(--h3-size); @@ -155,9 +154,9 @@ body { /* ... rules and variables for screens larger than a big tablet */ .published-container { --page-side-padding: 10rem; - --sidebar-left-width: 230px; - --sidebar-right-width: 250px; - --graph-height: 200px; + --sidebar-left-width: 14.375rem; + --sidebar-right-width: 15.625rem; + --graph-height: 12.5rem; } } diff --git a/src/fragments/_21-publish-container.scss b/src/fragments/_21-publish-container.scss deleted file mode 100644 index e69de29..0000000 diff --git a/src/fragments/_27-callmonitions.scss b/src/fragments/_27-callmonitions.scss deleted file mode 100644 index 84b4bcd..0000000 --- a/src/fragments/_27-callmonitions.scss +++ /dev/null @@ -1,7 +0,0 @@ -body { - --callout-border-width: 0.05rem 0 0 0.05rem; -} - -.callout-content { - background-color: var(--background-primary-alt); -} diff --git a/src/fragments/_28-publish-image-embeds.scss b/src/fragments/_28-publish-image-embeds.scss deleted file mode 100644 index 59869ed..0000000 --- a/src/fragments/_28-publish-image-embeds.scss +++ /dev/null @@ -1,19 +0,0 @@ -// Make Images and Videos Responsive -.internal-embed img { - display: flex; - justify-content: center; - margin: 2em auto; -} - -img { - border-radius: 10px; - aspect-ratio: 16 / 9; - height: auto; - width: auto; -} - -iframe { - aspect-ratio: 16 / 9; - height: auto; - width: auto; -} diff --git a/src/fragments/_29-publish-code.scss b/src/fragments/_29-publish-code.scss index 21d8a6e..5b5e1c1 100644 --- a/src/fragments/_29-publish-code.scss +++ b/src/fragments/_29-publish-code.scss @@ -1,11 +1,5 @@ // Code Variables -.frontmatter-container, .popover.hover-popover::after, .markdown-preview-view:not(.allow-fold-lists) { - &.list-collapse-indicator, &.allow-fold-headings .heading-collapse-indicator, &.show-frontmatter .frontmatter { - display: none; - } -} - pre[class*='language-'] { overflow: hidden; } diff --git a/src/publish.scss b/src/publish.scss index 39f2177..fb58351 100644 --- a/src/publish.scss +++ b/src/publish.scss @@ -4,6 +4,7 @@ @use 'fragments/03-core-theme-dark' as *; @use 'fragments/03-core-theme-light' as *; +@use 'fragments/03d-graph-view' as *; @use 'fragments/04-headings-hr-tags' as *; @use 'fragments/05-text-links' as *; @@ -13,11 +14,9 @@ @use 'fragments/09-codeblocks' as *; @use 'fragments/10-images-embeds' as *; @use 'fragments/15-table' as *; +// @use 'fragments/16-mermaid' as *; @use 'fragments/20-publish-variables' as *; -//@use 'fragments/21-publish-container' as *; @use 'fragments/25-publish-typography' as *; -@use 'fragments/27-callmonitions' as *; -@use 'fragments/28-publish-image-embeds' as *; @use 'fragments/29-publish-code' as *; diff --git a/src/theme.scss b/src/theme.scss index 31524f9..478d329 100644 --- a/src/theme.scss +++ b/src/theme.scss @@ -2,25 +2,26 @@ @use 'fragments/00-stylesettings' as *; @use 'fragments/01-color-palette' as *; @use 'fragments/01a-color-accents' as *; + @use 'fragments/02-fonts' as *; -@use 'fragments/03-core-theme-dark' as *; -@use 'fragments/03-core-theme-light' as *; +@use 'fragments/03-core-themes-app' as *; @use 'fragments/03a-workspace-layout' as *; @use 'fragments/03c-modal-input' as *; @use 'fragments/03d-graph-view' as *; +@use 'fragments/03f-metadata-view' as *; -@use 'fragments/04-headings-hr-tags' as *; -@use 'fragments/05-text-links' as *; +@use 'fragments/04a-headings-hr-tags-app' as *; +@use 'fragments/05a-text-links-app' as *; +@use 'fragments/06b-lists-checkboxes-app' as *; +@use 'fragments/08a-blockquote-callouts-app' as *; +@use 'fragments/09a-codeblocks-app' as *; +@use 'fragments/10a-images-embeds-app' as *; -@use 'fragments/06-lists-checkboxes' as *; -@use 'fragments/08-blockquote-callouts' as *; -@use 'fragments/09-codeblocks' as *; -@use 'fragments/10-images-embeds' as *; @use 'fragments/12-calendar-day-planner-tracker' as *; @use 'fragments/13-timelines' as *; @use 'fragments/14-frontmatter' as *; @use 'fragments/15-table' as *; - +// @use 'fragments/16-mermaid' as *;