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 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 foreground-text anthony" rel="author" href="{{ "/" | relative_url }}">{{ site.title | escape }}</a>
{%- if titles_size > 0 -%} {%- if titles_size > 0 -%}
<nav class="f7 code"> <nav class="f7 code">
{%- 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="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 -%} {%- endif -%}
{%- endfor -%} {%- endfor -%}
<a class="no-underline dark-green ml3 underline-hover" href="{{ "/feed.xml" | relative_url }}">RSS Feed</a> <a class="no-underline foreground-text 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="https://github.com/hyphacoop/digitalgarden">View Garden Source</a>
</nav> </nav>
{%- endif -%} {%- endif -%}
</header> </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. --> <!-- 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-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 id='tooltip-content' class="relative overflow-hidden note-contents">
</div> </div>

2
_includes/notes_graph.html
View File

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

4
_layouts/default.html
View File

@ -1,9 +1,9 @@
<!doctype html> <!doctype html>
<html lang="{{ page.lang | default: site.lang | default: "en" }}"> <html lang="{{ page.lang | default: site.lang | default: "en" }}">
{%- include head.html -%} {%- include head.html -%}
<body class="dark-green sans-serif bg-washed-green"> <body class="foreground-text sans-serif bg-background">
{%- include header.html -%} {%- include header.html -%}
<main class="links-dark-green" aria-label="Content"> <main class="links-foreground-text" aria-label="Content">
{{ content }} {{ content }}
</main> </main>
{%- include footer.html -%} {%- 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"> <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"> <div class="container bg-white min-vh-100-header-comp pa3 br4 flex flex-column justify-between">
<header> <header>
<div class="note-meta flex justify-between"> <div class="note-meta flex f7 justify-between code items-center">
{% if page.date_created %} {% 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" }} Created on {{ page.date_created | date: "%B %-d, %Y" }}
{% endif %} {% endif %}
</time> </time>
{% endif %} {% 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" }} Last updated on {{ page.last_modified_at | date: "%B %-d, %Y" }}
{% endif %} {% endif %}
</time> </time>
</div> </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> </header>
<div id="notes-entry-container" class="flex-auto"> <div id="notes-entry-container" class="flex-auto">
<div class="note-contents f6 lh-copy"> <div class="note-contents f5 lh-copy">
{{ content }} {{ content }}
</div> </div>
</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> <h3 class="normal f1 mt5 work-sans-light mb4">Notes mentioning this note</h3>
{% if page.backlinks.size > 0 %} {% if page.backlinks.size > 0 %}
<div class="flex flex-wrap"> <div class="flex flex-wrap">
@ -49,7 +49,7 @@ layout: default
{% endif %} {% endif %}
</aside> </aside>
</div> </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> </article>
<div class="fixed top-0 right-0 w-50 vh-100"> <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 { .links-foreground-text a {
color: $accent-color; color: var(--foreground-text);
} }
.no-underline-hover:hover, .no-underline-hover:hover,
@ -39,7 +39,7 @@
// Shadow helper // 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 // Width helper
@ -66,7 +66,7 @@
// Notes Graph // Notes Graph
.links path { .links path {
stroke: $accent-color; stroke: var(--foreground-text);
fill: transparent; fill: transparent;
&.active { &.active {
@ -83,18 +83,18 @@
.nodes circle { .nodes circle {
cursor: pointer; cursor: pointer;
stroke: $accent-color; stroke: var(--foreground-text);
fill: #e8fdf5; fill: var(--background);
transition: all 0.15s ease-out; transition: all 0.15s ease-out;
&:hover { &:hover {
fill: $accent-color; fill: var(--foreground-text);
} }
} }
.text text { .text text {
cursor: pointer; cursor: pointer;
fill: $accent-color; fill: var(--foreground-text);
&:hover { &:hover {
text-decoration: underline; text-decoration: underline;
@ -104,7 +104,7 @@
.nodes [active], .nodes [active],
.text [active] { .text [active] {
cursor: pointer; cursor: pointer;
fill: #ff6300; fill: var(--active-note);
stroke: transparent; stroke: transparent;
} }
@ -115,28 +115,37 @@
// Notes inline styles // Notes inline styles
.note-meta:before {
content: '';
width: 20px;
height: 20px;
border-radius: 100%;
background: var(--active-note);
}
.internal-link { .internal-link {
padding: 0 0.1em; padding: 0 0.3em;
text-decoration: none; text-decoration: none;
background: rgba($highlight-color, 0.25); background: rgba(var(--internal-link-rgb), 0.25);
border: 1px solid rgba($highlight-color, 0.45);
border-radius: 4px; border-radius: 4px;
text-decoration: underline;
white-space: nowrap;
} }
.invalid-link { .invalid-link {
padding: 0 0.1em 0.2em 0.1em; padding: 0 0.1em 0.2em 0.1em;
text-decoration: none; text-decoration: none;
background: rgba($highlight-color, 0.1); background: rgba(var(--internal-link-rgb), 0.1);
border: 1px solid rgba($highlight-color, 0.5); border: 1px solid rgba(var(--internal-link-rgb), 0.5);
border-radius: 4px; border-radius: 4px;
color: $highlight-color; color: var(--internal-link-rgb);
} }
.note-contents { .note-contents {
blockquote { blockquote {
margin: 0 0 0 0.5em; margin: 0 0 0 0.75em;
padding: 0 0.5em; padding: 0 0.75em;
border-left: 2px solid rgba($accent-color, 0.5); border-left: 2px solid var(--foreground-text);
} }
ul, ol { ul, ol {

29
_sass/_variables.scss
View File

@ -1,2 +1,27 @@
$highlight-color: #F5A486; :root {
$accent-color: #137752; --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);
}