445 lines
7.6 KiB
CSS
445 lines
7.6 KiB
CSS
:root {
|
|
color-scheme: light dark;
|
|
--base-font-size: 1em;
|
|
}
|
|
|
|
html {
|
|
height: 100%;
|
|
}
|
|
|
|
body {
|
|
height: 100%;
|
|
margin: 0;
|
|
display: grid;
|
|
grid-template-rows: auto 1fr auto;
|
|
font-family: sans, sans-serif;
|
|
line-height: 1.75;
|
|
box-sizing: border-box;
|
|
min-width: 0;
|
|
background: light-dark(#eee, #222);
|
|
color: light-dark(#000, #f1e9e5);
|
|
}
|
|
|
|
main {
|
|
margin: 0 auto;
|
|
padding: 0 20px;
|
|
max-width: 100%;
|
|
min-width: 600px;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
p:not(.quote-citation), section li {
|
|
font-family: prose, sans-serif;
|
|
}
|
|
|
|
section p {
|
|
line-height: 2;
|
|
}
|
|
|
|
pre {
|
|
max-width: 100%;
|
|
overflow: auto;
|
|
box-sizing: border-box;
|
|
padding: 12px;
|
|
margin: 40px 10px;
|
|
box-shadow: 1px 1px 3px 1.5px #00000077;
|
|
transition: 1000ms;
|
|
}
|
|
|
|
pre:hover {
|
|
box-shadow: 1px 1px 3px 2.5px #00777777;
|
|
}
|
|
|
|
code {
|
|
padding: 3px 6px;
|
|
margin-right: 3px;
|
|
white-space: nowrap;
|
|
font-size: calc(var(--base-font-size) * 0.8);
|
|
box-shadow: 1px 1px 1px 1px #00000077;
|
|
transition: 1000ms;
|
|
}
|
|
|
|
code:hover {
|
|
box-shadow: 1px 1px 1px 1px #00777799;
|
|
}
|
|
|
|
pre, code {
|
|
background: light-dark(#e0e0e0, #333);
|
|
font-family: mono, monospace;
|
|
border: solid 2px light-dark(#d0d0d0, #434343);
|
|
border-radius: 6px;
|
|
}
|
|
|
|
a {
|
|
color: light-dark(#0f6366, #1dd7d7);
|
|
text-decoration: underline dotted #159b9b;
|
|
text-decoration-thickness: 2.5px;
|
|
text-underline-offset: 3px;
|
|
transition: 1500ms;
|
|
}
|
|
|
|
a.attached:hover,
|
|
#nav-main a:hover
|
|
{
|
|
color: light-dark(#117c7c, #00ffff);
|
|
text-shadow: 0px 0px 22px #10afaf;
|
|
transition: 1500ms;
|
|
}
|
|
|
|
a.detached {
|
|
color: light-dark(#595959, #acacac);
|
|
text-decoration-color: light-dark(#444444, #777);
|
|
}
|
|
|
|
a.external {
|
|
color: light-dark(#1958a7, #2fbae4);
|
|
text-decoration-color: light-dark(#2A7CDF, #46c1e7);
|
|
text-decoration-style: solid;
|
|
text-decoration-thickness: 1.5px;
|
|
transition: 1500ms;
|
|
}
|
|
|
|
a.external:hover {
|
|
color: light-dark(#0393b2, #74e5ff);
|
|
text-decoration-color: light-dark(#1ed4f1, #aeffff);
|
|
transition: 1500ms;
|
|
}
|
|
|
|
a:visited,
|
|
a.detached:visited,
|
|
a.external:visited
|
|
{
|
|
text-decoration-color: light-dark(#bbb, #999);
|
|
transition: 1500ms;
|
|
}
|
|
|
|
footer div a {
|
|
text-decoration: none;
|
|
}
|
|
|
|
div.header-row {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
div.labels {
|
|
margin-right: 10px;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
span.label {
|
|
padding: 3px 6px;
|
|
border-radius: 6px;
|
|
margin: 5px;
|
|
font-size: calc(var(--base-font-size) * 0.7);
|
|
}
|
|
|
|
span.root-label {
|
|
color: #fff;
|
|
font-weight: bolder;
|
|
background: #158181ff;
|
|
border: outset 2px #ffffff;
|
|
box-shadow: 2px 2px #20c3c3ff;
|
|
}
|
|
|
|
span.id-label {
|
|
font-family: mono, monospace;
|
|
background: light-dark(#e0e0e0, #444);
|
|
border: solid 1px light-dark(#d0d0d0, #666);
|
|
}
|
|
|
|
span.hidden-label {
|
|
background: light-dark(#888, #000);
|
|
color: light-dark(#eee, #969696);
|
|
border: solid 1px light-dark(#d0d0d0, #555);
|
|
}
|
|
|
|
h1 {
|
|
font-family: title, serif;
|
|
line-height: 1;
|
|
}
|
|
|
|
h2, h3, h4, h5, h6 {
|
|
font-family: serifed, serif;
|
|
}
|
|
|
|
main h2 {
|
|
margin-top: 10px;
|
|
}
|
|
|
|
h1, h2, h3, h4, h5, h6 {
|
|
font-weight: 1;
|
|
margin: 10px 0;
|
|
overflow-wrap: break-word;
|
|
}
|
|
|
|
h1.node-title {
|
|
display: inline;
|
|
}
|
|
|
|
h2.connections-title {
|
|
font-family: title;
|
|
margin-bottom: 0px;
|
|
}
|
|
|
|
h3.connections-title {
|
|
margin-top: 0px;
|
|
}
|
|
|
|
h1 { font-size: calc(var(--base-font-size) * 3.6); }
|
|
h2 { font-size: calc(var(--base-font-size) * 2.8); }
|
|
h3 { font-size: calc(var(--base-font-size) * 2.4); }
|
|
h4 { font-size: calc(var(--base-font-size) * 2.0); }
|
|
h5 { font-size: calc(var(--base-font-size) * 1.6); }
|
|
h6 { font-size: calc(var(--base-font-size) * 1.2); }
|
|
|
|
footer div {
|
|
margin: 20px 0;
|
|
text-align: center;
|
|
font-family: sans;
|
|
font-size: calc(var(--base-font-size) * 0.8);
|
|
}
|
|
|
|
footer p {
|
|
font-size: calc(var(--base-font-size) * 1.1);
|
|
font-family: sans;
|
|
margin: 0;
|
|
}
|
|
|
|
span.detached-connection {
|
|
filter: opacity(60%);
|
|
}
|
|
|
|
div.connections-container {
|
|
margin-bottom: 60px;
|
|
}
|
|
|
|
hr.connections {
|
|
margin-top: 60px;
|
|
}
|
|
|
|
nav#nav-main a {
|
|
text-decoration: none;
|
|
transition: 1500ms;
|
|
}
|
|
|
|
nav#nav-main {
|
|
text-align: center;
|
|
margin-bottom: 20px;
|
|
margin-top: 10px;
|
|
}
|
|
|
|
#nav-main-spread {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin: 0 10px;
|
|
}
|
|
|
|
nav#nav-main ul {
|
|
display: inline;
|
|
padding-left: 10px;
|
|
margin: 0;
|
|
}
|
|
|
|
nav#nav-main li {
|
|
margin-right: 10px;
|
|
display: inline;
|
|
}
|
|
|
|
.nav-inputs {
|
|
margin-right: 10px;
|
|
}
|
|
|
|
.nav-inputs div {
|
|
display: flex;
|
|
align-items: right;
|
|
}
|
|
|
|
form.node-selector, form.navbar-search {
|
|
display: inline;
|
|
}
|
|
|
|
.node-selector select {
|
|
width: 100px;
|
|
}
|
|
|
|
.navbar-search input[type="text"] {
|
|
width: 100px;
|
|
border-radius: 5px;
|
|
}
|
|
|
|
input[type="text"],
|
|
input[type="submit"],
|
|
select,
|
|
button
|
|
{
|
|
border-radius: 5px;
|
|
padding: 5px 8px;
|
|
margin-right: 3px;
|
|
background: light-dark(#eeeeff00, #002020);
|
|
border-color: light-dark(#216767, #138e8e);
|
|
border-width: 0.5px;
|
|
transition: 1500ms;
|
|
}
|
|
|
|
input[type="text"]:hover,
|
|
input[type="submit"]:hover,
|
|
select:hover,
|
|
button:hover
|
|
{
|
|
border-color: light-dark(#36a9a9, #00ffff);
|
|
box-shadow: 2px 2px #36a9a9ee;
|
|
}
|
|
|
|
div#error-poem {
|
|
text-align: right;
|
|
margin-top: 8em;
|
|
margin-right: 2em;
|
|
font-size: 0.8em;
|
|
font-size: calc(var(--base-font-size) * 0.8);
|
|
}
|
|
|
|
em, i {
|
|
font-weight: 300;
|
|
padding-right: 2px;
|
|
}
|
|
|
|
em#index-node-count {
|
|
font-size: calc(var(--base-font-size) * 0.8);
|
|
}
|
|
|
|
table {
|
|
margin: 20px auto;
|
|
border-collapse: collapse;
|
|
border: 0.5px dotted #666;
|
|
}
|
|
|
|
table th {
|
|
background: light-dark(#099, #002929);
|
|
color: #fff;
|
|
border-color: light-dark(#222, #666);
|
|
}
|
|
|
|
td, th {
|
|
padding: 10px;
|
|
border: 0.5px dotted #666;
|
|
}
|
|
|
|
summary {
|
|
margin-bottom: 15px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
hr {
|
|
border: 1px dashed #555;
|
|
}
|
|
|
|
footer hr {
|
|
margin-top: 60px;
|
|
}
|
|
|
|
blockquote {
|
|
font-family: serifed;
|
|
font-size: calc(var(--base-font-size) * 1.6);
|
|
}
|
|
|
|
p.verse {
|
|
font-family: serifed;
|
|
font-size: calc(var(--base-font-size) * 1.6);
|
|
margin-left: 2em;
|
|
}
|
|
|
|
.quote-citation {
|
|
display: block;
|
|
margin: 0.5em 0 0 0;
|
|
text-indent: -1.2em;
|
|
padding-left: 1em;
|
|
font-size: calc(var(--base-font-size) * 0.8);
|
|
}
|
|
|
|
.quote-citation::before {
|
|
content: "— ";
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
span.root-label {
|
|
border-width: 1px;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 600px) {
|
|
nav li {
|
|
margin-right: 3px;
|
|
}
|
|
|
|
div.header-row {
|
|
display: block;
|
|
}
|
|
|
|
#nav-main-spread {
|
|
display: inline;
|
|
margin: 0;
|
|
}
|
|
|
|
.nav-inputs {
|
|
margin-right: 0px;
|
|
}
|
|
|
|
div.nav-inputs {
|
|
margin-top: 10px;
|
|
}
|
|
|
|
main {
|
|
width: 95vw;
|
|
padding: 0 2.5vw;
|
|
min-width: unset;
|
|
}
|
|
|
|
ul {
|
|
padding-left: 20px;
|
|
}
|
|
|
|
pre {
|
|
max-width: 100%;
|
|
margin: 15px 0px;
|
|
}
|
|
}
|
|
|
|
@media (min-width: 601px) {
|
|
|
|
div.connections-container {
|
|
width: 100%;
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
}
|
|
}
|
|
|
|
@media (min-width: 1100px) and (max-width: 2100px) {
|
|
main {
|
|
width: 800px;
|
|
margin: 0 auto;
|
|
}
|
|
}
|
|
|
|
@media (min-width: 2100px) {
|
|
:root {
|
|
--base-font-size: 1vw;
|
|
}
|
|
|
|
main {
|
|
max-width: 40%;
|
|
}
|
|
|
|
.nav-inputs :is(input, select, button) {
|
|
height: calc(var(--base-font-size) * 1.6);
|
|
font-size: calc(var(--base-font-size) * 0.8);
|
|
padding: 0 calc(var(--base-font-size) * 0.3);;
|
|
}
|
|
|
|
.nav-inputs input[type="text"], .nav-inputs select {
|
|
min-width: calc(var(--base-font-size) * 5);
|
|
}
|
|
}
|