design update
This commit is contained in:
parent
630e923ad4
commit
5230f205da
@ -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 default_paths = site.pages | map: "path" -%}
|
||||||
{%- assign page_paths = site.header_pages | default: default_paths -%}
|
{%- assign page_paths = site.header_pages | default: default_paths -%}
|
||||||
{%- assign titles_size = site.pages | map: 'title' | join: '' | size -%}
|
{%- 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>
|
<a class="no-underline f4 dark-green anthony" rel="author" href="{{ "/" | relative_url }}">{{ site.title | escape }}</a>
|
||||||
|
|
||||||
{%- if titles_size > 0 -%}
|
{%- if titles_size > 0 -%}
|
||||||
<nav>
|
<nav class="f7">
|
||||||
{%- for path in page_paths -%}
|
{%- for path in page_paths -%}
|
||||||
{%- assign my_page = site.pages | where: "path", path | first -%}
|
{%- assign my_page = site.pages | where: "path", path | first -%}
|
||||||
{%- if my_page.title -%}
|
{%- 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 -%}
|
{%- endif -%}
|
||||||
{%- endfor -%}
|
{%- 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>
|
</nav>
|
||||||
{%- endif -%}
|
{%- endif -%}
|
||||||
</header>
|
</header>
|
@ -1,7 +1,8 @@
|
|||||||
<!-- That file is not particularly elegant. This will need a refactor at some point. -->
|
<!-- That file is not particularly elegant. This will need a refactor at some point. -->
|
||||||
<div class="hide-child links-dark-green">
|
<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>
|
||||||
</div>
|
</div>
|
||||||
|
@ -2,7 +2,7 @@
|
|||||||
<script>
|
<script>
|
||||||
window.graphData = {% include notes_graph.json %}
|
window.graphData = {% include notes_graph.json %}
|
||||||
</script>
|
</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>
|
||||||
</div>
|
</div>
|
@ -3,7 +3,7 @@ layout: default
|
|||||||
---
|
---
|
||||||
<div class="flex">
|
<div class="flex">
|
||||||
<article class="w-50 pa3 pr0">
|
<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">
|
<header class="mb2 b--washed-green">
|
||||||
<div class="note-meta flex justify-between">
|
<div class="note-meta flex justify-between">
|
||||||
{% if page.date_created %}
|
{% if page.date_created %}
|
||||||
@ -17,7 +17,7 @@ layout: default
|
|||||||
{% endif %}
|
{% endif %}
|
||||||
</time>
|
</time>
|
||||||
</div>
|
</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>
|
</header>
|
||||||
|
|
||||||
<div id="notes-entry-container">
|
<div id="notes-entry-container">
|
||||||
@ -25,13 +25,13 @@ layout: default
|
|||||||
{{ content }}
|
{{ content }}
|
||||||
</div>
|
</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 %}
|
{% if page.backlinks.size > 0 %}
|
||||||
<div class="flex">
|
<div class="flex">
|
||||||
{% for backlink in page.backlinks %}
|
{% 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 class="f7 lh-copy">{{ backlink.excerpt | strip_html | truncatewords: 20 | remove: '[[' | remove: ']]' }}</div>
|
||||||
</div>
|
</div>
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
|
@ -29,6 +29,24 @@
|
|||||||
font-family: "Anthony", sans-serif;
|
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
|
// Extended cursors
|
||||||
|
|
||||||
.grab:hover {
|
.grab:hover {
|
||||||
@ -46,8 +64,8 @@
|
|||||||
fill: transparent;
|
fill: transparent;
|
||||||
|
|
||||||
&.active {
|
&.active {
|
||||||
stroke-dasharray: 10;
|
stroke-dasharray: 5;
|
||||||
animation: dash 20s linear;
|
animation: dash 40s linear;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -62,11 +80,19 @@
|
|||||||
stroke: $accent-color;
|
stroke: $accent-color;
|
||||||
fill: #e8fdf5;
|
fill: #e8fdf5;
|
||||||
transition: all 0.15s ease-out;
|
transition: all 0.15s ease-out;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
fill: $accent-color;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.text text {
|
.text text {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
fill: $accent-color;
|
fill: $accent-color;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.nodes [active],
|
.nodes [active],
|
||||||
@ -101,18 +127,19 @@
|
|||||||
|
|
||||||
// Link previews
|
// Link previews
|
||||||
|
|
||||||
#tooltip-wrapper {
|
#tooltip-content {
|
||||||
max-height: 250px;
|
max-height: 250px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#tooltip-wrapper:after {
|
#tooltip-content:after {
|
||||||
content: "";
|
content: "";
|
||||||
|
display: block;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
bottom: 0;
|
bottom: .5rem;
|
||||||
left: 0;
|
right: 0;
|
||||||
pointer-events: none;
|
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;
|
||||||
}
|
}
|
@ -5,4 +5,10 @@
|
|||||||
font-family: Anthony;
|
font-family: Anthony;
|
||||||
src: url('./assets/fonts/Anthony.woff2') format('woff2'),
|
src: url('./assets/fonts/Anthony.woff2') format('woff2'),
|
||||||
url('./assets/fonts/Anthony.woff') format('woff');
|
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');
|
||||||
}
|
}
|
Binary file not shown.
BIN
assets/fonts/WorkSans-Light.woff
Normal file
BIN
assets/fonts/WorkSans-Light.woff
Normal file
Binary file not shown.
BIN
assets/fonts/WorkSans-Light.woff2
Normal file
BIN
assets/fonts/WorkSans-Light.woff2
Normal file
Binary file not shown.
@ -36,6 +36,7 @@ const transitionDurationMs = 100
|
|||||||
|
|
||||||
const tooltipWrapper = document.getElementById('tooltip-wrapper')
|
const tooltipWrapper = document.getElementById('tooltip-wrapper')
|
||||||
const tooltipContent = document.getElementById('tooltip-content')
|
const tooltipContent = document.getElementById('tooltip-content')
|
||||||
|
const tooltipSource = document.getElementById('tooltip-source')
|
||||||
|
|
||||||
const hideTooltip = () => {
|
const hideTooltip = () => {
|
||||||
opacityTimeout = setTimeout(() => {
|
opacityTimeout = setTimeout(() => {
|
||||||
@ -64,6 +65,9 @@ const showTooltip = (event) => {
|
|||||||
|
|
||||||
tooltipContent.innerHTML = tooltipContentHtml
|
tooltipContent.innerHTML = tooltipContentHtml
|
||||||
|
|
||||||
|
const pathIndex = event.target.href.split('/')
|
||||||
|
tooltipSource.innerHTML = `/${pathIndex[pathIndex.length - 1]}`
|
||||||
|
|
||||||
tooltipWrapper.style.display = 'block'
|
tooltipWrapper.style.display = 'block'
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
tooltipWrapper.style.opacity = 1
|
tooltipWrapper.style.opacity = 1
|
||||||
@ -173,7 +177,7 @@ if (typeof window.graphData !== 'undefined') {
|
|||||||
|
|
||||||
link.attr('stroke-width', (linkD) => {
|
link.attr('stroke-width', (linkD) => {
|
||||||
if (linkD.source.id === destinationID || linkD.target.id === destinationID) {
|
if (linkD.source.id === destinationID || linkD.target.id === destinationID) {
|
||||||
return STROKE * 2
|
return STROKE * 1
|
||||||
}
|
}
|
||||||
return STROKE
|
return STROKE
|
||||||
})
|
})
|
||||||
|
Loading…
Reference in New Issue
Block a user