diff --git a/_notes/digital-public-garden.md b/_notes/digital-public-garden.md index 4d61959..7f44f76 100644 --- a/_notes/digital-public-garden.md +++ b/_notes/digital-public-garden.md @@ -1,4 +1,6 @@ --- +date: 2021-03-15 +status: 🌱 --- ![digital-garden](https://user-images.githubusercontent.com/227587/114309337-d5ff4800-9ab4-11eb-8f38-e7b4b7f590f0.png) diff --git a/_sass/_digital-garden.scss b/_sass/_digital-garden.scss index 4813d59..d172f57 100644 --- a/_sass/_digital-garden.scss +++ b/_sass/_digital-garden.scss @@ -87,12 +87,11 @@ .nodes circle { cursor: pointer; - stroke: var(--foreground-text); fill: var(--background); transition: all 0.15s ease-out; &:hover { - fill: var(--foreground-text); + stroke: var(--foreground-text); } } @@ -105,22 +104,19 @@ } } -.nodes [active], -.text [active] { +.nodes [active] { cursor: pointer; + stroke: var(--active-note); +} + +.text [active] { fill: var(--active-note); - stroke: transparent; } .status { pointer-events: none; } -.inactive { - opacity: 0.45; - transition: opacity 0.15s ease-out; -} - // Notes inline styles .note-meta:before { diff --git a/assets/js/scripts.js b/assets/js/scripts.js index 9813c55..e45580b 100644 --- a/assets/js/scripts.js +++ b/assets/js/scripts.js @@ -148,11 +148,11 @@ const d3 = window.d3 if (typeof window.graphData !== 'undefined') { const MINIMAL_NODE_SIZE = 10 - const MAX_NODE_SIZE = 12 + const MAX_NODE_SIZE = 16 const STROKE = 1 const FONT_SIZE = 12 const TICKS = 200 - const FONT_BASELINE = 35 + const FONT_BASELINE = 42 const MAX_LABEL_LENGTH = 50 const nodesData = window.graphData.nodes @@ -163,9 +163,9 @@ if (typeof window.graphData !== 'undefined') { const updateNodeSize = () => { nodesData.forEach((el) => { let weight = - 3 * + 8 * Math.sqrt( - linksData.filter((l) => l.source === el.id || l.target === el.id) + linksData.filter((l) => l.source.id === el.id || l.target.id === el.id) .length + 1 ) if (weight < MINIMAL_NODE_SIZE) { @@ -280,7 +280,7 @@ if (typeof window.graphData !== 'undefined') { const ticked = () => { node.attr('cx', (d) => d.x).attr('cy', (d) => d.y) - status.attr('x', (d) => d.x - 24).attr('y', (d) => d.y) + status.attr('x', (d) => d.x - 2).attr('y', (d) => d.y) text .attr('x', (d) => d.x) .attr('y', (d) => d.y - (FONT_BASELINE - nodeSize[d.id]))