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/colors";
|
||||
@import "common/base";
|
||||
@import "common/typography";
|
||||
@import "common/content";
|
||||
|
||||
@import "features/links";
|
||||
@import "common/links";
|
||||
|
||||
// default layout
|
||||
|
||||
@import "layouts/_default/list";
|
||||
@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 "shortcodes/mf2/h-cite";
|
||||
|
||||
|
|
@ -23,6 +28,5 @@
|
|||
|
||||
@import "features/autonumbering";
|
||||
@import "features/search";
|
||||
@import "features/syntax-highlighting";
|
||||
|
||||
@import "components/table-of-contents";
|
||||
|
|
@ -12,7 +12,9 @@
|
|||
--ui-text-bold: #000;
|
||||
|
||||
--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-highlight: hsl(210, 100%, 80%);
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
|
|
@ -30,6 +32,8 @@
|
|||
--ui-text-bold: #fff;
|
||||
|
||||
--ui-overlay: hsl(210, 100%, 20%);
|
||||
--ui-overlay-transparent: hsla(210, 100%, 20%, 0.25);
|
||||
--ui-overlay-text: var(--ui-text);
|
||||
--ui-overlay-highlight: hsl(210, 100%, 27.5%);
|
||||
}
|
||||
}
|
||||
|
|
@ -3,29 +3,16 @@
|
|||
margin-block-start: 0;
|
||||
}
|
||||
/* 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 {
|
||||
line-height: 2;
|
||||
}
|
||||
p {
|
||||
margin-block-end: 1em;
|
||||
}
|
||||
a {
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
/* semantics */
|
||||
em {font-style: italic}
|
||||
strong {font-weight: 700}
|
||||
strong {font-weight: bold}
|
||||
/* text formatting */
|
||||
--script-size: 0.65em;
|
||||
sup {
|
||||
|
|
@ -72,6 +59,14 @@
|
|||
font-size: var(--script-size);
|
||||
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 */
|
||||
ul, ol {
|
||||
padding-inline-start: 0;
|
||||
|
|
@ -84,23 +79,9 @@
|
|||
dl {margin-block: 1em; line-height: 1.4;}
|
||||
dt {font-weight: 700;}
|
||||
dd {margin-inline-start: 1em;}
|
||||
/* block elements */
|
||||
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 {
|
||||
pre:not(.chroma) {
|
||||
font-family: monospace;
|
||||
font-size: 1rem;
|
||||
padding: 1em;
|
||||
line-height: 1.4;
|
||||
overflow: auto;
|
||||
white-space: pre-wrap;
|
||||
|
|
@ -109,44 +90,6 @@
|
|||
tab-size: 3;
|
||||
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 */
|
||||
table {text-align: center;}
|
||||
thead {
|
||||
|
|
@ -158,24 +101,6 @@
|
|||
border: 1px solid var(--ui-text);
|
||||
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 */
|
||||
cite sup {
|
||||
position: inherit;
|
||||
|
|
|
|||
|
|
@ -1,3 +1,7 @@
|
|||
a {
|
||||
|
||||
}
|
||||
|
||||
a:link {
|
||||
transition: all 0.1s ease-out;
|
||||
color: var(--link-color);
|
||||
|
|
@ -23,15 +27,6 @@ a:hover {
|
|||
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] {
|
||||
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;
|
||||
}
|
||||
a {
|
||||
display: inline-block;
|
||||
display: inline;
|
||||
line-height: 1.5;
|
||||
}
|
||||
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}
|
||||
h2 {counter-reset: h3}
|
||||
h3 {counter-reset: h4}
|
||||
h4 {counter-reset: h5}
|
||||
h5 {counter-reset: h6}
|
||||
|
||||
article[autonumbering] {
|
||||
h2:before {
|
||||
|
|
@ -39,29 +17,22 @@ article[autonumbering] {
|
|||
counter-increment: 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,
|
||||
h3:before,
|
||||
h4:before
|
||||
h4:before,
|
||||
h5:before,
|
||||
h6:before
|
||||
{
|
||||
margin-inline-end: 1em;
|
||||
font-family: monospace;
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
#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 {
|
||||
.page-header {
|
||||
hr {display: none;}
|
||||
|
|
@ -33,6 +35,36 @@
|
|||
margin-block-end: 0;
|
||||
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 {
|
||||
display: none;
|
||||
}
|
||||
|
|
@ -40,23 +72,45 @@
|
|||
max-width: 80ch;
|
||||
margin-inline: auto;
|
||||
}
|
||||
.page[has-toc] {
|
||||
padding-block-end: 4em;
|
||||
}
|
||||
#toc-toggle {
|
||||
display: none;
|
||||
position: fixed;
|
||||
bottom: 1em;
|
||||
right: 1em;
|
||||
background-color: var(--ui-overlay);
|
||||
z-index: 5;
|
||||
outline: none;
|
||||
&:checked ~ .page-toc {
|
||||
display: block;
|
||||
position: fixed;
|
||||
z-index: 10;
|
||||
bottom: 5em;
|
||||
height: 80vh;
|
||||
height: 40em;
|
||||
width: 80%;
|
||||
max-width: 20em;
|
||||
max-height: 70vh;
|
||||
overflow-y: scroll;
|
||||
right: 1em;
|
||||
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"] {
|
||||
|
|
@ -70,6 +124,13 @@
|
|||
width: 6em;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
@include shadow-low;
|
||||
}
|
||||
#toc-toggle ~ label[for="toc-toggle"] {
|
||||
|
||||
}
|
||||
#toc-toggle:checked ~ label[for="toc-toggle"] {
|
||||
|
||||
}
|
||||
#toc-toggle__label-hide {
|
||||
display: none;
|
||||
|
|
@ -95,6 +156,7 @@
|
|||
grid-template-columns: 1fr minmax(37em, 80ch) minmax(17em, 20em) 1fr;
|
||||
grid-template-rows: auto 1fr;
|
||||
gap: 2em;
|
||||
padding-block-end: unset;
|
||||
.page-header {
|
||||
grid-column: 1 / span 4;
|
||||
grid-row: 1;
|
||||
|
|
@ -116,7 +178,16 @@
|
|||
justify-self: start;
|
||||
max-width: unset;
|
||||
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 {
|
||||
padding: 0;
|
||||
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"
|
||||
]
|
||||
toc = true
|
||||
autonumbering = true
|
||||
+++
|
||||
|
||||
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:
|
||||
|
||||
> 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).
|
||||
|
||||
|
|
|
|||
|
|
@ -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."
|
||||
date = "2024-09-24T07:06:00-06:00"
|
||||
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)
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
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"
|
||||
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">
|
||||
|
|
|
|||
|
|
@ -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\""
|
||||
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"
|
||||
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
|
||||
|
|
|
|||
|
|
@ -2,11 +2,20 @@ baseURL = "https://trwnh.com/"
|
|||
languageCode = "en-us"
|
||||
title = "~a"
|
||||
|
||||
capitalizeListTitles = false
|
||||
|
||||
markup.goldmark.renderer.unsafe = true
|
||||
|
||||
[markup.goldmark.parser]
|
||||
wrapStandAloneImageWithinParagraph = false
|
||||
attribute.block = true
|
||||
attribute.title = true
|
||||
|
||||
[markup.highlight]
|
||||
codeFences = true
|
||||
noClasses = false
|
||||
lineNumbersInTable = false
|
||||
tabWidth = 3
|
||||
|
||||
[markup.tableOfContents]
|
||||
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>
|
||||
<span class="heading__text">{{.Text | safeHTML}}</span>
|
||||
<a class="heading__anchor-link" href="#{{.Anchor | safeURL}}">
|
||||
[link]
|
||||
<h{{.Level}} class="rendered-heading" id="{{.Anchor | safeURL}}">
|
||||
<span class="rendered-heading__text">{{.Text | safeHTML}}</span>
|
||||
<a class="rendered-heading__anchor-link" href="#{{.Anchor | safeURL}}">
|
||||
<span class="rendered-heading__anchor-link__text">[link]</span>
|
||||
</a>
|
||||
</h{{.Level}}>
|
||||
|
|
@ -8,13 +8,13 @@
|
|||
{{- with .Page.GetPage $url.Path }}{{ $link = printf "%s%s" .RelPermalink $fragment }}{{ end }}{{ end -}}
|
||||
{{- end -}}
|
||||
|
||||
<a href="{{ $link | safeURL }}"
|
||||
<a class="rendered-link" href="{{ $link | safeURL }}"
|
||||
{{- with .Title}} title="{{ . }}"
|
||||
{{- end -}}
|
||||
{{ if $isRemote }} target="_blank"{{ end -}}
|
||||
>
|
||||
{{- .Text | safeHTML -}}
|
||||
<span class="rendered-link__text">{{- .Text | safeHTML -}}</span>
|
||||
{{ 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 -}}
|
||||
</a>
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
{{ define "body" }}
|
||||
<body class="layout-_default-list">
|
||||
<main class="h-feed hfeed">
|
||||
<main class="h-feed hfeed" id="main">
|
||||
<header class="list-header section">
|
||||
<div class="container">
|
||||
<h1 class="list-title p-name">{{.Title}}</h1>
|
||||
|
|
@ -18,7 +18,7 @@
|
|||
<section class="list-pages section">
|
||||
<div class="container">
|
||||
{{ range .RegularPages }}
|
||||
<article class="list-page h-entry hentry">
|
||||
<article class="list-page h-entry hentry"></article>
|
||||
<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>
|
||||
{{ if isset .Params "summary" }}
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
|
||||
{{ define "body" }}
|
||||
<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 }}>
|
||||
<header class="page-header section">
|
||||
<div class="container">
|
||||
|
|
@ -41,10 +41,38 @@
|
|||
</div>
|
||||
<hr>
|
||||
</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 }}
|
||||
<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-hide">Hide 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" role="button" tabindex=0>Hide TOC</label>
|
||||
<aside class="page-toc toc section">
|
||||
<div class="container">
|
||||
<details open>
|
||||
|
|
|
|||
Loading…
Reference in a new issue