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: 
&[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 *;