Fix some styling issues, and use gardenEntry tag for home identification

src/helpers/linkUtils.js

@@ -47,13 +47,13 @@ function getGraph(data) {
       title: v.data.title || v.fileSlug,
       url: v.url,
       group,
-      home: v.data["dg-home"] || false,
+      home: v.data["dg-home"] || (v.data.tags && v.data.tags.indexOf("gardenEntry") > -1)|| false,
       outBound: extractLinks(v.template.frontMatter.content),
       neighbors: new Set(),
       backLinks: new Set(),
     };
     stemURLs[fpath] = v.url;
-    if (v.data["dg-home"]) {
+    if (v.data["dg-home"] || (v.data.tags && v.data.tags.indexOf("gardenEntry") > -1)) {
       homeAlias = v.url;
     }
   });

src/site/_includes/components/graphScript.njk

@@ -104,7 +104,7 @@
     function fetchGraphData() {
         fetch('/graph.json').then(res => res.json()).then(data => {
             window.graphData = data;
-            Graph = renderGraph(filterToDepth(JSON.parse(JSON.stringify(data))), "link-graph", 330, 330, 1);
+            Graph = renderGraph(filterToDepth(JSON.parse(JSON.stringify(data))), "link-graph", 320, 320, 1);
         });
     }
 
@@ -151,4 +151,4 @@
             renderFullGraph();
         }
     });
-</script>
+</script>

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

@@ -520,3 +520,96 @@ ul.task-list {
 .callout-fold .lucide {
     transition: transform 100ms ease-in-out;
 }
+
+
+
+
+// Graph Controls
+.graph-title-container {
+    position: relative;
+}
+
+#full-graph {
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    height: 60vh;
+    width: 60vw;
+    min-height: 400px;
+    min-width: 400px;
+    transform: translate(-50%, -50%);
+    z-index: 9999;
+    display: none;
+    background-color: var(--background-secondary);
+
+    #full-graph-close {
+        position: absolute;
+        top: 10px;
+        right: 10px;
+        cursor: pointer;
+        z-index: 9;
+    }
+}
+
+#graph-full-btn {
+    margin-right: 10px;
+}
+
+#full-graph.show {
+    display: block;
+}
+
+#graph-controls {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    gap: 5px;
+    position: absolute;
+    top: 115%;
+    cursor: pointer;
+    right: 0px;
+    left: 10px;
+    color: var(--text-accent);
+    z-index: 9;
+
+    .depth-control {
+        display: flex;
+        flex-direction: row;
+        align-items: flex-start;
+        gap: 7px;
+        
+        .slider {
+            datalist {
+                display: flex;
+                flex-direction: row;
+                justify-content: space-between;
+                font-size: 0.6rem;
+                // padding: 2px 0px;
+                // width: 200px;
+            }
+
+            option {
+                padding: 0;
+            }
+        }
+
+        #depth-display {
+            background-color: var(--text-accent);
+            color: white;
+            width: 1rem;
+            height: 1rem;
+            font-size: 0.8rem;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            margin-top: 0.3rem;
+            border-radius: 50%;
+        }
+    }
+}
+
+input[type=range]::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  margin-top: -10px;
+}

src/site/styles/obsidian-base.scss

@@ -10634,82 +10634,3 @@ body {
     width: 100%;
   }
   
-  // Graph Controls
-  .graph-title-container {
-    position: relative;
-}
-
-#full-graph {
-    position: fixed;
-    top: 50%;
-    left: 50%;
-    height: 60vh;
-    width: 60vw;
-    min-height: 400px;
-    min-width: 400px;
-    transform: translate(-50%, -50%);
-    z-index: 9999;
-    display: none;
-    background-color: var(--background-secondary);
-
-    #full-graph-close {
-        position: absolute;
-        top: 10px;
-        right: 10px;
-        cursor: pointer;
-        z-index: 9;
-    }
-}
-
-#full-graph.show {
-    display: block;
-}
-
-#graph-controls {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: space-between;
-    gap: 5px;
-    position: absolute;
-    top: 115%;
-    cursor: pointer;
-    right: 0px;
-    left: 10px;
-    color: var(--text-accent);
-    z-index: 9;
-
-    .depth-control {
-        display: flex;
-        flex-direction: row;
-        align-items: flex-start;
-        gap: 7px;
-        
-        .slider {
-            datalist {
-                display: flex;
-                flex-direction: row;
-                justify-content: space-between;
-                font-size: 0.6rem;
-                // padding: 2px 0px;
-                // width: 200px;
-            }
-
-            option {
-                padding: 0;
-            }
-        }
-
-        #depth-display {
-            background-color: var(--text-accent);
-            color: white;
-            width: 1rem;
-            height: 1rem;
-            font-size: 0.8rem;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            margin-top: 0.3rem;
-        }
-    }
-}