design update

2021-03-24 22:18:10 -04:00 · 2021-03-24 22:18:10 -04:00 · 7dc9269989
commit 7dc9269989
parent 186a1d0164
8 changed files with 132 additions and 73 deletions
--- a/_includes/header.html
+++ b/_includes/header.html
@ -1,15 +1,15 @@
-<header class="f-6 flex anthony">
+<header id="header" class="f5 pa3 flex bb b--dark-green bg-washed-green justify-between sticky top-0 w-100 items-baseline">
  {%- assign default_paths = site.pages | map: "path" -%}
  {%- assign page_paths = site.header_pages | default: default_paths -%}
  {%- assign titles_size = site.pages | map: 'title' | join: '' | size -%}
-  <a class="no-underline-hover" rel="author" href="{{ "/" | relative_url }}">{{ site.title | escape }}</a>
+  <a class="no-underline f4 dark-green anthony" rel="author" href="{{ "/" | relative_url }}">{{ site.title | escape }}</a>

  {%- if titles_size > 0 -%}
    <nav>
      {%- for path in page_paths -%}
        {%- assign my_page = site.pages | where: "path", path | first -%}
        {%- if my_page.title -%}
-        , <a class="no-underline-hover" href="{{ my_page.url | relative_url }}">{{ my_page.title | escape }}</a>
+          <a class="f7 no-underline dark-green" href="{{ my_page.url | relative_url }}">{{ my_page.title | escape }}</a>
        {%- endif -%}
      {%- endfor -%}
    </nav>
--- a/_includes/link-previews.html
+++ b/_includes/link-previews.html
@ -1,6 +1,6 @@
 <!-- That file is not particularly elegant. This will need a refactor at some point. -->
-<div class="hide-child">
-  <div id='tooltip-wrapper' class="bg-white lh-copy dn o-0 pa2 w5 f6 overflow-hidden absolute child">
+<div class="hide-child links-dark-green">
+  <div id='tooltip-wrapper' class="bg-white br4 shadow-1 lh-copy dn o-0 pa2 w5 f6 overflow-hidden absolute child">
    <div id='tooltip-content'>
    </div>
  </div>
--- a/_includes/notes_graph.html
+++ b/_includes/notes_graph.html
@ -1,9 +1,8 @@
-<div class="absolute bottom-1">
-  <p class="ma0 f7 measure-narrow lh-copy">Here are all the notes in this garden, along with their links, visualized as a graph.</p>
-</div>
-<div id="zoom" class="absolute code f7 bottom-1 right-1"></div>
-<div id="graph-wrapper" class="code f6">
+<div id="graph-wrapper" class="relative vh-100 code f6">
  <script>
    window.graphData = {% include notes_graph.json %}
  </script>
+  <div class="absolute bottom-1 left-1">
+    <p class="ma0 f7 measure-wide lh-copy">Here are all the notes in this garden, along with their links, visualized as a graph.</p>
+  </div>
 </div>
--- a/_layouts/default.html
+++ b/_layouts/default.html
@ -1,9 +1,9 @@
 <!doctype html>
 <html lang="{{ page.lang | default: site.lang | default: "en" }}">
  {%- include head.html -%}
-  <body class="dark-green sans-serif links-dark-green bg-washed-green">
+  <body class="dark-green sans-serif bg-washed-green">
    {%- include header.html -%}
-    <main aria-label="Content">
+    <main class="links-dark-green" aria-label="Content">
      {{ content }}
    </main>
    {%- include footer.html -%}
--- a/_layouts/note.html
+++ b/_layouts/note.html
@ -2,49 +2,53 @@
 layout: default
 ---
 <div class="flex">
