Changed color scheme
This commit is contained in:
parent
3d8e6a07a3
commit
8eae2f8f3f
@ -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;
|
||||||
}
|
}
|
||||||
|
@ -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;
|
||||||
}
|
}
|
||||||
|
@ -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;
|
||||||
}
|
}
|
||||||
|
Loading…
x
Reference in New Issue
Block a user