diff --git a/unified.test.hugo/assets/styles/common.scss b/unified.test.hugo/assets/styles/common.scss index f03b358..6a3a648 100644 --- a/unified.test.hugo/assets/styles/common.scss +++ b/unified.test.hugo/assets/styles/common.scss @@ -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"; \ No newline at end of file diff --git a/unified.test.hugo/assets/styles/common/colors.scss b/unified.test.hugo/assets/styles/common/colors.scss index c352836..50c4346 100644 --- a/unified.test.hugo/assets/styles/common/colors.scss +++ b/unified.test.hugo/assets/styles/common/colors.scss @@ -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%); } } \ No newline at end of file diff --git a/unified.test.hugo/assets/styles/common/content.scss b/unified.test.hugo/assets/styles/common/content.scss index 5f3a17a..a1e136f 100644 --- a/unified.test.hugo/assets/styles/common/content.scss +++ b/unified.test.hugo/assets/styles/common/content.scss @@ -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; } - /* {{}} 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; diff --git a/unified.test.hugo/assets/styles/features/links.scss b/unified.test.hugo/assets/styles/common/links.scss similarity index 75% rename from unified.test.hugo/assets/styles/features/links.scss rename to unified.test.hugo/assets/styles/common/links.scss index d9da7bd..c89ccf8 100644 --- a/unified.test.hugo/assets/styles/features/links.scss +++ b/unified.test.hugo/assets/styles/common/links.scss @@ -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; } \ No newline at end of file diff --git a/unified.test.hugo/assets/styles/common/typography.scss b/unified.test.hugo/assets/styles/common/typography.scss new file mode 100644 index 0000000..427bac5 --- /dev/null +++ b/unified.test.hugo/assets/styles/common/typography.scss @@ -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; +} diff --git a/unified.test.hugo/assets/styles/components/table-of-contents.scss b/unified.test.hugo/assets/styles/components/table-of-contents.scss index 22042f1..9103b50 100644 --- a/unified.test.hugo/assets/styles/components/table-of-contents.scss +++ b/unified.test.hugo/assets/styles/components/table-of-contents.scss @@ -14,7 +14,7 @@ margin-inline: 0; } a { - display: inline-block; + display: inline; line-height: 1.5; } li > ul, li > ol { /* indent subheadings */ diff --git a/unified.test.hugo/assets/styles/features/autonumbering.scss b/unified.test.hugo/assets/styles/features/autonumbering.scss index c705206..50acfd6 100644 --- a/unified.test.hugo/assets/styles/features/autonumbering.scss +++ b/unified.test.hugo/assets/styles/features/autonumbering.scss @@ -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) { diff --git a/unified.test.hugo/assets/styles/features/syntax-highlighting.scss b/unified.test.hugo/assets/styles/features/syntax-highlighting.scss deleted file mode 100644 index 1fe4fff..0000000 --- a/unified.test.hugo/assets/styles/features/syntax-highlighting.scss +++ /dev/null @@ -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 } \ No newline at end of file diff --git a/unified.test.hugo/assets/styles/layouts/_default/_markup/render-blockquote.scss b/unified.test.hugo/assets/styles/layouts/_default/_markup/render-blockquote.scss new file mode 100644 index 0000000..7d1ad58 --- /dev/null +++ b/unified.test.hugo/assets/styles/layouts/_default/_markup/render-blockquote.scss @@ -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; + } +} \ No newline at end of file diff --git a/unified.test.hugo/assets/styles/layouts/_default/_markup/render-codeblock.scss b/unified.test.hugo/assets/styles/layouts/_default/_markup/render-codeblock.scss new file mode 100644 index 0000000..a791d0c --- /dev/null +++ b/unified.test.hugo/assets/styles/layouts/_default/_markup/render-codeblock.scss @@ -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 } \ No newline at end of file diff --git a/unified.test.hugo/assets/styles/layouts/_default/_markup/render-heading.scss b/unified.test.hugo/assets/styles/layouts/_default/_markup/render-heading.scss new file mode 100644 index 0000000..588ce63 --- /dev/null +++ b/unified.test.hugo/assets/styles/layouts/_default/_markup/render-heading.scss @@ -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; + } + } +} \ No newline at end of file diff --git a/unified.test.hugo/assets/styles/layouts/_default/_markup/render-image.scss b/unified.test.hugo/assets/styles/layouts/_default/_markup/render-image.scss new file mode 100644 index 0000000..e0b6576 --- /dev/null +++ b/unified.test.hugo/assets/styles/layouts/_default/_markup/render-image.scss @@ -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; + } +} \ No newline at end of file diff --git a/unified.test.hugo/assets/styles/layouts/_default/_markup/render-link.scss b/unified.test.hugo/assets/styles/layouts/_default/_markup/render-link.scss new file mode 100644 index 0000000..734b7e5 --- /dev/null +++ b/unified.test.hugo/assets/styles/layouts/_default/_markup/render-link.scss @@ -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; + } +} \ No newline at end of file diff --git a/unified.test.hugo/assets/styles/layouts/_default/single.scss b/unified.test.hugo/assets/styles/layouts/_default/single.scss index d8a6f36..6aa7bdf 100644 --- a/unified.test.hugo/assets/styles/layouts/_default/single.scss +++ b/unified.test.hugo/assets/styles/layouts/_default/single.scss @@ -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; diff --git a/unified.test.hugo/assets/styles/mixins/fab-unit.scss b/unified.test.hugo/assets/styles/mixins/fab-unit.scss new file mode 100644 index 0000000..77a7270 --- /dev/null +++ b/unified.test.hugo/assets/styles/mixins/fab-unit.scss @@ -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); + } + } +} \ No newline at end of file diff --git a/unified.test.hugo/assets/styles/mixins/shadow.scss b/unified.test.hugo/assets/styles/mixins/shadow.scss new file mode 100644 index 0000000..64cd996 --- /dev/null +++ b/unified.test.hugo/assets/styles/mixins/shadow.scss @@ -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); +} \ No newline at end of file diff --git a/unified.test.hugo/content/articles/evolving-orderedcollection-to-be-more-useful/index.md b/unified.test.hugo/content/articles/evolving-orderedcollection-to-be-more-useful/index.md index b892f4e..78cbfc1 100644 --- a/unified.test.hugo/content/articles/evolving-orderedcollection-to-be-more-useful/index.md +++ b/unified.test.hugo/content/articles/evolving-orderedcollection-to-be-more-useful/index.md @@ -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="[-- Activity Vocabulary § 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="[-- Activity Vocabulary § 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). diff --git a/unified.test.hugo/content/monologues/fedi-vs-web/index.md b/unified.test.hugo/content/monologues/fedi-vs-web/index.md index b63b750..9672dee 100644 --- a/unified.test.hugo/content/monologues/fedi-vs-web/index.md +++ b/unified.test.hugo/content/monologues/fedi-vs-web/index.md @@ -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) diff --git a/unified.test.hugo/content/monologues/multi-protocol-approach/index.md b/unified.test.hugo/content/monologues/multi-protocol-approach/index.md index 08a7a68..85e4ab1 100644 --- a/unified.test.hugo/content/monologues/multi-protocol-approach/index.md +++ b/unified.test.hugo/content/monologues/multi-protocol-approach/index.md @@ -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" +++
diff --git a/unified.test.hugo/content/monologues/what-is-web/index.md b/unified.test.hugo/content/monologues/what-is-web/index.md index 0298818..0bc8364 100644 --- a/unified.test.hugo/content/monologues/what-is-web/index.md +++ b/unified.test.hugo/content/monologues/what-is-web/index.md @@ -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 diff --git a/unified.test.hugo/hugo.toml b/unified.test.hugo/hugo.toml index 93329e1..3f5c164 100644 --- a/unified.test.hugo/hugo.toml +++ b/unified.test.hugo/hugo.toml @@ -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 diff --git a/unified.test.hugo/layouts/_default/_markup/render-blockquote.html b/unified.test.hugo/layouts/_default/_markup/render-blockquote.html new file mode 100644 index 0000000..c11381d --- /dev/null +++ b/unified.test.hugo/layouts/_default/_markup/render-blockquote.html @@ -0,0 +1,25 @@ +
+ + {{ if .AlertType}} + {{ if in (slice "info" "note" "tip") .AlertType }} + + + {{ end }} + + {{ if eq .AlertType "important"}} + {{ end }} + {{ if eq .AlertType "warning"}} + {{ end }} + {{ if eq .AlertType "caution"}} + {{ end }} + {{ if eq .AlertType "danger"}} + {{ end }} + {{ else }} + + {{ end }} + {{ .Text }} +
+ {{ with .Attributes.caption }} +
{{ . | $.Page.RenderString }}
+ {{ end }} + \ No newline at end of file diff --git a/unified.test.hugo/layouts/_default/_markup/render-codeblock.html b/unified.test.hugo/layouts/_default/_markup/render-codeblock.html new file mode 100644 index 0000000..974865e --- /dev/null +++ b/unified.test.hugo/layouts/_default/_markup/render-codeblock.html @@ -0,0 +1,5 @@ +{{ $opts := merge .Options (dict "hl_inline" true) }} +{{ $result := transform.HighlightCodeBlock . }} +
+
{{$result.Inner}}
+
\ No newline at end of file diff --git a/unified.test.hugo/layouts/_default/_markup/render-heading.html b/unified.test.hugo/layouts/_default/_markup/render-heading.html index 4e82fbf..363d4ca 100644 --- a/unified.test.hugo/layouts/_default/_markup/render-heading.html +++ b/unified.test.hugo/layouts/_default/_markup/render-heading.html @@ -1,6 +1,6 @@ - - {{.Text | safeHTML}} - - [link] + + {{.Text | safeHTML}} + + [link] \ No newline at end of file diff --git a/unified.test.hugo/layouts/_default/_markup/render-link.html b/unified.test.hugo/layouts/_default/_markup/render-link.html index ec352b7..be20ad9 100644 --- a/unified.test.hugo/layouts/_default/_markup/render-link.html +++ b/unified.test.hugo/layouts/_default/_markup/render-link.html @@ -8,13 +8,13 @@ {{- with .Page.GetPage $url.Path }}{{ $link = printf "%s%s" .RelPermalink $fragment }}{{ end }}{{ end -}} {{- end -}} - -{{- .Text | safeHTML -}} +{{- .Text | safeHTML -}} {{ if $isRemote -}} - + {{- end -}} \ No newline at end of file diff --git a/unified.test.hugo/layouts/_default/list.html b/unified.test.hugo/layouts/_default/list.html index 7cd79e8..a2d0407 100644 --- a/unified.test.hugo/layouts/_default/list.html +++ b/unified.test.hugo/layouts/_default/list.html @@ -1,6 +1,6 @@ {{ define "body" }} -
+

{{.Title}}

@@ -18,7 +18,7 @@
{{ range .RegularPages }} -
+

: {{.Title}}
{{ if isset .Params "summary" }} diff --git a/unified.test.hugo/layouts/_default/single.html b/unified.test.hugo/layouts/_default/single.html index 2d50221..0715e88 100644 --- a/unified.test.hugo/layouts/_default/single.html +++ b/unified.test.hugo/layouts/_default/single.html @@ -3,7 +3,7 @@ {{ define "body" }} -

+
@@ -41,10 +41,38 @@
+ {{ if .Params.series }} + + {{ end }} {{ if .Params.toc }} - - + +