Author: Pedro Lucas Porcellis <porcellis@eletrotupi.com>
Huge layout/style overhaul; added dark mode as well
assets/style.scss | 257 +++++++++++++++++++++------- assets/syntax.css | 82 --------- i18n/en.toml | 7 i18n/pt-br.toml | 8 layouts/blog/single.html | 51 ++++- layouts/index.html | 57 +++-- layouts/partials/basic.html | 11 + layouts/partials/bio.html | 3 layouts/partials/css/syntax-dark.css | 86 +++++++++ layouts/partials/css/syntax-light.css | 86 +++++++++ layouts/partials/head.html | 15 +
diff --git a/assets/style.scss b/assets/style.scss index 6b662fc493623c4052f7d8ddc81fcb4cbd2872fa..7894352831a26e47bca1f094b87ba63b9acc4e8b 100644 --- a/assets/style.scss +++ b/assets/style.scss @@ -1,103 +1,220 @@ -// The style is loosely inspired from Anirudh Oppiliappan's blog which is -// licensed under a MIT license: https://git.icyphox.sh/site/tree/license +:root { + --content-width: 98rem; + --body-padding: 6.4rem; + --page-padding: 1.6rem; + + --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; + + --font-family-mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace; + + --font-size-base: 11px; + --base-space: 1.25em; + + // general colors + --rgb-black: 0, 0, 0; + --rgb-almost-black: 35, 28, 51; + --rgb-white: 255, 255, 255; + --rgb-almost-white: 236, 233, 230; + --rgb-navy: 28, 28, 40; + --rgb-blue: 80, 162, 255; + + --rgb-ink: var(--rgb-almost-black); + + --color-border: rgba(var(--rgb-ink), 0.15); + --color-white: rgb(var(--rgb-white)); + --color-black: rgb(var(--rgb-black)); + --color-navy: rgb(var(--rgb-navy)); + --color-blue: rgb(var(--rgb-blue)); + + --bg-color: var(--color-white); + --color-txt: rgb(var(--rgb-ink)); + --color-txt-action: var(--color-blue); + --color-txt-subtle: rgba(var(--rgb-ink), 0.66); + --color-code-container: #ebebeb; +} -:root { - --bg: #fff; - --gray: #6a6a6a; - --code: #666; - --dark: #444; - --code-bg: #0000000a; + +// sizes +@media (min-width: 60em) { + :root { + --font-size-x-small: 1.4rem; + --font-size-small: 1.6rem; + --font-size-medium: 1.8rem; + --font-size-large: 2rem; + --font-size-x-large: 2.8rem; + } } -.header, main, footer { - display: grid; - grid-template-columns: repeat(12, minmax(0, 1fr)); - min-width: 0; - margin-bottom: 20px; +@media (prefers-color-scheme: dark) { + :root:not([data-color-scheme="light"]) { + --rgb-almost-black: 27, 39, 51; + --rgb-ink: var(--rgb-almost-white); + + --bg-color: var(--color-navy); + --color-code-container: #2e2e2e; + } } html { - background: var(--bg); - font-size: 18px; - line-height: 1.77778; + font-family: var(--font-family); + font-size: var(--font-size-base); + + color: var(--color-txt); + background-color: var(--bg-color); +} + +body { + font-size: var(--font-size-medium); + padding: 0 0 var(--body-padding); +} + +main { + width: 100%; + max-width: var(--content-width); + padding: var(--page-padding); + margin: 0 auto; + position: relative; } a { - color: var(--black); + color: var(--color-txt-action); +} + +.page-content { + max-width: var(--content-width); + margin: 0 auto; + + @media (min-width: 40em) { + max-width: 64rem; + } +} + +.article { + min-height: 10em; + position: relative; + padding-bottom: 5em; + + .article-title { + text-align: center; + + .article-date { + display: flex; + align-items: center; + justify-content: center; + margin-left: 0; + margin-right: 0; + } + + a { + font-weight: bold; + font-size: var(--font-size-x-large); + h2 { + margin-top: 0 !important; + } + } + } +} + +.avatar { + display: inline-flex; + width: 2.625em; + height: 2.625em; + border-radius: 100%; } -.header, -.article-title a, -.inner-article-title h1, -.translations, -.languages, -article h1, -article h2, -article h3 { - font-family: -apple-system,BlinkMacSystemFont,Inter,Roboto,"Segoe UI",sans-serif; +.divisor { + position: relative; + + &:after { + content: " "; + width: 12rem; + border-top: 1px solid var(--color-border); + top: 0; + margin: 0 -6rem; + position: absolute; + } } -.inner-article-title, -.article-list, -.translations, -.header-nav, -article, -footer > div { - grid-column: 1/12; +article { + .footnotes { + hr { + width: 12rem; + color: var(--color-border); + } + } } -blockquote { - border-left: .25rem solid var(--gray); - color: var(--dark); - font-style: italic; - margin: .8rem 0; - padding: .5rem 1rem; +.inner-article-title { + margin-top: 5rem; } -.inner-article-title h1 { - margin: 0; +// utils + +.text-small { + font-size: var(--font-size-small); } -.inner-article-date, .article-date, footer > div { - color: #888383; +.text-x-small { + font-size: var(--font-size-small); } -.inner-article-date { - font-style: italic; +.text-center { + text-align: center; } -hr { - width: 20%; +.text-spaced { + letter-spacing: .25rem; } -@media only screen and (min-width: 800px) { - .header-nav, .article-list { - grid-column: 4/10; - grid-row: 1; - } +.text-uppercase { + text-transform: uppercase; +} - .article-list { - grid-row: 3; - } +.text-subtle { + color: var(--color-txt-subtle) !important; +} - .languages { - grid-row: 2; - } +.mt-5 { + margin-top: 5rem; +} - article, .translations, .languages, .inner-article-title, footer > div { - grid-column: 4/10; - } +.pt-2 { + padding-top: 2rem; +} - content { - margin: 0; - } +.mb-3 { + margin-bottom: 3rem; } -@media only screen and (min-width: 1200px) { - .article-title { - display: inline-flex; - width: 100%; - align-items: center; - justify-content: space-between; +.mb-5 { + margin-bottom: 5rem; +} + +.highlight { + margin: 16px 0px; + border-radius: 6px; + border: 1px solid var(--color-code-container); +} + +.chroma { + padding: 20px; + margin: 0; + overflow-y: auto; + max-width: 100%; + counter-reset: line; +} + +code > .line { + &:before { + color: var(--color-txt-subtle); + flex-shrink: 0; + user-selection: none; + display: inline-block; + counter-increment: line; + content: counter(line); + width: 16px; + font-size: 13px; + text-align: right; + margin-right: 20px; } } diff --git a/assets/syntax.css b/assets/syntax.css deleted file mode 100644 index 20458cbb61fb23b1e93f4edcb9da600fd636e2bc..0000000000000000000000000000000000000000 --- a/assets/syntax.css +++ /dev/null @@ -1,82 +0,0 @@ -/* Background */ .chroma { background-color: #ffffff } -/* Other */ .chroma .x { } -/* Error */ .chroma .err { } -/* 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: #ffffcc } -/* 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 { font-weight: bold } -/* KeywordConstant */ .chroma .kc { font-weight: bold } -/* KeywordDeclaration */ .chroma .kd { font-weight: bold; font-style: italic } -/* KeywordNamespace */ .chroma .kn { font-weight: bold } -/* KeywordPseudo */ .chroma .kp { font-weight: bold } -/* KeywordReserved */ .chroma .kr { font-weight: bold } -/* KeywordType */ .chroma .kt { font-weight: bold } -/* Name */ .chroma .n { } -/* NameAttribute */ .chroma .na { } -/* NameBuiltin */ .chroma .nb { font-weight: bold; font-style: italic } -/* NameBuiltinPseudo */ .chroma .bp { font-weight: bold; font-style: italic } -/* NameClass */ .chroma .nc { color: #666666; font-weight: bold; font-style: italic } -/* NameConstant */ .chroma .no { color: #666666; font-weight: bold; font-style: italic } -/* NameDecorator */ .chroma .nd { } -/* NameEntity */ .chroma .ni { } -/* NameException */ .chroma .ne { } -/* NameFunction */ .chroma .nf { color: #666666; font-weight: bold; font-style: italic } -/* NameFunctionMagic */ .chroma .fm { } -/* NameLabel */ .chroma .nl { } -/* NameNamespace */ .chroma .nn { color: #666666; font-weight: bold; font-style: italic } -/* NameOther */ .chroma .nx { } -/* NameProperty */ .chroma .py { } -/* NameTag */ .chroma .nt { } -/* NameVariable */ .chroma .nv { color: #666666; font-weight: bold; font-style: italic } -/* NameVariableClass */ .chroma .vc { } -/* NameVariableGlobal */ .chroma .vg { } -/* NameVariableInstance */ .chroma .vi { } -/* NameVariableMagic */ .chroma .vm { } -/* Literal */ .chroma .l { } -/* LiteralDate */ .chroma .ld { } -/* LiteralString */ .chroma .s { color: #666666; font-style: italic } -/* LiteralStringAffix */ .chroma .sa { color: #666666; font-style: italic } -/* LiteralStringBacktick */ .chroma .sb { color: #666666; font-style: italic } -/* LiteralStringChar */ .chroma .sc { color: #666666; font-style: italic } -/* LiteralStringDelimiter */ .chroma .dl { color: #666666; font-style: italic } -/* LiteralStringDoc */ .chroma .sd { color: #666666; font-style: italic } -/* LiteralStringDouble */ .chroma .s2 { color: #666666; font-style: italic } -/* LiteralStringEscape */ .chroma .se { color: #666666; font-style: italic } -/* LiteralStringHeredoc */ .chroma .sh { color: #666666; font-style: italic } -/* LiteralStringInterpol */ .chroma .si { color: #666666; font-style: italic } -/* LiteralStringOther */ .chroma .sx { color: #666666; font-style: italic } -/* LiteralStringRegex */ .chroma .sr { color: #666666; font-style: italic } -/* LiteralStringSingle */ .chroma .s1 { color: #666666; font-style: italic } -/* LiteralStringSymbol */ .chroma .ss { color: #666666; font-style: italic } -/* LiteralNumber */ .chroma .m { } -/* LiteralNumberBin */ .chroma .mb { } -/* LiteralNumberFloat */ .chroma .mf { } -/* LiteralNumberHex */ .chroma .mh { } -/* LiteralNumberInteger */ .chroma .mi { } -/* LiteralNumberIntegerLong */ .chroma .il { } -/* LiteralNumberOct */ .chroma .mo { } -/* Operator */ .chroma .o { } -/* OperatorWord */ .chroma .ow { font-weight: bold } -/* Punctuation */ .chroma .p { } -/* Comment */ .chroma .c { color: #888888; font-style: italic } -/* CommentHashbang */ .chroma .ch { color: #888888; font-style: italic } -/* CommentMultiline */ .chroma .cm { color: #888888; font-style: italic } -/* CommentSingle */ .chroma .c1 { color: #888888; font-style: italic } -/* CommentSpecial */ .chroma .cs { color: #888888; font-weight: bold } -/* CommentPreproc */ .chroma .cp { color: #888888; font-weight: bold } -/* CommentPreprocFile */ .chroma .cpf { color: #888888; font-weight: bold } -/* Generic */ .chroma .g { } -/* GenericDeleted */ .chroma .gd { } -/* GenericEmph */ .chroma .ge { } -/* GenericError */ .chroma .gr { } -/* GenericHeading */ .chroma .gh { } -/* GenericInserted */ .chroma .gi { } -/* GenericOutput */ .chroma .go { } -/* GenericPrompt */ .chroma .gp { } -/* GenericStrong */ .chroma .gs { } -/* GenericSubheading */ .chroma .gu { } -/* GenericTraceback */ .chroma .gt { } -/* GenericUnderline */ .chroma .gl { } -/* TextWhitespace */ .chroma .w { } diff --git a/i18n/en.toml b/i18n/en.toml index 8e9ec3dc232d9cddad134268dd14b6af585e4531..2ff35c4bdab7d7205cb30147296d031684272e71 100644 --- a/i18n/en.toml +++ b/i18n/en.toml @@ -37,3 +37,10 @@ href="https://creativecommons.org/licenses/by-sa/2.0/" title="CC-BY-SA"> CC-BY-SA</a>. """ +[bio] +other = """ + + I write code to pay my bills. I do random stuff because I have too much + chemicals on my brain. Sometimes I spit out some words on this blog. + +""" diff --git a/i18n/pt-br.toml b/i18n/pt-br.toml index ebec3da047c0fb07dc06e18957391726c48ba2bd..e87cf9ab33e17107aad2ac9990b64bee6bf59d81 100644 --- a/i18n/pt-br.toml +++ b/i18n/pt-br.toml @@ -37,3 +37,11 @@ href="https://creativecommons.org/licenses/by-sa/2.0/" title="CC-BY-SA"> CC-BY-SA</a>. """ +[bio] +other = """ + + Escrevo código para pagar as contas. Eu faço coisas aleatórias + porque tenho muitas substâncias químicas no meu cérebro. + As vezes eu atiro palavras nesse blog. + +""" diff --git a/layouts/blog/single.html b/layouts/blog/single.html index fe59ebc38d672f715b53d602780893c6ad0ce021..01e8ae37250e7ec1ee72e3f165a109028b4545a0 100644 --- a/layouts/blog/single.html +++ b/layouts/blog/single.html @@ -1,21 +1,42 @@ -{{ partial "head.html" . }} +{{ partial "basic.html" . }} <main> - <div class="inner-article-title"> - <div class="inner-article-date"> - {{ partial "time.html" . }} - · {{ .FuzzyWordCount }} {{ i18n "words" }} + <div class="page-content"> + <div class="index-header text-center"> + <a href="{{.Site.BaseURL}}" class="header-text text-subtle"> + <img class="avatar" src="/avatar.jpg" size="50x50"> + <p class="text-small text-uppercase text-spaced">{{.Site.Title}}</p> + </a> + + <div class="divisor"></div> </div> - <h1> - {{ $.Title }} - </h1> - </div> + + <div class="inner-article-title text-center"> + <div class="inner-article-date text-x-small text-subtle"> + {{ partial "time.html" . }} + · {{ .FuzzyWordCount }} {{ i18n "words" }} + </div> + <h1> + {{ $.Title }} + </h1> + </div> + + {{ partial "translations.html" . }} + + <article> + {{ .Content }} + </article> + + <div class="article-footer text-center"> + <div class="divisor"></div> + + <p class="pt-2 text-small text-spaced text-uppercase">About me</p> + + {{ partial "bio.html" . }} - {{ partial "translations.html" . }} + <div class="divisor mb-3"></div> - <article> - {{ .Content }} - </article> + {{ partial "footer.html" . }} + </div> + </div> </main> - -{{ partial "footer.html" . }} diff --git a/layouts/index.html b/layouts/index.html index 6a1a16489e4008a4057204f573a131244445d6c4..2c2bc86ff3c6bb8d9667de26687de180d44a876b 100644 --- a/layouts/index.html +++ b/layouts/index.html @@ -1,34 +1,39 @@ -{{ partial "head.html" . }} +{{ partial "basic.html" . }} <main class="index"> - <div class="languages"> - {{ partial "available-lang.html" . }} - </div> - <section class="article-list"> - {{ range (where (where (where .Site.RegularPages "Section" "blog") "Params.nohtml" "!=" "true") "draft" "!=" "true" ) }} - <div class="article"> + <div class="page-content"> + {{ partial "head.html" . }} + + <div class="languages"> + {{ partial "available-lang.html" . }} + </div> + + <section class="article-list"> + {{ range (where (where (where .Site.RegularPages "Section" "blog") "Params.nohtml" "!=" "true") "draft" "!=" "true" ) }} + <div class="article"> + <div class="article-title"> + <div class="article-date text-small text-subtle"> + {{ partial "time.html" . }} + </div> - <div class="article-title"> - <a href="{{.Permalink}}"> - <h2>{{.Title}}</h2> - </a> + <a href="{{.Permalink}}"> + <h2>{{.Title}}</h2> + </a> + </div> - <div class="article-date"> - {{ partial "time.html" . }} + <div class="article-snippet"> + {{ .Summary }} </div> </div> + {{ end }} + </section> - <div class="article-snippet"> - {{ .Summary }} + <footer> + <div> + {{ i18n "copyright" | safeHTML }} · + <a title="PGP Key" href="{{ "eletrotupi.txt" | absURL }}">pgp</a> · + <a title="RSS for {{ .Lang }}" href="{{ "index.xml" | absLangURL }}">rss</a> · + <a title="Gemini capsule" href="gemini://gemini.eletrotupi.com/~porcellis">gemini</a> </div> - </div> - {{ end }} - </section> -</main> -<footer> - <div> - {{ i18n "copyright" | safeHTML }} · - <a title="PGP Key" href="{{ "eletrotupi.txt" | absURL }}">pgp</a> · - <a title="RSS for {{ .Lang }}" href="{{ "index.xml" | absLangURL }}">rss</a> · - <a title="Gemini capsule" href="gemini://gemini.eletrotupi.com/~porcellis">gemini</a> + </footer> </div> -</footer> +</main> diff --git a/layouts/partials/basic.html b/layouts/partials/basic.html index 6fdedb627c2f93f4406bd997ffdadbedf9f8ccc4..ff1d683706b9dd8412a03484ffca2eb6c4d99ea2 100644 --- a/layouts/partials/basic.html +++ b/layouts/partials/basic.html @@ -8,6 +8,13 @@ <link rel="icon" type="image/jpeg" href="/avatar.jpg"> {{ $style := resources.Get "style.scss" | resources.ToCSS | resources.Minify | resources.Fingerprint }} <link rel="stylesheet" href="{{ $style.RelPermalink }}" /> - {{ $syntax := resources.Get "syntax.css" | resources.Minify | resources.Fingerprint }} - <link rel="stylesheet" href="{{ $syntax.RelPermalink }}" /> + + <style type="text/css" media="screen"> + @media (prefers-color-scheme: dark) { + {{ partial "css/syntax-dark.css" . | safeCSS }} + } + @media (prefers-color-scheme: light) { + {{ partial "css/syntax-light.css" . | safeCSS }} + } + </style> </head> diff --git a/layouts/partials/bio.html b/layouts/partials/bio.html new file mode 100644 index 0000000000000000000000000000000000000000..06b2d35d56e6c400f42a386410f7efb8d9d3376c --- /dev/null +++ b/layouts/partials/bio.html @@ -0,0 +1,3 @@ +<p class="bio text-small"> +{{ i18n "bio" | safeHTML }} +</p> diff --git a/layouts/partials/css/syntax-dark.css b/layouts/partials/css/syntax-dark.css new file mode 100644 index 0000000000000000000000000000000000000000..24168d48a6f1a0f7a3942f60ba539c9bf5bea1a9 --- /dev/null +++ b/layouts/partials/css/syntax-dark.css @@ -0,0 +1,86 @@ +/* Background */ .bg { color: #c9d1d9; background-color: #0d1117; } +/* PreWrapper */ .chroma { color: #c9d1d9; background-color: #0d1117; } +/* Other */ .chroma .x { } +/* Error */ .chroma .err { color: #f85149 } +/* CodeLine */ .chroma .cl { } +/* LineLink */ .chroma .lnlinks { outline: none; text-decoration: none; color: inherit } +/* LineTableTD */ .chroma .lntd { vertical-align: top; padding: 0; margin: 0; border: 0; } +/* LineTable */ .chroma .lntable { border-spacing: 0; padding: 0; margin: 0; border: 0; } +/* LineHighlight */ .chroma .hl { background-color: #ffffcc } +/* LineNumbersTable */ .chroma .lnt { white-space: pre; -webkit-user-select: none; user-select: none; margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #64686c } +/* 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: #6e7681 } +/* Line */ .chroma .line { display: flex; } +/* Keyword */ .chroma .k { color: #ff7b72 } +/* KeywordConstant */ .chroma .kc { color: #79c0ff } +/* KeywordDeclaration */ .chroma .kd { color: #ff7b72 } +/* KeywordNamespace */ .chroma .kn { color: #ff7b72 } +/* KeywordPseudo */ .chroma .kp { color: #79c0ff } +/* KeywordReserved */ .chroma .kr { color: #ff7b72 } +/* KeywordType */ .chroma .kt { color: #ff7b72 } +/* Name */ .chroma .n { } +/* NameAttribute */ .chroma .na { } +/* NameBuiltin */ .chroma .nb { } +/* NameBuiltinPseudo */ .chroma .bp { } +/* NameClass */ .chroma .nc { color: #f0883e; font-weight: bold } +/* NameConstant */ .chroma .no { color: #79c0ff; font-weight: bold } +/* NameDecorator */ .chroma .nd { color: #d2a8ff; font-weight: bold } +/* NameEntity */ .chroma .ni { color: #ffa657 } +/* NameException */ .chroma .ne { color: #f0883e; font-weight: bold } +/* NameFunction */ .chroma .nf { color: #d2a8ff; font-weight: bold } +/* NameFunctionMagic */ .chroma .fm { } +/* NameLabel */ .chroma .nl { color: #79c0ff; font-weight: bold } +/* NameNamespace */ .chroma .nn { color: #ff7b72 } +/* NameOther */ .chroma .nx { } +/* NameProperty */ .chroma .py { color: #79c0ff } +/* NameTag */ .chroma .nt { color: #7ee787 } +/* NameVariable */ .chroma .nv { color: #79c0ff } +/* NameVariableClass */ .chroma .vc { } +/* NameVariableGlobal */ .chroma .vg { } +/* NameVariableInstance */ .chroma .vi { } +/* NameVariableMagic */ .chroma .vm { } +/* Literal */ .chroma .l { color: #a5d6ff } +/* LiteralDate */ .chroma .ld { color: #79c0ff } +/* LiteralString */ .chroma .s { color: #a5d6ff } +/* LiteralStringAffix */ .chroma .sa { color: #79c0ff } +/* LiteralStringBacktick */ .chroma .sb { color: #a5d6ff } +/* LiteralStringChar */ .chroma .sc { color: #a5d6ff } +/* LiteralStringDelimiter */ .chroma .dl { color: #79c0ff } +/* LiteralStringDoc */ .chroma .sd { color: #a5d6ff } +/* LiteralStringDouble */ .chroma .s2 { color: #a5d6ff } +/* LiteralStringEscape */ .chroma .se { color: #79c0ff } +/* LiteralStringHeredoc */ .chroma .sh { color: #79c0ff } +/* LiteralStringInterpol */ .chroma .si { color: #a5d6ff } +/* LiteralStringOther */ .chroma .sx { color: #a5d6ff } +/* LiteralStringRegex */ .chroma .sr { color: #79c0ff } +/* LiteralStringSingle */ .chroma .s1 { color: #a5d6ff } +/* LiteralStringSymbol */ .chroma .ss { color: #a5d6ff } +/* LiteralNumber */ .chroma .m { color: #a5d6ff } +/* LiteralNumberBin */ .chroma .mb { color: #a5d6ff } +/* LiteralNumberFloat */ .chroma .mf { color: #a5d6ff } +/* LiteralNumberHex */ .chroma .mh { color: #a5d6ff } +/* LiteralNumberInteger */ .chroma .mi { color: #a5d6ff } +/* LiteralNumberIntegerLong */ .chroma .il { color: #a5d6ff } +/* LiteralNumberOct */ .chroma .mo { color: #a5d6ff } +/* Operator */ .chroma .o { color: #ff7b72; font-weight: bold } +/* OperatorWord */ .chroma .ow { color: #ff7b72; font-weight: bold } +/* Punctuation */ .chroma .p { } +/* Comment */ .chroma .c { color: #8b949e; font-style: italic } +/* CommentHashbang */ .chroma .ch { color: #8b949e; font-style: italic } +/* CommentMultiline */ .chroma .cm { color: #8b949e; font-style: italic } +/* CommentSingle */ .chroma .c1 { color: #8b949e; font-style: italic } +/* CommentSpecial */ .chroma .cs { color: #8b949e; font-weight: bold; font-style: italic } +/* CommentPreproc */ .chroma .cp { color: #8b949e; font-weight: bold; font-style: italic } +/* CommentPreprocFile */ .chroma .cpf { color: #8b949e; font-weight: bold; font-style: italic } +/* Generic */ .chroma .g { } +/* GenericDeleted */ .chroma .gd { color: #ffa198; background-color: #490202 } +/* GenericEmph */ .chroma .ge { font-style: italic } +/* GenericError */ .chroma .gr { color: #ffa198 } +/* GenericHeading */ .chroma .gh { color: #79c0ff; font-weight: bold } +/* GenericInserted */ .chroma .gi { color: #56d364; background-color: #0f5323 } +/* GenericOutput */ .chroma .go { color: #8b949e } +/* GenericPrompt */ .chroma .gp { color: #8b949e } +/* GenericStrong */ .chroma .gs { font-weight: bold } +/* GenericSubheading */ .chroma .gu { color: #79c0ff } +/* GenericTraceback */ .chroma .gt { color: #ff7b72 } +/* GenericUnderline */ .chroma .gl { text-decoration: underline } +/* TextWhitespace */ .chroma .w { color: #6e7681 } diff --git a/layouts/partials/css/syntax-light.css b/layouts/partials/css/syntax-light.css new file mode 100644 index 0000000000000000000000000000000000000000..9018df907148662fc70a7233a558156255826726 --- /dev/null +++ b/layouts/partials/css/syntax-light.css @@ -0,0 +1,86 @@ +/* Background */ .bg { background-color: #ffffff; } +/* PreWrapper */ .chroma { background-color: #ffffff; } +/* Other */ .chroma .x { } +/* Error */ .chroma .err { color: #a61717; background-color: #e3d2d2 } +/* CodeLine */ .chroma .cl { } +/* LineLink */ .chroma .lnlinks { outline: none; text-decoration: none; color: inherit } +/* LineTableTD */ .chroma .lntd { vertical-align: top; padding: 0; margin: 0; border: 0; } +/* LineTable */ .chroma .lntable { border-spacing: 0; padding: 0; margin: 0; border: 0; } +/* LineHighlight */ .chroma .hl { background-color: #ffffcc } +/* LineNumbersTable */ .chroma .lnt { white-space: pre; -webkit-user-select: none; user-select: none; margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #7f7f7f } +/* LineNumbers */ .chroma .ln { white-space: pre; -webkit-user-select: none; user-select: none; margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #7f7f7f } +/* Line */ .chroma .line { display: flex; } +/* Keyword */ .chroma .k { color: #000000; font-weight: bold } +/* KeywordConstant */ .chroma .kc { color: #000000; font-weight: bold } +/* KeywordDeclaration */ .chroma .kd { color: #000000; font-weight: bold } +/* KeywordNamespace */ .chroma .kn { color: #000000; font-weight: bold } +/* KeywordPseudo */ .chroma .kp { color: #000000; font-weight: bold } +/* KeywordReserved */ .chroma .kr { color: #000000; font-weight: bold } +/* KeywordType */ .chroma .kt { color: #445588; font-weight: bold } +/* Name */ .chroma .n { } +/* NameAttribute */ .chroma .na { color: #008080 } +/* NameBuiltin */ .chroma .nb { color: #0086b3 } +/* NameBuiltinPseudo */ .chroma .bp { color: #999999 } +/* NameClass */ .chroma .nc { color: #445588; font-weight: bold } +/* NameConstant */ .chroma .no { color: #008080 } +/* NameDecorator */ .chroma .nd { color: #3c5d5d; font-weight: bold } +/* NameEntity */ .chroma .ni { color: #800080 } +/* NameException */ .chroma .ne { color: #990000; font-weight: bold } +/* NameFunction */ .chroma .nf { color: #990000; font-weight: bold } +/* NameFunctionMagic */ .chroma .fm { } +/* NameLabel */ .chroma .nl { color: #990000; font-weight: bold } +/* NameNamespace */ .chroma .nn { color: #555555 } +/* NameOther */ .chroma .nx { } +/* NameProperty */ .chroma .py { } +/* NameTag */ .chroma .nt { color: #000080 } +/* NameVariable */ .chroma .nv { color: #008080 } +/* NameVariableClass */ .chroma .vc { color: #008080 } +/* NameVariableGlobal */ .chroma .vg { color: #008080 } +/* NameVariableInstance */ .chroma .vi { color: #008080 } +/* NameVariableMagic */ .chroma .vm { } +/* Literal */ .chroma .l { } +/* LiteralDate */ .chroma .ld { } +/* LiteralString */ .chroma .s { color: #dd1144 } +/* LiteralStringAffix */ .chroma .sa { color: #dd1144 } +/* LiteralStringBacktick */ .chroma .sb { color: #dd1144 } +/* LiteralStringChar */ .chroma .sc { color: #dd1144 } +/* LiteralStringDelimiter */ .chroma .dl { color: #dd1144 } +/* LiteralStringDoc */ .chroma .sd { color: #dd1144 } +/* LiteralStringDouble */ .chroma .s2 { color: #dd1144 } +/* LiteralStringEscape */ .chroma .se { color: #dd1144 } +/* LiteralStringHeredoc */ .chroma .sh { color: #dd1144 } +/* LiteralStringInterpol */ .chroma .si { color: #dd1144 } +/* LiteralStringOther */ .chroma .sx { color: #dd1144 } +/* LiteralStringRegex */ .chroma .sr { color: #009926 } +/* LiteralStringSingle */ .chroma .s1 { color: #dd1144 } +/* LiteralStringSymbol */ .chroma .ss { color: #990073 } +/* LiteralNumber */ .chroma .m { color: #009999 } +/* LiteralNumberBin */ .chroma .mb { color: #009999 } +/* LiteralNumberFloat */ .chroma .mf { color: #009999 } +/* LiteralNumberHex */ .chroma .mh { color: #009999 } +/* LiteralNumberInteger */ .chroma .mi { color: #009999 } +/* LiteralNumberIntegerLong */ .chroma .il { color: #009999 } +/* LiteralNumberOct */ .chroma .mo { color: #009999 } +/* Operator */ .chroma .o { color: #000000; font-weight: bold } +/* OperatorWord */ .chroma .ow { color: #000000; font-weight: bold } +/* Punctuation */ .chroma .p { } +/* Comment */ .chroma .c { color: #999988; font-style: italic } +/* CommentHashbang */ .chroma .ch { color: #999988; font-style: italic } +/* CommentMultiline */ .chroma .cm { color: #999988; font-style: italic } +/* CommentSingle */ .chroma .c1 { color: #999988; font-style: italic } +/* CommentSpecial */ .chroma .cs { color: #999999; font-weight: bold; font-style: italic } +/* CommentPreproc */ .chroma .cp { color: #999999; font-weight: bold; font-style: italic } +/* CommentPreprocFile */ .chroma .cpf { color: #999999; font-weight: bold; font-style: italic } +/* Generic */ .chroma .g { } +/* GenericDeleted */ .chroma .gd { color: #000000; background-color: #ffdddd } +/* GenericEmph */ .chroma .ge { color: #000000; font-style: italic } +/* GenericError */ .chroma .gr { color: #aa0000 } +/* GenericHeading */ .chroma .gh { color: #999999 } +/* GenericInserted */ .chroma .gi { color: #000000; background-color: #ddffdd } +/* GenericOutput */ .chroma .go { color: #888888 } +/* GenericPrompt */ .chroma .gp { color: #555555 } +/* GenericStrong */ .chroma .gs { font-weight: bold } +/* GenericSubheading */ .chroma .gu { color: #aaaaaa } +/* GenericTraceback */ .chroma .gt { color: #aa0000 } +/* GenericUnderline */ .chroma .gl { text-decoration: underline } +/* TextWhitespace */ .chroma .w { color: #bbbbbb } diff --git a/layouts/partials/head.html b/layouts/partials/head.html index 21b4abf40ccfa2f73137470b3795f794f90af570..8face7032ab5f65f022bfb1b7173b8c3a2449310 100644 --- a/layouts/partials/head.html +++ b/layouts/partials/head.html @@ -1,8 +1,11 @@ {{ partial "basic.html" . }} -<div class="header"> - <div class="header-nav"> - <a href="{{.Site.BaseURL}}"> - <h1>{{.Site.Title}}</h1> - </a> - </div> +<div class="index-header text-center"> + <a href="{{.Site.BaseURL}}" class="header-text text-subtle"> + <img class="avatar" src="/avatar.jpg" size="50x50"> + <p class="text-small text-uppercase text-spaced">{{.Site.Title}}</p> + </a> + + {{ partial "bio.html" . }} + + <div class="divisor"></div> </div>