diff --git a/images/theme-dark-code.png b/images/theme-dark-code.png
new file mode 100644
index 0000000..522672e
Binary files /dev/null and b/images/theme-dark-code.png differ
diff --git a/images/theme-light-code.png b/images/theme-light-code.png
new file mode 100644
index 0000000..29b0fc1
Binary files /dev/null and b/images/theme-light-code.png differ
diff --git a/src/fragments/19-publish-container.scss b/src/fragments/19-publish-container.scss
deleted file mode 100644
index 5b14860..0000000
--- a/src/fragments/19-publish-container.scss
+++ /dev/null
@@ -1,136 +0,0 @@
-// Published Variables
-// Defaults will be after the line block
-
-.published-container {
-  /* Page */
-  --footer-display: block;
-  display: flex;
-  /* Page titles */
-  flex-direction: column;
-  --sidebar-font-size: 1rem; //14px;
-  --outline-heading-weight-active: 600;
-  --graph-height: 16.25rem;
-  --header-height: var(--h1-size);
-  --input-height: 2.5rem; //32px
-  /* Component titles, e.g. backlinks, graph, table of contents */
-  --logo-height: auto;
-  height: 100%;
-  --nav-item-weight-active: 500;
-  --sidebar-left-border-width: 0.0625rem; //1px;
-  --sidebar-left-width: 17.5rem;
-  --logo-max-height: 12.5rem;
-  /* Inputs */
-  --logo-max-width: calc(100% - 18px);
-  /* Graph */
-  --site-menu-icon-size: 1.5rem;
-  /* Sidebars */
-  --site-name-font: inherit;
-  --site-name-size: var(--h2-size);
-  --site-name-weight: 700; //600;
-  overflow: auto;
-  --nav-parent-item-weight: 500;
-  position: relative;
-  /* Site header */
-  --logo-radius: 0.5rem;
-  --sidebar-right-background: transparent;
-  --sidebar-right-border-width: 0px;
-  --sidebar-right-width: 18.75rem;
-  --page-side-padding: 2rem; // 48px
-  --component-title-font: var(--font-ui); //inherit
-  --page-title-font: var(--h1-font);
-  --page-title-line-height: var(--h1-line-height);
-  --component-title-size: var(--font-ui-small);
-  --page-title-size: var(--h1-size); //2.6em
-  /* Navigation */
-  --component-title-style: normal; //inherit
-  --page-title-style: var(--h1-style);
-  /* Outline */
-  --component-title-transform: uppercase;
-  /* Footer */
-  --component-title-variant: normal; //Inherit
-
-  --page-title-variant: var(--h1-font);
-  --component-title-weight: 600;
-  --page-title-weight: var(--h1-weight);
-  -webkit-user-select: none;
-  user-select: none;
-  --logo-width: auto;
-  --page-width: 100%; // 800px
-  width: 100%;
-
-  &::selection {
-    background-color: var(--text-selection);
-  }
-}
-
-// What does this do?
-.published-container .loader-cube {
-  bottom: 0;
-  left: 0;
-  margin: auto;
-  position: absolute;
-  right: 0;
-  top: 0;
-}
-
-
-@mixin link-spacing {
-  border-radius: 0.3125rem;
-  font-size: 1rem;
-  margin: 0.625rem;
-  padding: 0.625rem;
-  text-align: center;
-}
-
-@media screen and (max-width: 800px) {
-  body {
-    font-size: var(--font-ui-medium);
-  }
-}
-
-
-@media screen and (max-width: 750px) {
-  body {
-    font-size: var(--font-ui-medium);
-    --popover-display: none;
-    --input-height: 2.25rem;
-  }
-
-  .published-container {
-    --footer-display: none;
-    --header-height: 4rem;
-    --site-name-size: 1.125rem;
-    --page-side-padding: 1rem;
-    --page-title-size: 1.8em;
-  }
-}
-
-@media screen and (max-width: 1000px) {
-  body {
-    font-size: var(--font-ui-medium);
-  }
-
-  .published-container {
-    --footer-display: none;
-    --outline-heading-weight-active: 600;
-    --header-height: var(--h2-size);
-    --logo-height: auto;
-    --nav-item-weight-active: 500;
-    --logo-max-height: 150px;
-    --logo-max-width: calc(100% - 18px);
-    --site-menu-icon-size: 1.375rem;
-    /* Navigation */
-    --site-name-size: var(--h3-size);
-    --nav-parent-item-weight: 500;
-    /* Outline */
-    --logo-radius: 0.375rem;
-    /* Footer */
-    --logo-width: auto;
-
-    >.markdown-preview-view {
-      >.markdown-preview-sizer {
-        margin-right: 0;
-      }
-    }
-  }
-}
diff --git a/src/fragments/20-publish-variables.scss b/src/fragments/20-publish-variables.scss
new file mode 100644
index 0000000..8f0a344
--- /dev/null
+++ b/src/fragments/20-publish-variables.scss
@@ -0,0 +1,198 @@
+.published-container {
+  // These are the Default Ones that Come with App.css
+
+// Page width and padding
+  --page-width: 100%;
+  --page-side-padding: 48px;
+
+  // Page titles
+  --page-title-color: var(--h1-color);
+  --page-title-font: var(--h1-font);
+  --page-title-line-height: var(--h1-line-height);
+  --page-title-size: 2.6em;
+  --page-title-style: var(--h1-style);
+  --page-title-variant: var(--h1-variant);
+  --page-title-weight: var(--h1-weight);
+
+
+  // Component Titles
+  --component-title-color: var(--text-normal);
+  --component-title-font: inherit;
+  --component-title-size: var(--font-ui-small);
+  --component-title-style: inherit;
+  --component-title-transform: uppercase;
+  --component-title-variant: inherit;
+  --component-title-weight: var(--font-semibold);
+
+  // Inputs
+  --input-height: 32px;
+
+  // Graph
+  --graph-height: 260px;
+
+  // Sidebar
+  --sidebar-font-size: 14px;
+  --sidebar-left-width: 280px;
+  --sidebar-left-background: var(--background-primary);
+  --sidebar-left-border-width: 1px;
+  --sidebar-left-border-color: var(--background-modifier-border);
+  --sidebar-right-width: 300px;
+  --sidebar-right-background: transparent;
+  --sidebar-right-border-width: 0px;
+  --sidebar-right-border-color: var(--background-modifier-border);
+
+  // Site Headers
+  --logo-width: auto;
+  --logo-height: auto;
+  --logo-max-width: calc(100% - 18px);
+  --logo-max-height: 200px;
+  --logo-radius: 8px;
+  --header-height: 50px;
+  --site-name-color: var(--text-normal);
+  --site-name-color-hover: var(--text-muted);
+  --site-name-font: inherit;
+  --site-name-size: 22px;
+  --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 Navigation
+  --nav-collapse-icon-color: var(--text-faint);
+  --nav-collapse-icon-color-hover: var(--text-muted);
+  --nav-parent-item-color: var(--text-normal);
+  --nav-parent-item-color-active: var(--text-accent);
+  --nav-parent-item-weight: var(--font-medium);
+  --nav-item-color: var(--text-muted);
+  --nav-item-color-hover: var(--text-normal);
+  --nav-item-color-active: var(--text-accent);
+  --nav-item-border-color: var(--background-modifier-border);
+  --nav-item-border-color-active: var(--text-accent);
+  --nav-item-weight-active: var(--font-medium);
+
+  // Outline
+  --outline-heading-color: var(--text-muted);
+  --outline-heading-color-hover: var(--text-normal);
+  --outline-heading-color-active: var(--text-accent);
+  --outline-heading-weight-active: var(--font-semibold);
+
+  // Footer
+  --footer-display: block;
+
+  // Fonts
+  --font-text-size: 16px;
+  --font-text-theme: var(--ebw-font-text);
+  --font-monospace-theme: var(--ebw-font-monospace);
+  --font-interface-theme: var(--ebw-font-text);
+  --font-mermaid: var(--ebw-font-monospace);
+}
+
+body {
+  /* Tooltips */
+  --tooltip-display: none;
+  /* Popovers */
+  --popover-display: block;
+
+  // Added to fix borders on callouts
+  --callout-border-width: 0.05rem 0 0 0.05rem;
+}
+
+
+.theme-dark {
+  --nav-item-border-color-hover: var(--yellow-2);
+}
+
+.theme-light {
+  --nav-item-border-color-hover: var(--yellow-4);
+}
+
+
+
+/* Obsidian Publish mobile variables */
+/* --------------------------------- */
+@media screen and (max-width: 750px) {
+  body {
+    --popover-display: none;
+    --input-height: 36px;
+  }
+  .published-container {
+    --site-name-size: 18px;
+    --header-height: 50px;
+    --header-background: var(--background-primary);
+    --page-title-size: 2em;
+    --page-side-padding: 24px;
+    --footer-display: none;
+    --list-spacing: 0.15em;
+  }
+}
+
+
+@media screen and (max-width: 1000px) {
+  body {
+    font-size: var(--font-ui-medium);
+  }
+
+  .published-container {
+    --footer-display: none;
+    --outline-heading-weight-active: 600;
+    --header-height: var(--h2-size);
+    --logo-height: auto;
+    --nav-item-weight-active: 500;
+    --logo-max-height: 150px;
+    --logo-max-width: calc(100% - 18px);
+    --site-menu-icon-size: 1.375rem;
+    /* Navigation */
+    --site-name-size: var(--h3-size);
+    --nav-parent-item-weight: 500;
+    /* Outline */
+    --logo-radius: 0.375rem;
+    /* Footer */
+    --logo-width: auto;
+  }
+}
+
+@media screen and (min-width: 1280px) {
+  /* ... 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;
+  }
+}
+
+
+@media screen and (min-width: 1440px) {
+  /* ... rules and variables for screens larger than a small monitor */
+  .published-container {
+    --page-side-padding: 12rem;
+  }
+}
+
+@media screen and (min-width: 1600px) {
+  /* ... rules and variables for screens larger than a medium monitor */
+  .published-container {
+    --page-side-padding: 14rem;
+  }
+}
+
+@media screen and (min-width: 1920px) {
+  /* ... rules and variables for screens larger than a average monitor */
+  .published-container {
+    --page-side-padding: 16rem;
+  }
+}
+
+@media screen and (min-width: 2560px) {
+  /* ... rules and variables for screens larger than a good monitor */
+  .published-container {
+    --page-side-padding: 18rem;
+  }
+}
+
+@media screen and (min-width: 3840px) {
+  /* ... rules and variables for screens larger than a projector */
+  .published-container {
+    --page-side-padding: 20rem;
+  }
+}
diff --git a/src/fragments/21-publish-container.scss b/src/fragments/21-publish-container.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/fragments/25-publish-typography.scss b/src/fragments/25-publish-typography.scss
new file mode 100644
index 0000000..3007aaf
--- /dev/null
+++ b/src/fragments/25-publish-typography.scss
@@ -0,0 +1,4 @@
+.markdown-rendered .internal-link {
+  font-weight: 600;
+  font-style: italic;
+}
diff --git a/src/fragments/27-callmonitions.scss b/src/fragments/27-callmonitions.scss
new file mode 100644
index 0000000..84b4bcd
--- /dev/null
+++ b/src/fragments/27-callmonitions.scss
@@ -0,0 +1,7 @@
+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
new file mode 100644
index 0000000..59869ed
--- /dev/null
+++ b/src/fragments/28-publish-image-embeds.scss
@@ -0,0 +1,19 @@
+// 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
new file mode 100644
index 0000000..21d8a6e
--- /dev/null
+++ b/src/fragments/29-publish-code.scss
@@ -0,0 +1,109 @@
+// 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;
+}
+
+:not(pre) > code[class*='language-'], pre[class*='language-'] {
+  background: var(--background-secondary-alt);
+}
+
+code[class*='language-'], pre[class*='language-'] {
+  color: var(--blue-3);
+  background: none;
+  word-wrap: break-word;
+  white-space: break-spaces;
+  word-break: normal;
+  font-family: var(--font-monospace-theme);
+  text-align: left;
+  word-spacing: normal;
+  line-height: 1.2;
+  -webkit-hyphens: none;
+  -moz-hyphens: none;
+  -ms-hyphens: none;
+  hyphens: none;
+}
+
+.markdown-rendered {
+  pre {
+    position: relative;
+    padding: 0.5rem 1rem;
+    min-height: 2rem;
+    background-color: var(--background-primary-alt);
+    border-radius: 4px;
+    white-space: break-spaces;
+    overflow-x: auto;
+  }
+
+  pre code {
+    background-color: var(--background-primary-alt);
+  }
+}
+
+.token {
+
+  &.atrule {
+    color: var(--pink-2);
+  }
+
+  &.attr-value {
+    color: var(--green-3);
+    font-weight: bold;
+  }
+
+  &.bold {
+    color: var(--green-4);
+    font-weight: bold;
+  }
+
+
+  &.boolean {
+    color: var(--cyan-3);
+  }
+
+  &.builtin {
+    color: var(--cyan-2);
+  }
+
+  &.comment {
+    color: var(--purple-4);
+  }
+
+  &.function {
+    color: var(--pink-3);
+  }
+
+  &.important {
+    color: var(--red-3);
+    font-weight: bold;
+  }
+
+  &.number {
+    color: var(--yellow-3);
+  }
+
+  &.property-access {
+    color: var(--yellow-2);
+  }
+
+  &.punctuation {
+    color: var(--purple-3);
+  }
+
+  &.regex {
+    color: var(--red-4);
+  }
+
+  &.variable {
+    color: var(--blue-3);
+  }
+  &.unit {
+    color: var(--gray-dark-4);
+  }
+}
diff --git a/src/publish.scss b/src/publish.scss
index 4d7fad2..c10d97c 100644
--- a/src/publish.scss
+++ b/src/publish.scss
@@ -1,18 +1,22 @@
-@import 'fragments/01-color-palette';
-@import 'fragments/02-fonts';
+@use 'fragments/01-color-palette' as *;
+@use 'fragments/02-fonts' as *;
 
-@import 'fragments/03-core-theme-dark';
-@import 'fragments/03-core-theme-light';
+@use 'fragments/03-core-theme-dark' as *;
+@use 'fragments/03-core-theme-light' as *;
 
-@import 'fragments/03a-workspace-layout';
+@use 'fragments/04-headings-hr-tags' as *;
+@use 'fragments/05-text-links' as *;
+@use 'fragments/06-lists-checkboxes' as *;
 
-@import 'fragments/04-headings-hr-tags';
-@import 'fragments/05-text-links';
-@import 'fragments/06-lists-checkboxes';
+@use 'fragments/08-blockquote-callouts' as *;
+@use 'fragments/09-codeblocks' as *;
+@use 'fragments/10-images-embeds' as *;
+@use 'fragments/15-table' as *;
 
-@import 'fragments/08-blockquote-callouts';
-@import 'fragments/09-codeblocks';
-@import 'fragments/10-images-embeds';
-@import 'fragments/15-table';
 
-@import 'fragments/19-publish-container';
+@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 *;