596 lines
12 KiB
CSS
596 lines
12 KiB
CSS
/* Default theme */
|
||
html, body {
|
||
margin: 0;
|
||
padding: 0.5ex 1ex;
|
||
font-family: 'Atkinson Hyperlegible', 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
||
font-size: 110%;
|
||
}
|
||
|
||
body {
|
||
max-width: 80ex;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
body nav {
|
||
text-align: center;
|
||
}
|
||
body nav h1 {
|
||
text-align: center;
|
||
color: #000;
|
||
display: inline-block;
|
||
}
|
||
|
||
a:focus {
|
||
background-color: rgb(0, 0, 238);
|
||
color: white;
|
||
}
|
||
|
||
h1 a:focus,
|
||
h2 a:focus,
|
||
h3 a:focus,
|
||
h4 a:focus,
|
||
h5 a:focus,
|
||
h6 a:focus
|
||
{
|
||
background-color: inherit;
|
||
color: #2c3e50;
|
||
}
|
||
|
||
/* Search box */
|
||
body nav input {
|
||
background-color: transparent;
|
||
color: #000;
|
||
border: none;
|
||
border-bottom: 1px solid #888;
|
||
}
|
||
.results-box-container {
|
||
z-index: 5;
|
||
position: fixed;
|
||
width: 100vw;
|
||
height: 100vh;
|
||
background-color: rgba(0,0,0,0.3);
|
||
top: 0;
|
||
left: 0;
|
||
}
|
||
.results-box-container.hidden {
|
||
display: none;
|
||
}
|
||
.results-box {
|
||
min-width: 50vw;
|
||
max-width: 90vw;
|
||
min-height: 20ex;
|
||
max-height: 90vh;
|
||
overflow: auto;
|
||
border-radius: 4px;
|
||
margin: 2rem auto;
|
||
box-shadow: 0px 1px 2px 1px rgba(0, 0, 0, 0.25);
|
||
background-color: #fff;
|
||
}
|
||
|
||
.results-box-container .results-box input {
|
||
width: 90%;
|
||
margin: 0 auto;
|
||
padding-top: 2ex;
|
||
display: block;
|
||
background-color: transparent;
|
||
color: #000;
|
||
border: none;
|
||
border-bottom: 1px solid #888;
|
||
outline: none;
|
||
font-size: 100%;
|
||
}
|
||
|
||
.results-box-container .results-box input:focus {
|
||
border-bottom: 1px solid #000;
|
||
}
|
||
|
||
/* Search box results */
|
||
.results-box ul {
|
||
list-style: none;
|
||
padding: 0;
|
||
}
|
||
.results-box ul li {
|
||
padding: 0.25ex;
|
||
margin: 1ex;
|
||
border-radius: 4px;
|
||
box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.25);
|
||
}
|
||
|
||
.results-box ul li h2 {
|
||
font-size: 110%;
|
||
padding: 1.25ex;
|
||
display: block;
|
||
margin: 0;
|
||
}
|
||
|
||
.results-box li h2.is-todo::before {
|
||
content: 'TODO';
|
||
display: inline-block;
|
||
background-color: #D00;
|
||
padding: 0.25ex;
|
||
border-radius: 4px;
|
||
font-size: 90%;
|
||
margin-right: 0.5ex;
|
||
}
|
||
|
||
.no-results-box {
|
||
padding: 1rem;
|
||
}
|
||
|
||
.no-results-box.hidden {
|
||
display: none;
|
||
}
|
||
|
||
a.img {
|
||
display: block;
|
||
}
|
||
|
||
img {
|
||
max-width: 100%;
|
||
}
|
||
|
||
@font-face {
|
||
font-family: "Atkinson Hyperlegible";
|
||
src: url('./fonts/atkinson-hyperlegible/eot/Atkinson-Hyperlegible-Regular-102.eot');
|
||
src: url('./fonts/atkinson-hyperlegible/eot/Atkinson-Hyperlegible-Regular-102.eot') format('embedded-opentype'),
|
||
url('./fonts/atkinson-hyperlegible/woff2/Atkinson-Hyperlegible-Regular-102a.woff2') format('woff2'),
|
||
url('./fonts/atkinson-hyperlegible/woff/Atkinson-Hyperlegible-Regular-102.woff') format('woff'),
|
||
url('./fonts/atkinson-hyperlegible/ttf/Atkinson-Hyperlegible-Regular-102.ttf') format('truetype');
|
||
|
||
/* Make sure text is displayed ASAP, even if this font is not ready. */
|
||
font-display: swap;
|
||
}
|
||
|
||
|
||
/* Node styling */
|
||
.node {
|
||
margin: 0 auto;
|
||
}
|
||
|
||
.node .node {
|
||
padding: 1ex 0 1ex 1ex;
|
||
border-left: 1px dashed #2c3e50;
|
||
}
|
||
|
||
.node.collapsed > .contents {
|
||
display: none;
|
||
}
|
||
|
||
/* Item list */
|
||
.node .contents ul,
|
||
.global-table-of-contents ul {
|
||
--tree-spacing : 1rem;
|
||
--tree-radius : 0.75ex;
|
||
--tree-line-separation: 0.5rem;
|
||
--tree-color: #ccc;
|
||
--tree-border-radius: 5px;
|
||
list-style: none;
|
||
}
|
||
|
||
.node .contents ul li,
|
||
.global-table-of-contents ul li{
|
||
position: relative;
|
||
padding-left: calc(var(--tree-spacing) * 2);
|
||
}
|
||
|
||
.node .contents ul li::after,
|
||
.global-table-of-contents ul li::after {
|
||
content: '';
|
||
display: block;
|
||
position: absolute;
|
||
top: calc(var(--tree-spacing) / 2 - var(--tree-radius));
|
||
left: calc(var(--tree-spacing) - var(--tree-radius) - 1px);
|
||
width: calc(2 * var(--tree-radius));
|
||
height: calc(2 * var(--tree-radius));
|
||
border-radius: 50%;
|
||
background: var(--tree-color);
|
||
}
|
||
|
||
.node .contents ul li::before,
|
||
.global-table-of-contents ul li::before {
|
||
content: ' ';
|
||
width: var(--tree-spacing);
|
||
display: inline-block;
|
||
border-bottom: 2px dashed var(--tree-color);
|
||
vertical-align: super;
|
||
margin-right: calc(var(--tree-line-separation) + 0.5ex);
|
||
margin-left: calc(0px - (var(--tree-line-separation) * 4) - 2px);
|
||
}
|
||
|
||
/* Nested item list */
|
||
.node .contents ul ul,
|
||
.global-table-of-contents ul ul {
|
||
padding: 0;
|
||
margin-left: calc(var(--tree-spacing));
|
||
list-style: none;
|
||
}
|
||
|
||
.node .contents ul > li > ul,
|
||
.global-table-of-contents ul > li > ul {
|
||
margin-left: calc(0px - var(--tree-spacing));
|
||
}
|
||
|
||
.node .contents ul ul li,
|
||
.global-table-of-contents ul ul li {
|
||
margin-left: calc(0px - var(--tree-radius) / 2 + 2px);
|
||
border-left: 2px solid var(--tree-color);
|
||
}
|
||
|
||
.node .contents ul ul li::marker,
|
||
.global-table-of-contents ul ul li::marker {
|
||
content: '';
|
||
}
|
||
|
||
.node .contents ul ul li::after,
|
||
.global-table-of-contents ul ul li::after {
|
||
left: calc(var(--tree-spacing) * 2 - 0.5ex);
|
||
}
|
||
|
||
.node .contents ul ul li::before,
|
||
.global-table-of-contents ul ul li::before {
|
||
width: calc(var(--tree-spacing) * 2);
|
||
height: calc(var(--tree-spacing) + 5px);
|
||
margin-top: -100%;
|
||
border-radius: 0;
|
||
top: calc(-0.5ex - 2px);
|
||
border-left: 2px solid var(--tree-color);
|
||
border-bottom-style: solid;
|
||
}
|
||
|
||
.node .contents ul ul li:last-of-type::before,
|
||
.global-table-of-contents ul ul li:last-of-type::before {
|
||
border-bottom-left-radius: var(--tree-border-radius);
|
||
}
|
||
|
||
.node .contents ul li:last-of-type,
|
||
.global-table-of-contents ul li:last-of-type {
|
||
border-color: transparent;
|
||
}
|
||
|
||
.node .node.collapsed > .title::before {
|
||
content: "›";
|
||
vertical-align: text-bottom;
|
||
}
|
||
|
||
.node .node.expanded > .title::before {
|
||
content: "›";
|
||
transform: rotate(90deg);
|
||
display: inline-block;
|
||
}
|
||
|
||
.node .title {
|
||
margin: 0;
|
||
}
|
||
|
||
/* Inhibit <p> tags inside inlined items */
|
||
/* TODO: Remove need for this on generator */
|
||
.item p {
|
||
display: inline;
|
||
}
|
||
h1 p,h2 p,h3 p,h4 p,h5 p,h6 p, li p {
|
||
display: inline;
|
||
}
|
||
|
||
.connections ul {
|
||
margin-top: 0;
|
||
}
|
||
|
||
/* Headers */
|
||
body > .node > h1 {
|
||
text-align: center;
|
||
}
|
||
|
||
.node .node h1 {
|
||
font-size: 150%;
|
||
}
|
||
|
||
h1,h2,h3,h4,h5,h6 {
|
||
margin-top: 0;
|
||
color: #2c3e50;
|
||
}
|
||
|
||
h1 > a, h2 > a, h3 > a, h4 > a, h5 > a, h6 > a {
|
||
text-decoration: none;
|
||
color: inherit;
|
||
}
|
||
|
||
h1.title .state {
|
||
font-size: 50%;
|
||
vertical-align: middle;
|
||
/* background-color: rgba(255,255,255,0.3); */
|
||
background-color: rgba(0,0,0,0.1);
|
||
padding: 4px;
|
||
border-radius: 5px;
|
||
}
|
||
|
||
h1.title .state.todo-True {
|
||
background-color: rgba(255,0,0,0.5);
|
||
}
|
||
h1.title .state.todo-False {
|
||
background-color: rgba(0,255,0,0.25);
|
||
}
|
||
|
||
h1.title .tags {
|
||
float: right;
|
||
}
|
||
h1.title .tags .tag {
|
||
font-size: 50%;
|
||
vertical-align: middle;
|
||
/* background-color: rgba(255,255,255,0.3); */
|
||
background-color: rgba(0,0,0,0.1);
|
||
padding: 4px;
|
||
margin-left: 2px;
|
||
border-radius: 5px;
|
||
}
|
||
h1.title .tags .tag:before {
|
||
content: '[';
|
||
}
|
||
h1.title .tags .tag:after {
|
||
content: ']';
|
||
}
|
||
/* Lists */
|
||
li .tag {
|
||
font-weight: bold;
|
||
}
|
||
|
||
li .tag::after {
|
||
content: " :: ";
|
||
}
|
||
|
||
a.internal::before {
|
||
content: '{ ';
|
||
}
|
||
a.internal::after {
|
||
content: ' }';
|
||
}
|
||
a.external::after {
|
||
content: ' ↗';
|
||
}
|
||
|
||
/* Markup */
|
||
.underlined {
|
||
text-decoration: underline;
|
||
}
|
||
|
||
/* Code blocks */
|
||
pre {
|
||
overflow: auto;
|
||
padding: 0.25ex;
|
||
box-shadow: 0px 1px 2px 1px rgba(0, 0, 0, 0.25);
|
||
border-radius: 2px;
|
||
}
|
||
pre > code {
|
||
display: block;
|
||
line-height: 1.2em;
|
||
overflow: auto;
|
||
}
|
||
pre code {
|
||
padding: 0.5ex;
|
||
font-size: medium;
|
||
background: #fff;
|
||
color: #000;
|
||
border: none;
|
||
font-size: 85%;
|
||
border-radius: 4px;
|
||
}
|
||
|
||
.highlight pre {
|
||
padding: 0.5ex;
|
||
}
|
||
|
||
code, .verbatim {
|
||
padding: 0.25ex 0.5ex;
|
||
margin: 0.25ex;
|
||
background: #eee;
|
||
color: #600;
|
||
font-family: Menlo, Monaco, "Courier New", monospace;
|
||
font-size: 85%;
|
||
}
|
||
|
||
/* Results */
|
||
.results.lang-text {
|
||
border-radius: 4px;
|
||
border: 1px solid rgba(255,255,255,0.5);
|
||
padding: 1ex;
|
||
max-height: 80vh;
|
||
overflow-y: auto;
|
||
}
|
||
|
||
|
||
.content {
|
||
margin: 1ex;
|
||
}
|
||
|
||
article.post {
|
||
max-width: min(650px, 100ex);
|
||
margin: 0 auto;
|
||
}
|
||
/* Header */
|
||
.site-header {
|
||
background-color: #F7F7FF;
|
||
border-bottom: rgba(0,0,0,0.1) 1px solid;
|
||
text-align: center;
|
||
padding: 1ex;
|
||
}
|
||
.site-header h1 {
|
||
margin-top: 0;
|
||
font-size: 200%;
|
||
font-family: monospace, sans;
|
||
color: #000;
|
||
}
|
||
.site-header .site-links .fancy-link {
|
||
border-right: 1px solid #000;
|
||
padding-left: 0.75ex;
|
||
}
|
||
.site-header .site-links .fancy-link:last-of-type {
|
||
border: none;
|
||
}
|
||
|
||
/* Post header */
|
||
.post-metadata ul.post-tags {
|
||
list-style: none;
|
||
display: inline;
|
||
padding: 0;
|
||
}
|
||
|
||
.post-metadata ul.post-tags li.post-tag::before {
|
||
content: '#';
|
||
}
|
||
.post-metadata ul.post-tags li {
|
||
display: inline;
|
||
}
|
||
|
||
/* Post index. */
|
||
.post-index .post-container {
|
||
/* box-shadow: 0px 2px 4px 2px rgba(0, 0, 0, 0.26); */
|
||
/* border-radius: 2px; */
|
||
/* padding: 1ex; */
|
||
margin-bottom: 1em;
|
||
padding-bottom: 1em;
|
||
border-bottom: #000 1px dashed;
|
||
}
|
||
|
||
/* Tables. */
|
||
table, th, td, tr {
|
||
border: 1px solid black;
|
||
border-collapse: collapse;
|
||
}
|
||
td {
|
||
padding: 0.5ex;
|
||
}
|
||
tr.__table-separator {
|
||
border-bottom: 0.5ex solid black;
|
||
}
|
||
|
||
/* Side-to-side */
|
||
@media (min-width: 120ex) {
|
||
body {
|
||
margin: 0;
|
||
}
|
||
.global-table-of-contents {
|
||
position: fixed;
|
||
right: 1ex;
|
||
max-width: calc(100vw - 85ex);
|
||
top: 1ex;
|
||
overflow: auto;
|
||
max-height: 100vh;
|
||
}
|
||
}
|
||
|
||
/* Dark mode. */
|
||
@media (prefers-color-scheme: dark) {
|
||
html {
|
||
background-color: #1d1f21;
|
||
color: #fafafe;
|
||
}
|
||
|
||
.node .node {
|
||
border-color: #8c9ea0;
|
||
}
|
||
|
||
|
||
h2 a {
|
||
color: #fafafe;
|
||
}
|
||
a {
|
||
color: #00fdf2;
|
||
}
|
||
a:focus {
|
||
background-color: #00fdf2;
|
||
color: black;
|
||
}
|
||
h1 a:focus,
|
||
h2 a:focus,
|
||
h3 a:focus,
|
||
h4 a:focus,
|
||
h5 a:focus,
|
||
h6 a:focus
|
||
{
|
||
background-color: inherit;
|
||
color: #f7da4a;
|
||
}
|
||
h1,h2,h3,h4,h5,h6 {
|
||
color: #f7da4a;
|
||
}
|
||
/* Header */
|
||
.site-header {
|
||
background-color: #303033;
|
||
border-bottom: rgba(0,0,0,0.1) 1px solid;
|
||
}
|
||
.site-header h1 {
|
||
color: #fff;
|
||
}
|
||
.site-header .site-links .fancy-link {
|
||
border-right: 1px solid #fff;
|
||
}
|
||
|
||
/* Nav bar */
|
||
body nav h1 {
|
||
color: #eee;
|
||
}
|
||
body nav input {
|
||
color: #ddd;
|
||
border-bottom: 1px solid #888;
|
||
}
|
||
.results-box-container .results-box input {
|
||
color: #ddd;
|
||
border-bottom: 1px solid #888;
|
||
}
|
||
.results-box {
|
||
box-shadow: none;
|
||
background-color: #262628;
|
||
}
|
||
.results-box ul li {
|
||
background-color: #303033;
|
||
box-shadow: none;
|
||
}
|
||
.results-box ul li h2 {
|
||
color: white;
|
||
}
|
||
.results-box-container .results-box input:focus {
|
||
border-bottom: 1px solid #fff;
|
||
}
|
||
|
||
/* Code blocks */
|
||
.highlight pre {
|
||
padding: 1ex;
|
||
background-color: #262628;
|
||
}
|
||
pre {
|
||
padding: 0.5ex;
|
||
background-color: inherit;
|
||
box-shadow: none;
|
||
}
|
||
pre code {
|
||
padding: 1ex;
|
||
font-size: medium;
|
||
border: none;
|
||
background: #262628;
|
||
color: #fff;
|
||
}
|
||
|
||
code, .verbatim {
|
||
background: #262628;
|
||
color: #FFF;
|
||
font-family: Menlo, Monaco, "Courier New", monospace;
|
||
}
|
||
|
||
/* Results */
|
||
.results.lang-text {
|
||
border: 1px solid rgba(255,255,255,0.25);
|
||
}
|
||
|
||
.node .contents ul,
|
||
.global-table-of-contents ul {
|
||
--tree-color: #aaa;
|
||
}
|
||
|
||
/* Tables. */
|
||
table, th, td, tr {
|
||
border: 1px solid #eee;
|
||
}
|
||
tr.__table-separator {
|
||
border-bottom: 0.5ex solid #eee;
|
||
}
|
||
}
|