reworking layout
This commit is contained in:
David Allemang
@@ -1,15 +0,0 @@
|
||||
#import "/docs.typ": docs-page, note, tip, warn
|
||||
|
||||
#show: docs-page.with(
|
||||
route: "/toc/",
|
||||
title: [Contents],
|
||||
)
|
||||
|
||||
#context for doc in query(document) {
|
||||
let target = selector(heading).within(doc.location())
|
||||
|
||||
show outline.entry: it => {
|
||||
}
|
||||
|
||||
outline(depth: 1, target: target, title: link(doc.location(), doc.title))
|
||||
}
|
||||
76
docs.typ
76
docs.typ
@@ -15,36 +15,72 @@
|
||||
html.title(context title)
|
||||
})
|
||||
html.body({
|
||||
html.header(context {
|
||||
html.a(href: "#main", [Skip to content])
|
||||
|
||||
// html.header([header])
|
||||
|
||||
html.nav(aria-label: "Table of Contents", context {
|
||||
html.ul({
|
||||
for doc in query(document) {
|
||||
html.li({
|
||||
html.details(open: doc == query(selector(document).before(here())).last(), {
|
||||
html.summary(link(doc.location(), doc.title))
|
||||
html.ul(context for sec in query(selector(heading.where(level: 1)).within(doc.location())) {
|
||||
html.li(link(
|
||||
sec.location(),
|
||||
[#counter(heading).display(at: sec.location()) #sec.body],
|
||||
))
|
||||
})
|
||||
})
|
||||
})
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
html.nav(aria-label: "Outline", context {
|
||||
let doc = query(selector(document).before(here())).last()
|
||||
show html.elem.where(tag: "nav"): it => it.body
|
||||
show html.elem.where(tag: "ol"): it => html.elem("ul", it.body)
|
||||
outline(title: none, depth: 2, target: selector(heading).within(doc.location()))
|
||||
})
|
||||
|
||||
html.main(id: "main", {
|
||||
html.h1(title)
|
||||
})
|
||||
})
|
||||
html.main(content)
|
||||
content
|
||||
|
||||
html.footer(context {
|
||||
let prev = query(selector(document).before(here()))
|
||||
let next = query(selector(document).after(here()))
|
||||
html.nav(aria-label: "Page Navigation", context {
|
||||
let prevs = query(selector(document).before(here()))
|
||||
let nexts = query(selector(document).after(here()))
|
||||
|
||||
html.nav(class: "panel", {
|
||||
if (prev.len() > 1) {
|
||||
link(prev.at(-2).location(), html.span(class: "go-prev", prev.at(-2).title))
|
||||
}
|
||||
if (next.len() > 0) {
|
||||
link(next.at(0).location(), html.span(class: "go-next", next.at(0).title))
|
||||
}
|
||||
html.ul({
|
||||
if (prevs.len() > 1) {
|
||||
let prev = prevs.at(-2)
|
||||
html.li(
|
||||
aria-label: "Prev Page",
|
||||
link(prev.location(), prev.title),
|
||||
)
|
||||
}
|
||||
|
||||
if (nexts.len() > 0) {
|
||||
show html.elem.where(tag: "a"): it => it
|
||||
let next = nexts.at(0)
|
||||
html.li(
|
||||
aria-label: "Next Page",
|
||||
link(next.location(), next.title),
|
||||
)
|
||||
}
|
||||
})
|
||||
})
|
||||
})
|
||||
|
||||
// html.nav(class: "panel", {
|
||||
// let main = query(selector(document).before(<home>)).last()
|
||||
// link(main.location(), html.span(class: "go-home", main.title))
|
||||
// })
|
||||
// html.footer([footer])
|
||||
})
|
||||
}),
|
||||
)
|
||||
}
|
||||
|
||||
#let callout(kind: str, body) = html.div(class: "callout " + kind, body)
|
||||
#let callout(kind: str, body) = html.aside(aria-label: kind, body)
|
||||
|
||||
#let note = callout.with(kind: "note")
|
||||
#let warn = callout.with(kind: "caution")
|
||||
#let warn = callout.with(kind: "warn")
|
||||
#let tip = callout.with(kind: "tip")
|
||||
|
||||
11
index.typ
11
index.typ
@@ -13,9 +13,8 @@ Welcome! Here, we will talk about Entity ID based wireless redstone (EID Wireles
|
||||
Until version 26.2, this only works on multiplayer servers. See @singleplayer.
|
||||
]
|
||||
|
||||
#html.nav(
|
||||
context for doc in query(document) {
|
||||
html.h3(link(doc.location(), doc.title))
|
||||
// outline(title: none, depth: 1, target: selector(heading).within(doc.location()))
|
||||
},
|
||||
)
|
||||
```python
|
||||
def foo():
|
||||
pass
|
||||
```
|
||||
|
||||
|
||||
2
main.typ
2
main.typ
@@ -2,7 +2,6 @@
|
||||
|
||||
#include "static/index.typ"
|
||||
#include "index.typ"
|
||||
#include "content/toc.typ"
|
||||
|
||||
#include "content/core.typ"
|
||||
#include "content/interference.typ"
|
||||
@@ -11,4 +10,3 @@
|
||||
#include "content/transport.typ"
|
||||
#include "content/bulk.typ"
|
||||
#include "content/network.typ"
|
||||
|
||||
|
||||
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