reworking layout
This commit is contained in:
David Allemang
156
static/style.bak.css
Normal file
156
static/style.bak.css
Normal file
@@ -0,0 +1,156 @@
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--mode-note: cyan;
|
||||
--mode-caution: coral;
|
||||
--mode-tip: springgreen;
|
||||
|
||||
--bg: #111;
|
||||
--fg: #eee;
|
||||
--fg-dim: #aaa;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: light) {
|
||||
:root {
|
||||
--mode-note: mediumblue;
|
||||
--mode-caution: brown;
|
||||
--mode-tip: forestgreen;
|
||||
|
||||
--bg: #eee;
|
||||
--fg: #111;
|
||||
--fg-dim: #555;
|
||||
}
|
||||
}
|
||||
|
||||
html {
|
||||
font-family: "Libertinus Serif", serif;
|
||||
font-size: 18pt;
|
||||
line-height: 1.5em;
|
||||
background: var(--background);
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6, nav li {
|
||||
font-family: "Mojangles", "monospace";
|
||||
}
|
||||
|
||||
nav > * {
|
||||
margin-block: 0;
|
||||
}
|
||||
|
||||
nav {
|
||||
margin-block: 1em;
|
||||
}
|
||||
|
||||
footer > nav {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 1ch;
|
||||
}
|
||||
|
||||
footer > nav > *
|
||||
{
|
||||
flex-grow: 1;
|
||||
flex-shrink: 1;
|
||||
flex-basis: 0;
|
||||
text-align: center;
|
||||
font-family: "Mojangles", "monospace";
|
||||
|
||||
text-decoration: none;
|
||||
|
||||
--mode-color: var(--fg-dim);
|
||||
}
|
||||
|
||||
footer > nav > *:hover {
|
||||
--mode-color: var(--fg);
|
||||
}
|
||||
|
||||
|
||||
.go-next::after {
|
||||
display: block;
|
||||
content: "Next page";
|
||||
font-size: smaller;
|
||||
}
|
||||
|
||||
.go-prev::after {
|
||||
display: block;
|
||||
content: "Previous page";
|
||||
font-size: smaller;
|
||||
}
|
||||
|
||||
.go-home::after {
|
||||
display: block;
|
||||
content: "Home page";
|
||||
font-size: smaller;
|
||||
}
|
||||
|
||||
code {
|
||||
font-family: "Libertinus Mono", monospace;
|
||||
}
|
||||
|
||||
math {
|
||||
font-family: "Libertinus Math", math;
|
||||
}
|
||||
|
||||
main, header, footer {
|
||||
max-width: 80ch;
|
||||
margin-inline: auto;
|
||||
}
|
||||
|
||||
li > * {
|
||||
margin-block: 0;
|
||||
}
|
||||
|
||||
footer > nav > * ,
|
||||
.callout {
|
||||
color: var(--mode-color);
|
||||
border-color: rgba(from var(--mode-color) r g b);
|
||||
background-color: rgba(from var(--mode-color) r g b / 5%);
|
||||
}
|
||||
|
||||
footer > nav > * {
|
||||
display: block;
|
||||
padding-inline: 2ch;
|
||||
padding-block: 1ch;
|
||||
border-radius: 4pt;
|
||||
border-width: 1pt;
|
||||
border-style: solid;
|
||||
}
|
||||
|
||||
.callout {
|
||||
display: block;
|
||||
padding-inline: 2ch;
|
||||
padding-block: 1ch;
|
||||
border-width: 1pt 0;
|
||||
border-style: solid;
|
||||
|
||||
margin-inline: -2ch;
|
||||
margin-block: 1em;
|
||||
}
|
||||
|
||||
.callout::before {
|
||||
content: var(--mode-name);
|
||||
padding-inline-end: 1ch;
|
||||
font-family: "Mojangles", "monospace";
|
||||
display: inline-block;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.callout > p:first-child {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.note {
|
||||
--mode-color: var(--mode-note);
|
||||
--mode-name: "Note";
|
||||
}
|
||||
|
||||
.caution {
|
||||
--mode-color: var(--mode-caution);
|
||||
--mode-name: "Caution";
|
||||
}
|
||||
|
||||
.tip {
|
||||
--mode-color: var(--mode-tip);
|
||||
--mode-name: "Tip";
|
||||
}
|
||||
|
||||
295
static/style.css
295
static/style.css
@@ -1,156 +1,213 @@
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--mode-note: cyan;
|
||||
--mode-caution: coral;
|
||||
--mode-tip: springgreen;
|
||||
|
||||
--bg: #111;
|
||||
--fg: #eee;
|
||||
--fg-dim: #aaa;
|
||||
}
|
||||
font-family: "Libertinus Serif", serif;
|
||||
line-height: 1.3em;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: light) {
|
||||
:root {
|
||||
--mode-note: mediumblue;
|
||||
--mode-caution: brown;
|
||||
--mode-tip: forestgreen;
|
||||
:root {
|
||||
--fg: black;
|
||||
--bg: white;
|
||||
}
|
||||
|
||||
--bg: #eee;
|
||||
--fg: #111;
|
||||
--fg-dim: #555;
|
||||
}
|
||||
[aria-label="note"] {
|
||||
--fg: mediumblue;
|
||||
}
|
||||
|
||||
[aria-label="warn"] {
|
||||
--fg: brown;
|
||||
}
|
||||
|
||||
[aria-label="tip"] {
|
||||
--fg: forestgreen;
|
||||
}
|
||||
}
|
||||
|
||||
html {
|
||||
font-family: "Libertinus Serif", serif;
|
||||
font-size: 18pt;
|
||||
line-height: 1.5em;
|
||||
background: var(--background);
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--fg: rgb(240 240 240);
|
||||
--bg: rgb(30 30 30);
|
||||
}
|
||||
|
||||
[aria-label="note"] {
|
||||
--fg: cyan;
|
||||
}
|
||||
|
||||
[aria-label="warn"] {
|
||||
--fg: coral;
|
||||
}
|
||||
|
||||
[aria-label="tip"] {
|
||||
--fg: springgreen;
|
||||
}
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6, nav li {
|
||||
nav, h1, h2, h3, h4, h5, h6 {
|
||||
font-family: "Mojangles", "monospace";
|
||||
}
|
||||
|
||||
nav > * {
|
||||
margin-block: 0;
|
||||
}
|
||||
|
||||
nav {
|
||||
margin-block: 1em;
|
||||
}
|
||||
|
||||
footer > nav {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 1ch;
|
||||
}
|
||||
|
||||
footer > nav > *
|
||||
{
|
||||
flex-grow: 1;
|
||||
flex-shrink: 1;
|
||||
flex-basis: 0;
|
||||
text-align: center;
|
||||
font-family: "Mojangles", "monospace";
|
||||
|
||||
text-decoration: none;
|
||||
|
||||
--mode-color: var(--fg-dim);
|
||||
}
|
||||
|
||||
footer > nav > *:hover {
|
||||
--mode-color: var(--fg);
|
||||
}
|
||||
|
||||
|
||||
.go-next::after {
|
||||
display: block;
|
||||
content: "Next page";
|
||||
font-size: smaller;
|
||||
}
|
||||
|
||||
.go-prev::after {
|
||||
display: block;
|
||||
content: "Previous page";
|
||||
font-size: smaller;
|
||||
}
|
||||
|
||||
.go-home::after {
|
||||
display: block;
|
||||
content: "Home page";
|
||||
font-size: smaller;
|
||||
}
|
||||
|
||||
code {
|
||||
font-family: "Libertinus Mono", monospace;
|
||||
}
|
||||
|
||||
math {
|
||||
font-family: "Libertinus Math", math;
|
||||
}
|
||||
|
||||
main, header, footer {
|
||||
max-width: 80ch;
|
||||
code {
|
||||
font-family: "Libertinus Mono", monospace;
|
||||
}
|
||||
|
||||
nav a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
nav a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--fg);
|
||||
}
|
||||
|
||||
nav ul {
|
||||
list-style-type: none;
|
||||
padding-inline: 2ch;
|
||||
}
|
||||
|
||||
nav > ul {
|
||||
padding-inline: 0;
|
||||
}
|
||||
|
||||
nav summary {
|
||||
display: block;
|
||||
}
|
||||
|
||||
nav details summary:hover::after {
|
||||
content: "⮞";
|
||||
float: right;
|
||||
}
|
||||
|
||||
nav details[open] summary::after {
|
||||
content: "⮟";
|
||||
float: right;
|
||||
}
|
||||
|
||||
html {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
min-height: 100%;
|
||||
min-width: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
display: grid;
|
||||
grid-template-columns: 20ch 80ch 20ch;
|
||||
grid-template-rows: auto auto 1fr auto;
|
||||
grid-gap: 4ch;
|
||||
width: auto;
|
||||
min-height: 100%;
|
||||
margin-inline: auto;
|
||||
}
|
||||
|
||||
li > * {
|
||||
margin-block: 0;
|
||||
body > a[href="#main"] {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
footer > nav > * ,
|
||||
.callout {
|
||||
color: var(--mode-color);
|
||||
border-color: rgba(from var(--mode-color) r g b);
|
||||
background-color: rgba(from var(--mode-color) r g b / 5%);
|
||||
body > a[href="#main"]:not(:focus) {
|
||||
transform: translateY(-2em);
|
||||
}
|
||||
|
||||
footer > nav > * {
|
||||
body > header {
|
||||
grid-column: 1 / 3;
|
||||
grid-row: 1;
|
||||
}
|
||||
|
||||
nav[aria-label="Table of Contents"] {
|
||||
grid-column: 1;
|
||||
grid-row: 2;
|
||||
}
|
||||
|
||||
nav[aria-label="Outline"] {
|
||||
grid-column: 3;
|
||||
grid-row: 2;
|
||||
}
|
||||
|
||||
nav[aria-label="Outline"]:before {
|
||||
content: "On this Page";
|
||||
display: block;
|
||||
padding-inline: 2ch;
|
||||
padding-block: 1ch;
|
||||
border-radius: 4pt;
|
||||
border-width: 1pt;
|
||||
border-style: solid;
|
||||
}
|
||||
|
||||
.callout {
|
||||
display: block;
|
||||
padding-inline: 2ch;
|
||||
padding-block: 1ch;
|
||||
border-width: 1pt 0;
|
||||
border-style: solid;
|
||||
|
||||
margin-inline: -2ch;
|
||||
margin-block: 1em;
|
||||
}
|
||||
|
||||
.callout::before {
|
||||
content: var(--mode-name);
|
||||
padding-inline-end: 1ch;
|
||||
font-family: "Mojangles", "monospace";
|
||||
display: inline-block;
|
||||
float: left;
|
||||
nav[aria-label="Page Navigation"] > ul {
|
||||
grid-column: 2;
|
||||
grid-row: 3;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 4pt;
|
||||
}
|
||||
|
||||
.callout > p:first-child {
|
||||
display: inline;
|
||||
nav[aria-label="Page Navigation"] > ul > li > a {
|
||||
display: block;
|
||||
text-align: center;
|
||||
padding: 1em;
|
||||
|
||||
background: rgb(from var(--fg) r g b / 15%);
|
||||
border: 1pt solid rgb(from var(--fg) r g b / 50%);
|
||||
border-radius: 3pt;
|
||||
}
|
||||
|
||||
.note {
|
||||
--mode-color: var(--mode-note);
|
||||
--mode-name: "Note";
|
||||
li[aria-label="Next Page"] {
|
||||
grid-column: 2;
|
||||
}
|
||||
|
||||
.caution {
|
||||
--mode-color: var(--mode-caution);
|
||||
--mode-name: "Caution";
|
||||
li[aria-label="Prev Page"] {
|
||||
grid-column: 1;
|
||||
}
|
||||
|
||||
.tip {
|
||||
--mode-color: var(--mode-tip);
|
||||
--mode-name: "Tip";
|
||||
li[aria-label="Next Page"] > a:after {
|
||||
content: "Next Page";
|
||||
display: block;
|
||||
font-size: small;
|
||||
}
|
||||
|
||||
li[aria-label="Prev Page"] > a:after {
|
||||
content: "Previous Page";
|
||||
display: block;
|
||||
font-size: small;
|
||||
}
|
||||
|
||||
body > main {
|
||||
grid-column: 2;
|
||||
grid-row: 2;
|
||||
}
|
||||
|
||||
body > footer {
|
||||
grid-column: 1 / 4;
|
||||
grid-row: 4;
|
||||
}
|
||||
|
||||
aside {
|
||||
border-block: 1pt solid rgba(from var(--fg) r g b / 50%);
|
||||
background: rgba(from var(--fg) r g b / 15%);
|
||||
color: var(--fg);
|
||||
margin-block: 1em;
|
||||
padding-block: 1ch;
|
||||
padding-inline: 1em;
|
||||
margin-inline: -1em;
|
||||
}
|
||||
|
||||
aside[aria-label="note"]:before {
|
||||
content: "Note:";
|
||||
margin-inline-end: 1ch;
|
||||
font-family: "Mojangles", monospace;
|
||||
}
|
||||
|
||||
aside[aria-label="warn"]:before {
|
||||
content: "Caution:";
|
||||
margin-inline-end: 1ch;
|
||||
font-family: "Mojangles", monospace;
|
||||
}
|
||||
|
||||
aside[aria-label="tip"]:before {
|
||||
content: "Tip:";
|
||||
margin-inline-end: 1ch;
|
||||
font-family: "Mojangles", monospace;
|
||||
}
|
||||
Reference in New Issue
Block a user