WIP: a bunch of render hooks and series and other fancy features
This commit is contained in:
parent
e5a5f5e8b6
commit
ba6b5c94d3
27 changed files with 577 additions and 275 deletions
|
|
@ -1,15 +1,20 @@
|
||||||
@import "common/reset";
|
@import "common/reset";
|
||||||
@import "common/colors";
|
@import "common/colors";
|
||||||
@import "common/base";
|
@import "common/base";
|
||||||
|
@import "common/typography";
|
||||||
@import "common/content";
|
@import "common/content";
|
||||||
|
@import "common/links";
|
||||||
@import "features/links";
|
|
||||||
|
|
||||||
// default layout
|
// default layout
|
||||||
|
|
||||||
@import "layouts/_default/list";
|
@import "layouts/_default/list";
|
||||||
@import "layouts/_default/single";
|
@import "layouts/_default/single";
|
||||||
|
|
||||||
|
@import "layouts/_default/_markup/render-blockquote";
|
||||||
|
@import "layouts/_default/_markup/render-codeblock";
|
||||||
|
@import "layouts/_default/_markup/render-heading";
|
||||||
|
@import "layouts/_default/_markup/render-link";
|
||||||
|
|
||||||
@import "partials/mf2/h-card";
|
@import "partials/mf2/h-card";
|
||||||
@import "shortcodes/mf2/h-cite";
|
@import "shortcodes/mf2/h-cite";
|
||||||
|
|
||||||
|
|
@ -23,6 +28,5 @@
|
||||||
|
|
||||||
@import "features/autonumbering";
|
@import "features/autonumbering";
|
||||||
@import "features/search";
|
@import "features/search";
|
||||||
@import "features/syntax-highlighting";
|
|
||||||
|
|
||||||
@import "components/table-of-contents";
|
@import "components/table-of-contents";
|
||||||
|
|
@ -12,7 +12,9 @@
|
||||||
--ui-text-bold: #000;
|
--ui-text-bold: #000;
|
||||||
|
|
||||||
--ui-overlay: hsl(210, 100%, 87.5%);
|
--ui-overlay: hsl(210, 100%, 87.5%);
|
||||||
|
--ui-overlay-transparent: hsla(210, 100%, 87.5%, 0.4);
|
||||||
--ui-overlay-text: var(--ui-text);
|
--ui-overlay-text: var(--ui-text);
|
||||||
|
--ui-overlay-highlight: hsl(210, 100%, 80%);
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (prefers-color-scheme: dark) {
|
@media (prefers-color-scheme: dark) {
|
||||||
|
|
@ -30,6 +32,8 @@
|
||||||
--ui-text-bold: #fff;
|
--ui-text-bold: #fff;
|
||||||
|
|
||||||
--ui-overlay: hsl(210, 100%, 20%);
|
--ui-overlay: hsl(210, 100%, 20%);
|
||||||
|
--ui-overlay-transparent: hsla(210, 100%, 20%, 0.25);
|
||||||
--ui-overlay-text: var(--ui-text);
|
--ui-overlay-text: var(--ui-text);
|
||||||
|
--ui-overlay-highlight: hsl(210, 100%, 27.5%);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -3,29 +3,16 @@
|
||||||
margin-block-start: 0;
|
margin-block-start: 0;
|
||||||
}
|
}
|
||||||
/* text */
|
/* text */
|
||||||
p, li {max-inline-size: 80ch;}
|
|
||||||
h1 {font-size: 1.8em}
|
|
||||||
h2 {font-size: 1.6em}
|
|
||||||
h3 {font-size: 1.423em}
|
|
||||||
h4 {font-size: 1.265em}
|
|
||||||
h5 {font-size: 1.125em}
|
|
||||||
h6 {font-size: 1em}
|
|
||||||
h1, h2, h3, h4, h5, h6 {
|
|
||||||
line-height: 1.2;
|
|
||||||
margin-block-start: 2rem;
|
|
||||||
margin-block-end: 1rem;
|
|
||||||
font-weight: 700;
|
|
||||||
}
|
|
||||||
p {
|
p {
|
||||||
line-height: 2;
|
line-height: 2;
|
||||||
|
}
|
||||||
|
p {
|
||||||
margin-block-end: 1em;
|
margin-block-end: 1em;
|
||||||
}
|
}
|
||||||
a {
|
|
||||||
word-wrap: break-word;
|
|
||||||
}
|
|
||||||
/* semantics */
|
/* semantics */
|
||||||
em {font-style: italic}
|
em {font-style: italic}
|
||||||
strong {font-weight: 700}
|
strong {font-weight: bold}
|
||||||
/* text formatting */
|
/* text formatting */
|
||||||
--script-size: 0.65em;
|
--script-size: 0.65em;
|
||||||
sup {
|
sup {
|
||||||
|
|
@ -72,6 +59,14 @@
|
||||||
font-size: var(--script-size);
|
font-size: var(--script-size);
|
||||||
color: var(--ui-text-muted);
|
color: var(--ui-text-muted);
|
||||||
}
|
}
|
||||||
|
>*:not(.highlight) code {
|
||||||
|
font-family: monospace;
|
||||||
|
background: var(--ui-overlay);
|
||||||
|
color: var(--ui-overlay-text);
|
||||||
|
padding: 0.25rem;
|
||||||
|
font-size: 1rem;
|
||||||
|
white-space: pre-wrap;
|
||||||
|
}
|
||||||
/* lists */
|
/* lists */
|
||||||
ul, ol {
|
ul, ol {
|
||||||
padding-inline-start: 0;
|
padding-inline-start: 0;
|
||||||
|
|
@ -84,23 +79,9 @@
|
||||||
dl {margin-block: 1em; line-height: 1.4;}
|
dl {margin-block: 1em; line-height: 1.4;}
|
||||||
dt {font-weight: 700;}
|
dt {font-weight: 700;}
|
||||||
dd {margin-inline-start: 1em;}
|
dd {margin-inline-start: 1em;}
|
||||||
/* block elements */
|
pre:not(.chroma) {
|
||||||
img {
|
|
||||||
width: 100%;
|
|
||||||
margin-block-end: 1em;
|
|
||||||
}
|
|
||||||
blockquote {
|
|
||||||
font-style: italic;
|
|
||||||
font-size: 1em;
|
|
||||||
margin: 1em 0;
|
|
||||||
border-inline-start: 0.25rem solid var(--ui-text-bold);
|
|
||||||
padding-inline-start: 0.75em;
|
|
||||||
line-height: 1.4;
|
|
||||||
}
|
|
||||||
pre {
|
|
||||||
font-family: monospace;
|
font-family: monospace;
|
||||||
font-size: 1rem;
|
font-size: 1rem;
|
||||||
padding: 1em;
|
|
||||||
line-height: 1.4;
|
line-height: 1.4;
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
white-space: pre-wrap;
|
white-space: pre-wrap;
|
||||||
|
|
@ -109,44 +90,6 @@
|
||||||
tab-size: 3;
|
tab-size: 3;
|
||||||
margin-block-end: 1em;
|
margin-block-end: 1em;
|
||||||
}
|
}
|
||||||
code {
|
|
||||||
font-family: monospace;
|
|
||||||
background: var(--ui-overlay);
|
|
||||||
color: var(--ui-overlay-text);
|
|
||||||
padding: 0.25rem;
|
|
||||||
font-size: 1rem;
|
|
||||||
white-space: pre-wrap;
|
|
||||||
word-break: break-word;
|
|
||||||
}
|
|
||||||
:not(.highlight) > pre {
|
|
||||||
line-height: 1.5;
|
|
||||||
background: var(--ui-overlay);
|
|
||||||
color: var(--ui-overlay-text);
|
|
||||||
padding: 1em;
|
|
||||||
}
|
|
||||||
pre code {
|
|
||||||
background: inherit;
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
.highlight pre {
|
|
||||||
padding-block: 1em;
|
|
||||||
}
|
|
||||||
/* figures */
|
|
||||||
figure {
|
|
||||||
margin-block-end: 1em;
|
|
||||||
}
|
|
||||||
figure img {
|
|
||||||
width: 100%;
|
|
||||||
margin-block-end: -0.125em;
|
|
||||||
}
|
|
||||||
figcaption {
|
|
||||||
background: #212121;
|
|
||||||
color: white;
|
|
||||||
font-style: italic;
|
|
||||||
padding: 1em;
|
|
||||||
font-size: 0.8em;
|
|
||||||
line-height: 1.2;
|
|
||||||
}
|
|
||||||
/* tables */
|
/* tables */
|
||||||
table {text-align: center;}
|
table {text-align: center;}
|
||||||
thead {
|
thead {
|
||||||
|
|
@ -158,24 +101,6 @@
|
||||||
border: 1px solid var(--ui-text);
|
border: 1px solid var(--ui-text);
|
||||||
padding: 0.5em;
|
padding: 0.5em;
|
||||||
}
|
}
|
||||||
/* {{<hint>}} shortcode */
|
|
||||||
.hint, .callout {
|
|
||||||
padding: 1em;
|
|
||||||
line-height: 2;
|
|
||||||
&.info, &.tip
|
|
||||||
{
|
|
||||||
background: rgba(142, 226, 142, 0.2);
|
|
||||||
border-inline-start: 4px solid rgb(142, 226, 142);
|
|
||||||
}
|
|
||||||
&.warning {
|
|
||||||
background: rgba(218, 226, 142, 0.2);
|
|
||||||
border-inline-start: 4px solid rgb(218, 226, 142);
|
|
||||||
}
|
|
||||||
&.danger {
|
|
||||||
background: rgba(226, 142, 142, 0.2);
|
|
||||||
border-inline-start: 4px solid rgb(226, 142, 142);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
/* hugo-specific citation footnote */
|
/* hugo-specific citation footnote */
|
||||||
cite sup {
|
cite sup {
|
||||||
position: inherit;
|
position: inherit;
|
||||||
|
|
|
||||||
|
|
@ -1,3 +1,7 @@
|
||||||
|
a {
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
a:link {
|
a:link {
|
||||||
transition: all 0.1s ease-out;
|
transition: all 0.1s ease-out;
|
||||||
color: var(--link-color);
|
color: var(--link-color);
|
||||||
|
|
@ -23,15 +27,6 @@ a:hover {
|
||||||
a:link {transition: none}
|
a:link {transition: none}
|
||||||
}
|
}
|
||||||
|
|
||||||
a:link[target=_blank] {
|
|
||||||
svg {
|
|
||||||
margin-inline-start: 0.35em;
|
|
||||||
margin-inline-end: 0.15em;
|
|
||||||
vertical-align: baseline;
|
|
||||||
font-size: 0.65em;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
a:link[title] {
|
a:link[title] {
|
||||||
text-decoration-style: dotted;
|
text-decoration-style: dotted;
|
||||||
}
|
}
|
||||||
12
unified.test.hugo/assets/styles/common/typography.scss
Normal file
12
unified.test.hugo/assets/styles/common/typography.scss
Normal file
|
|
@ -0,0 +1,12 @@
|
||||||
|
h1 {font-size: 2.027rem}
|
||||||
|
h2 {font-size: 1.802rem}
|
||||||
|
h3 {font-size: 1.602rem}
|
||||||
|
h4 {font-size: 1.424rem}
|
||||||
|
h5 {font-size: 1.266rem}
|
||||||
|
h6 {font-size: 1.125rem}
|
||||||
|
h1, h2, h3, h4, h5, h6 {
|
||||||
|
line-height: 1.2;
|
||||||
|
margin-block-start: 2rem;
|
||||||
|
margin-block-end: 1rem;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
@ -14,7 +14,7 @@
|
||||||
margin-inline: 0;
|
margin-inline: 0;
|
||||||
}
|
}
|
||||||
a {
|
a {
|
||||||
display: inline-block;
|
display: inline;
|
||||||
line-height: 1.5;
|
line-height: 1.5;
|
||||||
}
|
}
|
||||||
li > ul, li > ol { /* indent subheadings */
|
li > ul, li > ol { /* indent subheadings */
|
||||||
|
|
|
||||||
|
|
@ -1,30 +1,8 @@
|
||||||
h2.heading {
|
|
||||||
border-block-end: 1px solid var(--ui-text-muted);
|
|
||||||
padding-block-end: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* headings with no numbers */
|
|
||||||
|
|
||||||
article:not([autonumbering]) .heading {
|
|
||||||
position: relative;
|
|
||||||
margin-inline-end: 2.5rem;
|
|
||||||
&__anchor-link {
|
|
||||||
display: inline-flex;
|
|
||||||
align-content: center;
|
|
||||||
margin-inline-start: 0.25em;
|
|
||||||
position: absolute;
|
|
||||||
inset-inline-end: -2.5rem;
|
|
||||||
inset-block-start: 3px;
|
|
||||||
font-size: 1rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* headings with autonumbering support */
|
|
||||||
|
|
||||||
body {counter-reset: h2}
|
body {counter-reset: h2}
|
||||||
h2 {counter-reset: h3}
|
h2 {counter-reset: h3}
|
||||||
h3 {counter-reset: h4}
|
h3 {counter-reset: h4}
|
||||||
h4 {counter-reset: h5}
|
h4 {counter-reset: h5}
|
||||||
|
h5 {counter-reset: h6}
|
||||||
|
|
||||||
article[autonumbering] {
|
article[autonumbering] {
|
||||||
h2:before {
|
h2:before {
|
||||||
|
|
@ -39,29 +17,22 @@ article[autonumbering] {
|
||||||
counter-increment: h4;
|
counter-increment: h4;
|
||||||
content: counter(h2) "." counter(h3) "." counter(h4) " ";
|
content: counter(h2) "." counter(h3) "." counter(h4) " ";
|
||||||
}
|
}
|
||||||
|
h5:before {
|
||||||
|
counter-increment: h5;
|
||||||
|
content: counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) " ";
|
||||||
|
}
|
||||||
|
h6:before {
|
||||||
|
counter-increment: h6;
|
||||||
|
content: counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) "." counter(h6) " ";
|
||||||
|
}
|
||||||
h2:before,
|
h2:before,
|
||||||
h3:before,
|
h3:before,
|
||||||
h4:before
|
h4:before,
|
||||||
|
h5:before,
|
||||||
|
h6:before
|
||||||
{
|
{
|
||||||
margin-inline-end: 1em;
|
|
||||||
font-family: monospace;
|
font-family: monospace;
|
||||||
font-size: 1em;
|
font-size: 1rem;
|
||||||
}
|
|
||||||
|
|
||||||
.heading {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: 1fr auto;
|
|
||||||
grid-template-rows: auto auto;
|
|
||||||
grid-gap: 0.5rem;
|
|
||||||
&__text {
|
|
||||||
grid-column: span 2;
|
|
||||||
}
|
|
||||||
&__anchor-link {
|
|
||||||
font-size: 1rem;
|
|
||||||
grid-column: 2;
|
|
||||||
grid-row: 1;
|
|
||||||
justify-self: end;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#TableOfContents :is(ol, ul) {
|
#TableOfContents :is(ol, ul) {
|
||||||
|
|
|
||||||
|
|
@ -1,110 +0,0 @@
|
||||||
/* syntax highlighting */
|
|
||||||
|
|
||||||
.highlight {
|
|
||||||
--background: var(--ui-overlay);
|
|
||||||
--error: #cc0000;
|
|
||||||
--keyword: rgb(25, 80, 162);
|
|
||||||
--class: #f57900;
|
|
||||||
--variable: #194869;
|
|
||||||
--number: #323030;
|
|
||||||
--operator: #5400c2;
|
|
||||||
--highlight: rgb(196, 196, 196);
|
|
||||||
|
|
||||||
@media (prefers-color-scheme: dark) {
|
|
||||||
--background: var(--ui-overlay);
|
|
||||||
--error: #cc0000;
|
|
||||||
--keyword: #85ddff;
|
|
||||||
--class: #8700f5;
|
|
||||||
--variable: #bed5f2;
|
|
||||||
--number: #53ca24;
|
|
||||||
--operator: #ebe995;
|
|
||||||
--highlight: #555;
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Background */ .bg { background-color: var(--background); }
|
|
||||||
/* PreWrapper */ .chroma { background-color: var(--background); }
|
|
||||||
/* Other */ .chroma .x { color: var(--ui-text-bold) }
|
|
||||||
/* Error */ .chroma .err { color: var(--error) }
|
|
||||||
/* CodeLine */ .chroma .cl { color: var(--ui-text) }
|
|
||||||
/* 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: var(--highlight) }
|
|
||||||
/* LineNumbersTable */ .chroma .lnt { white-space: pre-wrap; user-select: none; margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #7f7f7f }
|
|
||||||
/* LineNumbers */ .chroma .ln { white-space: pre-wrap; user-select: none; margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #7f7f7f }
|
|
||||||
/* Line */ .chroma .line { display: flex; white-space: pre-wrap }
|
|
||||||
/* Keyword */ .chroma .k { color: var(--keyword); font-weight: bold }
|
|
||||||
/* KeywordConstant */ .chroma .kc { color: var(--keyword); font-weight: bold }
|
|
||||||
/* KeywordDeclaration */ .chroma .kd { color: var(--keyword); font-weight: bold }
|
|
||||||
/* KeywordNamespace */ .chroma .kn { color: var(--keyword); font-weight: bold }
|
|
||||||
/* KeywordPseudo */ .chroma .kp { color: var(--keyword); font-weight: bold }
|
|
||||||
/* KeywordReserved */ .chroma .kr { color: var(--keyword); font-weight: bold }
|
|
||||||
/* KeywordType */ .chroma .kt { color: var(--keyword); font-weight: bold }
|
|
||||||
/* Name */ .chroma .n { color: var(--ui-text-bold) }
|
|
||||||
/* NameAttribute */ .chroma .na { color: var(--ui-text-bold) }
|
|
||||||
/* NameBuiltin */ .chroma .nb { color: var(--name) }
|
|
||||||
/* NameBuiltinPseudo */ .chroma .bp { color: #3465a4 }
|
|
||||||
/* NameClass */ .chroma .nc { color: var(--ui-text-bold) }
|
|
||||||
/* NameConstant */ .chroma .no { color: var(--ui-text-bold) }
|
|
||||||
/* NameDecorator */ .chroma .nd { color: var(--class); font-weight: bold }
|
|
||||||
/* NameEntity */ .chroma .ni { color: var(--name) }
|
|
||||||
/* NameException */ .chroma .ne { color: var(--error); font-weight: bold }
|
|
||||||
/* NameFunction */ .chroma .nf { color: var(--ui-text-bold) }
|
|
||||||
/* NameFunctionMagic */ .chroma .fm { color: var(--ui-text-bold) }
|
|
||||||
/* NameLabel */ .chroma .nl { color: var(--name) }
|
|
||||||
/* NameNamespace */ .chroma .nn { color: var(--ui-text-bold) }
|
|
||||||
/* NameOther */ .chroma .nx { color: var(--ui-text-bold)}
|
|
||||||
/* NameProperty */ .chroma .py { color: var(--ui-text-bold) }
|
|
||||||
/* NameTag */ .chroma .nt { color: var(--keyword); font-weight: bold }
|
|
||||||
/* NameVariable */ .chroma .nv { color: var(--variable) }
|
|
||||||
/* NameVariableClass */ .chroma .vc { color: var(--ui-text-bold)}
|
|
||||||
/* NameVariableGlobal */ .chroma .vg { color: var(--ui-text-bold) }
|
|
||||||
/* NameVariableInstance */ .chroma .vi { color: var(--ui-text-bold) }
|
|
||||||
/* NameVariableMagic */ .chroma .vm { color: var(--ui-text-bold) }
|
|
||||||
/* Literal */ .chroma .l { color: var(--ui-text-bold) }
|
|
||||||
/* LiteralDate */ .chroma .ld { color: var(--ui-text-bold) }
|
|
||||||
/* LiteralString */ .chroma .s { color: var(--variable) }
|
|
||||||
/* LiteralStringAffix */ .chroma .sa { color: var(--variable) }
|
|
||||||
/* LiteralStringBacktick */ .chroma .sb { color: var(--variable) }
|
|
||||||
/* LiteralStringChar */ .chroma .sc { color: var(--variable) }
|
|
||||||
/* LiteralStringDelimiter */ .chroma .dl { color: var(--variable) }
|
|
||||||
/* LiteralStringDoc */ .chroma .sd { color: var(--keyword); font-style: italic }
|
|
||||||
/* LiteralStringDouble */ .chroma .s2 { color: var(--variable) }
|
|
||||||
/* LiteralStringEscape */ .chroma .se { color: var(--variable) }
|
|
||||||
/* LiteralStringHeredoc */ .chroma .sh { color: var(--variable) }
|
|
||||||
/* LiteralStringInterpol */ .chroma .si { color: var(--variable) }
|
|
||||||
/* LiteralStringOther */ .chroma .sx { color: var(--variable) }
|
|
||||||
/* LiteralStringRegex */ .chroma .sr { color: var(--variable) }
|
|
||||||
/* LiteralStringSingle */ .chroma .s1 { color: var(--variable) }
|
|
||||||
/* LiteralStringSymbol */ .chroma .ss { color: var(--variable) }
|
|
||||||
/* LiteralNumber */ .chroma .m { color: var(--number); font-weight: bold }
|
|
||||||
/* LiteralNumberBin */ .chroma .mb { color: var(--number); font-weight: bold }
|
|
||||||
/* LiteralNumberFloat */ .chroma .mf { color: var(--number); font-weight: bold }
|
|
||||||
/* LiteralNumberHex */ .chroma .mh { color: var(--number); font-weight: bold }
|
|
||||||
/* LiteralNumberInteger */ .chroma .mi { color: var(--number); font-weight: bold }
|
|
||||||
/* LiteralNumberIntegerLong */ .chroma .il { color: var(--number); font-weight: bold }
|
|
||||||
/* LiteralNumberOct */ .chroma .mo { color: var(--number); font-weight: bold }
|
|
||||||
/* Operator */ .chroma .o { color: var(--operator); font-weight: bold }
|
|
||||||
/* OperatorWord */ .chroma .ow { color: var(--keyword); font-weight: bold }
|
|
||||||
/* Punctuation */ .chroma .p { color: var(--ui-text-bold); font-weight: bold }
|
|
||||||
/* Comment */ .chroma .c { color: var(--ui-text-muted); font-style: italic }
|
|
||||||
/* CommentHashbang */ .chroma .ch { color: var(--ui-text-muted); font-style: italic }
|
|
||||||
/* CommentMultiline */ .chroma .cm { color: var(--ui-text-muted); font-style: italic }
|
|
||||||
/* CommentSingle */ .chroma .c1 { color: var(--ui-text-muted); font-style: italic }
|
|
||||||
/* CommentSpecial */ .chroma .cs { color: var(--ui-text-muted); font-style: italic }
|
|
||||||
/* CommentPreproc */ .chroma .cp { color: var(--ui-text-muted); font-style: italic }
|
|
||||||
/* CommentPreprocFile */ .chroma .cpf { color: var(--ui-text-muted); font-style: italic }
|
|
||||||
/* Generic */ .chroma .g { color: var(--ui-text-bold) }
|
|
||||||
/* GenericDeleted */ .chroma .gd { color: var(--error) }
|
|
||||||
/* GenericEmph */ .chroma .ge { color: var(--ui-text-bold); font-style: italic }
|
|
||||||
/* GenericError */ .chroma .gr { color: var(--error) }
|
|
||||||
/* GenericHeading */ .chroma .gh { color: var(--ui-text-bold); font-weight: bold }
|
|
||||||
/* GenericInserted */ .chroma .gi { color: var(--ui-text) }
|
|
||||||
/* GenericOutput */ .chroma .go { color: var(--ui-text-bold); font-style: italic }
|
|
||||||
/* GenericPrompt */ .chroma .gp { color: var(--ui-text) }
|
|
||||||
/* GenericStrong */ .chroma .gs { color: var(--ui-text-bold); font-weight: bold }
|
|
||||||
/* GenericSubheading */ .chroma .gu { color: var(--ui-text-bold); font-weight: bold }
|
|
||||||
/* GenericTraceback */ .chroma .gt { color: var(--error); font-weight: bold }
|
|
||||||
/* GenericUnderline */ .chroma .gl { color: var(--ui-text-bold); text-decoration: underline }
|
|
||||||
/* TextWhitespace */ .chroma .w { color: var(--ui-text-muted); text-decoration: underline }
|
|
||||||
|
|
@ -0,0 +1,40 @@
|
||||||
|
figure.blockquote {
|
||||||
|
margin-block: 2em;
|
||||||
|
margin-inline: 0;
|
||||||
|
width: 100%;
|
||||||
|
blockquote {
|
||||||
|
font-style: italic;
|
||||||
|
font-size: 1em;
|
||||||
|
margin: 1em 0;
|
||||||
|
border-inline-start: 0.4em solid var(--ui-overlay);
|
||||||
|
padding-inline: 1.5em;
|
||||||
|
background: var(--ui-overlay-transparent);
|
||||||
|
padding-block: 1em;
|
||||||
|
line-height: 1.4;
|
||||||
|
position: relative;
|
||||||
|
border-radius: 0.5em;
|
||||||
|
> .quote-mark {
|
||||||
|
font-size: 2em;
|
||||||
|
position: absolute;
|
||||||
|
left: -0.275em;
|
||||||
|
top: -0.1625em;
|
||||||
|
}
|
||||||
|
> .info-mark {
|
||||||
|
font-size: 2em;
|
||||||
|
position: absolute;
|
||||||
|
left: -0.275em;
|
||||||
|
top: -0.1em;
|
||||||
|
}
|
||||||
|
.alert-title {
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 1em;
|
||||||
|
margin-top: -0.5em;
|
||||||
|
margin-left: 0.25em;
|
||||||
|
padding-inline: 1em;
|
||||||
|
background: var(--ui-overlay);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
blockquote ~ figcaption {
|
||||||
|
padding-inline: 1em;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,168 @@
|
||||||
|
div.highlight {
|
||||||
|
--background: hsl(210, 100%, 90%);
|
||||||
|
--text: hsl(210, 100%, 10%);
|
||||||
|
|
||||||
|
--error: #cc0000;
|
||||||
|
--keyword: hsl(210, 100%, 25%);
|
||||||
|
--name: green;
|
||||||
|
--literal: hsl(210, 100%, 50%);
|
||||||
|
--comment: hsl(210, 50%, 55%);
|
||||||
|
--generic: purple;
|
||||||
|
--whitespace: white;
|
||||||
|
|
||||||
|
--highlight: hsl(210, 100%, 85%);
|
||||||
|
--linenos: var(--comment);
|
||||||
|
|
||||||
|
::selection {
|
||||||
|
background: black;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (prefers-color-scheme: dark) {
|
||||||
|
--background: hsl(210, 100%, 15%);
|
||||||
|
--text: hsl(210, 100%, 80%);
|
||||||
|
|
||||||
|
--error: #cc0000;
|
||||||
|
--keyword: hsl(210, 100%, 75%);
|
||||||
|
--name: green;
|
||||||
|
--literal: hsl(210, 100%, 60%);
|
||||||
|
--comment: hsl(210, 50%, 45%);
|
||||||
|
--generic: purple;
|
||||||
|
--whitespace: black;
|
||||||
|
|
||||||
|
--highlight: hsl(210, 100%, 25%);
|
||||||
|
--linenos: var(--comment);
|
||||||
|
--linenos-background: hsl(210, 100%, 5%);
|
||||||
|
|
||||||
|
::selection {
|
||||||
|
background: white;
|
||||||
|
color: black;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
pre.chroma {
|
||||||
|
overflow: auto;
|
||||||
|
span {
|
||||||
|
-webkit-text-size-adjust: 100%;
|
||||||
|
font-size: 1em;
|
||||||
|
}
|
||||||
|
.ln {
|
||||||
|
font-size: 1em;
|
||||||
|
margin-inline-end: 1em;
|
||||||
|
background: var(--linenos-background);
|
||||||
|
padding-block: 0.25em;
|
||||||
|
display: flex;
|
||||||
|
width: 2em;
|
||||||
|
}
|
||||||
|
.hl .ln {
|
||||||
|
background: var(--highlight);
|
||||||
|
}
|
||||||
|
.line {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: max-content 1fr;
|
||||||
|
.cl {
|
||||||
|
grid-column: 2;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.cl {
|
||||||
|
padding-inline: 1em;
|
||||||
|
padding-block: 0.25em;
|
||||||
|
word-break: break-all;
|
||||||
|
}
|
||||||
|
.line:first-child {
|
||||||
|
.ln, .cl {
|
||||||
|
padding-block-start: 1em;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.line:last-child {
|
||||||
|
.ln, .cl {
|
||||||
|
padding-block-end: 1em;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Background */ .bg { background-color: var(--background); }
|
||||||
|
/* PreWrapper */ .chroma { background-color: var(--background); }
|
||||||
|
/* Other */ .chroma .x { color: var(--text) }
|
||||||
|
/* Error */ .chroma .err { color: var(--error) }
|
||||||
|
/* CodeLine */ .chroma .cl { color: var(--text) }
|
||||||
|
/* 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: var(--highlight) }
|
||||||
|
/* LineNumbersTable */ .chroma .lnt { white-space: pre; user-select: none; margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: var(--linenos) }
|
||||||
|
/* LineNumbers */ .chroma .ln { white-space: pre; user-select: none; margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: var(--linenos) }
|
||||||
|
/* Line */ .chroma .line { display: flex; white-space: pre }
|
||||||
|
/* Keyword */ .chroma .k { color: var(--keyword); font-weight: bold }
|
||||||
|
/* KeywordConstant */ .chroma .kc { color: var(--keyword); font-weight: bold }
|
||||||
|
/* KeywordDeclaration */ .chroma .kd { color: var(--keyword); font-weight: bold }
|
||||||
|
/* KeywordNamespace */ .chroma .kn { color: var(--keyword); font-weight: bold }
|
||||||
|
/* KeywordPseudo */ .chroma .kp { color: var(--keyword); font-weight: bold }
|
||||||
|
/* KeywordReserved */ .chroma .kr { color: var(--keyword); font-weight: bold }
|
||||||
|
/* KeywordType */ .chroma .kt { color: var(--keyword); font-weight: bold }
|
||||||
|
/* Name */ .chroma .n { color: var(--name) }
|
||||||
|
/* NameAttribute */ .chroma .na { color: var(--name) }
|
||||||
|
/* NameBuiltin */ .chroma .nb { color: var(--name) }
|
||||||
|
/* NameBuiltinPseudo */ .chroma .bp { color: #3465a4 }
|
||||||
|
/* NameClass */ .chroma .nc { color: var(--name) }
|
||||||
|
/* NameConstant */ .chroma .no { color: var(--name) }
|
||||||
|
/* NameDecorator */ .chroma .nd { color: var(--class); font-weight: bold }
|
||||||
|
/* NameEntity */ .chroma .ni { color: var(--name) }
|
||||||
|
/* NameException */ .chroma .ne { color: var(--error); font-weight: bold }
|
||||||
|
/* NameFunction */ .chroma .nf { color: var(--name) }
|
||||||
|
/* NameFunctionMagic */ .chroma .fm { color: var(--name) }
|
||||||
|
/* NameLabel */ .chroma .nl { color: var(--name) }
|
||||||
|
/* NameNamespace */ .chroma .nn { color: var(--name) }
|
||||||
|
/* NameOther */ .chroma .nx { color: var(--name)}
|
||||||
|
/* NameProperty */ .chroma .py { color: var(--name) }
|
||||||
|
/* NameTag */ .chroma .nt { color: var(--keyword); font-weight: bold }
|
||||||
|
/* NameVariable */ .chroma .nv { color: var(--name) }
|
||||||
|
/* NameVariableClass */ .chroma .vc { color: var(--name)}
|
||||||
|
/* NameVariableGlobal */ .chroma .vg { color: var(--name) }
|
||||||
|
/* NameVariableInstance */ .chroma .vi { color: var(--name) }
|
||||||
|
/* NameVariableMagic */ .chroma .vm { color: var(--name) }
|
||||||
|
/* Literal */ .chroma .l { color: var(--literal) }
|
||||||
|
/* LiteralDate */ .chroma .ld { color: var(--literal) }
|
||||||
|
/* LiteralString */ .chroma .s { color: var(--literal) }
|
||||||
|
/* LiteralStringAffix */ .chroma .sa { color: var(--literal) }
|
||||||
|
/* LiteralStringBacktick */ .chroma .sb { color: var(--literal) }
|
||||||
|
/* LiteralStringChar */ .chroma .sc { color: var(--literal) }
|
||||||
|
/* LiteralStringDelimiter */ .chroma .dl { color: var(--literal) }
|
||||||
|
/* LiteralStringDoc */ .chroma .sd { color: var(--keyword); font-style: italic }
|
||||||
|
/* LiteralStringDouble */ .chroma .s2 { color: var(--literal) }
|
||||||
|
/* LiteralStringEscape */ .chroma .se { color: var(--literal) }
|
||||||
|
/* LiteralStringHeredoc */ .chroma .sh { color: var(--literal) }
|
||||||
|
/* LiteralStringInterpol */ .chroma .si { color: var(--literal) }
|
||||||
|
/* LiteralStringOther */ .chroma .sx { color: var(--literal) }
|
||||||
|
/* LiteralStringRegex */ .chroma .sr { color: var(--literal) }
|
||||||
|
/* LiteralStringSingle */ .chroma .s1 { color: var(--literal) }
|
||||||
|
/* LiteralStringSymbol */ .chroma .ss { color: var(--literal) }
|
||||||
|
/* LiteralNumber */ .chroma .m { color: var(--literal); font-weight: bold }
|
||||||
|
/* LiteralNumberBin */ .chroma .mb { color: var(--literal); font-weight: bold }
|
||||||
|
/* LiteralNumberFloat */ .chroma .mf { color: var(--literal); font-weight: bold }
|
||||||
|
/* LiteralNumberHex */ .chroma .mh { color: var(--literal); font-weight: bold }
|
||||||
|
/* LiteralNumberInteger */ .chroma .mi { color: var(--literal); font-weight: bold }
|
||||||
|
/* LiteralNumberIntegerLong */ .chroma .il { color: var(--literal); font-weight: bold }
|
||||||
|
/* LiteralNumberOct */ .chroma .mo { color: var(--literal); font-weight: bold }
|
||||||
|
/* Operator */ .chroma .o { color: var(--keyword); font-weight: bold }
|
||||||
|
/* OperatorWord */ .chroma .ow { color: var(--keyword); font-weight: bold }
|
||||||
|
/* Punctuation */ .chroma .p { color: var(--text); font-weight: bold }
|
||||||
|
/* Comment */ .chroma .c { color: var(--comment); font-style: italic }
|
||||||
|
/* CommentHashbang */ .chroma .ch { color: var(--comment); font-style: italic }
|
||||||
|
/* CommentMultiline */ .chroma .cm { color: var(--comment); font-style: italic }
|
||||||
|
/* CommentSingle */ .chroma .c1 { color: var(--comment); font-style: italic }
|
||||||
|
/* CommentSpecial */ .chroma .cs { color: var(--comment); font-style: italic }
|
||||||
|
/* CommentPreproc */ .chroma .cp { color: var(--comment); font-style: italic }
|
||||||
|
/* CommentPreprocFile */ .chroma .cpf { color: var(--comment); font-style: italic }
|
||||||
|
/* Generic */ .chroma .g { color: var(--generic) }
|
||||||
|
/* GenericDeleted */ .chroma .gd { color: var(--generic) }
|
||||||
|
/* GenericEmph */ .chroma .ge { color: var(--generic); font-style: italic }
|
||||||
|
/* GenericError */ .chroma .gr { color: var(--generic) }
|
||||||
|
/* GenericHeading */ .chroma .gh { color: var(--generic); font-weight: bold }
|
||||||
|
/* GenericInserted */ .chroma .gi { color: var(--generic) }
|
||||||
|
/* GenericOutput */ .chroma .go { color: var(--generic); font-style: italic }
|
||||||
|
/* GenericPrompt */ .chroma .gp { color: var(--generic) }
|
||||||
|
/* GenericStrong */ .chroma .gs { color: var(--generic); font-weight: bold }
|
||||||
|
/* GenericSubheading */ .chroma .gu { color: var(--generic); font-weight: bold }
|
||||||
|
/* GenericTraceback */ .chroma .gt { color: var(--generic); font-weight: bold }
|
||||||
|
/* GenericUnderline */ .chroma .gl { color: var(--generic); text-decoration: underline }
|
||||||
|
/* TextWhitespace */ .chroma .w { color: var(--whitespace); text-decoration: underline }
|
||||||
|
|
@ -0,0 +1,23 @@
|
||||||
|
.rendered-heading {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr auto;
|
||||||
|
gap: 0.5em;
|
||||||
|
&:is(h2) {
|
||||||
|
border-block-end: 1px solid var(--ui-text-muted);
|
||||||
|
padding-block-end: 1rem;
|
||||||
|
}
|
||||||
|
&__text {
|
||||||
|
grid-column: 1;
|
||||||
|
}
|
||||||
|
&__anchor-link {
|
||||||
|
grid-column: 2;
|
||||||
|
line-height: 1em;
|
||||||
|
margin-top: 0.15em;
|
||||||
|
display: grid;
|
||||||
|
place-items: center;
|
||||||
|
align-self: start;
|
||||||
|
&__text {
|
||||||
|
font-size: 1rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,17 @@
|
||||||
|
figure.image {
|
||||||
|
margin-block: 2em;
|
||||||
|
margin-inline: 0;
|
||||||
|
width: 100%;
|
||||||
|
img {
|
||||||
|
width: 100%;
|
||||||
|
margin-block-end: -0.125em;
|
||||||
|
}
|
||||||
|
img ~ figcaption {
|
||||||
|
background: #212121;
|
||||||
|
color: white;
|
||||||
|
font-style: italic;
|
||||||
|
padding: 1em;
|
||||||
|
font-size: 0.8em;
|
||||||
|
line-height: 1.2;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,11 @@
|
||||||
|
.rendered-link {
|
||||||
|
&__text {
|
||||||
|
|
||||||
|
}
|
||||||
|
&__external-link-icon {
|
||||||
|
margin-inline-start: 0.35em;
|
||||||
|
margin-inline-end: 0.15em;
|
||||||
|
vertical-align: baseline;
|
||||||
|
font-size: 0.65em;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -1,3 +1,5 @@
|
||||||
|
@import "../../mixins/shadow.scss";
|
||||||
|
|
||||||
.layout-_default-single {
|
.layout-_default-single {
|
||||||
.page-header {
|
.page-header {
|
||||||
hr {display: none;}
|
hr {display: none;}
|
||||||
|
|
@ -33,6 +35,36 @@
|
||||||
margin-block-end: 0;
|
margin-block-end: 0;
|
||||||
align-self: end;
|
align-self: end;
|
||||||
}
|
}
|
||||||
|
.page-series {
|
||||||
|
// background: var(--ui-overlay);
|
||||||
|
// color: var(--ui-overlay-text);
|
||||||
|
.container {
|
||||||
|
max-width: 80ch;
|
||||||
|
margin-inline: auto;
|
||||||
|
}
|
||||||
|
&__hint {
|
||||||
|
font-style: italic;
|
||||||
|
}
|
||||||
|
.series {
|
||||||
|
list-style: none;
|
||||||
|
padding-inline-start: 1em;
|
||||||
|
.current-post {
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
.series-post {
|
||||||
|
margin-block: 0.5em;
|
||||||
|
&__part {
|
||||||
|
margin-inline-end: 0.5em;
|
||||||
|
}
|
||||||
|
&__title {
|
||||||
|
|
||||||
|
}
|
||||||
|
&__link {
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
.page-toc {
|
.page-toc {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
@ -40,23 +72,45 @@
|
||||||
max-width: 80ch;
|
max-width: 80ch;
|
||||||
margin-inline: auto;
|
margin-inline: auto;
|
||||||
}
|
}
|
||||||
|
.page[has-toc] {
|
||||||
|
padding-block-end: 4em;
|
||||||
|
}
|
||||||
#toc-toggle {
|
#toc-toggle {
|
||||||
display: none;
|
display: none;
|
||||||
position: fixed;
|
|
||||||
bottom: 1em;
|
|
||||||
right: 1em;
|
|
||||||
background-color: var(--ui-overlay);
|
|
||||||
z-index: 5;
|
|
||||||
outline: none;
|
|
||||||
&:checked ~ .page-toc {
|
&:checked ~ .page-toc {
|
||||||
display: block;
|
display: block;
|
||||||
position: fixed;
|
position: fixed;
|
||||||
z-index: 10;
|
z-index: 10;
|
||||||
bottom: 5em;
|
bottom: 5em;
|
||||||
height: 80vh;
|
height: 40em;
|
||||||
|
width: 80%;
|
||||||
|
max-width: 20em;
|
||||||
|
max-height: 70vh;
|
||||||
overflow-y: scroll;
|
overflow-y: scroll;
|
||||||
right: 1em;
|
right: 1em;
|
||||||
background: var(--ui-overlay);
|
background: var(--ui-overlay);
|
||||||
|
border-radius: 1em;
|
||||||
|
@include shadow-low;
|
||||||
|
padding: 0;
|
||||||
|
> .container {
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
details {
|
||||||
|
display: contents;
|
||||||
|
summary {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
#TableOfContents {
|
||||||
|
padding: 1em;
|
||||||
|
&:before {
|
||||||
|
content: 'Contents';
|
||||||
|
font-size: 1em;
|
||||||
|
font-weight: 900;
|
||||||
|
color: var(--ui-overlay-text);
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
label[for="toc-toggle"] {
|
label[for="toc-toggle"] {
|
||||||
|
|
@ -70,6 +124,13 @@
|
||||||
width: 6em;
|
width: 6em;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
|
@include shadow-low;
|
||||||
|
}
|
||||||
|
#toc-toggle ~ label[for="toc-toggle"] {
|
||||||
|
|
||||||
|
}
|
||||||
|
#toc-toggle:checked ~ label[for="toc-toggle"] {
|
||||||
|
|
||||||
}
|
}
|
||||||
#toc-toggle__label-hide {
|
#toc-toggle__label-hide {
|
||||||
display: none;
|
display: none;
|
||||||
|
|
@ -95,6 +156,7 @@
|
||||||
grid-template-columns: 1fr minmax(37em, 80ch) minmax(17em, 20em) 1fr;
|
grid-template-columns: 1fr minmax(37em, 80ch) minmax(17em, 20em) 1fr;
|
||||||
grid-template-rows: auto 1fr;
|
grid-template-rows: auto 1fr;
|
||||||
gap: 2em;
|
gap: 2em;
|
||||||
|
padding-block-end: unset;
|
||||||
.page-header {
|
.page-header {
|
||||||
grid-column: 1 / span 4;
|
grid-column: 1 / span 4;
|
||||||
grid-row: 1;
|
grid-row: 1;
|
||||||
|
|
@ -116,7 +178,16 @@
|
||||||
justify-self: start;
|
justify-self: start;
|
||||||
max-width: unset;
|
max-width: unset;
|
||||||
border-inline-start: thin solid var(--ui-overlay);
|
border-inline-start: thin solid var(--ui-overlay);
|
||||||
padding-inline-start: 2em;
|
padding-inline: 2em;
|
||||||
|
max-height: 90vh;
|
||||||
|
overflow-y: auto;
|
||||||
|
scrollbar-color: var(--ui-text) var(--ui-overlay);
|
||||||
|
&::-webkit-scrollbar-thumb {
|
||||||
|
background-color: var(--ui-text)
|
||||||
|
}
|
||||||
|
&::-webkit-scrollbar-track {
|
||||||
|
background-color: var(--ui-overlay)
|
||||||
|
}
|
||||||
details {
|
details {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
background: none;
|
background: none;
|
||||||
|
|
|
||||||
69
unified.test.hugo/assets/styles/mixins/fab-unit.scss
Normal file
69
unified.test.hugo/assets/styles/mixins/fab-unit.scss
Normal file
|
|
@ -0,0 +1,69 @@
|
||||||
|
/*
|
||||||
|
* https://www.smashingmagazine.com/2022/12/fabunit-smart-way-control-synchronize-typo-space/
|
||||||
|
*
|
||||||
|
* Specify a minimum size and an optimum size (to be shown at the "target range")
|
||||||
|
*/
|
||||||
|
|
||||||
|
@use "sass:math";
|
||||||
|
|
||||||
|
|
||||||
|
/* Helper functions */
|
||||||
|
|
||||||
|
$rem-base: 16px;
|
||||||
|
|
||||||
|
@function strip-units($number) {
|
||||||
|
@if (math.is-unitless($number)) {
|
||||||
|
@return $number;
|
||||||
|
} @else {
|
||||||
|
@return math.div($number, $number * 0 + 1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@function rem($size){
|
||||||
|
@if (math.compatible($size, 1rem) and not math.is-unitless($size)) {
|
||||||
|
@return $size;
|
||||||
|
} @else {
|
||||||
|
@return math.div(strip-units($size), strip-units($rem-base)) * 1rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* Default values fab-unit 🪄 */
|
||||||
|
|
||||||
|
$screen-min: 320;
|
||||||
|
$screen-opt-start: 960;
|
||||||
|
$screen-opt-end: 1440;
|
||||||
|
$screen-max: 2000; // $screen-opt-end | int > $screen-opt-end | false
|
||||||
|
$aspect-ratio: math.div(16, 9); // smaller values for larger aspect ratios
|
||||||
|
|
||||||
|
|
||||||
|
/* Magic function fab-unit 🪄 */
|
||||||
|
|
||||||
|
@function fab-unit(
|
||||||
|
$size-min,
|
||||||
|
$size-opt,
|
||||||
|
$screen-min: $screen-min,
|
||||||
|
$screen-opt-start: $screen-opt-start,
|
||||||
|
$screen-opt-end: $screen-opt-end,
|
||||||
|
$screen-max: $screen-max,
|
||||||
|
$aspect-ratio: $aspect-ratio
|
||||||
|
) {
|
||||||
|
$screen-factor: min(100vw, 100vh * $aspect-ratio);
|
||||||
|
$steep-slope: math.div(($size-opt - $size-min), ($screen-opt-start - $screen-min)) * 100 > 1;
|
||||||
|
$slope1: calc(rem($size-min) + ($size-opt - $size-min) * ($screen-factor - rem($screen-min)) / ($screen-opt-start - $screen-min));
|
||||||
|
$slope2: calc($screen-factor / $screen-opt-end * $size-opt);
|
||||||
|
@if $screen-max {
|
||||||
|
$size-max: math.div(rem($screen-max), $screen-opt-end) * $size-opt;
|
||||||
|
@if $steep-slope {
|
||||||
|
@return clamp(rem($size-min), $slope1, clamp(rem($size-opt), $slope2, $size-max));
|
||||||
|
} @else {
|
||||||
|
@return clamp(clamp(rem($size-min), $slope1, rem($size-opt)), $slope2, $size-max);
|
||||||
|
}
|
||||||
|
} @else {
|
||||||
|
@if $steep-slope {
|
||||||
|
@return clamp(rem($size-min), $slope1, max(rem($size-opt), $slope2));
|
||||||
|
} @else {
|
||||||
|
@return max(clamp(rem($size-min), $slope1, rem($size-opt)), $slope2);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
24
unified.test.hugo/assets/styles/mixins/shadow.scss
Normal file
24
unified.test.hugo/assets/styles/mixins/shadow.scss
Normal file
|
|
@ -0,0 +1,24 @@
|
||||||
|
@mixin shadow-low {
|
||||||
|
box-shadow: 0 1px 1px rgba(0,0,0,0.11),
|
||||||
|
0 2px 2px rgba(0,0,0,0.11),
|
||||||
|
0 4px 4px rgba(0,0,0,0.11),
|
||||||
|
0 6px 8px rgba(0,0,0,0.11),
|
||||||
|
0 8px 16px rgba(0,0,0,0.11);
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin shadow-high {
|
||||||
|
box-shadow: 0 2px 1px rgba(0,0,0,0.09),
|
||||||
|
0 4px 2px rgba(0,0,0,0.09),
|
||||||
|
0 8px 4px rgba(0,0,0,0.09),
|
||||||
|
0 16px 8px rgba(0,0,0,0.09),
|
||||||
|
0 32px 16px rgba(0,0,0,0.09);
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin shadow-soft {
|
||||||
|
box-shadow: 0 1px 2px rgba(0,0,0,0.07),
|
||||||
|
0 2px 4px rgba(0,0,0,0.07),
|
||||||
|
0 4px 8px rgba(0,0,0,0.07),
|
||||||
|
0 8px 16px rgba(0,0,0,0.07),
|
||||||
|
0 16px 32px rgba(0,0,0,0.07),
|
||||||
|
0 32px 64px rgba(0,0,0,0.07);
|
||||||
|
}
|
||||||
|
|
@ -8,6 +8,7 @@ inReplyTo = [
|
||||||
"https://github.com/w3c/activitypub/issues/439"
|
"https://github.com/w3c/activitypub/issues/439"
|
||||||
]
|
]
|
||||||
toc = true
|
toc = true
|
||||||
|
autonumbering = true
|
||||||
+++
|
+++
|
||||||
|
|
||||||
Continuing from (and expanding on) this GitHub issue: https://github.com/w3c/activitypub/issues/439
|
Continuing from (and expanding on) this GitHub issue: https://github.com/w3c/activitypub/issues/439
|
||||||
|
|
@ -34,9 +35,13 @@ If you define OrderedCollection in terms of `orderedItems`, then this is simply
|
||||||
|
|
||||||
The problem with taking OrderedCollection to be defined in terms of `orderedItems` is that OrderedCollection in AS2-Vocab is actually defined as *inheriting from* Collection. The actual definitions given are the following:
|
The problem with taking OrderedCollection to be defined in terms of `orderedItems` is that OrderedCollection in AS2-Vocab is actually defined as *inheriting from* Collection. The actual definitions given are the following:
|
||||||
|
|
||||||
> Collection: A `Collection` is a subtype of `Object` that represents ordered or unordered sets of `Object or Link` instances.
|
|
||||||
|
|
||||||
> OrderedCollection: A subtype of `Collection` in which members of the logical collection are assumed to always be strictly ordered.
|
> A `Collection` is a subtype of `Object` that represents ordered or unordered sets of `Object or Link` instances.
|
||||||
|
{cite="https://www.w3.org/TR/activitystreams-vocabulary/#dfn-collection" caption="[-- <cite>Activity Vocabulary</cite> § 2 \"Core Types\" # Collection](https://www.w3.org/TR/activitystreams-vocabulary/#dfn-collection)"}
|
||||||
|
|
||||||
|
|
||||||
|
> A subtype of `Collection` in which members of the logical collection are assumed to always be strictly ordered.
|
||||||
|
{cite="https://www.w3.org/TR/activitystreams-vocabulary/#dfn-orderedcollection" caption="[-- <cite>Activity Vocabulary</cite> § 2 \"Core Types\" # OrderedCollection](https://www.w3.org/TR/activitystreams-vocabulary/#dfn-orderedcollection)"}
|
||||||
|
|
||||||
So if Collection is a set (ordered or unordered), and OrderedCollection inherits from Collection, then OrderedCollection is logically implied to also be a set (ordered).
|
So if Collection is a set (ordered or unordered), and OrderedCollection inherits from Collection, then OrderedCollection is logically implied to also be a set (ordered).
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -3,6 +3,8 @@ title = "fedi vs web"
|
||||||
summary = "this is the fundamental divide between #fediverse thinking and #Web thinking, where #ActivityPub straddles the line between both."
|
summary = "this is the fundamental divide between #fediverse thinking and #Web thinking, where #ActivityPub straddles the line between both."
|
||||||
date = "2024-09-24T07:06:00-06:00"
|
date = "2024-09-24T07:06:00-06:00"
|
||||||
source = "https://mastodon.social/@trwnh/113192442723669483"
|
source = "https://mastodon.social/@trwnh/113192442723669483"
|
||||||
|
series = "fedi and the social web 2024"
|
||||||
|
series_part = "1"
|
||||||
+++
|
+++
|
||||||
|
|
||||||
idk where to really put this (might turn into a blog post later or something). it's what you might call a "hot take", certainly a heterodox one to some parts of the broader #fediverse community. this is in response to recent discussion on "what do you want to see from AP/AS2 specs" (in context of wg rechartering) mostly devolving into people complaining about JSON-LD and extensibility, some even about namespacing in general (there was a suggestion to use UUID vocab terms. i'm not joking)
|
idk where to really put this (might turn into a blog post later or something). it's what you might call a "hot take", certainly a heterodox one to some parts of the broader #fediverse community. this is in response to recent discussion on "what do you want to see from AP/AS2 specs" (in context of wg rechartering) mostly devolving into people complaining about JSON-LD and extensibility, some even about namespacing in general (there was a suggestion to use UUID vocab terms. i'm not joking)
|
||||||
|
|
|
||||||
|
|
@ -4,6 +4,8 @@ summary = "The main thing I'm trying to formulate right now is a generic underst
|
||||||
date = "2024-09-29T19:53:00-06:00"
|
date = "2024-09-29T19:53:00-06:00"
|
||||||
source = "https://socialhub.activitypub.rocks/t/socialwebfoundation-what-do-people-think/4564/13"
|
source = "https://socialhub.activitypub.rocks/t/socialwebfoundation-what-do-people-think/4564/13"
|
||||||
inReplyTo = "https://socialhub.activitypub.rocks/t/socialwebfoundation-what-do-people-think/4564/12"
|
inReplyTo = "https://socialhub.activitypub.rocks/t/socialwebfoundation-what-do-people-think/4564/12"
|
||||||
|
series = "fedi and the social web 2024"
|
||||||
|
series_part = "2.5"
|
||||||
+++
|
+++
|
||||||
|
|
||||||
<blockquote cite="https://socialhub.activitypub.rocks/t/socialwebfoundation-what-do-people-think/4564/12">
|
<blockquote cite="https://socialhub.activitypub.rocks/t/socialwebfoundation-what-do-people-think/4564/12">
|
||||||
|
|
|
||||||
|
|
@ -3,6 +3,8 @@ title = "what is web"
|
||||||
summary = "the many webs interpretation, what \"web\" means to me, and how do we build the \"social web\""
|
summary = "the many webs interpretation, what \"web\" means to me, and how do we build the \"social web\""
|
||||||
date = "2024-09-26T11:57:00-06:00"
|
date = "2024-09-26T11:57:00-06:00"
|
||||||
source = "https://matrix.to/#/!uHqAjmOtrLtidOiczC:matrix.org/$RwgyjnqW51n_VwkSwWXP3cewn-VLZ_20jIowiprYdSQ?via=matrix.org&via=mozilla.org&via=decentsocial.net"
|
source = "https://matrix.to/#/!uHqAjmOtrLtidOiczC:matrix.org/$RwgyjnqW51n_VwkSwWXP3cewn-VLZ_20jIowiprYdSQ?via=matrix.org&via=mozilla.org&via=decentsocial.net"
|
||||||
|
series = "fedi and the social web 2024"
|
||||||
|
series_part = "2"
|
||||||
+++
|
+++
|
||||||
|
|
||||||
> How we move forward past these transparent takeover attempts is a conversation I have yet to see within the ActivityPub sphere, and perhaps that of itself is an answer to the question
|
> How we move forward past these transparent takeover attempts is a conversation I have yet to see within the ActivityPub sphere, and perhaps that of itself is an answer to the question
|
||||||
|
|
|
||||||
|
|
@ -2,11 +2,20 @@ baseURL = "https://trwnh.com/"
|
||||||
languageCode = "en-us"
|
languageCode = "en-us"
|
||||||
title = "~a"
|
title = "~a"
|
||||||
|
|
||||||
|
capitalizeListTitles = false
|
||||||
|
|
||||||
markup.goldmark.renderer.unsafe = true
|
markup.goldmark.renderer.unsafe = true
|
||||||
|
|
||||||
|
[markup.goldmark.parser]
|
||||||
|
wrapStandAloneImageWithinParagraph = false
|
||||||
|
attribute.block = true
|
||||||
|
attribute.title = true
|
||||||
|
|
||||||
[markup.highlight]
|
[markup.highlight]
|
||||||
codeFences = true
|
codeFences = true
|
||||||
noClasses = false
|
noClasses = false
|
||||||
|
lineNumbersInTable = false
|
||||||
|
tabWidth = 3
|
||||||
|
|
||||||
[markup.tableOfContents]
|
[markup.tableOfContents]
|
||||||
startLevel = 2
|
startLevel = 2
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,25 @@
|
||||||
|
<figure class="blockquote">
|
||||||
|
<blockquote{{ with .Attributes.cite }} cite="{{ . }}"{{ end }}>
|
||||||
|
{{ if .AlertType}}
|
||||||
|
{{ if in (slice "info" "note" "tip") .AlertType }}
|
||||||
|
<svg class="info-mark" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><title>{{.AlertType}}</title><path fill="currentColor" d="M11 17h2v-6h-2zm1-8q.425 0 .713-.288T13 8t-.288-.712T12 7t-.712.288T11 8t.288.713T12 9m0 13q-2.075 0-3.9-.788t-3.175-2.137T2.788 15.9T2 12t.788-3.9t2.137-3.175T8.1 2.788T12 2t3.9.788t3.175 2.137T21.213 8.1T22 12t-.788 3.9t-2.137 3.175t-3.175 2.138T12 22"/></svg>
|
||||||
|
<p class="alert-title" aria-hidden="true">{{.AlertTitle}}</p>
|
||||||
|
{{ end }}
|
||||||
|
|
||||||
|
{{ if eq .AlertType "important"}}
|
||||||
|
{{ end }}
|
||||||
|
{{ if eq .AlertType "warning"}}
|
||||||
|
{{ end }}
|
||||||
|
{{ if eq .AlertType "caution"}}
|
||||||
|
{{ end }}
|
||||||
|
{{ if eq .AlertType "danger"}}
|
||||||
|
{{ end }}
|
||||||
|
{{ else }}
|
||||||
|
<svg class="quote-mark" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 290 290" width="1em" height="1em" fill="currentColor"><title>quote</title><path d="M22.12 145v97.65h97.65V145H70.95c0-26.92 21.9-48.82 48.82-48.82V47.35c-53.93 0-97.65 43.72-97.65 97.65zm245.76-48.82V47.35c-53.93 0-97.65 43.72-97.65 97.65v97.65h97.65V145h-48.82c-.01-26.92 21.89-48.82 48.82-48.82z"></path></svg>
|
||||||
|
{{ end }}
|
||||||
|
{{ .Text }}
|
||||||
|
</blockquote>
|
||||||
|
{{ with .Attributes.caption }}
|
||||||
|
<figcaption>{{ . | $.Page.RenderString }}</figcaption>
|
||||||
|
{{ end }}
|
||||||
|
</figure>
|
||||||
|
|
@ -0,0 +1,5 @@
|
||||||
|
{{ $opts := merge .Options (dict "hl_inline" true) }}
|
||||||
|
{{ $result := transform.HighlightCodeBlock . }}
|
||||||
|
<div class="highlight">
|
||||||
|
<pre class="chroma">{{$result.Inner}}</pre>
|
||||||
|
</div>
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
<h{{.Level}} class="heading" id="{{.Anchor | safeURL}}"></h>
|
<h{{.Level}} class="rendered-heading" id="{{.Anchor | safeURL}}">
|
||||||
<span class="heading__text">{{.Text | safeHTML}}</span>
|
<span class="rendered-heading__text">{{.Text | safeHTML}}</span>
|
||||||
<a class="heading__anchor-link" href="#{{.Anchor | safeURL}}">
|
<a class="rendered-heading__anchor-link" href="#{{.Anchor | safeURL}}">
|
||||||
[link]
|
<span class="rendered-heading__anchor-link__text">[link]</span>
|
||||||
</a>
|
</a>
|
||||||
</h{{.Level}}>
|
</h{{.Level}}>
|
||||||
|
|
@ -8,13 +8,13 @@
|
||||||
{{- with .Page.GetPage $url.Path }}{{ $link = printf "%s%s" .RelPermalink $fragment }}{{ end }}{{ end -}}
|
{{- with .Page.GetPage $url.Path }}{{ $link = printf "%s%s" .RelPermalink $fragment }}{{ end }}{{ end -}}
|
||||||
{{- end -}}
|
{{- end -}}
|
||||||
|
|
||||||
<a href="{{ $link | safeURL }}"
|
<a class="rendered-link" href="{{ $link | safeURL }}"
|
||||||
{{- with .Title}} title="{{ . }}"
|
{{- with .Title}} title="{{ . }}"
|
||||||
{{- end -}}
|
{{- end -}}
|
||||||
{{ if $isRemote }} target="_blank"{{ end -}}
|
{{ if $isRemote }} target="_blank"{{ end -}}
|
||||||
>
|
>
|
||||||
{{- .Text | safeHTML -}}
|
<span class="rendered-link__text">{{- .Text | safeHTML -}}</span>
|
||||||
{{ if $isRemote -}}
|
{{ if $isRemote -}}
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 0 1000 1000" width="1em"><path fill="currentColor" d="M609.34 13.31c-23.11 8.5-28.16 20.46-28.42 65.35 0 29.49.8 34.8 6.11 45.16 10.89 21.52 13.81 22.31 96.96 23.91l72.25 1.33L568.7 336.32C465.63 439.39 379.57 526.79 377.44 530.77c-4.78 9.3-4.78 24.17 0 33.47 2.13 3.98 15.67 18.86 30.28 33.47 24.17 23.91 27.36 26.3 38.52 27.36 6.64.8 15.41.53 19.66-.26 5.05-1.33 65.88-60.3 196.04-190.46C765.8 330.74 851.6 246.01 852.66 246.01c1.06 0 1.86 32.67 1.86 72.78 0 70.93.26 72.78 6.11 81.29 11.16 16.47 19.39 18.86 63.49 18.06 42.5-.8 46.49-2.12 58.97-19.13 5.58-7.17 5.58-10.36 6.37-180.37l.53-173.2-5.84-11.95c-3.72-6.91-9.83-14.08-15.41-17.27-9.03-5.05-14.08-5.31-179.31-5.84-137.59-.53-171.85.01-180.09 2.93z"/><path fill="currentColor" d="M100.12 121.42c-29.75 5.05-57.91 24.44-73.58 50.47-17.8 29.49-17 10.63-16.2 390.49l.8 343.73 8.5 17.8c9.56 20.19 27.89 41.44 44.36 51 26.83 15.67 8.5 14.87 381.46 14.87 306.28 0 343.2-.53 356.22-4.25 38.25-11.42 68.01-43.57 76.51-82.88 2.13-9.83 2.92-81.82 2.92-235.62v-221.8H745.63v409.08H145.27V256.63h409.08V118.5l-219.68.27c-121.13.26-226.59 1.32-234.55 2.65z"/></svg>
|
<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 0 1000 1000" width="1em" aria-hidden="true" class="rendered-link__external-link-icon"><title>external link</title><path fill="currentColor" d="M609.34 13.31c-23.11 8.5-28.16 20.46-28.42 65.35 0 29.49.8 34.8 6.11 45.16 10.89 21.52 13.81 22.31 96.96 23.91l72.25 1.33L568.7 336.32C465.63 439.39 379.57 526.79 377.44 530.77c-4.78 9.3-4.78 24.17 0 33.47 2.13 3.98 15.67 18.86 30.28 33.47 24.17 23.91 27.36 26.3 38.52 27.36 6.64.8 15.41.53 19.66-.26 5.05-1.33 65.88-60.3 196.04-190.46C765.8 330.74 851.6 246.01 852.66 246.01c1.06 0 1.86 32.67 1.86 72.78 0 70.93.26 72.78 6.11 81.29 11.16 16.47 19.39 18.86 63.49 18.06 42.5-.8 46.49-2.12 58.97-19.13 5.58-7.17 5.58-10.36 6.37-180.37l.53-173.2-5.84-11.95c-3.72-6.91-9.83-14.08-15.41-17.27-9.03-5.05-14.08-5.31-179.31-5.84-137.59-.53-171.85.01-180.09 2.93z"/><path fill="currentColor" d="M100.12 121.42c-29.75 5.05-57.91 24.44-73.58 50.47-17.8 29.49-17 10.63-16.2 390.49l.8 343.73 8.5 17.8c9.56 20.19 27.89 41.44 44.36 51 26.83 15.67 8.5 14.87 381.46 14.87 306.28 0 343.2-.53 356.22-4.25 38.25-11.42 68.01-43.57 76.51-82.88 2.13-9.83 2.92-81.82 2.92-235.62v-221.8H745.63v409.08H145.27V256.63h409.08V118.5l-219.68.27c-121.13.26-226.59 1.32-234.55 2.65z"/></svg>
|
||||||
{{- end -}}
|
{{- end -}}
|
||||||
</a>
|
</a>
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
{{ define "body" }}
|
{{ define "body" }}
|
||||||
<body class="layout-_default-list">
|
<body class="layout-_default-list">
|
||||||
<main class="h-feed hfeed">
|
<main class="h-feed hfeed" id="main">
|
||||||
<header class="list-header section">
|
<header class="list-header section">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<h1 class="list-title p-name">{{.Title}}</h1>
|
<h1 class="list-title p-name">{{.Title}}</h1>
|
||||||
|
|
@ -18,7 +18,7 @@
|
||||||
<section class="list-pages section">
|
<section class="list-pages section">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
{{ range .RegularPages }}
|
{{ range .RegularPages }}
|
||||||
<article class="list-page h-entry hentry">
|
<article class="list-page h-entry hentry"></article>
|
||||||
<p>
|
<p>
|
||||||
<span><time class="dt-published published" datetime="{{.Date.Format "2006-01-02T15:04:05-0600"}}">{{.Date.Format "2006-01-02"}}</time>: <a class="p-name entry-title" href="{{.Permalink}}">{{.Title}}</a></span><br>
|
<span><time class="dt-published published" datetime="{{.Date.Format "2006-01-02T15:04:05-0600"}}">{{.Date.Format "2006-01-02"}}</time>: <a class="p-name entry-title" href="{{.Permalink}}">{{.Title}}</a></span><br>
|
||||||
{{ if isset .Params "summary" }}
|
{{ if isset .Params "summary" }}
|
||||||
|
|
|
||||||
|
|
@ -3,7 +3,7 @@
|
||||||
|
|
||||||
{{ define "body" }}
|
{{ define "body" }}
|
||||||
<body class="layout-_default-single">
|
<body class="layout-_default-single">
|
||||||
<main>
|
<main id="main">
|
||||||
<article class="page h-entry hentry" {{- if .Param "autonumbering" }} autonumbering {{- end }}{{- if .Param "toc" }} has-toc {{- end }}>
|
<article class="page h-entry hentry" {{- if .Param "autonumbering" }} autonumbering {{- end }}{{- if .Param "toc" }} has-toc {{- end }}>
|
||||||
<header class="page-header section">
|
<header class="page-header section">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
|
|
@ -41,10 +41,38 @@
|
||||||
</div>
|
</div>
|
||||||
<hr>
|
<hr>
|
||||||
</header>
|
</header>
|
||||||
|
{{ if .Params.series }}
|
||||||
|
<aside class="page-series section">
|
||||||
|
<div class="container">
|
||||||
|
{{ with .Site.Taxonomies.series }}
|
||||||
|
{{ range $term, $weightedpages := . }}
|
||||||
|
<p class="page-series__hint">This post is part of a series: <a href="{{.Page.Permalink}}">{{.Page.LinkTitle}}</a></p>
|
||||||
|
<ol class="series">
|
||||||
|
{{ range $weightedpages.Pages.ByWeight.Reverse }}
|
||||||
|
<li class="series-post">
|
||||||
|
{{- if eq .File.UniqueID $.File.UniqueID -}}
|
||||||
|
{{ with .Params.series_part }}
|
||||||
|
<span class="series-post__part">Part {{.}}: </span>
|
||||||
|
{{ end }}
|
||||||
|
<span class="series-post__title current-post">{{.Title}}</span>
|
||||||
|
{{ else }}
|
||||||
|
{{ with .Params.series_part }}
|
||||||
|
<span class="series-post__part">Part {{.}}: </span>
|
||||||
|
{{ end }}
|
||||||
|
<a href="{{.Permalink}}" class="series-post__link"><span class="series-post__title">{{.Title}}</span></a>
|
||||||
|
{{ end }}
|
||||||
|
</li>
|
||||||
|
{{ end }}
|
||||||
|
</ol>
|
||||||
|
{{ end }}
|
||||||
|
{{ end }}
|
||||||
|
</div>
|
||||||
|
</aside>
|
||||||
|
{{ end }}
|
||||||
{{ if .Params.toc }}
|
{{ if .Params.toc }}
|
||||||
<input type="checkbox" id="toc-toggle">
|
<input type="checkbox" id="toc-toggle">
|
||||||
<label for="toc-toggle" id="toc-toggle__label-show">Show TOC</label>
|
<label for="toc-toggle" id="toc-toggle__label-show" role="button" tabindex=0>Show TOC</label>
|
||||||
<label for="toc-toggle" id="toc-toggle__label-hide">Hide TOC</label>
|
<label for="toc-toggle" id="toc-toggle__label-hide" role="button" tabindex=0>Hide TOC</label>
|
||||||
<aside class="page-toc toc section">
|
<aside class="page-toc toc section">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<details open>
|
<details open>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue