design update

_includes/header.html

@@ -1,17 +1,19 @@
-<header id="header" class="f5 pa3 flex bb b--dark-green bg-washed-green justify-between sticky top-0 w-100 items-baseline">
+<header id="header" class="f5 pa3 flex bb b--dark-green bg-washed-green justify-between sticky top-0 w-100 items-baseline z-1">
   {%- 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 f4 dark-green anthony" rel="author" href="{{ "/" | relative_url }}">{{ site.title | escape }}</a>
 
   {%- if titles_size > 0 -%}
-    <nav>
+    <nav class="f7">
       {%- for path in page_paths -%}
         {%- assign my_page = site.pages | where: "path", path | first -%}
         {%- if my_page.title -%}
-          <a class="f7 no-underline dark-green" href="{{ my_page.url | relative_url }}">{{ my_page.title | escape }}</a>
+          <a class="no-underline dark-green underline-hover" href="{{ my_page.url | relative_url }}">{{ my_page.title | escape }}</a>
         {%- endif -%}
       {%- endfor -%}
+      <a class="no-underline dark-green ml3 underline-hover" href="{{ "/feed.xml" | relative_url }}">RSS Feed</a>
+      <a class="no-underline dark-green ml3 underline-hover" href="https://github.com/hyphacoop/digitalgarden">View Garden Source</a>
     </nav>
   {%- endif -%}
 </header>

_includes/link-previews.html

@@ -1,7 +1,8 @@
 <!-- That file is not particularly elegant. This will need a refactor at some point. -->
 <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-wrapper' class="bg-white br4 shadow-solid-accent lh-copy dn o-0 pa3 w6 f6 absolute child">
-    <div id='tooltip-content'>
+    <div id='tooltip-content' class="relative overflow-hidden">
-    </div>
+    </div>
+    <div id="tooltip-source" class="f7 light-silver"></div>
   </div>
 </div>

_includes/notes_graph.html

@@ -2,7 +2,7 @@
   <script>
     window.graphData = {% include notes_graph.json %}
   </script>
-  <div class="absolute bottom-1 left-1">
+  <div class="absolute bottom-1 right-1 shadow-solid-accent bg-washed-green br4 pa3">
-    <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>
+    <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>

_layouts/note.html

@@ -3,7 +3,7 @@ layout: default
 ---
 <div class="flex">
   <article class="w-50 pa3 pr0">
-    <div class="container bg-white pa3 br4">
+    <div class="container bg-white sha pa3 br4">
       <header class="mb2 b--washed-green">
         <div class="note-meta flex justify-between">
           {% if page.date_created %}
@@ -17,7 +17,7 @@ layout: default
             {% endif %}
           </time>
         </div>
-        <h1 class="normal f-6 lh-solid">{{ page.title }}</h1>
+        <h1 class="normal work-sans-light f-6 lh-solid">{{ page.title }}</h1>
       </header>
 
       <div id="notes-entry-container">
@@ -25,13 +25,13 @@ layout: default
           {{ content }}
         </div>
 
-        <aside class="bt b--dark-green mt5">
+        <aside class="bt b--moon-gray mt5">
-          <h3 class="normal f1 mv5">Notes mentioning this note</h3>
+          <h3 class="normal f1 mv5 work-sans-light">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">
+            <div class="w-50 mr2 pa3 ba b--moon-gray 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>
+              <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>
             </div>
           {% endfor %}

_sass/_digital-garden.scss

@@ -29,6 +29,24 @@
   font-family: "Anthony", sans-serif;
 }
 
+.violet-sans {
+  font-family: "Violet Sans", sans-serif;
+}
+
+.work-sans-light {
+  font-family: "Work Sans Light", sans-serif;
+}
+
+// Shadow helper
+
+.shadow-solid-accent { box-shadow: 2px 2px 10px rgba( #137752, 0.2 ); }
+
+// Width helper
+
+.w6 {
+  width: 20rem;
+}
+
 // Extended cursors
 
 .grab:hover {
@@ -46,8 +64,8 @@
   fill: transparent;
 
   &.active {
-    stroke-dasharray: 10;
+    stroke-dasharray: 5;
-    animation: dash 20s linear;
+    animation: dash 40s linear;
   }
 }
 
@@ -62,11 +80,19 @@
   stroke: $accent-color;
   fill: #e8fdf5;
   transition: all 0.15s ease-out;
+
+  &:hover {
+    fill: $accent-color;
+  }
 }
 
 .text text {
   cursor: pointer;
   fill: $accent-color;
+
+  &:hover {
+    text-decoration: underline;
+  }
 }
 
 .nodes [active],
@@ -101,18 +127,19 @@
 
 // Link previews
 
-#tooltip-wrapper {
+#tooltip-content {
   max-height: 250px;
 }
 
-#tooltip-wrapper:after {
+#tooltip-content:after {
   content: "";
+  display: block;
   position: absolute;
   z-index: 1;
-  bottom: 0;
+  bottom: .5rem;
-  left: 0;
+  right: 0;
   pointer-events: none;
-  background-image: linear-gradient(to bottom, rgba(255,255,255, 0), rgba(255,255,255, 1) 90%);
+  background-image: linear-gradient(to right, rgba(#fff, 0), rgba(#fff, 1) 50%);
-  width: 100%;
+  width: 150px;
-  height: 75px;
+  height: 1rem;
 }

_sass/_fonts.scss

@@ -6,3 +6,9 @@
   src: url('./assets/fonts/Anthony.woff2') format('woff2'),
        url('./assets/fonts/Anthony.woff') format('woff');
 }
+
+@font-face {
+  font-family: Work Sans Light;
+  src: url('./assets/fonts/WorkSans-Light.woff2') format('woff2'),
+       url('./assets/fonts/WorkSans-Light.woff') format('woff');
+}

assets/js/scripts.js

@@ -36,6 +36,7 @@ const transitionDurationMs = 100
 
 const tooltipWrapper = document.getElementById('tooltip-wrapper')
 const tooltipContent = document.getElementById('tooltip-content')
+const tooltipSource = document.getElementById('tooltip-source')
 
 const hideTooltip = () => {
   opacityTimeout = setTimeout(() => {
@@ -64,6 +65,9 @@ const showTooltip = (event) => {
 
         tooltipContent.innerHTML = tooltipContentHtml
 
+        const pathIndex = event.target.href.split('/')
+        tooltipSource.innerHTML = `/${pathIndex[pathIndex.length - 1]}`
+
         tooltipWrapper.style.display = 'block'
         setTimeout(() => {
           tooltipWrapper.style.opacity = 1
@@ -173,7 +177,7 @@ if (typeof window.graphData !== 'undefined') {
 
     link.attr('stroke-width', (linkD) => {
       if (linkD.source.id === destinationID || linkD.target.id === destinationID) {
-        return STROKE * 2
+        return STROKE * 1
       }
       return STROKE
     })