-  <article class="w-50">
-    <header class="mb2">
-      <h1>{{ page.title }}</h1>
-      {% if page.date_created %}
-        <time class="code dib f7 ph3 pv2 ba br-pill" datetime="{{ page.date_created | date_to_xmlschema }}">{% if page.type != 'pages' %}
-          Created on {{ page.date_created | date: "%B %-d, %Y" }}
+  <article class="w-50 pa3 pr0">
+    <div class="container bg-white pa3 br4">
+      <header class="mb2 b--washed-green">
+        <div class="note-meta flex justify-between">
+          {% if page.date_created %}
+            <time class="code dib f7 pb2 flex" datetime="{{ page.date_created | date_to_xmlschema }}">{% if page.type != 'pages' %}
+              Created on {{ page.date_created | date: "%B %-d, %Y" }}
+              {% endif %}
+            </time>
          {% endif %}
-        </time>
-      {% endif %}
-      <time class="code dib f7 ph3 pv2 ba br-pill" datetime="{{ page.last_modified_at | date_to_xmlschema }}">{% if page.type != 'pages' %}
-        Last updated on {{ page.last_modified_at | date: "%B %-d, %Y" }}
-        {% endif %}
-      </time>
-    </header>
+          <time class="code dib f7 pb2" datetime="{{ page.last_modified_at | date_to_xmlschema }}">{% if page.type != 'pages' %}
+            Last updated on {{ page.last_modified_at | date: "%B %-d, %Y" }}
+            {% endif %}
+          </time>
+        </div>
+        <h1 class="normal f-6 lh-solid">{{ page.title }}</h1>
+      </header>

-    <div id="notes-entry-container">
-      <div class="note-contents lh-copy">
-        {{ content }}
-      </div>
+      <div id="notes-entry-container">
+        <div class="note-contents f6 lh-copy">
+          {{ content }}
+        </div>

-      <aside class="bt b--dark-green">
-        <h3 class="mb3">Notes mentioning this note</h3>
-        {% if page.backlinks.size > 0 %}
-        <div class="flex">
-        {% for backlink in page.backlinks %}
-          <div class="w-50 mr2 pa2 ba b--dark-green br3">
-            <h4 class="mt0 mb2"><a class="internal-link" href="{{ backlink.url | relative_url }}{%- if site.use_html_extension -%}.html{%- endif -%}">{{ backlink.title }}</a></h4>
-            <div class="f7 lh-copy">{{ backlink.excerpt | strip_html | truncatewords: 20 | remove: '[[' | remove: ']]' }}</div>
+        <aside class="bt b--dark-green mt5">
+          <h3 class="normal f1 mv5">Notes mentioning this note</h3>
+          {% if page.backlinks.size > 0 %}
+          <div class="flex">
+          {% for backlink in page.backlinks %}
+            <div class="w-50 mr2 pa3 ba b--dark-green br4">
+              <h4 class="mt0 normal f3 mb2"><a class="internal-link" href="{{ backlink.url | relative_url }}{%- if site.use_html_extension -%}.html{%- endif -%}">{{ backlink.title }}</a></h4>
+              <div class="f7 lh-copy">{{ backlink.excerpt | strip_html | truncatewords: 20 | remove: '[[' | remove: ']]' }}</div>
+            </div>
+          {% endfor %}
          </div>
-        {% endfor %}
-        </div>
-        {% else %}
-        <div>
-          <p class="f7">
-            There are no notes linking to this note.
-          </p>
-        </div>
-        {% endif %}
-      </aside>
+          {% else %}
+          <div>
+            <p class="f7">
+              There are no notes linking to this note.
+            </p>
+          </div>
+          {% endif %}
+        </aside>
+      </div>
    </div>
  </article>

-  <div class="w-50">
+  <div class="fixed top-0 right-0 w-50 vh-100">
    {% include notes_graph.html %}
  </div>
 </div>
--- a/_notes/garry.md
+++ b/_notes/garry.md
@ -2,4 +2,4 @@
 title: Garry Ing
 ---

