From 73f6df7691face038768703a9843c182435d8bef Mon Sep 17 00:00:00 2001 From: Garry Ing Date: Sun, 18 Apr 2021 11:22:42 -0400 Subject: [PATCH] css vars --- _includes/header.html | 10 ++++---- _includes/link-previews.html | 2 +- _includes/notes_graph.html | 2 +- _layouts/default.html | 4 ++-- _layouts/note.html | 14 +++++------ _sass/_digital-garden.scss | 45 +++++++++++++++++++++--------------- _sass/_variables.scss | 29 +++++++++++++++++++++-- 7 files changed, 70 insertions(+), 36 deletions(-) diff --git a/_includes/header.html b/_includes/header.html index 8006ab6..704d371 100644 --- a/_includes/header.html +++ b/_includes/header.html @@ -1,19 +1,19 @@ -
+
{%- 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 -%} - + {%- if titles_size > 0 -%} {%- endif -%}
\ No newline at end of file diff --git a/_includes/link-previews.html b/_includes/link-previews.html index ff2173a..d765ced 100644 --- a/_includes/link-previews.html +++ b/_includes/link-previews.html @@ -1,5 +1,5 @@ -
+
diff --git a/_includes/notes_graph.html b/_includes/notes_graph.html index 296b7e4..29cffe8 100644 --- a/_includes/notes_graph.html +++ b/_includes/notes_graph.html @@ -2,7 +2,7 @@ -
+

Here are all the notes in this garden, along with their links, visualized as a graph.

\ No newline at end of file diff --git a/_layouts/default.html b/_layouts/default.html index da86111..1e8c741 100644 --- a/_layouts/default.html +++ b/_layouts/default.html @@ -1,9 +1,9 @@ {%- include head.html -%} - + {%- include header.html -%} -
+
{{ content }}
{%- include footer.html -%} diff --git a/_layouts/note.html b/_layouts/note.html index 9243bee..af5e018 100644 --- a/_layouts/note.html +++ b/_layouts/note.html @@ -5,28 +5,28 @@ layout: default
-
+
{% if page.date_created %} -
-

{{ page.title }}

+

{{ page.title }}

-
+
{{ content }}
-
- +
diff --git a/_sass/_digital-garden.scss b/_sass/_digital-garden.scss index 773a5c5..4463942 100644 --- a/_sass/_digital-garden.scss +++ b/_sass/_digital-garden.scss @@ -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 { diff --git a/_sass/_variables.scss b/_sass/_variables.scss index 9473b30..9410f81 100644 --- a/_sass/_variables.scss +++ b/_sass/_variables.scss @@ -1,2 +1,27 @@ -$highlight-color: #F5A486; -$accent-color: #137752; \ No newline at end of file +: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); +} \ No newline at end of file