fixes for styles and meta

src/site/_data/meta.js

@@ -20,15 +20,21 @@ module.exports = async () => {
     title: false,
     default: process.env.MATURITY_DEFAULT,
   };
-  if (process.env.MATURITY_TITLE) {
+  if (process.env.MATURITY_TITLE && process.env.MATURITY_TITLE == "true") {
     bodyClasses.push("title-maturity");
     maturitySettings.title = true;
   }
-  if (process.env.MATURITY_FILETREE) {
+  if (
+    process.env.MATURITY_FILETREE &&
+    process.env.MATURITY_FILETREE == "true"
+  ) {
     bodyClasses.push("filetree-maturity");
     maturitySettings.filetree = true;
   }
-  if (process.env.MATURITY_INTERNAL_LINKS) {
+  if (
+    process.env.MATURITY_INTERNAL_LINKS &&
+    process.env.MATURITY_INTERNAL_LINKS == "true"
+  ) {
     bodyClasses.push("links-maturity");
     maturitySettings.links = true;
   }

src/site/styles/digital-garden-base.scss

@@ -5,6 +5,9 @@
 
 body {
     overflow-x: hidden;
+    --maturity-icon-1: url(/img/tree-1.svg);
+    --maturity-icon-2: url(/img/tree-2.svg);
+    --maturity-icon-3: url(/img/tree-3.svg);
 }
 
 .content {
@@ -18,13 +21,12 @@ body {
     @media (max-width: 800px) {
         margin-top: 75px;
     }
-
 }
 
 .external-link {
     background-position: center right;
     background-repeat: no-repeat;
-    background-image: linear-gradient(transparent, transparent), url('/img/outgoing.svg');
+    background-image: linear-gradient(transparent, transparent), url("/img/outgoing.svg");
     background-size: 13px;
     padding-right: 16px;
     background-position-y: 4px;
@@ -106,7 +108,7 @@ ul.task-list {
     li {
         padding-top: 4px;
         &::before {
-            content: '# ' !important;
+            content: "# " !important;
             color: var(--text-accent);
             font-size: 0.8rem;
         }
@@ -170,7 +172,6 @@ ul.task-list {
 }
 
 .graph {
-
     .graph-title-container {
         display: flex;
         justify-content: flex-end;
@@ -195,8 +196,6 @@ ul.task-list {
     width: fit-content;
 }
 
-
-
 @media (max-width: 1400px) {
     #link-graph {
         border-radius: 0 10px 10px 10px;
@@ -307,7 +306,6 @@ ul.task-list {
     }
 
     .search-button {
-
         @media (max-width: 800px) {
             min-width: 36px;
             margin: 10px 25px 10px 25px;
@@ -361,10 +359,9 @@ ul.task-list {
     right: 0;
     left: 0;
     bottom: 0;
-    z-index: 5
+    z-index: 5;
 }
 
-
 .search-container {
     background-color: rgba(0, 0, 0, 0.5);
     position: fixed;
@@ -400,7 +397,6 @@ ul.task-list {
     font-size: 2rem;
     background-color: var(--background-primary);
     color: var(--text-primary);
-
 }
 
 .search-box input:focus {
@@ -470,12 +466,8 @@ ul.task-list {
     &:hover {
         border: 1px solid var(--text-accent);
     }
-
-
 }
 
-
-
 .search-keys {
     @media (max-width: 800px) {
         display: none;
@@ -529,8 +521,6 @@ ul.task-list {
     margin-right: -10px;
 }
 
-
-
 // Graph Controls
 .graph-title-container {
     position: relative;
@@ -616,7 +606,25 @@ ul.task-list {
     }
 }
 
-input[type=range]::-webkit-slider-thumb {
+input[type="range"]::-webkit-slider-thumb {
     -webkit-appearance: none;
     margin-top: -10px;
 }
+
+body.title-maturity .cm-s-obsidian > header > h1[data-maturity="1"]::before,
+body.filetree-maturity .filename[data-maturity="1"]::before,
+body.links-maturity .internal-link[data-maturity="1"]::before {
+    background-image: var(--maturity-icon-1);
+}
+
+body.title-maturity .cm-s-obsidian > header > h1[data-maturity="2"]::before,
+body.filetree-maturity .filename[data-maturity="2"]::before,
+body.links-maturity .internal-link[data-maturity="2"]::before {
+    background-image: var(--maturity-icon-2);
+}
+
+body.title-maturity .cm-s-obsidian > header > h1[data-maturity="3"]::before,
+body.filetree-maturity .filename[data-maturity="3"]::before,
+body.links-maturity .internal-link[data-maturity="3"]::before {
+    background-image: var(--maturity-icon-3);
+}

src/site/styles/style.scss

@@ -18,10 +18,6 @@
     --callout-title-padding: 0;
     --callout-title-size: inherit;
     --callout-content-padding: 0;
-
-    --maturity-icon-1: url(/img/tree-1.svg);
-    --maturity-icon-2: url(/img/tree-2.svg);
-    --maturity-icon-3: url(/img/tree-3.svg);
 }
 
 h1 {
@@ -221,32 +217,3 @@ p > code {
 .callout.is-collapsed .callout-fold .svg-icon {
     transform: rotate(-90deg);
 }
-
-body.title-maturity .cm-s-obsidian > header > h1[data-maturity]::before,
-body.filetree-maturity .filename[data-maturity]::before,
-body.links-maturity .internal-link[data-maturity]::before {
-    content: " ";
-    display: inline-block;
-    width: 1em;
-    height: 1em;
-    background-size: contain;
-    background-repeat: no-repeat;
-}
-
-body.title-maturity .cm-s-obsidian > header > h1[data-maturity="1"]::before,
-body.filetree-maturity .filename[data-maturity="1"]::before,
-body.links-maturity .internal-link[data-maturity="1"]::before {
-    background-image: var(--maturity-icon-1);
-}
-
-body.title-maturity .cm-s-obsidian > header > h1[data-maturity="2"]::before,
-body.filetree-maturity .filename[data-maturity="2"]::before,
-body.links-maturity .internal-link[data-maturity="2"]::before {
-    background-image: var(--maturity-icon-2);
-}
-
-body.title-maturity .cm-s-obsidian > header > h1[data-maturity="3"]::before,
-body.filetree-maturity .filename[data-maturity="3"]::before,
-body.links-maturity .internal-link[data-maturity="3"]::before {
-    background-image: var(--maturity-icon-3);
-}