better mobile support

jackyzha0

2021-07-19 35fa8d882310bbef4e3d6a482b1c092044a16144

 layouts/partials/graph.html

@@ -1,12 +1,13 @@
<script src="https://cdn.jsdelivr.net/npm/d3@6"></script>
<h3>Interactive Graph</h3>
<div id="graph-container"></div>
<style>
    :root {
        --g-node: {{.Site.Data.graphConfig.base.node}};
        --g-node-active: {{.Site.Data.graphConfig.base.activeNode}};
        --g-node-inactive: {{.Site.Data.graphConfig.base.inactiveNode}};
        --g-link: {{.Site.Data.graphConfig.base.link}};
        --g-link-active: {{.Site.Data.graphConfig.base.activeLink}};
        --g-node: var(--secondary);
        --g-node-active: var(--primary);
        --g-node-inactive: var(--visited);
        --g-link: var(--outlinegray);
        --g-link-active: #5a7282;
    }
</style>
<script>
@@ -23,7 +24,7 @@
  }

  const color = (d) => {
    if (d.id === curPage) {
    if (d.id === curPage || (d.id === "/" && curPage === "")) {
      return "var(--g-node-active)"
    }

@@ -64,7 +65,7 @@
      .on("end", enableDrag ? dragended : noop);
  }

  const height = 400
  const height = 250
  const width = document.getElementById("graph-container").offsetWidth

  const simulation = d3.forceSimulation(data.nodes)