Changed color scheme

This commit is contained in:
walcutt 2023-01-31 19:02:51 -05:00
parent 3d8e6a07a3
commit 8eae2f8f3f
3 changed files with 24 additions and 33 deletions

View File

@ -1,14 +1,10 @@
<!-- 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. -->
<style> <style>
content a.internal-link {
border-color: #8b88e6;
background-color: #efefff;
}
#tooltip-wrapper { #tooltip-wrapper {
background: white; background: #0c0003;
padding: 1em; padding: 1em;
border: 1px solid #ddd; border: 1px solid #3e0212;
border-radius: 4px; border-radius: 4px;
overflow: hidden; overflow: hidden;
position: absolute; position: absolute;
@ -27,7 +23,7 @@
bottom: 0; bottom: 0;
left: 0; left: 0;
pointer-events: none; pointer-events: none;
background-image: linear-gradient(to bottom, rgba(255,255,255, 0), rgba(255,255,255, 1) 90%); background-image: linear-gradient(to bottom, rgba(0,0,0, 0), rgba(0,0,0, 1) 90%);
width: 100%; width: 100%;
height: 75px; height: 75px;
} }

View File

@ -1,25 +1,25 @@
<style> <style>
.links line { .links line {
stroke: #ccc; stroke: #31001e;
opacity: 0.5; opacity: 0.5;
} }
.nodes circle { .nodes circle {
cursor: pointer; cursor: pointer;
fill: #8b88e6; fill: #6f0320;
transition: all 0.15s ease-out; transition: all 0.15s ease-out;
} }
.text text { .text text {
cursor: pointer; cursor: pointer;
fill: #333; fill: #ccc;
text-shadow: -1px -1px 0 #fafafabb, 1px -1px 0 #fafafabb, -1px 1px 0 #fafafabb, 1px 1px 0 #fafafabb; text-shadow: -1px -1px 0 #333, 1px -1px 0 #333, -1px 1px 0 #333, 1px 1px 0 #333;
} }
.nodes [active], .nodes [active],
.text [active] { .text [active] {
cursor: pointer; cursor: pointer;
fill: black; fill: #ccc;
} }
.inactive { .inactive {
@ -28,7 +28,7 @@
} }
#graph-wrapper { #graph-wrapper {
background: #fcfcfc; background: #0c0003;
border-radius: 4px; border-radius: 4px;
height: auto; height: auto;
} }

View File

@ -1,8 +1,9 @@
$color-primary: hsl(0, 0%, 10%); $color-primary: hsl(0, 0%, 10%);
$color-text: hsl(0, 0%, 20%); $color-text: hsl(0, 0%, 80%);
$color-subtext: hsl(0, 0%, 30%); $color-subtext: hsl(0, 0%, 70%);
$color-border: hsl(0, 0%, 85%); $color-border: hsl(0, 0%, 30%);
$color-box-background: mix($color-primary, white, 4%); $color-box-background: #0c0003;
$color-background: #31010e;
$border-radius: 4px; $border-radius: 4px;
$font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, $font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial,
sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
@ -18,6 +19,8 @@ body {
font-size: 1rem; font-size: 1rem;
max-width: 63em; max-width: 63em;
background-color: #31010e;
@media (min-width: 820px) { @media (min-width: 820px) {
font-size: 1.2rem; font-size: 1.2rem;
} }
@ -32,7 +35,7 @@ time {
footer { footer {
margin: 2em 0; margin: 2em 0;
font-size: 0.8em; font-size: 0.8em;
color: mix($color-text, white, 80%); color: $color-subtext;
padding-top: 1em; padding-top: 1em;
} }
@ -80,10 +83,10 @@ a {
padding: 0 0.1em; padding: 0 0.1em;
text-decoration: none; text-decoration: none;
border-bottom: 1px solid $color-border; border-bottom: 1px solid $color-border;
color: $color-primary; color: mix($color-background, $color-text, 10%);
&:hover { &:hover {
color: black !important; color: white !important;
background: #fffaf1; background: #6f0320;
} }
&:after { &:after {
position: relative; position: relative;
@ -99,11 +102,6 @@ a {
} }
} }
*:focus {
background: #ffe8bc !important;
color: black !important;
}
nav { nav {
margin: 1em 0 3em; margin: 1em 0 3em;
} }
@ -137,10 +135,7 @@ nav {
border: 0px; border: 0px;
border-radius: 4px; border-radius: 4px;
padding: 0.5em; padding: 0.5em;
} color: $color-text;
#search-input:focus {
background: $color-primary;
} }
code { code {
@ -150,13 +145,13 @@ code {
} }
.invalid-link { .invalid-link {
color: #444444; color: #6f0320;
cursor: help; cursor: help;
background: #fafafa; background: $color-subtext;
padding: 0 0.1em; padding: 0 0.1em;
} }
.invalid-link-brackets { .invalid-link-brackets {
color: #ccc; color: #6f0320;
cursor: help; cursor: help;
} }