diff --git a/.kateproject.notes b/.kateproject.notes index 5aaed1f..ebbc5e4 100644 --- a/.kateproject.notes +++ b/.kateproject.notes @@ -1,9 +1,15 @@ TODO: -Handle main post image and in-article images Integrate est. read time Integrate % done in article Investigate pagination for /blog/ -Add Favicon Integrate recipe structured data for recipe type articles -Consider optimising character count per line \ No newline at end of file + +Performance / Accessibility: +--------------------------------------- +Change contrast color +Lazy load images +Remove unecessary fonts +change font-display to "swap" +Caching +Add explicit image dimensions? \ No newline at end of file diff --git a/_data/metadata.js b/_data/metadata.js index 7342717..a648799 100644 --- a/_data/metadata.js +++ b/_data/metadata.js @@ -6,9 +6,48 @@ module.exports = { description: "The personal website and blog of Nathan Upchurch.", author: { name: "Nathan Upchurch", - email: "youremailaddress@example.com", - url: "https://example.com/about-me/" + email: "blog@upchur.ch", + url: "https://nathanupchurch.com/me", + profilePic: "/img/CN20191025_301_Srt_SQUARE.jpg" }, defaultPostImageURL: "/img/default_post_image/vasilina-sirotina-1NMPvajSt9Q-unsplash_copy.avif", - defaultPostImageAlt: "The default post image: a close picture of the dark green leaves of a plant." + defaultPostImageAlt: "The default post image: a close picture of the dark green leaves of a plant.", + socialLinks: [ + { + title: "Mastodon", + linkURL: "https://mastodon.social/@nathanu", + linkDisplay: "Mastodon", + iconURL: "/img/mastodon.svg" + }, + { + title: "Pixelfed", + linkURL: "https://pixelfed.social/@nathanu", + linkDisplay: "Pixelfed", + iconURL: "/img/pixelfed.svg" + }, + { + title: "Lemmy", + linkURL: "https://lemmy.ml/u/NathanUp", + linkDisplay: "Lemmy", + iconURL: "/img/Lemmy_logo.svg" + }, + { + title: "Matrix", + linkURL: "https://matrix.to/#/@nathanu:matrix.org", + linkDisplay: "Matrix", + iconURL: "/img/matrix-org.svg" + }, + { + title: "Email Me", + linkURL: "Mailto:blog@upchur.ch", + linkDisplay: "Email", + iconURL: "/img/envelope.svg" + }, + { + title: "Keyoxide Identity Profile", + linkURL: "https://keyoxide.org/31E809FAEA1532AC91BBDCF1EC499D3513F69340", + linkDisplay: "Keyoxide Identity Profile", + iconURL: "/img/keyoxide.svg" + } + ] } diff --git a/_includes/layouts/baseBareBones.njk b/_includes/layouts/baseBareBones.njk new file mode 100644 index 0000000..90f190c --- /dev/null +++ b/_includes/layouts/baseBareBones.njk @@ -0,0 +1,37 @@ + + + + + + {{ title or metadata.title }} + + + + + + {#- Bundle CSS #} + {%- css %}{% include "public/css/index.css" %}{% endcss %} + {# {%- css %}{% include "node_modules/prismjs/themes/prism-okaidia.css" %}{% endcss %} #} + + {#- Render the CSS bundle using Inlined CSS (for the fastest site performance in production) #} + + {%- css %}{% include "public/css/webfonts/webfonts.css" %}{% endcss %} + {%- css %}{% include "public/css/dropcap.css" %}{% endcss %} + + + + + +
+ {{ metadata.title }} +
+ +
+ {{ content | safe }} +
+ + + + + + diff --git a/_includes/layouts/links.njk b/_includes/layouts/links.njk new file mode 100644 index 0000000..0c0c9d0 --- /dev/null +++ b/_includes/layouts/links.njk @@ -0,0 +1,13 @@ +--- +layout: layouts/baseBareBones.njk +--- +{%- css %}{% include "public/css/links.css" %}{% endcss %} + +

Nathan Upchurch

+

Here's where else you can find me on the internet.

+ + diff --git a/_includes/layouts/post.njk b/_includes/layouts/post.njk index 0824277..9d5aa66 100644 --- a/_includes/layouts/post.njk +++ b/_includes/layouts/post.njk @@ -24,6 +24,6 @@ layout: layouts/base.njk {%- if previousPost %}
  • Previous: {{ previousPost.data.title }}
    • {% endif %} {%- if nextPost %}
  • Next: {{ nextPost.data.title }}
    • {% endif %} -

    Did this post make you feel happy, sad, or angry? Come praise, cry, or yell at me on Mastodon.

    +

    Questions? Comments? contact me.

    {%- endif %} {%- endif %} diff --git a/content/about/index.md b/content/about/index.md index f383e99..511fce3 100644 --- a/content/about/index.md +++ b/content/about/index.md @@ -5,4 +5,4 @@ eleventyNavigation: order: 3 --- # About the author, Nathan Upchurch. -

    I'm a prolific vegan home cook, classical trombonist, a FLOSS enthusiast, daily GNU/Linux user and unabashed KDE stan, speaker of subpar elementary Spanish, incense enthusiast, writer, electronics hobbyist, designer, programmer, music producer, print lover, and human with too many interests and too little time. This is my personal website and blog.

    Because this is my personal website, I'm not here to talk about work, but I will link my professional bio here when I've gotten around to making it. If you would like to say something nice, you can find me on Mastodon.

    This website is made with 11ty, Manrope, Playfair Display, and plain-old HTML & CSS. I don't collect any of your data, full-stop. No analytics, no "anonymized data," nothing. All webfonts, icons, and images are hosted locally (Instead of by Google, for instance, or any other company which might use them to track you).

    Blogs are the soul of the web! To find more, visit blogroll.org, or ooh.directory.

    +

    I'm a prolific vegan home cook, classical trombonist, a FLOSS enthusiast, daily GNU/Linux user and unabashed KDE stan, speaker of subpar elementary Spanish, incense enthusiast, writer, electronics hobbyist, designer, programmer, music producer, print lover, and human with too many interests and too little time. This is my personal website and blog.

    Because this is my personal website, I'm not here to talk about work, but I will link my professional bio here when I've gotten around to making it. If you would like to say something nice, you can find me on Mastodon.

    This website is made with 11ty, Manrope, Playfair Display, and plain-old HTML & CSS. I don't collect any of your data, full-stop. No analytics, no "anonymized data," nothing. All webfonts, icons, and images are hosted locally (Instead of by Google, for instance, or any other company which might use them to track you).

    Find more blogs at blogroll.org, or ooh.directory. | Keyoxide profile

    diff --git a/content/me/index.md b/content/me/index.md new file mode 100644 index 0000000..f2d83f4 --- /dev/null +++ b/content/me/index.md @@ -0,0 +1,4 @@ +--- +title: Nathan Upchurch +layout: layouts/links.njk +--- diff --git a/public/css/index.css b/public/css/index.css index 87492d3..e80896b 100644 --- a/public/css/index.css +++ b/public/css/index.css @@ -10,6 +10,7 @@ --color-gray-20: #e0e0e0; --color-gray-50: #C0C0C0; --color-gray-90: #333333; + --contrast-color: #027860; --background-color: #FAF5F5; @@ -18,8 +19,6 @@ --text-color-link-active: rgba(3,144,116,1); --text-color-link-visited: var(--color-gray-90); - --contrast-color: rgba(3,144,116,1); - --nav-pill-background-color-active: rgba(3,144,116,1); --nav-pill-background-color-inactive: rgba(71,71,71,1); @@ -31,6 +30,9 @@ --syntax-tab-size: 2; --pill-radius: 5rem; --card-radius: .3rem; + + /* Time */ + --transition-time: .3s; } @media (prefers-color-scheme: dark) { @@ -39,11 +41,12 @@ --color-gray-50: #C0C0C0; --color-gray-90: #dad8d8; --card-color: #333333; + --contrast-color: #04c49e; /* --text-color is assigned to --color-gray-_ above */ - --text-color-link: rgba(3,144,116,1); - --text-color-link-active: rgba(3,144,116,1); - --text-color-link-visited: rgba(3,144,116,1); + --text-color-link: var(--contrast-color); + --text-color-link-active: var(--contrast-color); + --text-color-link-visited: var(--contrast-color); --background-color: #15202b; } @@ -368,17 +371,27 @@ header { } /* Tags */ -.post-tag, .taglist li a { +.post-tag, a.post-tag, .taglist li a { display: inline-flex; align-items: center; + color: var(--nav-pill-text-color); justify-content: center; text-transform: capitalize; - background-color: var(--color-gray-20); + background-color: var(--nav-pill-background-color-inactive); text-decoration: none; padding: .2rem .4rem .2rem .4rem; border-radius: var(--pill-radius); font-size: .75rem; } + +a.post-tag:visited { + color: var(--nav-pill-text-color); +} + +a.post-tag:hover { + color: var(--nav-pill-text-color); +} + .taglist { list-style-type: none; padding-left: 0; diff --git a/public/css/links.css b/public/css/links.css new file mode 100644 index 0000000..39b4c98 --- /dev/null +++ b/public/css/links.css @@ -0,0 +1,56 @@ +html.barebones, body.barebones { + background-color: var(--background-color); + text-align: center; +} + +h1.socialTitle { + padding-top: 0; + margin-top: 0; + margin-bottom: .25em; +} + +img.profilePic { + max-width: 15em; + border-radius: 50%; + border: solid 5px var(--text-color); +} + +p.page-block.nodropcap { + margin-top: 0; +} + +ul.socialLinks { + padding-left: 0; + display: flex; + flex-flow: column nowrap; + align-items: center; +} + +.socialLinks li { + background-color: var(--nav-pill-background-color-inactive); + color: var(--nav-pill-text-color); + border-radius: var(--pill-radius); + padding: .5em; + margin-bottom: 1em; + list-style-type: none; + transition: all var(--transition-time); + width: 20em; + display: flex; + flex-flow: row nowrap; + align-items: center; + justify-content: center; +} + +.socialLinks li:hover { + background-color: var(--contrast-color); + transform: scale(1.05, 1.05); +} + +.socialLinks a { + text-decoration: none; +} + +.socialLinks a img { + max-width: 1em; + margin-right: .5em; +} diff --git a/public/img/CN20191025_301_Srt_SQUARE.jpg b/public/img/CN20191025_301_Srt_SQUARE.jpg new file mode 100755 index 0000000..be2ad6e Binary files /dev/null and b/public/img/CN20191025_301_Srt_SQUARE.jpg differ diff --git a/public/img/Lemmy_logo.svg b/public/img/Lemmy_logo.svg new file mode 100644 index 0000000..23f7f3f --- /dev/null +++ b/public/img/Lemmy_logo.svg @@ -0,0 +1,51 @@ + + + + + + + + + + diff --git a/public/img/envelope-o.svg b/public/img/envelope-o.svg new file mode 100644 index 0000000..16557b6 --- /dev/null +++ b/public/img/envelope-o.svg @@ -0,0 +1,32 @@ + + + + + + diff --git a/public/img/envelope.svg b/public/img/envelope.svg new file mode 100644 index 0000000..9e57118 --- /dev/null +++ b/public/img/envelope.svg @@ -0,0 +1,32 @@ + + + + + + diff --git a/public/img/keyoxide.svg b/public/img/keyoxide.svg new file mode 100644 index 0000000..50c606b --- /dev/null +++ b/public/img/keyoxide.svg @@ -0,0 +1,105 @@ + + diff --git a/public/img/mastodon.svg b/public/img/mastodon.svg new file mode 100644 index 0000000..97548e0 --- /dev/null +++ b/public/img/mastodon.svg @@ -0,0 +1,33 @@ + + + + + + diff --git a/public/img/matrix-org.svg b/public/img/matrix-org.svg new file mode 100644 index 0000000..3a35d87 --- /dev/null +++ b/public/img/matrix-org.svg @@ -0,0 +1,33 @@ + + + + + + diff --git a/public/img/pixelfed.svg b/public/img/pixelfed.svg new file mode 100644 index 0000000..df82edc --- /dev/null +++ b/public/img/pixelfed.svg @@ -0,0 +1,34 @@ + + + + + +