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 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>
|
@ -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>
|
||||
|
@ -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>
|
@ -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 %}
|
||||
|
@ -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;
|
||||
}
|
@ -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.
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 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
|
||||
})
|
||||
|
Loading…
Reference in New Issue
Block a user