autonomic-cooperative/kcl-digital-humanities-garden
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

css vars

Browse Source
This commit is contained in:
Garry Ing 2021-04-18 11:22:42 -04:00
parent 6cd6361c0f
commit 73f6df7691
No known key found for this signature in database
GPG Key ID: 3B379B1F2193CC3E
7 changed files with 70 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
_includes/header.html
View File

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

2
_includes/link-previews.html
View File

@ -1,5 +1,5 @@
<!-- 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 foreground-text links-foreground-text">
<div id='tooltip-wrapper' class="bg-white br4 shadow-solid-accent lh-copy dn o-0 pa3 w6 f6 absolute z-2 child">
<div id='tooltip-content' class="relative overflow-hidden note-contents">
</div>

2
_includes/notes_graph.html
View File

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

4
_layouts/default.html
View File

@ -1,9 +1,9 @@
<!doctype html>
<html lang="{{ page.lang | default: site.lang | default: "en" }}">
{%- include head.html -%}
<body class="dark-green sans-serif bg-washed-green">
<body class="foreground-text sans-serif bg-background">
{%- include header.html -%}
<main class="links-dark-green" aria-label="Content">
<main class="links-foreground-text" aria-label="Content">
{{ content }}
</main>
{%- include footer.html -%}

14
_layouts/note.html
View File

@ -5,28 +5,28 @@ layout: default
<article id="note-container" class="w-50 pa3 pr0 relative z-1">
<div class="container bg-white min-vh-100-header-comp pa3 br4 flex flex-column justify-between">
<header>
<div class="note-meta flex justify-between">
<div class="note-meta flex f7 justify-between code items-center">
{% if page.date_created %}
<time class="code dib f7 pb2 flex" datetime="{{ page.date_created | date_to_xmlschema }}">{% if page.type != 'pages' %}
<time class="ml3 flex-auto" datetime="{{ page.date_created | date_to_xmlschema }}">{% if page.type != 'pages' %}
Created on {{ page.date_created | date: "%B %-d, %Y" }}
{% endif %}
</time>
{% endif %}
<time class="code dib f7 pb2" datetime="{{ page.last_modified_at | date_to_xmlschema }}">{% if page.type != 'pages' %}
<time 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 work-sans-light f-6 mb4 lh-solid">{{ page.title }}</h1>
<h1 class="note-title normal relative work-sans-light f-5 mb4 lh-solid">{{ page.title }}</h1>
</header>
<div id="notes-entry-container" class="flex-auto">
<div class="note-contents f6 lh-copy">
<div class="note-contents f5 lh-copy">
{{ content }}
</div>
</div>
<aside class="bt b--washed-green bw1 nl3 nr3 ph3 mt5">
<aside class="bt b--background bw1 nl3 nr3 ph3 mt5">
<h3 class="normal f1 mt5 work-sans-light mb4">Notes mentioning this note</h3>
{% if page.backlinks.size > 0 %}
<div class="flex flex-wrap">
@ -49,7 +49,7 @@ layout: default
{% endif %}
</aside>
</div>
<button id="note-expand" class="absolute top-1 pointer nr4 right-0 bg-washed-green button-reset bn dark-green o-50">→</button>
<button id="note-expand" class="absolute top-1 pointer nr4 mt3 right-0 bg-background button-reset bn foreground-text ">→</button>
</article>
<div class="fixed top-0 right-0 w-50 vh-100">

45
_sass/_digital-garden.scss
View File

@ -1,5 +1,5 @@
.links-dark-green a {
color: $accent-color;
.links-foreground-text a {
color: var(--foreground-text);
}
.no-underline-hover:hover,
@ -39,7 +39,7 @@
// Shadow helper
.shadow-solid-accent { box-shadow: 2px 2px 10px rgba( #137752, 0.2 ); }
.shadow-solid-accent { box-shadow: 2px 2px 10px rgba( var(--foreground-text-rgb), 0.2 ); }
// Width helper
@ -66,7 +66,7 @@
// Notes Graph
.links path {
stroke: $accent-color;
stroke: var(--foreground-text);
fill: transparent;
&.active {
@ -83,18 +83,18 @@
.nodes circle {
cursor: pointer;
stroke: $accent-color;
fill: #e8fdf5;
stroke: var(--foreground-text);
fill: var(--background);
transition: all 0.15s ease-out;
&:hover {
fill: $accent-color;
fill: var(--foreground-text);
}
}
.text text {
cursor: pointer;
fill: $accent-color;
fill: var(--foreground-text);
&:hover {
text-decoration: underline;
@ -104,7 +104,7 @@
.nodes [active],
.text [active] {
cursor: pointer;
fill: #ff6300;
fill: var(--active-note);
stroke: transparent;
}
@ -115,28 +115,37 @@
// Notes inline styles
.note-meta:before {
content: '';
width: 20px;
height: 20px;
border-radius: 100%;
background: var(--active-note);
}
.internal-link {
padding: 0 0.1em;
padding: 0 0.3em;
text-decoration: none;
background: rgba($highlight-color, 0.25);
border: 1px solid rgba($highlight-color, 0.45);
background: rgba(var(--internal-link-rgb), 0.25);
border-radius: 4px;
text-decoration: underline;
white-space: nowrap;
}
.invalid-link {
padding: 0 0.1em 0.2em 0.1em;
text-decoration: none;
background: rgba($highlight-color, 0.1);
border: 1px solid rgba($highlight-color, 0.5);
background: rgba(var(--internal-link-rgb), 0.1);
border: 1px solid rgba(var(--internal-link-rgb), 0.5);
border-radius: 4px;
color: $highlight-color;
color: var(--internal-link-rgb);
}
.note-contents {
blockquote {
margin: 0 0 0 0.5em;
padding: 0 0.5em;
border-left: 2px solid rgba($accent-color, 0.5);
margin: 0 0 0 0.75em;
padding: 0 0.75em;
border-left: 2px solid var(--foreground-text);
}
ul, ol {

29
_sass/_variables.scss
View File

@ -1,2 +1,27 @@
$highlight-color: #F5A486;
$accent-color: #137752;
:root {
--active-note: #9e00ff;
--foreground-text: #F06E2F;
--foreground-text-rgb: 240, 110, 47;
--internal-link-rgb: 245, 164, 134;
--background: #eaf1ca;
}
.bg-foreground-text {
background-color:var(--foreground-text);
}
.b--foreground-text {
border-color:var(--foreground-text);
}
.foreground-text {
color:var(--foreground-text);
}
.bg-background {
background-color:var(--background);
}
.b--background {
border-color:var(--background);
}