-[Garry Ing](https://garrying.com) is a designer in Toronto.
+[Garry Ing](https://garrying.com) is a designer and researcher residing in Toronto. He is a member of [[Hypha|Hypha Worker Co-operative]] and sessional faculty at OCAD University teaching interactive media. Previous work and collaborations has been with the Strategic Innovation Lab (sLab) at OCAD University, the Technologies for Aging Gracefully Lab at the University of Toronto, Normative, Format.com, and Pivotal Software. He is a co-organizer of Our Networks, a conference on building distributed network [[infrastructure|infrastructures]], and A-B-Z-TXT, an autonomous school for art, design and computation in Toronto and Montréal.
--- a/_sass/_digital-garden.scss
+++ b/_sass/_digital-garden.scss
@ -7,6 +7,22 @@
  text-decoration: none;
 }

+// Header
+
+#header {
+  transition: transform 100ms ease-in-out;
+}
+
+.header-inactive {
+  transform: translateY(-100%);
+}
+
+// Sticky helper
+
+.sticky {
+  position: sticky;
+}
+
 // Fonts helper

 .anthony {
@ -28,6 +44,17 @@
 .links path {
  stroke: $accent-color;
  fill: transparent;
+
+  &.active {
+    stroke-dasharray: 10;
+    animation: dash 20s linear;
+  }
+}
+
+@keyframes dash {
+  to {
+    stroke-dashoffset: 1000;
+  }
 }

 .nodes circle {
@ -45,11 +72,12 @@
 .nodes [active],
 .text [active] {
  cursor: pointer;
-  fill: $accent-color;
+  fill: #ff6300;
+  stroke: transparent;
 }

 .inactive {
-  opacity: 0.25;
+  opacity: 0.45;
  transition: opacity 0.15s ease-out;
 }

@ -58,9 +86,9 @@
 .internal-link {
  padding: 0 0.1em;
  text-decoration: none;
-  background: rgba($highlight-color, 0.35);
+  background: rgba($highlight-color, 0.25);
  border: 1px solid rgba($highlight-color, 0.45);
-  border-radius: 3px;
+  border-radius: 4px;
 }

 .invalid-link {
@ -68,7 +96,7 @@
  text-decoration: none;
  background: rgba($highlight-color, 0.1);
  border: 1px solid rgba($highlight-color, 0.25);
-  border-radius: 3px;
+  border-radius: 4px;
 }

 // Link previews
--- a/assets/js/scripts.js
+++ b/assets/js/scripts.js
@ -1,3 +1,33 @@
+// Header interaction
+
+const headerEle = document.querySelector('#header')
+let headerElePosStore = 0
+
+const debounce = (fn) => {
+  let frame
+  return (...params) => {
+    if (frame) {
+      window.cancelAnimationFrame(frame)
+    }
+    frame = window.requestAnimationFrame(() => {
+      fn(...params)
+    })
+  }
+}
+
+const storeScroll = (event) => {
+  const bodyRect = document.body.getBoundingClientRect()
+  if (bodyRect.top < headerElePosStore &&
+    -headerEle.offsetHeight > bodyRect.top) {
+    headerEle.classList.add('header-inactive')
+  } else {
+    headerEle.classList.remove('header-inactive')
+  }
+  headerElePosStore = bodyRect.top
+}
+
+document.addEventListener('scroll', debounce(storeScroll), { passive: true })
+
 // Link preview

 let opacityTimeout
@ -7,17 +37,17 @@ const transitionDurationMs = 100
 const tooltipWrapper = document.getElementById('tooltip-wrapper')
 const tooltipContent = document.getElementById('tooltip-content')

-function hideTooltip () {
-  opacityTimeout = setTimeout(function () {
+const hideTooltip = () => {
+  opacityTimeout = setTimeout(() => {
    tooltipWrapper.style.opacity = 0
-    contentTimeout = setTimeout(function () {
+    contentTimeout = setTimeout(() => {
      tooltipContent.innerHTML = ''
      tooltipWrapper.style.display = 'none'
    }, transitionDurationMs + 1)
  }, transitionDurationMs)
 }

-function showTooltip (event) {
+const showTooltip = (event) => {
  const elem = event.target
  const elemProps = elem.getClientRects()[elem.getClientRects().length - 1]
  const top = window.pageYOffset || document.documentElement.scrollTop
@ -35,7 +65,7 @@ function showTooltip (event) {
        tooltipContent.innerHTML = tooltipContentHtml

        tooltipWrapper.style.display = 'block'
-        setTimeout(function () {
+        setTimeout(() => {
          tooltipWrapper.style.opacity = 1
        }, 1)
      })
@ -55,22 +85,22 @@ function showTooltip (event) {
  }
 }

-function setupListeners (linkElement) {
-  linkElement.addEventListener('mouseleave', function (_event) {
+const setupListeners = (linkElement) => {
+  linkElement.addEventListener('mouseleave', _event => {
    hideTooltip()
  })

-  tooltipWrapper.addEventListener('mouseleave', function (_event) {
+  tooltipWrapper.addEventListener('mouseleave', _event => {
    hideTooltip()
  })

-  linkElement.addEventListener('mouseenter', function (event) {
+  linkElement.addEventListener('mouseenter', event => {
    clearTimeout(opacityTimeout)
    clearTimeout(contentTimeout)
    showTooltip(event)
  })

-  tooltipWrapper.addEventListener('mouseenter', function (event) {
+  tooltipWrapper.addEventListener('mouseenter', event => {
    clearTimeout(opacityTimeout)
    clearTimeout(contentTimeout)
  })
@ -118,7 +148,7 @@ if (typeof window.graphData !== 'undefined') {
    window.location = d3.select(d.target).data()[0].path
  }

-  const onMouseover = function (d) {
+  const onMouseover = (d) => {
    const relatedNodesSet = new Set()
    const destinationID = d3.select(d.target).data()[0].id
    linksData
@ -138,7 +168,7 @@ if (typeof window.graphData !== 'undefined') {
      if (linkD.source.id !== destinationID && linkD.target.id !== destinationID) {
        return 'inactive'
      }
-      return ''
+      return 'active'
    })

    link.attr('stroke-width', (linkD) => {
@ -155,7 +185,7 @@ if (typeof window.graphData !== 'undefined') {
    })
  }

-  const onMouseout = function (d) {
+  const onMouseout = (d) => {
    node.attr('class', '')
    link.attr('class', '')
    text.attr('class', '')
@ -165,8 +195,8 @@ if (typeof window.graphData !== 'undefined') {
  const graphWrapper = document.getElementById('graph-wrapper')
  const element = document.createElementNS('http://www.w3.org/2000/svg', 'svg')
  element.setAttribute('width', graphWrapper.getBoundingClientRect().width)
-  element.setAttribute('height', window.innerHeight * 0.8)
-  element.classList.add('absolute', 'vh-100', 'grab', 'grabbing')
+  element.setAttribute('height', window.innerHeight)
+  element.classList.add('grab', 'grabbing')
  graphWrapper.appendChild(element)

  const reportWindowSize = () => {
@ -205,7 +235,7 @@ if (typeof window.graphData !== 'undefined') {
  const resize = (event) => {
    if (event) {
      const scale = event.transform
-      zoomLevel = scale.k
+      // zoomLevel = scale.k
      g.attr('transform', scale)
    }

@ -222,8 +252,6 @@ if (typeof window.graphData !== 'undefined') {
      .selectAll('circle')
      .filter((_d, i, nodes) => d3.select(nodes[i]).attr('active'))
      .attr('r', (d) => zoomOrKeep(ACTIVE_RADIUS_FACTOR * nodeSize[d.id]))
-
-    document.getElementById('zoom').innerHTML = zoomLevel.toFixed(2)
  }

  const ticked = () => {
@ -293,7 +321,7 @@ if (typeof window.graphData !== 'undefined') {
    ticked()
  }

-  const zoomHandler = d3.zoom().scaleExtent([0.2, 3]).on('zoom', resize)
+  const zoomHandler = d3.zoom().scaleExtent([1, 1]).on('zoom', resize)

  zoomHandler(svg)
  restart()