feat: breadcrumbs

1 files changed, 153 insertions, 128 deletions

diff --git a/static/style.css b/static/style.css
index 4600bd8..1873bbe 100644
--- a/static/style.css
+++ b/static/style.css
@@ -191,13 +191,38 @@ header > .name > nav {
 h1 {
     font-size: inherit;
     margin: 0;
+    text-decoration: none;     
+}
+h1 a {
     text-decoration: none;
-} 
+    color: inherit;
+}
+.breadcrumb {
+}
 sup {
     font-size: 0.6em;
 }
+header ol {
+    padding-left: 0;
+    margin-top: 0;
+    margin-bottom: 0;
+}
+
+header li {
+    display: inline;
+}
+
+header li::after {
+    content: "»";
+}
+
 /* generic_header_end */
 
+h2 a { color: inherit; }
+h3 a { color: inherit; }
+h4 a { color: inherit; }
+h5 a { color: inherit; }
+
 /* article_header_end */
 body.article > header > .logo {
     background-color: var(--article-logo-bg-color);
@@ -505,130 +530,130 @@ figure.graph img {
 }
 
 /* ----------- Footer  */
-    footer {
-        text-align: center;
-        padding: 10px 0 30px 0;
-    }
-
-    /* ---------- Footnotes  */
-    a[href^="#fn:"], a[href^="#fnref:"] {
-        text-decoration: none;
-    }
-    a[href^="#fn:"]:before{ content: '[' }
-    a[href^="#fn:"]:after{ content: ']' }
-    .footnotes p {
-        margin: 3px;
-    }
-    .footnotes hr {
-        size: 1px;
-    }
-    .footnotes::before {
-        border: 0;
-        border-bottom-width: 1px;
-        border-style: solid;
-        font-weight: bold;
-        display: block;
-        text-transform: uppercase;
-    }
-
-    /* ----------- Donations  */
-    .donor {
-        display: flex;
-        flex-direction: row;
-        flex-wrap: wrap;
-        justify-content: center;
-        align-items: center;
-        align-content: flex-start;
-        gap: 50px;
-    }
-
-    /* --------- Code blocks  */
-
-    /* Background  */ .bg { background-color: #f8f8f8; }
-    /* PreWrapper  */ .chroma { background-color: #f8f8f8; }
-    /* Other  */ .chroma .x {  }
-    /* Error  */ .chroma .err {  }
-    /* CodeLine  */ .chroma .cl {  }
-    /* LineLink  */ .chroma .lnlinks { outline: none; text-decoration: none; color: inherit }
-    /* LineTableTD  */ .chroma .lntd { vertical-align: top; padding: 0; margin: 0; border: 0; }
-    /* LineTable  */ .chroma .lntable { border-spacing: 0; padding: 0; margin: 0; border: 0; }
-    /* LineHighlight  */ .chroma .hl { background-color: #ffffcc }
-    /* LineNumbersTable  */ .chroma .lnt { white-space: pre; -webkit-user-select: none; user-select: none; margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #7f7f7f }
-    /* LineNumbers  */ .chroma .ln { white-space: pre; -webkit-user-select: none; user-select: none; margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #7f7f7f }
-    /* Line  */ .chroma .line { display: flex; }
-    /* Keyword  */ .chroma .k { color: #aa22ff; font-weight: bold }
-    /* KeywordConstant  */ .chroma .kc { color: #aa22ff; font-weight: bold }
-    /* KeywordDeclaration  */ .chroma .kd { color: #aa22ff; font-weight: bold }
-    /* KeywordNamespace  */ .chroma .kn { color: #aa22ff; font-weight: bold }
-    /* KeywordPseudo  */ .chroma .kp { color: #aa22ff }
-    /* KeywordReserved  */ .chroma .kr { color: #aa22ff; font-weight: bold }
-    /* KeywordType  */ .chroma .kt { color: #00bb00; font-weight: bold }
-    /* Name  */ .chroma .n {  }
-    /* NameAttribute  */ .chroma .na { color: #bb4444 }
-    /* NameBuiltin  */ .chroma .nb { color: #aa22ff }
-    /* NameBuiltinPseudo  */ .chroma .bp {  }
-    /* NameClass  */ .chroma .nc { color: #0000ff }
-    /* NameConstant  */ .chroma .no { color: #880000 }
-    /* NameDecorator  */ .chroma .nd { color: #aa22ff }
-    /* NameEntity  */ .chroma .ni { color: #999999; font-weight: bold }
-    /* NameException  */ .chroma .ne { color: #d2413a; font-weight: bold }
-    /* NameFunction  */ .chroma .nf { color: #00a000 }
-    /* NameFunctionMagic  */ .chroma .fm {  }
-    /* NameLabel  */ .chroma .nl { color: #a0a000 }
-    /* NameNamespace  */ .chroma .nn { color: #0000ff; font-weight: bold }
-    /* NameOther  */ .chroma .nx {  }
-    /* NameProperty  */ .chroma .py {  }
-    /* NameTag  */ .chroma .nt { color: #008000; font-weight: bold }
-    /* NameVariable  */ .chroma .nv { color: #b8860b }
-    /* NameVariableClass  */ .chroma .vc {  }
-    /* NameVariableGlobal  */ .chroma .vg {  }
-    /* NameVariableInstance  */ .chroma .vi {  }
-    /* NameVariableMagic  */ .chroma .vm {  }
-    /* Literal  */ .chroma .l {  }
-    /* LiteralDate  */ .chroma .ld {  }
-    /* LiteralString  */ .chroma .s { color: #bb4444 }
-    /* LiteralStringAffix  */ .chroma .sa { color: #bb4444 }
-    /* LiteralStringBacktick  */ .chroma .sb { color: #bb4444 }
-    /* LiteralStringChar  */ .chroma .sc { color: #bb4444 }
-    /* LiteralStringDelimiter  */ .chroma .dl { color: #bb4444 }
-    /* LiteralStringDoc  */ .chroma .sd { color: #bb4444; font-style: italic }
-    /* LiteralStringDouble  */ .chroma .s2 { color: #bb4444 }
-    /* LiteralStringEscape  */ .chroma .se { color: #bb6622; font-weight: bold }
-    /* LiteralStringHeredoc  */ .chroma .sh { color: #bb4444 }
-    /* LiteralStringInterpol  */ .chroma .si { color: #bb6688; font-weight: bold }
-    /* LiteralStringOther  */ .chroma .sx { color: #008000 }
-    /* LiteralStringRegex  */ .chroma .sr { color: #bb6688 }
-    /* LiteralStringSingle  */ .chroma .s1 { color: #bb4444 }
-    /* LiteralStringSymbol  */ .chroma .ss { color: #b8860b }
-    /* LiteralNumber  */ .chroma .m { color: #666666 }
-    /* LiteralNumberBin  */ .chroma .mb { color: #666666 }
-    /* LiteralNumberFloat  */ .chroma .mf { color: #666666 }
-    /* LiteralNumberHex  */ .chroma .mh { color: #666666 }
-    /* LiteralNumberInteger  */ .chroma .mi { color: #666666 }
-    /* LiteralNumberIntegerLong  */ .chroma .il { color: #666666 }
-    /* LiteralNumberOct  */ .chroma .mo { color: #666666 }
-    /* Operator  */ .chroma .o { color: #666666 }
-    /* OperatorWord  */ .chroma .ow { color: #aa22ff; font-weight: bold }
-    /* Punctuation  */ .chroma .p {  }
-    /* Comment  */ .chroma .c { color: #008800; font-style: italic }
-    /* CommentHashbang  */ .chroma .ch { color: #008800; font-style: italic }
-    /* CommentMultiline  */ .chroma .cm { color: #008800; font-style: italic }
-    /* CommentSingle  */ .chroma .c1 { color: #008800; font-style: italic }
-    /* CommentSpecial  */ .chroma .cs { color: #008800; font-weight: bold }
-    /* CommentPreproc  */ .chroma .cp { color: #008800 }
-    /* CommentPreprocFile  */ .chroma .cpf { color: #008800 }
-    /* Generic  */ .chroma .g {  }
-    /* GenericDeleted  */ .chroma .gd { color: #a00000 }
-    /* GenericEmph  */ .chroma .ge { font-style: italic }
-    /* GenericError  */ .chroma .gr { color: #ff0000 }
-    /* GenericHeading  */ .chroma .gh { color: #000080; font-weight: bold }
-    /* GenericInserted  */ .chroma .gi { color: #00a000 }
-    /* GenericOutput  */ .chroma .go { color: #888888 }
-    /* GenericPrompt  */ .chroma .gp { color: #000080; font-weight: bold }
-    /* GenericStrong  */ .chroma .gs { font-weight: bold }
-    /* GenericSubheading  */ .chroma .gu { color: #800080; font-weight: bold }
-    /* GenericTraceback  */ .chroma .gt { color: #0044dd }
-    /* GenericUnderline  */ .chroma .gl { text-decoration: underline }
-    /* TextWhitespace  */ .chroma .w { color: #bbbbbb }
-
-    /* legacy_code_end */
+footer {
+    text-align: center;
+    padding: 10px 0 30px 0;
+}
+
+/* ---------- Footnotes  */
+a[href^="#fn:"], a[href^="#fnref:"] {
+    text-decoration: none;
+}
+a[href^="#fn:"]:before{ content: '[' }
+a[href^="#fn:"]:after{ content: ']' }
+.footnotes p {
+    margin: 3px;
+}
+.footnotes hr {
+    size: 1px;
+}
+.footnotes::before {
+    border: 0;
+    border-bottom-width: 1px;
+    border-style: solid;
+    font-weight: bold;
+    display: block;
+    text-transform: uppercase;
+}
+
+/* ----------- Donations  */
+.donor {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: center;
+    align-items: center;
+    align-content: flex-start;
+    gap: 50px;
+}
+
+/* --------- Code blocks  */
+
+/* Background  */ .bg { background-color: #f8f8f8; }
+/* PreWrapper  */ .chroma { background-color: #f8f8f8; }
+/* Other  */ .chroma .x {  }
+/* Error  */ .chroma .err {  }
+/* CodeLine  */ .chroma .cl {  }
+/* LineLink  */ .chroma .lnlinks { outline: none; text-decoration: none; color: inherit }
+/* LineTableTD  */ .chroma .lntd { vertical-align: top; padding: 0; margin: 0; border: 0; }
+/* LineTable  */ .chroma .lntable { border-spacing: 0; padding: 0; margin: 0; border: 0; }
+/* LineHighlight  */ .chroma .hl { background-color: #ffffcc }
+/* LineNumbersTable  */ .chroma .lnt { white-space: pre; -webkit-user-select: none; user-select: none; margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #7f7f7f }
+/* LineNumbers  */ .chroma .ln { white-space: pre; -webkit-user-select: none; user-select: none; margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #7f7f7f }
+/* Line  */ .chroma .line { display: flex; }
+/* Keyword  */ .chroma .k { color: #aa22ff; font-weight: bold }
+/* KeywordConstant  */ .chroma .kc { color: #aa22ff; font-weight: bold }
+/* KeywordDeclaration  */ .chroma .kd { color: #aa22ff; font-weight: bold }
+/* KeywordNamespace  */ .chroma .kn { color: #aa22ff; font-weight: bold }
+/* KeywordPseudo  */ .chroma .kp { color: #aa22ff }
+/* KeywordReserved  */ .chroma .kr { color: #aa22ff; font-weight: bold }
+/* KeywordType  */ .chroma .kt { color: #00bb00; font-weight: bold }
+/* Name  */ .chroma .n {  }
+/* NameAttribute  */ .chroma .na { color: #bb4444 }
+/* NameBuiltin  */ .chroma .nb { color: #aa22ff }
+/* NameBuiltinPseudo  */ .chroma .bp {  }
+/* NameClass  */ .chroma .nc { color: #0000ff }
+/* NameConstant  */ .chroma .no { color: #880000 }
+/* NameDecorator  */ .chroma .nd { color: #aa22ff }
+/* NameEntity  */ .chroma .ni { color: #999999; font-weight: bold }
+/* NameException  */ .chroma .ne { color: #d2413a; font-weight: bold }
+/* NameFunction  */ .chroma .nf { color: #00a000 }
+/* NameFunctionMagic  */ .chroma .fm {  }
+/* NameLabel  */ .chroma .nl { color: #a0a000 }
+/* NameNamespace  */ .chroma .nn { color: #0000ff; font-weight: bold }
+/* NameOther  */ .chroma .nx {  }
+/* NameProperty  */ .chroma .py {  }
+/* NameTag  */ .chroma .nt { color: #008000; font-weight: bold }
+/* NameVariable  */ .chroma .nv { color: #b8860b }
+/* NameVariableClass  */ .chroma .vc {  }
+/* NameVariableGlobal  */ .chroma .vg {  }
+/* NameVariableInstance  */ .chroma .vi {  }
+/* NameVariableMagic  */ .chroma .vm {  }
+/* Literal  */ .chroma .l {  }
+/* LiteralDate  */ .chroma .ld {  }
+/* LiteralString  */ .chroma .s { color: #bb4444 }
+/* LiteralStringAffix  */ .chroma .sa { color: #bb4444 }
+/* LiteralStringBacktick  */ .chroma .sb { color: #bb4444 }
+/* LiteralStringChar  */ .chroma .sc { color: #bb4444 }
+/* LiteralStringDelimiter  */ .chroma .dl { color: #bb4444 }
+/* LiteralStringDoc  */ .chroma .sd { color: #bb4444; font-style: italic }
+/* LiteralStringDouble  */ .chroma .s2 { color: #bb4444 }
+/* LiteralStringEscape  */ .chroma .se { color: #bb6622; font-weight: bold }
+/* LiteralStringHeredoc  */ .chroma .sh { color: #bb4444 }
+/* LiteralStringInterpol  */ .chroma .si { color: #bb6688; font-weight: bold }
+/* LiteralStringOther  */ .chroma .sx { color: #008000 }
+/* LiteralStringRegex  */ .chroma .sr { color: #bb6688 }
+/* LiteralStringSingle  */ .chroma .s1 { color: #bb4444 }
+/* LiteralStringSymbol  */ .chroma .ss { color: #b8860b }
+/* LiteralNumber  */ .chroma .m { color: #666666 }
+/* LiteralNumberBin  */ .chroma .mb { color: #666666 }
+/* LiteralNumberFloat  */ .chroma .mf { color: #666666 }
+/* LiteralNumberHex  */ .chroma .mh { color: #666666 }
+/* LiteralNumberInteger  */ .chroma .mi { color: #666666 }
+/* LiteralNumberIntegerLong  */ .chroma .il { color: #666666 }
+/* LiteralNumberOct  */ .chroma .mo { color: #666666 }
+/* Operator  */ .chroma .o { color: #666666 }
+/* OperatorWord  */ .chroma .ow { color: #aa22ff; font-weight: bold }
+/* Punctuation  */ .chroma .p {  }
+/* Comment  */ .chroma .c { color: #008800; font-style: italic }
+/* CommentHashbang  */ .chroma .ch { color: #008800; font-style: italic }
+/* CommentMultiline  */ .chroma .cm { color: #008800; font-style: italic }
+/* CommentSingle  */ .chroma .c1 { color: #008800; font-style: italic }
+/* CommentSpecial  */ .chroma .cs { color: #008800; font-weight: bold }
+/* CommentPreproc  */ .chroma .cp { color: #008800 }
+/* CommentPreprocFile  */ .chroma .cpf { color: #008800 }
+/* Generic  */ .chroma .g {  }
+/* GenericDeleted  */ .chroma .gd { color: #a00000 }
+/* GenericEmph  */ .chroma .ge { font-style: italic }
+/* GenericError  */ .chroma .gr { color: #ff0000 }
+/* GenericHeading  */ .chroma .gh { color: #000080; font-weight: bold }
+/* GenericInserted  */ .chroma .gi { color: #00a000 }
+/* GenericOutput  */ .chroma .go { color: #888888 }
+/* GenericPrompt  */ .chroma .gp { color: #000080; font-weight: bold }
+/* GenericStrong  */ .chroma .gs { font-weight: bold }
+/* GenericSubheading  */ .chroma .gu { color: #800080; font-weight: bold }
+/* GenericTraceback  */ .chroma .gt { color: #0044dd }
+/* GenericUnderline  */ .chroma .gl { text-decoration: underline }
+/* TextWhitespace  */ .chroma .w { color: #bbbbbb }
+
+/* legacy_code_end */