design update

This commit is contained in:
Garry Ing 2021-03-28 12:30:27 -04:00
parent 630e923ad4
commit 5230f205da
No known key found for this signature in database
GPG Key ID: 3B379B1F2193CC3E
10 changed files with 63 additions and 23 deletions

View File

@ -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>

View File

@ -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-content'>
<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' class="relative overflow-hidden">
</div>
<div id="tooltip-source" class="f7 light-silver"></div>
</div>
</div>

View File

@ -2,7 +2,7 @@
<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 class="absolute bottom-1 right-1 shadow-solid-accent bg-washed-green br4 pa3">
<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>

View File

@ -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">
<h3 class="normal f1 mv5">Notes mentioning this note</h3>
<aside class="bt b--moon-gray mt5">
<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">
<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="w-50 mr2 pa3 ba b--moon-gray br4">
<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 %}

View File

@ -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;
animation: dash 20s linear;
stroke-dasharray: 5;
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;
left: 0;
bottom: .5rem;
right: 0;
pointer-events: none;
background-image: linear-gradient(to bottom, rgba(255,255,255, 0), rgba(255,255,255, 1) 90%);
width: 100%;
height: 75px;
background-image: linear-gradient(to right, rgba(#fff, 0), rgba(#fff, 1) 50%);
width: 150px;
height: 1rem;
}

View File

@ -5,4 +5,10 @@
font-family: Anthony;
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');
}

Binary file not shown.

Binary file not shown.

Binary file not shown.

View File

@ -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
})