Further styling

freenandes · Oct 15, 2023 · ed2f5fc · ed2f5fc
1 parent 1b47867
commit ed2f5fc
Show file tree

Hide file tree

Showing 2 changed files with 77 additions and 12 deletions.
diff --git a/quartz.config.ts b/quartz.config.ts
@@ -24,7 +24,7 @@ const config: QuartzConfig = {
           darkgray: "#585A61",
           dark: "#23252F",
           secondary: "#0050db",
-          tertiary: "hsla(218, 100%, 43%, 0.7)",
+          tertiary: "hsla(218, 100%, 43%, 0.6)",
           highlight: "hsla(218, 100%, 43%, 0.15)",
         },
         darkMode: {

diff --git a/quartz/styles/custom.scss b/quartz/styles/custom.scss
@@ -68,6 +68,9 @@ img {
 ul {
     padding: 0;
 }
+svg {
+    stroke-linecap: butt;
+}
 
 // Links
 
@@ -182,6 +185,25 @@ article > *:last-child {
     gap: unset;
     margin-top: var(--desktopMarginTop);
 }
+ul.overflow > li:last-of-type,
+ol.overflow > li:last-of-type {
+    margin-bottom: 2.25rem;
+}
+div.backlinks {
+    margin-bottom: -2.25em;
+}
+div.backlinks ul.overflow {
+    margin: 0.5em 0 0;
+}
+div.backlinks li {
+    color: var(--gray);
+}
+div.backlinks a.internal {
+    padding: 0;
+}
+
+// Graph
+
 div.graph {
     margin-bottom: 2em;
 }
@@ -200,21 +222,58 @@ div.graph > .graph-outer > #global-graph-icon {
 #graph-container svg {
     width: 100%;
 }
-ul.overflow > li:last-of-type,
-ol.overflow > li:last-of-type {
-    margin-bottom: 2.25rem;
+div.graph > #global-graph-outer {
+    backdrop-filter: blur(0.5em);
 }
-div.backlinks {
-    margin-bottom: -2.25em;
+div.graph > #global-graph-outer > #global-graph-container {
+    width: 64em;
+    max-width: calc(100vw - 3em);
+    height: 48em;
+    max-height: calc(100vh - 3em);
+    border-radius: calc(var(--r3) + var(--r5));
 }
-div.backlinks ul.overflow {
-    margin: 0.5em 0 0;
+
+// Explorer
+
+.explorer {
+    margin-top: -0.5em;
+}
+.explorer button#explorer {
+    margin: 0.5em 0;
+}
+.explorer button#explorer .fold {
+    width: 0.75em;
+    height: 0.75em;
+    margin: 0.125em 0 0 0.5em;
+    opacity: 1;
+}
+svg.folder-icon {
+    width: 0.75em;
+    height: 0.75em;
+    margin: 0 0.5em 0 0;
+    color: var(--dark);
 }
-div.backlinks li {
-    color: var(--gray);
+.fold,
+.folder-icon {
+    stroke-width: 0.15625em;
 }
-div.backlinks a.internal {
-    padding: 0;
+div.folder-container div > button {
+    font-family: var(--bodyFont);
+}
+div.folder-container div > button p {
+    font-size: 1rem;
+    margin-left: 0.125em;
+    color: var(--dark)
+}
+.folder-outer.open {
+    margin-bottom: 0.25em;
+}
+div#explorer-content {
+    margin: 0;
+}
+div#explorer-content ul li > a {
+    text-decoration: none;
+    opacity: 1;
 }
 
 // Footer
@@ -239,6 +298,12 @@ body footer a {
     color: var(--dark);
 }
 
+// Popover
+
+div.popover > .popover-inner {
+    box-shadow: 0 0.5em 0.75em hsla(0, 0%, 0%, 0.2);
+}
+
 // Medias
 
 @media (max-width: 1510px) {