Skip to content

Instantly share code, notes, and snippets.

@drsh0

drsh0/bearblog-theme.css

Last active November 30, 2024 21:16
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save drsh0/0241fb29e5a8a9eb7e85b56b86bc97ac to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save drsh0/0241fb29e5a8a9eb7e85b56b86bc97ac to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. drsh0 revised this gist Nov 30, 2024. 1 changed file with 26 additions and 11 deletions.
    37 changes: 26 additions & 11 deletions bearblog-theme.css
    View file
    Original file line number Diff line number Diff line change
    @@ -5,7 +5,7 @@ Reply via email credit: https://whispered.ink/adding-a-reply-via-email-button-to

    /* base theme: Archie by Bearblog */

    @import url('https://fonts.bunny.net/css?family=JetBrains+Mono&display=swap');
    @import url(https://fonts.bunny.net/css?family=jetbrains-mono:400,400i);

    :root {
    --width: 720px;
    @@ -40,6 +40,16 @@ body {
    word-wrap: break-word;
    overflow-wrap: break-word;
    line-height: 1.5;
    color: var(--text-color); font-family: var(--font-secondary);
    font-size: var(--font-scale);
    margin: auto;
    padding: 20px;
    max-width: var(--width);
    text-align: left;
    background-color: var(--background-color);
    word-wrap: break-word;
    overflow-wrap: break-word;
    line-height: 1.5;
    color: var(--text-color);
    }

    @@ -61,9 +71,8 @@ a {
    border-bottom: 2px solid #88C0D0;
    }


    a::after {
    font-size: 1.3em;
    font-size: 1.1em;
    }

    a:hover {
    @@ -103,8 +112,11 @@ table {
    hr {
    border: 0;
    border-top: 1px dashed;
    margin-top:30px;
    margin-bottom:30px;
    }


    img {
    max-width: 100%;
    }
    @@ -125,18 +137,20 @@ blockquote {
    }

    section.footnotes {
    line-height: 1.4
    line-height: 1.4;
    font-size:0.9em;
    }

    section.footnotes ol li p {
    margin-block-start: 0.5em;
    margin-block-end: 0.5em;

    }

    footer {
    margin-top: 1rem;
    text-align: left;
    font-size:0.9em;
    font-size: 0.9em;

    }

    @@ -248,12 +262,13 @@ page.upvote-button {
    display: none;
    }


    /* source: https://blog.jbowdre.lol/adding-external-link-markers-in-hugo-and-bear/ */

    /* a[href^="http"]:where(:not([href*="life.drsh.io/"]))::after {
    content: "↗"
    } */
    bsky-embed {
    font-family: var(--font-secondary);
    font-size: var(--font-scale);
    text-align: left !important;
    background: inherit;
    color: var(--text-color) !important;
    }

    /* notion-like callouts | credit: https://mgx.me/notion-like-callouts/*/
    .callout {
  2. drsh0 revised this gist Jul 29, 2024. 1 changed file with 170 additions and 134 deletions.
    304 changes: 170 additions & 134 deletions bearblog-theme.css
    View file
    Original file line number Diff line number Diff line change
    @@ -1,38 +1,34 @@
    /* CSS Theme based on https://basementcommunity.bearblog.dev/ */
    /* Font */
    @import url("https://fonts.googleapis.com/css2?family=Libre+Baskerville:wght@400;700&display=block");
    @import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300&display=swap');
    /*
    Reply via email credit: https://whispered.ink/adding-a-reply-via-email-button-to-bearblog/
    */

    /* base theme: Archie by Bearblog */

    @import url('https://fonts.bunny.net/css?family=JetBrains+Mono&display=swap');

    :root {
    --width: 720px;
    --font-main: "Libre Baskerville", Georgia, Cambria, "Times New Roman", Times,
    serif;
    --font-secondary: "Libre Baskerville", Georgia, Cambria, "Times New Roman", Times,
    serif;
    --font-main: 'JetBrains Mono', monospace;
    --font-secondary: 'JetBrains Mono', monospace;
    --font-scale: 1em;
    --background-color: #fff;
    --heading-color: #222;
    --text-color: #444;
    --link-color: #3273dc;
    --visited-color: #8b6fcb;
    --code-background-color: #f2f2f2;
    --code-color: #222;
    --blockquote-color: #222;
    }

    @media (prefers-color-scheme: dark) {
    :root {
    --background-color: #2E3440;
    --heading-color: #ECEFF4;
    --text-color: #E5E9F0;
    --link-color: #88C0D0;
    --visited-color: #B48EAD;
    --code-background-color: #3B4252;
    --code-color: #D8DEE9;
    --blockquote-color: #D8DEE9;
    }
    --background-color: #2E3440;
    --heading-color: #ECEFF4;
    --text-color: #E5E9F0;
    --link-color: #88C0D0;
    --visited-color: #B48EAD;
    --main-color: #4C566A;
    --code-background-color: #171a20;
    --code-color: #E5E9F0;
    --blockquote-color: #D8DEE9;
    --
    }

    mark {
    background-color: #EBCB8B;
    }


    body {
    font-family: var(--font-secondary);
    font-size: var(--font-scale);
    @@ -47,26 +43,47 @@ body {
    color: var(--text-color);
    }

    h1, h2, h3, h4, h5, h6 {
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
    font-family: var(--font-main);
    color: var(--heading-color);
    }

    a {
    color: var(--link-color);
    font-family: var(--font-main);
    cursor: pointer;
    text-decoration: none;
    border-bottom: 2px solid #88C0D0;
    }


    a::after {
    font-size: 1.3em;
    }

    a:hover {
    text-decoration: underline;
    background-color: var(--main-color);
    color: var(--text-color);
    text-decoration: none;
    }

    header {
    margin-bottom: 40px;
    padding-bottom: 20px;
    border-bottom: 3px solid #434C5E;
    }

    nav a {
    margin-right: 8px;
    }

    strong, b {
    strong,
    b {
    color: var(--heading-color);
    }

    @@ -93,25 +110,38 @@ img {
    }

    code {
    font-family: monospace;
    font-family: 'JetBrains Mono', monospace;
    padding: 2px;
    background-color: var(--code-background-color);
    color: var(--code-color);
    border-radius: 3px;
    }

    blockquote {
    border-left: 1px solid #999;
    color: var(--code-color);
    border-left: 1px solid #4C566A;
    color: var(--blockquote-color);
    padding-left: 20px;
    font-style: italic;
    }

    section.footnotes {
    line-height: 1.4
    }

    section.footnotes ol li p {
    margin-block-start: 0.5em;
    margin-block-end: 0.5em;
    }

    footer {
    padding: 25px 0;
    text-align: center;
    font-size: smaller;
    opacity: 0.6;
    margin-top: 1rem;
    text-align: left;
    font-size:0.9em;

    }

    footer a::after {
    display: none;
    }

    .title:hover {
    @@ -126,7 +156,8 @@ footer {
    width: auto !important;
    }

    .highlight, .code {
    .highlight,
    .code {
    padding: 1px 15px;
    background-color: var(--code-background-color);
    color: var(--code-color);
    @@ -140,118 +171,123 @@ footer {
    ul.blog-posts {
    list-style-type: none;
    padding: unset;
    line-height: 1.8;
    }

    ul.blog-posts li {
    display: flex;
    margin-bottom: 10px;
    }

    i time {
    font-style: normal;
    opacity: 0.7;
    }

    ul.blog-posts li span {
    flex: 0 0 130px;
    }


    ul.blog-posts li a:visited {
    color: var(--visited-color);
    }

    table {
    border-spacing: 0;
    }

    div.tags {
    /*border-top: 1px solid rgba(216,222,233,.2);*/
    font-family: 'JetBrains Mono', monospace;
    th,
    td {
    padding: 6px 13px;
    border: 1px solid #dfe2e5;
    font-size: 1em;
    }

    p.tags {
    display: none;
    }

    button {
    font-family: 'JetBrains Mono', monospace;
    }

    ol li::marker {
    font-weight: bold;
    }


    /* This file was generated using `pygmentize -S nord-darker -f html -a .highlight` */
    pre { line-height: 125%; }
    td.linenos .normal { color: #D8DEE9; background-color: #242933; padding-left: 5px; padding-right: 5px; }
    span.linenos { color: #D8DEE9; background-color: #242933; padding-left: 5px; padding-right: 5px; }
    td.linenos .special { color: #242933; background-color: #D8DEE9; padding-left: 5px; padding-right: 5px; }
    span.linenos.special { color: #242933; background-color: #D8DEE9; padding-left: 5px; padding-right: 5px; }
    .highlight .hll { background-color: #3B4252 }
    .highlight { background: #242933; color: #d8dee9 }
    .highlight .c { color: #616e87; font-style: italic } /* Comment */
    .highlight .err { color: #bf616a } /* Error */
    .highlight .esc { color: #d8dee9 } /* Escape */
    .highlight .g { color: #d8dee9 } /* Generic */
    .highlight .k { color: #81a1c1; font-weight: bold } /* Keyword */
    .highlight .l { color: #d8dee9 } /* Literal */
    .highlight .n { color: #d8dee9 } /* Name */
    .highlight .o { color: #81a1c1; font-weight: bold } /* Operator */
    .highlight .x { color: #d8dee9 } /* Other */
    .highlight .p { color: #eceff4 } /* Punctuation */
    .highlight .ch { color: #616e87; font-style: italic } /* Comment.Hashbang */
    .highlight .cm { color: #616e87; font-style: italic } /* Comment.Multiline */
    .highlight .cp { color: #5e81ac; font-style: italic } /* Comment.Preproc */
    .highlight .cpf { color: #616e87; font-style: italic } /* Comment.PreprocFile */
    .highlight .c1 { color: #616e87; font-style: italic } /* Comment.Single */
    .highlight .cs { color: #616e87; font-style: italic } /* Comment.Special */
    .highlight .gd { color: #bf616a } /* Generic.Deleted */
    .highlight .ge { color: #d8dee9; font-style: italic } /* Generic.Emph */
    .highlight .gr { color: #bf616a } /* Generic.Error */
    .highlight .gh { color: #88c0d0; font-weight: bold } /* Generic.Heading */
    .highlight .gi { color: #a3be8c } /* Generic.Inserted */
    .highlight .go { color: #d8dee9 } /* Generic.Output */
    .highlight .gp { color: #616e88; font-weight: bold } /* Generic.Prompt */
    .highlight .gs { color: #d8dee9; font-weight: bold } /* Generic.Strong */
    .highlight .gu { color: #88c0d0; font-weight: bold } /* Generic.Subheading */
    .highlight .gt { color: #bf616a } /* Generic.Traceback */
    .highlight .kc { color: #81a1c1; font-weight: bold } /* Keyword.Constant */
    .highlight .kd { color: #81a1c1; font-weight: bold } /* Keyword.Declaration */
    .highlight .kn { color: #81a1c1; font-weight: bold } /* Keyword.Namespace */
    .highlight .kp { color: #81a1c1 } /* Keyword.Pseudo */
    .highlight .kr { color: #81a1c1; font-weight: bold } /* Keyword.Reserved */
    .highlight .kt { color: #81a1c1 } /* Keyword.Type */
    .highlight .ld { color: #d8dee9 } /* Literal.Date */
    .highlight .m { color: #b48ead } /* Literal.Number */
    .highlight .s { color: #a3be8c } /* Literal.String */
    .highlight .na { color: #8fbcbb } /* Name.Attribute */
    .highlight .nb { color: #81a1c1 } /* Name.Builtin */
    .highlight .nc { color: #8fbcbb } /* Name.Class */
    .highlight .no { color: #8fbcbb } /* Name.Constant */
    .highlight .nd { color: #d08770 } /* Name.Decorator */
    .highlight .ni { color: #d08770 } /* Name.Entity */
    .highlight .ne { color: #bf616a } /* Name.Exception */
    .highlight .nf { color: #88c0d0 } /* Name.Function */
    .highlight .nl { color: #d8dee9 } /* Name.Label */
    .highlight .nn { color: #8fbcbb } /* Name.Namespace */
    .highlight .nx { color: #d8dee9 } /* Name.Other */
    .highlight .py { color: #d8dee9 } /* Name.Property */
    .highlight .nt { color: #81a1c1 } /* Name.Tag */
    .highlight .nv { color: #d8dee9 } /* Name.Variable */
    .highlight .ow { color: #81a1c1; font-weight: bold } /* Operator.Word */
    .highlight .pm { color: #eceff4 } /* Punctuation.Marker */
    .highlight .w { color: #d8dee9 } /* Text.Whitespace */
    .highlight .mb { color: #b48ead } /* Literal.Number.Bin */
    .highlight .mf { color: #b48ead } /* Literal.Number.Float */
    .highlight .mh { color: #b48ead } /* Literal.Number.Hex */
    .highlight .mi { color: #b48ead } /* Literal.Number.Integer */
    .highlight .mo { color: #b48ead } /* Literal.Number.Oct */
    .highlight .sa { color: #a3be8c } /* Literal.String.Affix */
    .highlight .sb { color: #a3be8c } /* Literal.String.Backtick */
    .highlight .sc { color: #a3be8c } /* Literal.String.Char */
    .highlight .dl { color: #a3be8c } /* Literal.String.Delimiter */
    .highlight .sd { color: #616e87 } /* Literal.String.Doc */
    .highlight .s2 { color: #a3be8c } /* Literal.String.Double */
    .highlight .se { color: #ebcb8b } /* Literal.String.Escape */
    .highlight .sh { color: #a3be8c } /* Literal.String.Heredoc */
    .highlight .si { color: #a3be8c } /* Literal.String.Interpol */
    .highlight .sx { color: #a3be8c } /* Literal.String.Other */
    .highlight .sr { color: #ebcb8b } /* Literal.String.Regex */
    .highlight .s1 { color: #a3be8c } /* Literal.String.Single */
    .highlight .ss { color: #a3be8c } /* Literal.String.Symbol */
    .highlight .bp { color: #81a1c1 } /* Name.Builtin.Pseudo */
    .highlight .fm { color: #88c0d0 } /* Name.Function.Magic */
    .highlight .vc { color: #d8dee9 } /* Name.Variable.Class */
    .highlight .vg { color: #d8dee9 } /* Name.Variable.Global */
    .highlight .vi { color: #d8dee9 } /* Name.Variable.Instance */
    .highlight .vm { color: #d8dee9 } /* Name.Variable.Magic */
    .highlight .il { color: #b48ead } /* Literal.Number.Integer.Long */
    footer {
    text-transform: lowercase;
    }
    /* Footer opacity */
    footer {
    opacity: 75%;
    }

    body.home footer #footer-directive a.email {
    display: none;
    }

    body.blog footer #footer-directive a.email {
    display: none;
    }

    body.home footer #footer-directive a.email {
    display: none;
    }

    body.page footer #footer-directive a.email {
    display: none;
    }

    /* remove page upvote buttons */

    /* Add external link indicator src: https://blog.jbowdre.lol/adding-external-link-markers-in-hugo-and-bear/*/

    a[href^="http"]:where(:not([href*="life.drsh.io/"]))::after {
    content: "↗"
    }


    page.upvote-button {
    display: none;
    }


    /* source: https://blog.jbowdre.lol/adding-external-link-markers-in-hugo-and-bear/ */

    /* a[href^="http"]:where(:not([href*="life.drsh.io/"]))::after {
    content: "↗"
    } */

    /* notion-like callouts | credit: https://mgx.me/notion-like-callouts/*/
    .callout {
    font-size:95%;
    border-radius: 3px;
    padding: 16px;
    }
    .grey_callout {
    background: rgba(124,139,154,.13);
    }
    .brown_callout {
    background: rgb(55, 34, 13);
    }
    .orange_callout {
    background: rgb(71, 45, 1);
    }
    .yellow_callout {
    background: rgba(240,165,15,.13);
    }
    .green_callout {
    background: rgba(163,190,140,.25);
    }
    .blue_callout {
    background: rgba(136, 192, 208,.2);
    }
    .purple_callout {
    background: rgba(180, 142, 173,.2);
    }
    .pink_callout {
    background: rgba(225,71,174,.11);
    }
    .red_callout {
    background: rgba(209,46,46,.11);
    }
    .themed_callout {
    background: rgba(76, 86, 106, .7);
    }
  3. drsh0 revised this gist Oct 8, 2023. 1 changed file with 107 additions and 3 deletions.
    110 changes: 107 additions & 3 deletions bearblog-theme.css
    View file
    Original file line number Diff line number Diff line change
    @@ -1,5 +1,7 @@
    /* CSS Theme based on https://basementcommunity.bearblog.dev/ */
    /* Font */
    @import url("https://fonts.googleapis.com/css2?family=Libre+Baskerville:wght@400;700&display=block");
    @import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300&display=swap');

    :root {
    --width: 720px;
    @@ -25,8 +27,8 @@
    --text-color: #E5E9F0;
    --link-color: #88C0D0;
    --visited-color: #B48EAD;
    --code-background-color: #4C566A;
    --code-color: #E5E9F0;
    --code-background-color: #3B4252;
    --code-color: #D8DEE9;
    --blockquote-color: #D8DEE9;
    }
    }
    @@ -109,6 +111,7 @@ footer {
    padding: 25px 0;
    text-align: center;
    font-size: smaller;
    opacity: 0.6;
    }

    .title:hover {
    @@ -150,4 +153,105 @@ ul.blog-posts li span {

    ul.blog-posts li a:visited {
    color: var(--visited-color);
    }
    }


    div.tags {
    /*border-top: 1px solid rgba(216,222,233,.2);*/
    font-family: 'JetBrains Mono', monospace;
    }

    p.tags {
    font-family: 'JetBrains Mono', monospace;
    }

    ol li::marker {
    font-weight: bold;
    }


    /* This file was generated using `pygmentize -S nord-darker -f html -a .highlight` */
    pre { line-height: 125%; }
    td.linenos .normal { color: #D8DEE9; background-color: #242933; padding-left: 5px; padding-right: 5px; }
    span.linenos { color: #D8DEE9; background-color: #242933; padding-left: 5px; padding-right: 5px; }
    td.linenos .special { color: #242933; background-color: #D8DEE9; padding-left: 5px; padding-right: 5px; }
    span.linenos.special { color: #242933; background-color: #D8DEE9; padding-left: 5px; padding-right: 5px; }
    .highlight .hll { background-color: #3B4252 }
    .highlight { background: #242933; color: #d8dee9 }
    .highlight .c { color: #616e87; font-style: italic } /* Comment */
    .highlight .err { color: #bf616a } /* Error */
    .highlight .esc { color: #d8dee9 } /* Escape */
    .highlight .g { color: #d8dee9 } /* Generic */
    .highlight .k { color: #81a1c1; font-weight: bold } /* Keyword */
    .highlight .l { color: #d8dee9 } /* Literal */
    .highlight .n { color: #d8dee9 } /* Name */
    .highlight .o { color: #81a1c1; font-weight: bold } /* Operator */
    .highlight .x { color: #d8dee9 } /* Other */
    .highlight .p { color: #eceff4 } /* Punctuation */
    .highlight .ch { color: #616e87; font-style: italic } /* Comment.Hashbang */
    .highlight .cm { color: #616e87; font-style: italic } /* Comment.Multiline */
    .highlight .cp { color: #5e81ac; font-style: italic } /* Comment.Preproc */
    .highlight .cpf { color: #616e87; font-style: italic } /* Comment.PreprocFile */
    .highlight .c1 { color: #616e87; font-style: italic } /* Comment.Single */
    .highlight .cs { color: #616e87; font-style: italic } /* Comment.Special */
    .highlight .gd { color: #bf616a } /* Generic.Deleted */
    .highlight .ge { color: #d8dee9; font-style: italic } /* Generic.Emph */
    .highlight .gr { color: #bf616a } /* Generic.Error */
    .highlight .gh { color: #88c0d0; font-weight: bold } /* Generic.Heading */
    .highlight .gi { color: #a3be8c } /* Generic.Inserted */
    .highlight .go { color: #d8dee9 } /* Generic.Output */
    .highlight .gp { color: #616e88; font-weight: bold } /* Generic.Prompt */
    .highlight .gs { color: #d8dee9; font-weight: bold } /* Generic.Strong */
    .highlight .gu { color: #88c0d0; font-weight: bold } /* Generic.Subheading */
    .highlight .gt { color: #bf616a } /* Generic.Traceback */
    .highlight .kc { color: #81a1c1; font-weight: bold } /* Keyword.Constant */
    .highlight .kd { color: #81a1c1; font-weight: bold } /* Keyword.Declaration */
    .highlight .kn { color: #81a1c1; font-weight: bold } /* Keyword.Namespace */
    .highlight .kp { color: #81a1c1 } /* Keyword.Pseudo */
    .highlight .kr { color: #81a1c1; font-weight: bold } /* Keyword.Reserved */
    .highlight .kt { color: #81a1c1 } /* Keyword.Type */
    .highlight .ld { color: #d8dee9 } /* Literal.Date */
    .highlight .m { color: #b48ead } /* Literal.Number */
    .highlight .s { color: #a3be8c } /* Literal.String */
    .highlight .na { color: #8fbcbb } /* Name.Attribute */
    .highlight .nb { color: #81a1c1 } /* Name.Builtin */
    .highlight .nc { color: #8fbcbb } /* Name.Class */
    .highlight .no { color: #8fbcbb } /* Name.Constant */
    .highlight .nd { color: #d08770 } /* Name.Decorator */
    .highlight .ni { color: #d08770 } /* Name.Entity */
    .highlight .ne { color: #bf616a } /* Name.Exception */
    .highlight .nf { color: #88c0d0 } /* Name.Function */
    .highlight .nl { color: #d8dee9 } /* Name.Label */
    .highlight .nn { color: #8fbcbb } /* Name.Namespace */
    .highlight .nx { color: #d8dee9 } /* Name.Other */
    .highlight .py { color: #d8dee9 } /* Name.Property */
    .highlight .nt { color: #81a1c1 } /* Name.Tag */
    .highlight .nv { color: #d8dee9 } /* Name.Variable */
    .highlight .ow { color: #81a1c1; font-weight: bold } /* Operator.Word */
    .highlight .pm { color: #eceff4 } /* Punctuation.Marker */
    .highlight .w { color: #d8dee9 } /* Text.Whitespace */
    .highlight .mb { color: #b48ead } /* Literal.Number.Bin */
    .highlight .mf { color: #b48ead } /* Literal.Number.Float */
    .highlight .mh { color: #b48ead } /* Literal.Number.Hex */
    .highlight .mi { color: #b48ead } /* Literal.Number.Integer */
    .highlight .mo { color: #b48ead } /* Literal.Number.Oct */
    .highlight .sa { color: #a3be8c } /* Literal.String.Affix */
    .highlight .sb { color: #a3be8c } /* Literal.String.Backtick */
    .highlight .sc { color: #a3be8c } /* Literal.String.Char */
    .highlight .dl { color: #a3be8c } /* Literal.String.Delimiter */
    .highlight .sd { color: #616e87 } /* Literal.String.Doc */
    .highlight .s2 { color: #a3be8c } /* Literal.String.Double */
    .highlight .se { color: #ebcb8b } /* Literal.String.Escape */
    .highlight .sh { color: #a3be8c } /* Literal.String.Heredoc */
    .highlight .si { color: #a3be8c } /* Literal.String.Interpol */
    .highlight .sx { color: #a3be8c } /* Literal.String.Other */
    .highlight .sr { color: #ebcb8b } /* Literal.String.Regex */
    .highlight .s1 { color: #a3be8c } /* Literal.String.Single */
    .highlight .ss { color: #a3be8c } /* Literal.String.Symbol */
    .highlight .bp { color: #81a1c1 } /* Name.Builtin.Pseudo */
    .highlight .fm { color: #88c0d0 } /* Name.Function.Magic */
    .highlight .vc { color: #d8dee9 } /* Name.Variable.Class */
    .highlight .vg { color: #d8dee9 } /* Name.Variable.Global */
    .highlight .vi { color: #d8dee9 } /* Name.Variable.Instance */
    .highlight .vm { color: #d8dee9 } /* Name.Variable.Magic */
    .highlight .il { color: #b48ead } /* Literal.Number.Integer.Long */
  4. drsh0 created this gist Jul 17, 2023.
    153 changes: 153 additions & 0 deletions bearblog-theme.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,153 @@
    /* Font */
    @import url("https://fonts.googleapis.com/css2?family=Libre+Baskerville:wght@400;700&display=block");

    :root {
    --width: 720px;
    --font-main: "Libre Baskerville", Georgia, Cambria, "Times New Roman", Times,
    serif;
    --font-secondary: "Libre Baskerville", Georgia, Cambria, "Times New Roman", Times,
    serif;
    --font-scale: 1em;
    --background-color: #fff;
    --heading-color: #222;
    --text-color: #444;
    --link-color: #3273dc;
    --visited-color: #8b6fcb;
    --code-background-color: #f2f2f2;
    --code-color: #222;
    --blockquote-color: #222;
    }

    @media (prefers-color-scheme: dark) {
    :root {
    --background-color: #2E3440;
    --heading-color: #ECEFF4;
    --text-color: #E5E9F0;
    --link-color: #88C0D0;
    --visited-color: #B48EAD;
    --code-background-color: #4C566A;
    --code-color: #E5E9F0;
    --blockquote-color: #D8DEE9;
    }
    }

    body {
    font-family: var(--font-secondary);
    font-size: var(--font-scale);
    margin: auto;
    padding: 20px;
    max-width: var(--width);
    text-align: left;
    background-color: var(--background-color);
    word-wrap: break-word;
    overflow-wrap: break-word;
    line-height: 1.5;
    color: var(--text-color);
    }

    h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-main);
    color: var(--heading-color);
    }

    a {
    color: var(--link-color);
    cursor: pointer;
    text-decoration: none;
    }

    a:hover {
    text-decoration: underline;
    }

    nav a {
    margin-right: 8px;
    }

    strong, b {
    color: var(--heading-color);
    }

    button {
    margin: 0;
    cursor: pointer;
    }

    main {
    line-height: 1.6;
    }

    table {
    width: 100%;
    }

    hr {
    border: 0;
    border-top: 1px dashed;
    }

    img {
    max-width: 100%;
    }

    code {
    font-family: monospace;
    padding: 2px;
    background-color: var(--code-background-color);
    color: var(--code-color);
    border-radius: 3px;
    }

    blockquote {
    border-left: 1px solid #999;
    color: var(--code-color);
    padding-left: 20px;
    font-style: italic;
    }

    footer {
    padding: 25px 0;
    text-align: center;
    font-size: smaller;
    }

    .title:hover {
    text-decoration: none;
    }

    .title h1 {
    font-size: 1.5em;
    }

    .inline {
    width: auto !important;
    }

    .highlight, .code {
    padding: 1px 15px;
    background-color: var(--code-background-color);
    color: var(--code-color);
    border-radius: 3px;
    margin-block-start: 1em;
    margin-block-end: 1em;
    overflow-x: auto;
    }

    /* blog post list */
    ul.blog-posts {
    list-style-type: none;
    padding: unset;
    line-height: 1.8;
    }

    ul.blog-posts li {
    display: flex;
    }

    ul.blog-posts li span {
    flex: 0 0 130px;
    }

    ul.blog-posts li a:visited {
    color: var(--visited-color);
    }