From d2e7a5403eb668a6cb9177abf25cf6aadab0f734 Mon Sep 17 00:00:00 2001 From: Ian Andwati Date: Thu, 24 Aug 2023 14:26:20 +0300 Subject: [PATCH] Added comments powered by utterances --- config.toml | 1 - sass/_codeblocks.scss | 29 -- sass/_pagination.scss | 16 -- sass/site.scss | 593 ++++++++++++++++++++++------------------ templates/comments.html | 9 + templates/paginate.html | 2 + templates/post.html | 2 + templates/posts.html | 5 - 8 files changed, 343 insertions(+), 314 deletions(-) delete mode 100644 sass/_codeblocks.scss delete mode 100644 sass/_pagination.scss create mode 100644 templates/comments.html diff --git a/config.toml b/config.toml index c2f69f4..580c0e1 100644 --- a/config.toml +++ b/config.toml @@ -15,7 +15,6 @@ highlight_code = true highlight_theme = "gruvbox-dark" [link_checker] -skip_anchor_prefixes = ["https://github.com/"] [extra] author = "Ian Andwati" diff --git a/sass/_codeblocks.scss b/sass/_codeblocks.scss deleted file mode 100644 index 39aeb4b..0000000 --- a/sass/_codeblocks.scss +++ /dev/null @@ -1,29 +0,0 @@ -pre { - display: block; - padding: 0.25rem 1.25rem; - font-size: 85%; - border-left: 0.25rem solid var(--primary-accent-color); - } - - code { - padding: 0 0.4rem; - // background-color: #3c3836; - background-color: var(--inline-code-background-color); - /* Inline code blocks look less aggresive with a little rounding. */ - border-radius: 2px; - } - - pre, code { - overflow: auto; - font-family: var(--default-mono-font); - } - - /* Without this the tag gains a little padding that offsets text by like - 2 pixels. Let's *not* do that. */ - pre > code { - padding: 0; - background-color: var(--code-background-color); - // Code inside a pre block doesn't need rounded borders. - border-radius: unset; - } - \ No newline at end of file diff --git a/sass/_pagination.scss b/sass/_pagination.scss deleted file mode 100644 index a0b436f..0000000 --- a/sass/_pagination.scss +++ /dev/null @@ -1,16 +0,0 @@ -.pagination{ - display: flex; - justify-content: space-between; - align-items: center; - list-style: none; - - .page-item .disabled{ - opacity: 0.5; - pointer-events: none; - } - - .page-numbers{ - font-size: 0.9rem; - color: var(--link-color); - } -} \ No newline at end of file diff --git a/sass/site.scss b/sass/site.scss index f6b85d8..ee34017 100644 --- a/sass/site.scss +++ b/sass/site.scss @@ -4,277 +4,344 @@ - Support footnotes or asides for notes sections. - Serve fonts from the local server rather than Google's API. - Support a "display title" in an [extra] section to allow for
elements - or other manual control over title display. */ - @charset "utf-8"; - @use '_pagination.scss'; - @use '_codeblocks.scss'; - - @import url('https://fonts.googleapis.com/css?family=Noto+Sans|Noto+Serif|Noto+Sans+Mono'); - - - :root { - /* Fonts and Text Sizes */ - --default-serif-font: "Noto Serif", serif; - --default-sans-font: "Noto Sans", sans-serif; - --default-mono-font: "Noto Sans Mono", monospace; - --default-font-size: 16px; - --header-font-size: 2.0em; - /* Not sure I like this as the default, but it keeps inline code blocks from + or other manual control over title display. +*/ + +@charset "utf-8"; +@use "parts/pagination.scss"; +@use "parts/codeblocks.scss"; + +@import url("https://fonts.googleapis.com/css?family=Noto+Sans|Noto+Serif|Noto+Sans+Mono"); + +:root { + /* Fonts and Text Sizes */ + --default-serif-font: "Noto Serif", serif; + --default-sans-font: "Noto Sans", sans-serif; + --default-mono-font: "Noto Sans Mono", monospace; + --default-font-size: 16px; + --header-font-size: 2em; + /* Not sure I like this as the default, but it keeps inline code blocks from overlapping. */ - --default-line-height: 1.5; - - /* Gruvbox Dark Colors */ - --background-color: #1d2021; - --foreground-color: #ebdbb2; - --link-color: #458588; - --muted-color: #928374; - --primary-accent-color: #b16286; - --secondary-accent-color: #689d6a; - --code-background-color: #282828; - --inline-code-background-color: #3c3836; - } - - .accent { - color: var(--primary-accent-color); - } - - /* Required for sticky footer. */ - html, body { - height: 100%; - } - - body { - display: flex; /* Required for sticky footer. */ - flex-direction: column; /* Required for sticky footer. */ - margin: 0; - line-height: var(--default-line-height); - font-size: var(--default-font-size); - font-family: var(--default-serif-font); - background-color: var(--background-color); - color: var(--foreground-color); - border-top: 0.5em solid var(--primary-accent-color); - } - - main { - flex: 1 0 auto; /* Required for sticky footer. */ - } - - /* FIXME: For reasons that utterly bewilder me, an
with this id needs + --default-line-height: 1.5; + + /* Gruvbox Dark Colors */ + --background-color: #1d2021; + --foreground-color: #ebdbb2; + --link-color: #458588; + --muted-color: #928374; + --primary-accent-color: #b16286; + --secondary-accent-color: #689d6a; + --code-background-color: #282828; + --inline-code-background-color: #3c3836; +} + +.accent { + color: var(--primary-accent-color); +} + +/* Required for sticky footer. */ +html, +body { + height: 100%; +} + +body { + display: flex; /* Required for sticky footer. */ + flex-direction: column; /* Required for sticky footer. */ + margin: 0; + line-height: var(--default-line-height); + font-size: var(--default-font-size); + font-family: var(--default-serif-font); + background-color: var(--background-color); + color: var(--foreground-color); + border-top: 0.5em solid var(--primary-accent-color); +} + +main { + flex: 1 0 auto; /* Required for sticky footer. */ +} + +/* FIXME: For reasons that utterly bewilder me, an
with this id needs to be inside a
with no id. I have a strong feeling I've done something wrong here. */ - #content { - max-width: 48em; - margin-left: auto; - margin-right: auto; - padding-right: 1.4em; - padding-left: 1.4em; - padding-bottom: 1.4em; - } - - header { - overflow: hidden; /* FIXME: This WILL cut off titles that are too long! */ - margin-top: 1.4em; - margin-bottom: 1.4em; - margin-left: 1em; - margin-right: 1em; - } - - header > h1 { - text-align: center; - font-size: var(--header-font-size); - font-family: var(--default-sans-font); - padding-top: 2.8rem; - margin-top: 0; - margin-bottom: 0.7rem; - } - - header .post-meta { - text-align: center; - padding-top: 0.5em; - padding-bottom: 0.9em; - margin-bottom: 0; - } - - .post-meta time { - // TODO: This color doesn't look great in with a light color scheme... - color: var(--muted-color); - } - - h2, h3, h4, h5, h6 { - padding-top: 1.2rem; - margin-bottom: 0.2rem; - } - - - p { - padding-top: 0.4em; - margin-bottom: 1em; - } - - blockquote { - /* Default text uses serif, so use sans-serif to differentiate quoted text. */ - font-family: var(--default-sans-font); - font-style: italic; - /* Indent blockquotes, but align the start with where text in code begins. */ - margin: 0 1.25rem; - padding-left: 1.25rem; - padding-right: 1.25rem; - border-left: 3px solid var(--secondary-accent-color); - } - - a { - color: var(--link-color); - text-decoration: none; - } - - /* ---- Anchor links --------------------------------------------------------*/ - - /* Add a # to the left of a subheading when it references an internal link... */ - :where(h2, h3, h4, h5, h6) > a[href^="#"]::before { - content: "#"; - display: inline-block; - width: 1.2rem; - margin-left: -1.2rem; - opacity: 0; - } - - /* ... but only display the internal anchor link when hovered over. */ - :where(h2, h3, h4, h5, h6):hover > a[href^="#"]::before { - opacity: 1; - } - - /* When internal links are linked directly, display with the accent color. */ - :where(h2, h3, h4, h5, h6):target > a[href^="#"]::before { - opacity: 1; - color: var(--primary-accent-color); - } - - /* ---- Media ---------------------------------------------------------------*/ - - img, video { - /* Media should fill the width of its container if possible. */ - width: 100%; - height: auto; - } - - figure { - /* Don't add margins to figures. */ - margin: 0; - } - - figcaption { - /* De-emphasize figure captions. */ - font-size: 0.85rem; - color: var(--muted-color); - } - - /* ---- Tables --------------------------------------------------------------*/ - - table { - /* FIXME: Use flexbox for centering? Frankly, this is still bad on mobile. +#content { + max-width: 48em; + margin-left: auto; + margin-right: auto; + padding-right: 1.4em; + padding-left: 1.4em; + padding-bottom: 1.4em; +} + +header { + overflow: hidden; /* FIXME: This WILL cut off titles that are too long! */ + margin-top: 1.4em; + margin-bottom: 1.4em; + margin-left: 1em; + margin-right: 1em; +} + +header > h1 { + text-align: center; + font-size: var(--header-font-size); + font-family: var(--default-sans-font); + padding-top: 2.8rem; + margin-top: 0; + margin-bottom: 0.7rem; +} + +header .post-meta { + text-align: center; + padding-top: 0.5em; + padding-bottom: 0.9em; + margin-bottom: 0; +} + +.post-meta time { + // TODO: This color doesn't look great in with a light color scheme... + color: var(--muted-color); +} + +h2, +h3, +h4, +h5, +h6 { + padding-top: 1.2rem; + margin-bottom: 0.2rem; +} + +p { + padding-top: 0.4em; + margin-bottom: 1em; +} + +blockquote { + /* Default text uses serif, so use sans-serif to differentiate quoted text. */ + font-family: var(--default-sans-font); + font-style: italic; + /* Indent blockquotes, but align the start with where text in code begins. */ + margin: 0 1.25rem; + padding-left: 1.25rem; + padding-right: 1.25rem; + border-left: 3px solid var(--secondary-accent-color); +} + +a { + color: var(--link-color); + text-decoration: none; +} + +/* ---- Anchor links --------------------------------------------------------*/ + +/* Add a # to the left of a subheading when it references an internal link... */ +:where(h2, h3, h4, h5, h6) > a[href^="#"]::before { + content: "#"; + display: inline-block; + width: 1.2rem; + margin-left: -1.2rem; + opacity: 0; +} + +/* ... but only display the internal anchor link when hovered over. */ +:where(h2, h3, h4, h5, h6):hover > a[href^="#"]::before { + opacity: 1; +} + +/* When internal links are linked directly, display with the accent color. */ +:where(h2, h3, h4, h5, h6):target > a[href^="#"]::before { + opacity: 1; + color: var(--primary-accent-color); +} + +/* ---- Media ---------------------------------------------------------------*/ + +img, +video { + /* Media should fill the width of its container if possible. */ + width: 100%; + height: auto; +} + +figure { + /* Don't add margins to figures. */ + margin: 0; +} + +figcaption { + /* De-emphasize figure captions. */ + font-size: 0.85rem; + color: var(--muted-color); +} + +/* ---- Tables --------------------------------------------------------------*/ + +table { + /* FIXME: Use flexbox for centering? Frankly, this is still bad on mobile. display: flex; justify-content: center; */ - display: block; - overflow-x: auto; - margin-left: auto; - margin-right: auto; - text-align: left; - border-collapse: collapse; - } - - /* Headers in a row (column scoped) get a colored bottom border. */ - th[scope="col"] { - padding-top: 0.4em; - border-bottom: 3px solid var(--secondary-accent-color); - } - - /* Headers in a column (row scoped) get a colored right border. */ - th[scope="row"] { - border-right: 3px solid var(--secondary-accent-color); - } - - td { - text-align: center; - border: 1px solid var(--muted-color); - } - - th, td { - vertical-align: bottom; - padding-left: 0.4em; - padding-right: 0.4em; - border: 1px solid var(--muted-color); - } - - /* ---- Footer, nav, and copyright ------------------------------------------*/ - - footer { - border-top: 0.5em solid var(--primary-accent-color); - text-align: center; - /* FIXME: Using the code background color could look awkward if a post ends + display: block; + overflow-x: auto; + margin-left: auto; + margin-right: auto; + text-align: left; + border-collapse: collapse; +} + +/* Headers in a row (column scoped) get a colored bottom border. */ +th[scope="col"] { + padding-top: 0.4em; + border-bottom: 3px solid var(--secondary-accent-color); +} + +/* Headers in a column (row scoped) get a colored right border. */ +th[scope="row"] { + border-right: 3px solid var(--secondary-accent-color); +} + +td { + text-align: center; + border: 1px solid var(--muted-color); +} + +th, +td { + vertical-align: bottom; + padding-left: 0.4em; + padding-right: 0.4em; + border: 1px solid var(--muted-color); +} + +/* ---- Footer, nav, and copyright ------------------------------------------*/ + +footer { + border-top: 0.5em solid var(--primary-accent-color); + text-align: center; + /* FIXME: Using the code background color could look awkward if a post ends in a code snippet. */ - background-color: var(--code-background-color); - padding: 1.4em; - flex-shrink: 0; /* Required for sticky footer. */ - } - - footer a { - color: var(--secondary-accent-color); - } - - /* Give footer nav links some breathing room. */ - footer > nav > a { - // margin: 0 1.4em; - margin: 0 0.4em; - } - - /* FIXME: This could probably go away with global margin/padding adjustments. */ - footer p { - padding-top: 0; - } - - footer p, footer a { - font-family: var(--default-sans-font); - /* It doesn't seem as though Google fonts support direct usage of OpenType + background-color: var(--code-background-color); + padding: 1.4em; + flex-shrink: 0; /* Required for sticky footer. */ +} + +footer a { + color: var(--secondary-accent-color); +} + +/* Give footer nav links some breathing room. */ +footer > nav > a { + // margin: 0 1.4em; + margin: 0 0.4em; +} + +/* FIXME: This could probably go away with global margin/padding adjustments. */ +footer p { + padding-top: 0; +} + +footer p, +footer a { + font-family: var(--default-sans-font); + /* It doesn't seem as though Google fonts support direct usage of OpenType features like 'c2sc' and 'smcp'. FIXME: It's not clear why numerals don't seem to obey this property. */ - font-variant-caps: all-small-caps; - } - - /* ---- Media Queries ------------------------------------------------------ */ - - @media(min-width: 470px) { - :root { --default-font-size: 17px; } - /* Above this size, increase the header margins. Smaller sizes benefit from + font-variant-caps: all-small-caps; +} + +.pagination { + display: flex; + justify-content: space-between; + align-items: center; + list-style: none; + + .page-item .disabled { + opacity: 0.5; + pointer-events: none; + } + + .page-numbers { + font-size: 0.9rem; + color: var(--link-color); + } +} + +pre { + display: block; + padding: 0.25rem 1.25rem; + font-size: 85%; + border-left: 0.25rem solid var(--primary-accent-color); +} + +code { + padding: 0 0.4rem; + // background-color: #3c3836; + background-color: var(--inline-code-background-color); + /* Inline code blocks look less aggresive with a little rounding. */ + border-radius: 2px; +} + +pre, +code { + overflow: auto; + font-family: var(--default-mono-font); +} + +/* Without this the tag gains a little padding that offsets text by like + 2 pixels. Let's *not* do that. */ +pre > code { + padding: 0; + background-color: var(--code-background-color); + // Code inside a pre block doesn't need rounded borders. + border-radius: unset; +} + +/* ---- Media Queries ------------------------------------------------------ */ + +@media (min-width: 470px) { + :root { + --default-font-size: 17px; + } + /* Above this size, increase the header margins. Smaller sizes benefit from extra breathing room in the title. */ - header { - margin-left: 2.8em; - margin-right: 2.8em; - } - } - - @media(min-width: 625px) { - :root { --default-font-size: 18px; } - } - - @media(min-width: 802px) { - :root { --default-font-size: 19px; } - } - - @media(min-width: 1003px) { - :root { --default-font-size: 20px; } - } - - @media(min-width: 1225px) { - :root { --default-font-size: 21px; } - /* On larger devices, give the anchor link some more space. */ - :where(h2, h3, h4, h5, h6) > a[href^="#"]::before { - width: 1.8rem; - margin-left: -1.8rem; - } - } - - @media(min-width: 1496px) { - :root { --default-font-size: 22px; } - } \ No newline at end of file + header { + margin-left: 2.8em; + margin-right: 2.8em; + } +} + +@media (min-width: 625px) { + :root { + --default-font-size: 18px; + } +} + +@media (min-width: 802px) { + :root { + --default-font-size: 19px; + } +} + +@media (min-width: 1003px) { + :root { + --default-font-size: 20px; + } +} + +@media (min-width: 1225px) { + :root { + --default-font-size: 21px; + } + /* On larger devices, give the anchor link some more space. */ + :where(h2, h3, h4, h5, h6) > a[href^="#"]::before { + width: 1.8rem; + margin-left: -1.8rem; + } +} + +@media (min-width: 1496px) { + :root { + --default-font-size: 22px; + } +} diff --git a/templates/comments.html b/templates/comments.html new file mode 100644 index 0000000..8ec4c53 --- /dev/null +++ b/templates/comments.html @@ -0,0 +1,9 @@ +
+ +
\ No newline at end of file diff --git a/templates/paginate.html b/templates/paginate.html index 947d373..36ff663 100644 --- a/templates/paginate.html +++ b/templates/paginate.html @@ -1,5 +1,6 @@ {% macro paginate() %} {% if paginator %} +
    {% if paginator.previous %}
  • @@ -21,5 +22,6 @@
    • {% endif %}
+
{% endif %} {% endmacro paginate %} diff --git a/templates/post.html b/templates/post.html index ec4d465..4564d36 100644 --- a/templates/post.html +++ b/templates/post.html @@ -29,5 +29,7 @@ {{ page.content | safe }}
+ + {% include "comments.html" %} {% include "footer.html" %} {% endblock content %} diff --git a/templates/posts.html b/templates/posts.html index 420c75c..6642160 100644 --- a/templates/posts.html +++ b/templates/posts.html @@ -7,11 +7,6 @@

Posts

{% for page in paginator.pages %}{{ post_macros::snippet(page=page) }}{% endfor %} - {% if paginator %}{{ paginate_macro::paginate() }}{% endif %} {% include "footer.html" %}