From c390d3936917668bfdea2aa2f7acdcd32dc0746d Mon Sep 17 00:00:00 2001 From: Cassie Jones Date: Sun, 27 Oct 2024 11:32:30 -0700 Subject: [PATCH] Update the attribution info and add avatars --- _includes/layouts/post.njk | 27 ++++++++-------- _includes/style.css | 66 ++++++++++++++++++++++++++------------ index.njk | 26 ++++++++++++--- 3 files changed, 80 insertions(+), 39 deletions(-) diff --git a/_includes/layouts/post.njk b/_includes/layouts/post.njk index 0ffe6ee..44067aa 100644 --- a/_includes/layouts/post.njk +++ b/_includes/layouts/post.njk @@ -2,29 +2,30 @@ layout: "layouts/layout.njk" permalink: "/{{ page.date | date('yyyy') }}/{{ page.fileSlug }}/index.html" --- -
+
-

{{ title }}

+

{{ title }}

{% if summary %}{% endif %} - -
+
+ + {# TODO: Add actual author information #} + By Cassie Jones, + + + + + {% if published %} -Published + {%- if updated -%} , Updated {% endif %} -
-{# TODO: Add actual author information #} -
- - - - +
diff --git a/_includes/style.css b/_includes/style.css index 0aa207a..e56dc43 100644 --- a/_includes/style.css +++ b/_includes/style.css @@ -1,11 +1,18 @@ /* Basic reset */ * { box-sizing: border-box; } +:root { + --background: ; + --hl-background: #f5f2f0; + --text: #444; + --dim-text: #666; + --highlight: #f78123; +} -/* Page structure */ -html { font-size: 1.4em; line-height: 1.5; color: #444; font-family: "Palatino Linotype", Palatino, serif; } -body { padding: 1em; max-width: 700px; margin: 0 auto; min-height: 100vh; } -header { margin-bottom: 1em; } -footer { margin-top: 1em; } +/* Page container */ +html { font-size: 1.4em; line-height: 1.5; color: var(--text); font-family: "Palatino Linotype", Palatino, serif; } +body { padding: 1rem; max-width: 700px; margin: 0 auto; min-height: 100vh; } +header { margin-bottom: 1rem; } +footer { margin-top: 1rem; } /* Typography */ h1 { margin: 0; } @@ -21,21 +28,38 @@ p { hanging-punctuation: first allow-end last; } /* Links */ -.c-sun { color: #f78123; } +.c-sun { color: var(--highlight); } .dec-none { text-decoration: none; } -@media (min-width: 825px) { .header-anchor { margin-left: -1em; } } +@media (min-width: 825px) { .header-anchor { margin-left: -1rem; } } blockquote { border-left: solid 10px #bbb; - padding-left: 1em; - margin-left: 1em; + padding-left: 1rem; + margin-left: 1rem; font-style: italic; } +/* Page structure */ +article.post header h2 a { color: var(--highlight); } +article.post header .info { font-size: 0.75rem; color: var(--dim-text); } +/* Links in the header don't need color */ +article.post header a { color: inherit; } + +img.avatar { width: 64px; } +img.avatar.square { border-radius: 8px; } + +article.post header { position: relative; } +article.post header img.avatar { + position: absolute; + /* Optical alignment, eyeballed */ + top: 4px; + right: calc(100% + 0.5rem); +} + /* Figures */ /* @TODO: Make this width managing simpler? */ img { max-width: 800px; border-radius: 4px; background: #f5f2f0; } -@media (max-width: 825px) { img { max-width: calc(100vw - 1em); } } +@media (max-width: 825px) { img { max-width: calc(100vw - 1rem); } } figure { margin: 0; } figcaption > :first-child, aside > :first-child { margin-top: 0; } figcaption > :last-child, aside > :first-child { margin-bottom: 0; } @@ -44,14 +68,14 @@ figcaption { font-style: italic; } aside { border: 1px solid black; - padding: 0.75em; - margin: -0.5em; + padding: 0.75rem; + margin: -0.5rem; border-radius: 4px; } aside.warning { background: #ffecbf; } /* Layout classes */ -.dim { color: #666; } +.dim { color: var(--dim-text); } .row { display: flex; flex-direction: row; } .col { display: flex; flex-direction: column; } .hgroup { display: flex; flex-direction: row; } @@ -62,28 +86,28 @@ aside.warning { background: #ffecbf; } .baseline { align-items: baseline; } .spacer { flex-grow: 1; } .ls-none { list-style: none; padding: 0; margin: 0; } -.im-icon { background: none; width: 2em; } +.im-icon { background: none; width: 2rem; } .fwrap { flex-wrap: wrap; } .hov-fade:hover { filter: invert(50%); } -.wide-1, .row > .block-1 { display: inline-block; width: 1em; } -.tall-1, .col > .block-1 { display: inline-block; height: 1em; } +.wide-1, .row > .block-1 { display: inline-block; width: 1rem; } +.tall-1, .col > .block-1 { display: inline-block; height: 1rem; } /* Barebones un-highlighted code blocks */ pre > code { overflow: auto; - width: calc(100% + 8em); - margin: 0 -4em; + width: calc(100% + 8rem); + margin: 0 -4rem; display: inline-block; max-width: 100vw; font-size: 18px; box-sizing: border-box; - padding: 1em; + padding: 1rem; border-radius: 6px; - background: #f5f2f0; + background: var(--hl-background); } @media (max-width: 825px) { - pre > code { margin: 0 -1em; width: calc(100% + 2em); } + pre > code { margin: 0 -1rem; width: calc(100% + 2rem); } } .animated-decoration-alt { display: none; } diff --git a/index.njk b/index.njk index 8c9b03e..733813c 100644 --- a/index.njk +++ b/index.njk @@ -4,14 +4,30 @@ eleventyImport: collections: ["posts"] --- {% for post in collections.posts | reverse %} -
+
-

{{ post.data.title }}

+

{{ post.data.title }}

+
+ + {# TODO: Add actual author information #} + By Cassie Jones, + + + + + {% if post.data.published %} - + {%- if post.data.published | hasTime %} at {{ post.data.published | date("HH:mm") }}{% endif -%} + + {%- if post.data.updated -%} + , updated + {% endif %} + +
{% endif %} {% if post.data.summary %} -- 2.47.0