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. -->
<style>
content a.internal-link {
border-color: #8b88e6;
background-color: #efefff;
}
#tooltip-wrapper {
background: white;
background: #0c0003;
padding: 1em;
border: 1px solid #ddd;
border: 1px solid #3e0212;
border-radius: 4px;
overflow: hidden;
position: absolute;
@ -27,7 +23,7 @@
bottom: 0;
left: 0;
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%;
height: 75px;
}

View File

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

View File

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