diff --git a/assets/js/shortcuts.js b/assets/js/shortcuts.js index a5321d11..32b270fc 100644 --- a/assets/js/shortcuts.js +++ b/assets/js/shortcuts.js @@ -110,7 +110,7 @@ function setupShortcuts(shortcutDepth = 2) { if (shortcutsTarget) { const classElements = Array.from(document.querySelectorAll(classes)); classElements.map((el) => { - const title = el.textContent; + const title = el.innerHTML; const elId = el.id; // Gets the element type (e.g. h2, h3) const elType = el.tagName; @@ -152,7 +152,9 @@ function setupShortcuts(shortcutDepth = 2) { // Removes the shortcuts container if no shortcuts exist. // Also removes the 'Get Help' link. - const shortcuts = Array.from(document.querySelectorAll("#shortcuts div")); + const shortcuts = Array.from( + document.querySelectorAll("#shortcuts div:not(#shortcuts-header)"), + ); if (shortcuts.length == 0) { const shortcutsContainer = document.getElementById("shortcuts-container"); if (shortcutsContainer) { diff --git a/assets/theme-css/bulma.css b/assets/theme-css/bulma.css index 7a720dcc..2a12edb3 100644 --- a/assets/theme-css/bulma.css +++ b/assets/theme-css/bulma.css @@ -153,40 +153,8 @@ font-size: 1em; margin: 0; padding: 0; -} /*! minireset.css v0.0.6 | MIT License | github.com/jgthms/minireset.css */ -blockquote, -body, -dd, -dl, -dt, -figure, -h1, -h2, -h3, -h4, -h5, -h6, -hr, -html, -iframe, -legend, -li, -ol, -p, -pre, -ul { - margin: 0; - padding: 0; -} -h1, -h2, -h3, -h4, -h5, -h6 { - font-size: 100%; - font-weight: 400; } +/*! minireset.css v0.0.6 | MIT License | github.com/jgthms/minireset.css */ ul { list-style: none; } @@ -223,19 +191,6 @@ td:not([align]), th:not([align]) { text-align: inherit; } -html { - background-color: #fff; - font-size: 16px; - -moz-osx-font-smoothing: grayscale; - -webkit-font-smoothing: antialiased; - min-width: 300px; - overflow-x: hidden; - overflow-y: scroll; - text-rendering: optimizeLegibility; - -webkit-text-size-adjust: 100%; - -moz-text-size-adjust: 100%; - text-size-adjust: 100%; -} article, aside, figure, @@ -244,55 +199,6 @@ header, section { display: block; } -body, -button, -input, -select { - font-family: - BlinkMacSystemFont, - -apple-system, - "Segoe UI", - Roboto, - Oxygen, - Ubuntu, - Cantarell, - "Fira Sans", - "Droid Sans", - "Helvetica Neue", - Helvetica, - Arial, - sans-serif; -} -code, -pre { - -moz-osx-font-smoothing: auto; - -webkit-font-smoothing: auto; - font-family: monospace; -} -body { - color: #4a4a4a; - font-size: 1em; - font-weight: 400; - line-height: 1.5; -} -a { - color: #485fc7; - cursor: pointer; - text-decoration: none; -} -a strong { - color: currentColor; -} -a:hover { - color: #363636; -} -code { - background-color: #f5f5f5; - color: #da1039; - font-size: 0.875em; - font-weight: 400; - padding: 0.25em 0.5em 0.25em; -} hr { background-color: #f5f5f5; border: none; @@ -315,26 +221,6 @@ span { font-style: inherit; font-weight: inherit; } -strong { - color: #363636; - font-weight: 700; -} -pre { - -webkit-overflow-scrolling: touch; - background-color: #f5f5f5; - color: #4a4a4a; - font-size: 0.875em; - overflow-x: auto; - padding: 1.25rem 1.5rem; - white-space: pre; - word-wrap: normal; -} -pre code { - background-color: transparent; - color: currentColor; - font-size: 1em; - padding: 0; -} table td, table th { vertical-align: top; @@ -518,145 +404,6 @@ a.box:active { max-width: 1344px; } } -.content li + li { - margin-top: 0.25em; -} -.content blockquote:not(:last-child), -.content dl:not(:last-child), -.content ol:not(:last-child), -.content p:not(:last-child), -.content pre:not(:last-child), -.content table:not(:last-child), -.content ul:not(:last-child) { - margin-bottom: 1em; -} -.content h1, -.content h2, -.content h3, -.content h4, -.content h5, -.content h6 { - color: #363636; - font-weight: 600; - line-height: 1.125; -} -.content h1 { - font-size: 2em; - margin-bottom: 0.5em; -} -.content h1:not(:first-child) { - margin-top: 1em; -} -.content h2 { - font-size: 1.75em; - margin-bottom: 0.5714em; -} -.content h2:not(:first-child) { - margin-top: 1.1428em; -} -.content h3 { - font-size: 1.5em; - margin-bottom: 0.6666em; -} -.content h3:not(:first-child) { - margin-top: 1.3333em; -} -.content h4 { - font-size: 1.25em; - margin-bottom: 0.8em; -} -.content h5 { - font-size: 1.125em; - margin-bottom: 0.8888em; -} -.content h6 { - font-size: 1em; - margin-bottom: 1em; -} -.content blockquote { - background-color: #f5f5f5; - border-left: 5px solid #dbdbdb; - padding: 1.25em 1.5em; -} -.content ol { - list-style-position: outside; - margin-left: 2em; - margin-top: 1em; -} -.content ol:not([type]) { - list-style-type: decimal; -} -.content ul { - list-style: disc outside; - margin-left: 2em; - margin-top: 1em; -} -.content ul ul { - list-style-type: circle; - margin-top: 0.5em; -} -.content ul ul ul { - list-style-type: square; -} -.content dd { - margin-left: 2em; -} -.content figure { - margin-left: 2em; - margin-right: 2em; - text-align: center; -} -.content figure:not(:first-child) { - margin-top: 2em; -} -.content figure:not(:last-child) { - margin-bottom: 2em; -} -.content figure img { - display: inline-block; -} -.content figure figcaption { - font-style: italic; -} -.content pre { - -webkit-overflow-scrolling: touch; - overflow-x: auto; - padding: 1.25em 1.5em; - white-space: pre; - word-wrap: normal; -} -.content sub, -.content sup { - font-size: 75%; -} -.content table { - width: 100%; -} -.content table td, -.content table th { - border: 1px solid #dbdbdb; - border-width: 0 0 1px; - padding: 0.5em 0.75em; - vertical-align: top; -} -.content table th { - color: #363636; -} -.content table th:not([align]) { - text-align: inherit; -} -.content table thead td, -.content table thead th { - border-width: 0 0 2px; - color: #363636; -} -.content table tbody tr:last-child td, -.content table tbody tr:last-child th { - border-bottom-width: 0; -} -.content .tabs li + li { - margin-top: 0; -} .icon { align-items: center; display: inline-flex; @@ -868,7 +615,6 @@ a.tag:hover { vertical-align: middle; } .title { - color: #363636; font-size: 2rem; font-weight: 600; line-height: 1.125; @@ -1594,7 +1340,7 @@ a.navbar-item:hover { flex-basis: 0; flex-grow: 1; flex-shrink: 1; - padding: 0.75rem; + padding: 0.75rem 0.75rem 0rem 0.75rem; } .columns.is-mobile > .column.is-5 { flex: none; @@ -1609,7 +1355,7 @@ a.navbar-item:hover { .columns { margin-left: -0.75rem; margin-right: -0.75rem; - margin-top: -0.75rem; + margin-top: 1rem; } .columns:last-child { margin-bottom: -0.75rem; @@ -1697,6 +1443,5 @@ a.navbar-item:hover { } } .footer { - background-color: #fafafa; padding: 3rem 1.5rem 6rem; } diff --git a/assets/theme-css/code-highlight.css b/assets/theme-css/code-highlight.css index bcf034b5..2fd41f2a 100644 --- a/assets/theme-css/code-highlight.css +++ b/assets/theme-css/code-highlight.css @@ -4,263 +4,557 @@ Generated using: hugo gen chromastyles --style=witchhazel > /assets/css/code-highlight.css -We replaced the background color, `#433e56`, with `var(--colorPrimaryDark)`. +We replaced the color and background color with pst ones. */ -/* Background */ -.chroma { - color: #f8f8f2; - background-color: var(--colorPrimaryDark); -} -/* Error */ -.chroma .err { - color: #960050; - background-color: #1e0010; -} -/* LineTableTD */ -.chroma .lntd { - vertical-align: top; - padding: 0; - margin: 0; - border: 0; -} -/* LineTable */ -.chroma .lntable { - border-spacing: 0; - padding: 0; - margin: 0; - border: 0; - width: auto; - overflow: auto; - display: block; -} -/* LineHighlight */ -.chroma .hl { - display: block; - width: 100%; - background-color: #555166; -} -/* LineNumbersTable */ -.chroma .lnt { - margin-right: 0.4em; - padding: 0 0.4em 0 0.4em; - color: #7f7f7f; -} -/* LineNumbers */ -.chroma .ln { - margin-right: 0.4em; - padding: 0 0.4em 0 0.4em; - color: #7f7f7f; -} -/* Keyword */ -.chroma .k { - color: #c2ffdf; -} -/* KeywordConstant */ -.chroma .kc { - color: #c2ffdf; -} -/* KeywordDeclaration */ -.chroma .kd { - color: #c2ffdf; -} -/* KeywordNamespace */ -.chroma .kn { - color: #ffb8d1; -} -/* KeywordPseudo */ -.chroma .kp { - color: #c2ffdf; -} -/* KeywordReserved */ -.chroma .kr { - color: #c2ffdf; -} -/* KeywordType */ -.chroma .kt { - color: #c2ffdf; -} -/* NameAttribute */ -.chroma .na { - color: #ceb1ff; -} -/* NameBuiltinPseudo */ -.chroma .bp { - color: #80cbc4; -} -/* NameClass */ -.chroma .nc { - color: #ceb1ff; -} -/* NameConstant */ -.chroma .no { - color: #c5a3ff; -} -/* NameDecorator */ -.chroma .nd { - color: #ceb1ff; -} -/* NameException */ -.chroma .ne { - color: #ceb1ff; -} -/* NameFunction */ -.chroma .nf { - color: #ceb1ff; -} -/* NameTag */ -.chroma .nt { - color: var(--colorCode); -} -/* Literal */ -.chroma .l { - color: #ae81ff; -} -/* LiteralDate */ -.chroma .ld { - color: #e6db74; -} -/* LiteralString */ -.chroma .s { - color: #1bc5e0; -} -/* LiteralStringAffix */ -.chroma .sa { - color: #1bc5e0; -} -/* LiteralStringBacktick */ -.chroma .sb { - color: #1bc5e0; -} -/* LiteralStringChar */ -.chroma .sc { - color: #1bc5e0; -} -/* LiteralStringDelimiter */ -.chroma .dl { - color: #1bc5e0; -} -/* LiteralStringDoc */ -.chroma .sd { - color: #1bc5e0; -} -/* LiteralStringDouble */ -.chroma .s2 { - color: #1bc5e0; -} -/* LiteralStringEscape */ -.chroma .se { - color: #1bc5e0; -} -/* LiteralStringHeredoc */ -.chroma .sh { - color: #1bc5e0; -} -/* LiteralStringInterpol */ -.chroma .si { - color: #1bc5e0; -} -/* LiteralStringOther */ -.chroma .sx { - color: #1bc5e0; -} -/* LiteralStringRegex */ -.chroma .sr { - color: #1bc5e0; -} -/* LiteralStringSingle */ -.chroma .s1 { - color: #1bc5e0; -} -/* LiteralStringSymbol */ -.chroma .ss { - color: #1bc5e0; -} -/* LiteralNumber */ -.chroma .m { - color: #c5a3ff; -} -/* LiteralNumberBin */ -.chroma .mb { - color: #c5a3ff; -} -/* LiteralNumberFloat */ -.chroma .mf { - color: #c5a3ff; -} -/* LiteralNumberHex */ -.chroma .mh { - color: #c5a3ff; -} -/* LiteralNumberInteger */ -.chroma .mi { - color: #c5a3ff; -} -/* LiteralNumberIntegerLong */ -.chroma .il { - color: #c5a3ff; -} -/* LiteralNumberOct */ -.chroma .mo { - color: #c5a3ff; -} -/* Operator */ -.chroma .o { - color: #ffb8d1; -} -/* OperatorWord */ -.chroma .ow { - color: #ffb8d1; -} -/* Comment */ -.chroma .c { - color: #b0bec5; -} -/* CommentHashbang */ -.chroma .ch { - color: #b0bec5; -} -/* CommentMultiline */ -.chroma .cm { - color: #b0bec5; -} -/* CommentSingle */ -.chroma .c1 { - color: #b0bec5; -} -/* CommentSpecial */ -.chroma .cs { - color: #b0bec5; -} -/* CommentPreproc */ -.chroma .cp { - color: #b0bec5; -} -/* CommentPreprocFile */ -.chroma .cpf { - color: #b0bec5; -} -/* GenericDeleted */ -.chroma .gd { - color: #f92672; -} -/* GenericEmph */ -.chroma .ge { - font-style: italic; -} -/* GenericInserted */ -.chroma .gi { - color: #a6e22e; -} -/* GenericStrong */ -.chroma .gs { - font-weight: bold; -} -/* GenericSubheading */ -.chroma .gu { - color: #75715e; + +html[data-theme="dark"] { + /* Background */ + .chroma { + color: var(--pst-color-text-base); + background-color: var(--pst-color-surface); + } + /* Error */ + .chroma .err { + color: #960050; + background-color: #1e0010; + } + /* LineTableTD */ + .chroma .lntd { + vertical-align: top; + padding: 0; + margin: 0; + border: 0; + } + /* LineTable */ + .chroma .lntable { + border-spacing: 0; + padding: 0; + margin: 0; + border: 0; + width: auto; + overflow: auto; + display: block; + } + /* LineHighlight */ + .chroma .hl { + display: block; + width: 100%; + background-color: #555166; + } + /* LineNumbersTable */ + .chroma .lnt { + margin-right: 0.4em; + padding: 0 0.4em 0 0.4em; + color: #7f7f7f; + } + /* LineNumbers */ + .chroma .ln { + margin-right: 0.4em; + padding: 0 0.4em 0 0.4em; + color: #7f7f7f; + } + /* Keyword */ + .chroma .k { + color: #c2ffdf; + } + /* KeywordConstant */ + .chroma .kc { + color: #c2ffdf; + } + /* KeywordDeclaration */ + .chroma .kd { + color: #c2ffdf; + } + /* KeywordNamespace */ + .chroma .kn { + color: #ffb8d1; + } + /* KeywordPseudo */ + .chroma .kp { + color: #c2ffdf; + } + /* KeywordReserved */ + .chroma .kr { + color: #c2ffdf; + } + /* KeywordType */ + .chroma .kt { + color: #c2ffdf; + } + /* NameAttribute */ + .chroma .na { + color: #ceb1ff; + } + /* NameBuiltinPseudo */ + .chroma .bp { + color: #80cbc4; + } + /* NameClass */ + .chroma .nc { + color: #ceb1ff; + } + /* NameConstant */ + .chroma .no { + color: #c5a3ff; + } + /* NameDecorator */ + .chroma .nd { + color: #ceb1ff; + } + /* NameException */ + .chroma .ne { + color: #ceb1ff; + } + /* NameFunction */ + .chroma .nf { + color: #ceb1ff; + } + /* NameTag */ + .chroma .nt { + color: var(--colorCode); + } + /* Literal */ + .chroma .l { + color: #ae81ff; + } + /* LiteralDate */ + .chroma .ld { + color: #e6db74; + } + /* LiteralString */ + .chroma .s { + color: #1bc5e0; + } + /* LiteralStringAffix */ + .chroma .sa { + color: #1bc5e0; + } + /* LiteralStringBacktick */ + .chroma .sb { + color: #1bc5e0; + } + /* LiteralStringChar */ + .chroma .sc { + color: #1bc5e0; + } + /* LiteralStringDelimiter */ + .chroma .dl { + color: #1bc5e0; + } + /* LiteralStringDoc */ + .chroma .sd { + color: #1bc5e0; + } + /* LiteralStringDouble */ + .chroma .s2 { + color: #1bc5e0; + } + /* LiteralStringEscape */ + .chroma .se { + color: #1bc5e0; + } + /* LiteralStringHeredoc */ + .chroma .sh { + color: #1bc5e0; + } + /* LiteralStringInterpol */ + .chroma .si { + color: #1bc5e0; + } + /* LiteralStringOther */ + .chroma .sx { + color: #1bc5e0; + } + /* LiteralStringRegex */ + .chroma .sr { + color: #1bc5e0; + } + /* LiteralStringSingle */ + .chroma .s1 { + color: #1bc5e0; + } + /* LiteralStringSymbol */ + .chroma .ss { + color: #1bc5e0; + } + /* LiteralNumber */ + .chroma .m { + color: #c5a3ff; + } + /* LiteralNumberBin */ + .chroma .mb { + color: #c5a3ff; + } + /* LiteralNumberFloat */ + .chroma .mf { + color: #c5a3ff; + } + /* LiteralNumberHex */ + .chroma .mh { + color: #c5a3ff; + } + /* LiteralNumberInteger */ + .chroma .mi { + color: #c5a3ff; + } + /* LiteralNumberIntegerLong */ + .chroma .il { + color: #c5a3ff; + } + /* LiteralNumberOct */ + .chroma .mo { + color: #c5a3ff; + } + /* Operator */ + .chroma .o { + color: #ffb8d1; + } + /* OperatorWord */ + .chroma .ow { + color: #ffb8d1; + } + /* Comment */ + .chroma .c { + color: #b0bec5; + } + /* CommentHashbang */ + .chroma .ch { + color: #b0bec5; + } + /* CommentMultiline */ + .chroma .cm { + color: #b0bec5; + } + /* CommentSingle */ + .chroma .c1 { + color: #b0bec5; + } + /* CommentSpecial */ + .chroma .cs { + color: #b0bec5; + } + /* CommentPreproc */ + .chroma .cp { + color: #b0bec5; + } + /* CommentPreprocFile */ + .chroma .cpf { + color: #b0bec5; + } + /* GenericDeleted */ + .chroma .gd { + color: #f92672; + } + /* GenericEmph */ + .chroma .ge { + font-style: italic; + } + /* GenericInserted */ + .chroma .gi { + color: #a6e22e; + } + /* GenericStrong */ + .chroma .gs { + font-weight: bold; + } + /* GenericSubheading */ + .chroma .gu { + color: #75715e; + } + /* TextWhitespace */ + .chroma .w { + color: #a8757b; + } } -/* TextWhitespace */ -.chroma .w { - color: #a8757b; + +/* a11y_light theme from https://github.com/Quansight-Labs/accessible-pygments */ + +html[data-theme="light"] { + /* Background */ + /* .chroma { */ + /* color: #545454; background-color: #fefefe; */ + /* } */ + /* Error */ + .chroma .err { + color: #d91e18; + } + /* LineLink */ + .chroma .lnlinks { + outline: none; + text-decoration: none; + color: inherit; + } + /* LineTableTD */ + .chroma .lntd { + vertical-align: top; + padding: 0; + margin: 0; + border: 0; + } + /* LineTable */ + .chroma .lntable { + border-spacing: 0; + padding: 0; + margin: 0; + border: 0; + } + /* LineHighlight */ + .chroma .hl { + background-color: #e4e4e4; + } + /* LineNumbersTable */ + .chroma .lnt { + white-space: pre; + -webkit-user-select: none; + user-select: none; + margin-right: 0.4em; + padding: 0 0.4em 0 0.4em; + color: #7f7f7f; + } + /* LineNumbers */ + .chroma .ln { + white-space: pre; + -webkit-user-select: none; + user-select: none; + margin-right: 0.4em; + padding: 0 0.4em 0 0.4em; + color: #7f7f7f; + } + /* Line */ + .chroma .line { + display: flex; + } + /* Keyword */ + .chroma .k { + color: #7928a1; + } + /* KeywordConstant */ + .chroma .kc { + color: #7928a1; + } + /* KeywordDeclaration */ + .chroma .kd { + color: #7928a1; + } + /* KeywordNamespace */ + .chroma .kn { + color: #7928a1; + } + /* KeywordPseudo */ + .chroma .kp { + color: #7928a1; + } + /* KeywordReserved */ + .chroma .kr { + color: #7928a1; + } + /* KeywordType */ + .chroma .kt { + color: #aa5d00; + } + /* NameAttribute */ + .chroma .na { + color: #aa5d00; + } + /* NameBuiltin */ + .chroma .nb { + color: #aa5d00; + } + /* NameBuiltinPseudo */ + .chroma .bp { + color: #aa5d00; + } + /* NameClass */ + .chroma .nc { + color: #007faa; + } + /* NameConstant */ + .chroma .no { + color: #007faa; + } + /* NameDecorator */ + .chroma .nd { + color: #aa5d00; + } + /* NameEntity */ + .chroma .ni { + color: #008000; + } + /* NameException */ + .chroma .ne { + color: #7928a1; + } + /* NameFunction */ + .chroma .nf { + color: #007faa; + } + /* NameLabel */ + .chroma .nl { + color: #aa5d00; + } + /* NameProperty */ + .chroma .py { + color: #007faa; + } + /* NameTag */ + .chroma .nt { + color: #007faa; + } + /* NameVariable */ + .chroma .nv { + color: #d91e18; + } + /* NameVariableMagic */ + .chroma .vm { + color: #aa5d00; + } + /* Literal */ + .chroma .l { + color: #aa5d00; + } + /* LiteralDate */ + .chroma .ld { + color: #aa5d00; + } + /* LiteralString */ + .chroma .s { + color: #008000; + } + /* LiteralStringAffix */ + .chroma .sa { + color: #008000; + } + /* LiteralStringBacktick */ + .chroma .sb { + color: #008000; + } + /* LiteralStringChar */ + .chroma .sc { + color: #008000; + } + /* LiteralStringDelimiter */ + .chroma .dl { + color: #008000; + } + /* LiteralStringDoc */ + .chroma .sd { + color: #008000; + } + /* LiteralStringDouble */ + .chroma .s2 { + color: #008000; + } + /* LiteralStringEscape */ + .chroma .se { + color: #008000; + } + /* LiteralStringHeredoc */ + .chroma .sh { + color: #008000; + } + /* LiteralStringInterpol */ + .chroma .si { + color: #008000; + } + /* LiteralStringOther */ + .chroma .sx { + color: #008000; + } + /* LiteralStringRegex */ + .chroma .sr { + color: #d91e18; + } + /* LiteralStringSingle */ + .chroma .s1 { + color: #008000; + } + /* LiteralStringSymbol */ + .chroma .ss { + color: #007faa; + } + /* LiteralNumber */ + .chroma .m { + color: #aa5d00; + } + /* LiteralNumberBin */ + .chroma .mb { + color: #aa5d00; + } + /* LiteralNumberFloat */ + .chroma .mf { + color: #aa5d00; + } + /* LiteralNumberHex */ + .chroma .mh { + color: #aa5d00; + } + /* LiteralNumberInteger */ + .chroma .mi { + color: #aa5d00; + } + /* LiteralNumberIntegerLong */ + .chroma .il { + color: #aa5d00; + } + /* LiteralNumberOct */ + .chroma .mo { + color: #aa5d00; + } + /* Operator */ + .chroma .o { + color: #008000; + } + /* OperatorWord */ + .chroma .ow { + color: #7928a1; + } + /* Comment */ + .chroma .c { + color: #696969; + } + /* CommentHashbang */ + .chroma .ch { + color: #696969; + } + /* CommentMultiline */ + .chroma .cm { + color: #696969; + } + /* CommentSingle */ + .chroma .c1 { + color: #696969; + } + /* CommentSpecial */ + .chroma .cs { + color: #696969; + } + /* CommentPreproc */ + .chroma .cp { + color: #696969; + } + /* CommentPreprocFile */ + .chroma .cpf { + color: #696969; + } + /* GenericDeleted */ + .chroma .gd { + color: #007faa; + } + /* GenericEmph */ + .chroma .ge { + font-style: italic; + } + /* GenericHeading */ + .chroma .gh { + color: #007faa; + } + /* GenericStrong */ + .chroma .gs { + font-weight: bold; + } + /* GenericSubheading */ + .chroma .gu { + color: #007faa; + } } diff --git a/assets/theme-css/content.css b/assets/theme-css/content.css index 68ef2fce..8372fc07 100644 --- a/assets/theme-css/content.css +++ b/assets/theme-css/content.css @@ -24,73 +24,9 @@ .content-container .divider { height: 3px; border-radius: 50px; - background: var(--colorText); + background: var(--pst-color-text-base); width: 60px; &.is-centered { margin: 0 auto; } } - -.content-container h1, -h2, -h3, -h4, -h5, -h6 { - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, - "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", - "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; - font-weight: bold; - text-transform: uppercase; - color: var(--colorHeading); -} - -.content-container h1 { - font-size: 2em; - letter-spacing: 1.5px; -} - -.content-container h2 { - font-size: 1.4em; - letter-spacing: 1.3px; - margin-top: 30px; -} - -.content-container h3 { - font-size: 1.2em; - letter-spacing: 1.3px; - margin-top: 25px; -} - -.content-container h4 { - font-size: 1.1em; - letter-spacing: 1.2px; - margin-top: 23px; -} - -.content-container h5 { - font-size: 1em; - letter-spacing: 1.1px; - margin-top: 22px; -} - -.content-container h6 { - font-size: 0.9em; - letter-spacing: 1px; - margin-top: 21px; -} - -.content-container .name.title { - /* Override bulma's .title selector. */ - color: var(--colorHeading); -} - -/* Override bulma .label font-weight, which otherwise impacts on g.label used by mermaid */ -g.label { - font-weight: normal; -} - -strong { - /* Override bulma's STRONG selector. */ - color: var(--colorText); -} diff --git a/assets/theme-css/dark-mode.css b/assets/theme-css/dark-mode.css index 4947ff99..b4d03c61 100644 --- a/assets/theme-css/dark-mode.css +++ b/assets/theme-css/dark-mode.css @@ -3,11 +3,9 @@ /* Basically, we reassign the colors named in the non-dark theme. The exception is the background: it seems to look better as #111 than as --colorPrimaryDark. */ - --colorBackground: #111; --colorBackgroundAlt: var(--colorPrimaryDark); --colorBackgroundAlt2: var(--colorSecondaryDark); - --colorText: white; --colorTextAlt: var(--colorSecondaryLight); --colorContentLink: var(--colorPrimaryLight); @@ -22,23 +20,5 @@ --colorBlockBackground: var(--colorPrimaryDark); --colorCode: #ffb8d1; - - /* FIXME: These colors should probably use named colors. */ - --colorNoteBackground: #3f5565; - --colorInfoBackground: #45413a; - --colorWarningBackground: #433c3c; - --colorTipBackground: #3e433e; - } - html { - background: var(--colorBackground); - color: var(--colorText); - } - code { - background: var(--colorBlockBackground); - color: var(--colorCode); - } - pre { - background: var(--colorBlockBackground); - color: var(--colorText); } } diff --git a/assets/theme-css/keyfeatures.css b/assets/theme-css/keyfeatures.css index 4e98e3ba..776f71c3 100644 --- a/assets/theme-css/keyfeatures.css +++ b/assets/theme-css/keyfeatures.css @@ -28,10 +28,6 @@ text-transform: uppercase; } -.keyfeatures-box-text > a { - color: var(--colorPrimary); -} - .keyfeatures-box-text { margin: 15px; height: 6em; diff --git a/assets/theme-css/light-mode.css b/assets/theme-css/light-mode.css index c9e951cf..73abe234 100644 --- a/assets/theme-css/light-mode.css +++ b/assets/theme-css/light-mode.css @@ -1,11 +1,9 @@ @media not (prefers-color-scheme: dark) { :root { /* Now we assign those named colors to various purposes. */ - --colorBackground: var(--colorSecondaryLight); --colorBackgroundAlt: var(--colorPrimaryDark); --colorBackgroundAlt2: var(--colorSecondaryDark); - --colorText: black; --colorTextAlt: var(--colorSecondaryDark); --colorContentLink: var(--colorBrightBlue); @@ -21,9 +19,5 @@ --colorTextInverse: var(--colorBackground); --colorBackgroundInverse: var(--colorPrimaryDark); --colorLinkInverse: var(--colorPrimaryLight); - - /* Color from bulma.css, but this variable is currently only used for - dark mode. */ - --colorCode: #da1039; } } diff --git a/assets/theme-css/panel.css b/assets/theme-css/panel.css index 03cc7aaa..390d8296 100644 --- a/assets/theme-css/panel.css +++ b/assets/theme-css/panel.css @@ -109,7 +109,7 @@ .panel-button { border: 2px solid var(--colorPrimary); background-color: var(--colorLight); - color: var(--colorText) !important; + color: var(--pst-color-text-base) !important; font-size: 16px; cursor: pointer; padding-bottom: calc(0.5em - 1px); diff --git a/assets/theme-css/posts.css b/assets/theme-css/posts.css index c2404254..029f02a7 100644 --- a/assets/theme-css/posts.css +++ b/assets/theme-css/posts.css @@ -4,7 +4,7 @@ div.post-list { .post-title a { /* ".content-padding a" rule conflicts. */ - color: var(--colorText) !important; + color: var(--pst-color-text-base) !important; } .post-list article { diff --git a/assets/theme-css/pst/base/_base.scss b/assets/theme-css/pst/base/_base.scss new file mode 100644 index 00000000..3fb3647e --- /dev/null +++ b/assets/theme-css/pst/base/_base.scss @@ -0,0 +1,182 @@ +html { + font-size: var(--pst-font-size-base); + scroll-padding-top: calc(var(--pst-header-height) + 1rem); +} + +body { + background-color: var(--pst-color-background); + font-family: var(--pst-font-family-base); + font-weight: 400; + line-height: 1.65; + color: var(--pst-color-text-base); + min-height: 100vh; + display: flex; + flex-direction: column; + + // hack to avoid the black background on some browser including Safari + &::-webkit-scrollbar-track { + background: var(--pst-color-background); + } +} + +p { + margin-bottom: 1.15rem; + font-size: 1em; + color: var(--pst-color-text-base); + + /* section header in docstring pages */ + &.rubric { + border-bottom: 1px solid var(--pst-color-border); + } + + &.centered { + text-align: center; + } +} + +a { + @include link-style-default; + + // The # anchor that appears on hover over headings + &.headerlink { + color: var(--pst-color-secondary); + opacity: 0.7; + font-size: 0.8em; + padding: 0 4px 0 4px; + margin-left: 0.2em; + text-decoration: none; + transition: all 0.2s ease-out; + user-select: none; + + &:hover { + opacity: 1; + } + } + + // set up a icon next to the shorten links from github and gitlab + &.github, + &.gitlab { + &::before { + color: var(--pst-color-text-muted); + font: var(--fa-font-brands); + margin-right: 0.25rem; + } + } + + &.github::before { + content: var(--pst-icon-github); + } + + &.gitlab::before { + content: var(--pst-icon-gitlab); + } +} + +.heading-style { + margin: 2.75rem 0 1.05rem; + font-family: var(--pst-font-family-heading); + font-weight: var(--pst-font-weight-heading); + line-height: 1.15; +} + +h1 { + @extend .heading-style; + margin-top: 0; + font-size: var(--pst-font-size-h1); + color: var(--pst-heading-color); +} + +h2 { + @extend .heading-style; + font-size: var(--pst-font-size-h2); + color: var(--pst-heading-color); +} + +h3 { + @extend .heading-style; + font-size: var(--pst-font-size-h3); + color: var(--pst-heading-color); +} + +h4 { + @extend .heading-style; + font-size: var(--pst-font-size-h4); + color: var(--pst-heading-color); +} + +h5 { + @extend .heading-style; + font-size: var(--pst-font-size-h5); + color: var(--pst-color-text-base); +} + +h6 { + @extend .heading-style; + font-size: var(--pst-font-size-h6); + color: var(--pst-color-text-base); +} + +small, +.text_small { + font-size: var(--pst-font-size-milli); +} + +hr { + border: 0; + border-top: 1px solid var(--pst-color-border); +} + +pre, +code, +kbd, +samp { + font-family: var(--pst-font-family-monospace); +} + +kbd { + // use theme negative + background-color: var(--pst-color-on-background); + color: var(--pst-color-text-muted); + + // Compound keyboard elements will have nested kbd in them, so this prevents double lines + &:not(.compound) { + border: 1px solid var(--pst-color-border); + margin: 0 0.1rem; + padding: 0.1rem 0.4rem; + box-shadow: 1px 1px 1px var(--pst-color-shadow); + } +} + +code { + color: var(--pst-color-inline-code); +} + +pre { + margin: 1.5em 0 1.5em 0; + padding: 1rem; + background-color: var(--pst-color-surface); + color: var(--pst-color-text-base); + line-height: 1.2em; + border: 1px solid var(--pst-color-border); + border-radius: $admonition-border-radius; + + .linenos { + // minimum opacity to make the line numbers WCAG AA conformant + opacity: 0.8; + padding-right: 10px; + } +} + +// Needs bootstrap +///// the back to top btn +///#pst-back-to-top { +/// z-index: $zindex-tooltip; +/// position: fixed; +/// display: none; +/// top: 80vh; +/// left: 50vw; +/// transform: translate(-50%); +/// color: var(--pst-color-secondary-text); +/// background-color: var(--pst-color-secondary); +/// border: none; +///} diff --git a/assets/theme-css/pst/components/_breadcrumbs.scss b/assets/theme-css/pst/components/_breadcrumbs.scss new file mode 100644 index 00000000..2028ec14 --- /dev/null +++ b/assets/theme-css/pst/components/_breadcrumbs.scss @@ -0,0 +1,33 @@ +/** + * Breadcrumbs for parent pages meant for the article header + */ +ul.bd-breadcrumbs { + list-style: none; + padding-left: 0; + display: flex; + flex-wrap: wrap; + + // Font size slightly smaller to avoid cluttering up space too much + font-size: 0.8rem; + + li.breadcrumb-item { + display: flex; + align-items: baseline; + + // Style should look like heavier in-page links + // keeping visited in the default link colour + font-weight: bold; + a { + @include link-style-text; + } + + // Items that aren't the home have a caret to the left + &:not(.breadcrumb-home):before { + font: var(--fa-font-solid); + font-size: 0.8rem; + content: var(--pst-breadcrumb-divider); + color: var(--pst-color-text-muted); + padding: 0 0.5rem; + } + } +} diff --git a/assets/theme-css/pst/content/_code.scss b/assets/theme-css/pst/content/_code.scss new file mode 100644 index 00000000..8f4a264d --- /dev/null +++ b/assets/theme-css/pst/content/_code.scss @@ -0,0 +1,71 @@ +/** + * Code block styling + * Note that we inherit a lot of styling from Bootstrap so not many rules here. + */ + +// General code block behavior +// Unset bootstrap behavior +div[class*="highlight-"], +div.highlight, +div.literal-block-wrapper { + display: flex; + flex-direction: column; + width: unset; + border-radius: $admonition-border-radius; +} + +// Code blocks with captions +// There's a wrapper when the code block has a title +div.literal-block-wrapper { + border: 1px solid var(--pst-color-border); + border-radius: $admonition-border-radius; + + // This is where the title goes + div.code-block-caption { + margin: 0; + border-bottom: 1px solid var(--pst-color-border); + padding: 0.5rem; + font-size: 1rem; + font-weight: var(--pst-font-weight-caption); + + a.headerlink { + font-size: inherit; + } + } + + // Remove the upper border radius since we want it to connect with the title + // Remove the box shadow so the wrapper gets the shadow instead + div[class*="highlight-"] { + margin: 0; + border-radius: 0; + pre { + border: none; + box-shadow: none; + } + } +} + +/** + * In-line code + */ +code.literal { + padding: 0.1rem 0.25rem; + background-color: var(--pst-color-surface); + border: 1px solid var(--pst-color-border); + border-radius: 0.25rem; +} + +a > code { + color: var(--pst-color-inline-code-links); +} + +// Fix for Sphinx's "highlight" directive - this is an issue with our accessible pygments theme +// and the colour we are using for the background of the code blocks. +html[data-theme="light"] .highlight .nf { + color: #0078a1 !important; +} + +// Minimum opacity needed for linenos to be WCAG AA conformant +span.linenos { + opacity: 0.8 !important; +} diff --git a/assets/theme-css/pst/content/_toctree.scss b/assets/theme-css/pst/content/_toctree.scss new file mode 100644 index 00000000..d216ab74 --- /dev/null +++ b/assets/theme-css/pst/content/_toctree.scss @@ -0,0 +1,43 @@ +/** + * Style the toctree component in pages (avoid modifying the navbars) + */ +.toctree-wrapper { + p.caption { + font-size: 1.5em; + margin-bottom: 0em; + } + + & > ul { + padding-left: 0; + } + + li[class^="toctree-l"] { + list-style: none; + margin-bottom: 0.2em; + + & > a { + list-style: none; + font-size: 1.1em; + } + + & > ul { + list-style: none; + padding-inline-start: 1.5em; + } + } + + // slightly bigger font for l1 + .toctree-l1 > a { + font-size: 1.3em; + } +} + +div.topic.contents, // Docutils <= 0.17 +nav.contents // Docutils >= 0.18 +{ + // Style similarly to toctree + ul.simple { + list-style: none; + padding-left: 0; + } +} diff --git a/assets/theme-css/pst/pydata-sphinx-theme.scss b/assets/theme-css/pst/pydata-sphinx-theme.scss index c79d0fdc..d755568d 100644 --- a/assets/theme-css/pst/pydata-sphinx-theme.scss +++ b/assets/theme-css/pst/pydata-sphinx-theme.scss @@ -15,9 +15,9 @@ // re-usable SCSS functions / classes @import "abstracts/all"; -//// Basic styling applied throughout site -//@import "./base/base"; -// +// Basic styling applied throughout site +@import "./base/base"; + //// Major theme layout, skeleton, and whitespace //@import "./sections/skip-link"; //@import "./sections/container"; @@ -33,7 +33,7 @@ //@import "./sections/sidebar-toggle"; // //// Re-usable components across the theme -//@import "./components/breadcrumbs"; +@import "./components/breadcrumbs"; //@import "./components/icon-links"; //@import "./components/header/header-logo"; //@import "./components/navbar-links"; @@ -51,7 +51,7 @@ // Content blocks in standard Sphinx @import "./content/admonitions"; //@import "./content/api"; -//@import "./content/code"; +@import "./content/code"; //@import "./content/figures"; //@import "./content/footnotes"; //@import "./content/hacks"; @@ -59,7 +59,7 @@ //@import "./content/quotes"; //@import "./content/spans"; //@import "./content/tables"; -//@import "./content/toctree"; +@import "./content/toctree"; //@import "./content/math"; //// Content blocks from Sphinx extensions diff --git a/assets/theme-css/shortcuts.css b/assets/theme-css/shortcuts.css index 19094336..19956300 100644 --- a/assets/theme-css/shortcuts.css +++ b/assets/theme-css/shortcuts.css @@ -1,43 +1,49 @@ #shortcuts-container { position: sticky; align-self: flex-start; - top: 6rem; + margin-top: 3rem; + top: 9rem; /* top + 3rem */ width: 100%; max-width: 150px; - margin: 75px 15px; } #shortcuts { margin-top: 10px; + font-size: 0.9rem; +} + +#shortcuts-header { + padding-left: calc(1rem + 2px); + padding-bottom: 0.25rem; } #shortcuts > div:not(.active) { margin-left: 2px; - border-left: 1px solid var(--colorText); + border-left: 1px solid var(--pst-color-text-base); opacity: 0.75; } #shortcuts > div.active { font-weight: bold; - color: var(--colorText); - border-left: 5px solid var(--colorText); + color: var(--pst-color-text-base); + border-left: 5px solid var(--pst-color-text-base); } .shortcuts-H2 { padding: 5px 5px 0 15px; - font-size: 15px; + font-size: 95%; cursor: pointer; } .shortcuts-H3 { padding: 5px 5px 0 25px; - font-size: 14px; + font-size: 90%; cursor: pointer; } .shortcuts-H4 { padding: 5px 5px 0 35px; - font-size: 12px; + font-size: 85%; cursor: pointer; } diff --git a/assets/theme-css/styles.css b/assets/theme-css/styles.css index ad3ac0ac..5ac598d9 100644 --- a/assets/theme-css/styles.css +++ b/assets/theme-css/styles.css @@ -1,41 +1,34 @@ body { - color: var(--colorText); - font-family: var(--fontFamily), sans-serif; -} - -code { - font-size: 0.85em; - padding: 0.15em; + margin: 0; } -em { - color: var(--colorText); +.title { + color: var(--pst-heading-color); } hr { background-color: var(--colorSecondaryDark); } -pre { - background-color: var(--colorPrimaryDark); - color: var(--colorTextInverse); - margin-top: 1em; - margin-bottom: 1em; - padding-top: 0.5em; - padding-bottom: 0.5em; - padding-left: 0.5em; - padding-right: 0.5em; -} - table th { /* Overriding bulma. */ color: var(--colorTextAlt); } -/* This color came from uikit; we re-specify it here - to show how to override it for the content section */ -.content-padding a { - color: var(--colorContentLink); +/** + * See `code.literal` in + * src/pydata_sphinx_theme/assets/styles/content/_code.scss + */ +:not(pre) > code { + padding: 0.1rem 0.25rem; + background-color: var(--pst-color-surface); + border: 1px solid var(--pst-color-border); + border-radius: 0.25rem; + font-size: 0.875em; +} + +a > code { + color: var(--pst-color-inline-code-links); } .flex-row { @@ -79,7 +72,7 @@ table th { font-family: var(--fontFamily), sans-serif; font-weight: 900; font-size: 6em; - color: var(--colorText); + color: var(--pst-color-text-base); justify-content: center; margin-left: 1em; margin-bottom: 0.2em; @@ -95,7 +88,7 @@ table th { } .hero-subtitle { - color: var(--colorText); + color: var(--pst-color-text-base); font-size: 1em; max-width: 550px; } @@ -118,7 +111,7 @@ table th { text-transform: uppercase; letter-spacing: 1.5px; font-weight: 500; - color: var(--colorTextInverse); + color: var(--colorSecondary); background-color: var(--colorBackgroundInverse); border: none; border-radius: 25px; @@ -137,20 +130,8 @@ table th { margin-top: 30px; } -h2 { - font-size: 1.5em; - font-weight: bold; - padding-top: 15px; -} - -h3 { - font-size: 1.2em; - font-weight: bold; - padding-top: 10px; -} - p { - padding-top: 5px; + margin-bottom: 0; } .content-container ul { @@ -159,6 +140,15 @@ p { margin-left: 15px; } +.content-container .toctree-wrapper ul:first-child { + margin-left: 0; + padding-left: 0.75rem; +} + +.content-container .toctree-wrapper ul { + margin-left: 0.75rem; +} + .content-container ol { padding: 10px; margin-left: 15px; @@ -223,9 +213,7 @@ p { flex-shrink: 1; } -.footer-link, -.footer-link:hover { - font-size: 1rem; +a.footer-link { color: var(--colorSecondary); } @@ -335,8 +323,8 @@ svg.icon { nav, .navbar { - background: var(--colorBackground); - color: var(--colorText); + background: var(--pst-color-background); + color: var(--pst-color-text-base); } .navbar-burger { color: var(--colorTextAlt); @@ -353,7 +341,7 @@ nav, a.navbar-item, a.navbar-item:visited { - color: var(--colorText); + color: var(--pst-color-text-base); text-decoration: none; } @@ -367,7 +355,7 @@ a.navbar-item:hover { } .navbar-logo-text { - color: var(--colorText); + color: var(--pst-color-text-base); font-size: 1.25rem; font-weight: bold; } @@ -388,6 +376,28 @@ a.navbar-item:hover { background: var(--colorPrimaryDark); } +/* reboot stuff needed for pydata-sphinx-theme */ + +pre { + font-size: 0.875em; + overflow: auto; +} + +/* hide headerlinks until hovered over */ +a.headerlink { + visibility: hidden; +} + +:is(h1, h2, h3, h4, h5, h6):hover > a.headerlink { + visibility: visible; +} + /* Local Variables: */ /* css-indent-offset: 2 */ /* End: */ + +#breadcrumbs { + margin: 0; + padding: 0; + padding-bottom: 1.5rem; +} diff --git a/doc/config.yaml b/doc/config.yaml index 73e33629..9ec96589 100644 --- a/doc/config.yaml +++ b/doc/config.yaml @@ -27,6 +27,8 @@ params: url: /features/ - title: Shortcodes url: /shortcodes/ + - title: Examples + url: /examples/ keyfeatures: features: - title: Documented diff --git a/doc/content/examples/_index.md b/doc/content/examples/_index.md new file mode 100644 index 00000000..e74f1a03 --- /dev/null +++ b/doc/content/examples/_index.md @@ -0,0 +1,5 @@ +--- +title: Examples +--- + +{{< toctree >}} diff --git a/doc/content/examples/kitchen-sink/_index.md b/doc/content/examples/kitchen-sink/_index.md new file mode 100644 index 00000000..b07488db --- /dev/null +++ b/doc/content/examples/kitchen-sink/_index.md @@ -0,0 +1,3 @@ +--- +title: Kitchen Sink +--- diff --git a/doc/content/examples/kitchen-sink/admonitions.md b/doc/content/examples/kitchen-sink/admonitions.md new file mode 100644 index 00000000..1fbd3465 --- /dev/null +++ b/doc/content/examples/kitchen-sink/admonitions.md @@ -0,0 +1,118 @@ +--- +title: Admonitions +--- + +We provide several different types of admonitions. + + + +## `attention` + +{{< admonition attention >}} +Climate change is real. +{{< /admonition >}} + +## `caution` + +{{< admonition caution >}} +Cliff ahead: Don\'t drive off it. +{{< /admonition >}} + +## `danger` + +{{< admonition danger >}} +Mad scientist at work! +{{< /admonition >}} + +## `error` + +{{< admonition error >}} +Does not compute. +{{< /admonition >}} + +## `hint` + +{{< admonition hint >}} +Insulators insulate, until they are subject to \_\_\_\_\_\_ voltage. +{{< /admonition >}} + +## `important` + +{{< admonition important >}} +Tech is not neutral, nor is it apolitical. +{{< /admonition >}} + +## `note` + +{{< admonition note >}} +This is a note. +{{< /admonition >}} + +## `seealso` + +{{< admonition seealso >}} +Other relevant information. +{{< /admonition >}} + +## `tip` + +{{< admonition tip >}} +25% if the service is good. +{{< /admonition >}} + + + +## `warning` + +{{< admonition warning>}} +Reader discretion is strongly advised. +{{< /admonition >}} + + diff --git a/doc/content/examples/kitchen-sink/typography.md b/doc/content/examples/kitchen-sink/typography.md new file mode 100644 index 00000000..4cddc48f --- /dev/null +++ b/doc/content/examples/kitchen-sink/typography.md @@ -0,0 +1,73 @@ +--- +title: Typography +--- + +This is quite important, for a website where the majority of the content +is going to be prose. + +Notice the font family being used for the prose, as well as the font +family being used for the heading. Think about the spacing between the +lines, as well as the spacing between various paragraphs. Also keep the +font weight in mind, and consider if/how you want antialiasing and +font-smoothing to work. + +Multiple paragraphs are a common occurance, because you often need more +than a single paragraph to describe a thing. The rest of this paragraph +is gonna be the famous lorem-ipsum: Lorem ipsum **dolor** sit amet +consectetur adipisicing elit. Accusamus, sunt voluptatum tenetur libero +nulla esse veritatis accusantium earum commodi hic voluptatem officia +culpa optio atque. Quaerat sed quibusdam ratione nam. + +## Headings + +This next bit will explore how the various headings look. Think about +how the content separation should work, and how the various headings +should interact with the main content. + +### Heading 3 + +#### Heading 4 + +##### Heading 5 + +###### Heading 6 + +## Heading 2 with content + +Lorem ipsum **dolor** sit amet consectetur adipisicing elit. + +Accusamus, sunt voluptatum tenetur libero nulla esse veritatis +accusantium earum commodi hic voluptatem officia culpa optio atque. +Quaerat sed quibusdam ratione nam. + +### Heading 3 with content + +Lorem ipsum **dolor** sit amet consectetur adipisicing elit. + +Accusamus, sunt voluptatum tenetur libero nulla esse veritatis +accusantium earum commodi hic voluptatem officia culpa optio atque. +Quaerat sed quibusdam ratione nam. + +#### Heading 4 with content + +Lorem ipsum **dolor** sit amet consectetur adipisicing elit. + +Accusamus, sunt voluptatum tenetur libero nulla esse veritatis +accusantium earum commodi hic voluptatem officia culpa optio atque. +Quaerat sed quibusdam ratione nam. + +##### Heading 5 with content + +Lorem ipsum **dolor** sit amet consectetur adipisicing elit. + +Accusamus, sunt voluptatum tenetur libero nulla esse veritatis +accusantium earum commodi hic voluptatem officia culpa optio atque. +Quaerat sed quibusdam ratione nam. + +###### Heading 6 with content + +Lorem ipsum **dolor** sit amet consectetur adipisicing elit. + +Accusamus, sunt voluptatum tenetur libero nulla esse veritatis +accusantium earum commodi hic voluptatem officia culpa optio atque. +Quaerat sed quibusdam ratione nam. diff --git a/doc/content/features.md b/doc/content/features.md index bbbcddbf..88a5bde5 100644 --- a/doc/content/features.md +++ b/doc/content/features.md @@ -47,7 +47,7 @@ To use a different theme, [generate a new stylesheet](https://gohugo.io/content-management/syntax-highlighting/#highlight-shortcode) using: -```bash +``` hugo gen chromastyles --style=monokai > /assets/css/code-highlight.css ``` @@ -103,7 +103,7 @@ shortcode (include-html) for pulling it in anywhere on the site. The theme supports analytics through Plausible, which can be self-hosted or paid-for at https://plausible.io/. To enable Plausible analytics, add to your `config.yaml`: -``` +```yaml params: plausible: dataDomain: your-domain.org diff --git a/layouts/_default/_markup/render-codeblock.html b/layouts/_default/_markup/render-codeblock.html new file mode 100644 index 00000000..35d37b9c --- /dev/null +++ b/layouts/_default/_markup/render-codeblock.html @@ -0,0 +1,14 @@ +{{ if transform.CanHighlight .Type }} +{{/* Supported Chroma Language*/}} +
+ 

+  {{- with transform.HighlightCodeBlock . -}}
+  {{ .Inner | safeHTML }}
+  {{- end -}}
+
+{{- else -}} +{{/* Unsupported Language */}} +
+ 
{{ .Inner }}
+
+{{ end }} diff --git a/layouts/_default/_markup/render-heading.html b/layouts/_default/_markup/render-heading.html new file mode 100644 index 00000000..9d300554 --- /dev/null +++ b/layouts/_default/_markup/render-heading.html @@ -0,0 +1 @@ +{{ .Text | safeHTML }}# diff --git a/layouts/partials/breadcrumbs.html b/layouts/partials/breadcrumbs.html new file mode 100644 index 00000000..1ab70dea --- /dev/null +++ b/layouts/partials/breadcrumbs.html @@ -0,0 +1,10 @@ + diff --git a/layouts/partials/section/section.html b/layouts/partials/section/section.html index 2ea52d37..01837f4f 100644 --- a/layouts/partials/section/section.html +++ b/layouts/partials/section/section.html @@ -1,16 +1,14 @@
On this page
-
+
-
-
-

{{ .Title }}

-
{{ .Params.Subtitle }}
-
-
-
+ {{ partial "breadcrumbs.html" . }} +

{{ .Title }}

+ {{ if .Params.Subtitle }} +
{{ .Params.Subtitle }}
+ {{ end }} {{ if .Content }} {{ .Content }} {{ else }} diff --git a/layouts/partials/single/content.html b/layouts/partials/single/content.html index 8f9d7e87..236a15bf 100644 --- a/layouts/partials/single/content.html +++ b/layouts/partials/single/content.html @@ -1,23 +1,21 @@
-
-
On this page
-
-
-
-
-
-

{{ .Title }}

-
{{ .Params.Subtitle }}
-
-
-
- {{ with partial "post_meta.html" . -}} -
{{ . }}
- {{- end }} +
+ {{ partial "breadcrumbs.html" . }} +

{{ .Title }}

+ {{ if .Params.Subtitle }} +
{{ .Params.Subtitle }}
+ {{ end }} + {{ with partial "post_meta.html" . -}} +
{{ . }}
+ {{- end }} -
- {{ .Content }} -
+
+ {{ .Content }} +
+
+
+
+
On this page
diff --git a/layouts/shortcodes/toctree.html b/layouts/shortcodes/toctree.html new file mode 100644 index 00000000..fa10fec9 --- /dev/null +++ b/layouts/shortcodes/toctree.html @@ -0,0 +1,22 @@ +
+ {{- range $section := .Page.Sections }} + + {{- end }} +