Compare commits
2 Commits
69d7cd1da6
...
26821b48ef
| Author | SHA1 | Date | |
|---|---|---|---|
| 26821b48ef | |||
| fcc91a17d4 |
@ -1,7 +1,7 @@
|
||||
<footer>
|
||||
<p>{% if metadata.copyrightNotice %}<span class="copyright-notice">{{ metadata.copyrightNotice }}</span>{% endif %}
|
||||
|
||||
{% if metadata.webrings %}
|
||||
{% if metadata.webrings %}<br>
|
||||
{% for webring in metadata.webrings %}
|
||||
<span class="webring">
|
||||
{% if webring.previousURL %}<a href="{{ webring.previousURL }}">←</a>{% endif %}
|
||||
|
||||
@ -5,7 +5,6 @@
|
||||
{#- Bundle CSS #}
|
||||
{%- css %}{% include "public/css/index.css" %}{% endcss %}
|
||||
{%- css %}{% include "public/css/webfonts/webfonts.css" %}{% endcss %}
|
||||
{%- css %}{% include "public/css/dropcap.css" %}{% endcss %}
|
||||
<style>{% getBundle "css" %}</style>
|
||||
{% include "structuredData.njk" %}
|
||||
{% include "umami.html" %}
|
||||
@ -13,7 +12,9 @@
|
||||
<body>
|
||||
{% include "header.njk" %}
|
||||
<main id="skip">
|
||||
{{ content | safe }}
|
||||
<section>
|
||||
{{ content | safe }}
|
||||
</section>
|
||||
</main>
|
||||
{% include "footer.njk" %}
|
||||
</body>
|
||||
|
||||
@ -2,13 +2,16 @@
|
||||
layout: layouts/baseBareBones.njk
|
||||
hideNav: please
|
||||
---
|
||||
{%- css %}{% include "public/css/links.css" %}{% endcss %}
|
||||
<img class="profilePic" src="{{ metadata.author.profilePic }}">
|
||||
<h1 class="socialTitle">Nathan Upchurch</h1>
|
||||
<p class="page-block nodropcap">Here's where you can find me on the internet:</p>
|
||||
|
||||
<ul class="socialLinks">
|
||||
{% for link in metadata.socialLinks %}
|
||||
<a class="icon-button" {% if link.customAttribute %} {{ link.customAttribute | safe }} {% endif %} href="{{ link.linkURL }}"><li><img src="{{ link.iconURL }}" />{{ link.linkDisplay }}</li></a>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
{%- css %}{% include "public/css/me.css" %}{% endcss %}
|
||||
<div class="links-container">
|
||||
<img class="profilePic" src="{{ metadata.author.profilePic }}">
|
||||
<h1 class="socialTitle">Nathan Upchurch</h1>
|
||||
<p class="page-block nodropcap">Here's where you can find me on the internet:</p>
|
||||
<div class="socialLinks">
|
||||
{% for link in metadata.socialLinks %}
|
||||
<a class="link-button" {% if link.customAttribute %} {{ link.customAttribute | safe }} {% endif %} href="{{ link.linkURL }}">
|
||||
<button type="button"><img src="{{ link.iconURL }}" />{{ link.linkDisplay }}</button>
|
||||
</a>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -23,7 +23,7 @@ layout: layouts/base.njk
|
||||
<ul>
|
||||
{%- for tag in tags | filterTagList %}
|
||||
{%- set tagUrl %}/tags/{{ tag | slugify }}/{% endset %}
|
||||
<li><a href="{{ tagUrl }}" class="post-tag">{{ tag }}</a></li>
|
||||
<li><a href="{{ tagUrl }}" class="post-tag">{{ tag }} </a></li>
|
||||
{%- endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
@ -31,5 +31,4 @@ layout: layouts/base.njk
|
||||
{{ content | safe }}
|
||||
</article>
|
||||
{% include "mastodonComments.njk" %}
|
||||
<h2>Read Next</h2>
|
||||
{% include "nextLast.njk" %}
|
||||
|
||||
@ -1,12 +1,16 @@
|
||||
{% if mastodon_id %}
|
||||
<section id="comment-section">
|
||||
<section class="" id="comment-section">
|
||||
<h2>Comments</h2>
|
||||
<div class="comment-ingress"></div>
|
||||
<div id="comments" data-id="{{ mastodon_id }}">
|
||||
<p>Loading comments...</p>
|
||||
</div>
|
||||
<div class="continue-discussion">
|
||||
<a class="big-link" href="https://{{ metadata.mastodonHost }}/@{{ metadata.mastodonUser }}/{{ mastodon_id }}">Comment by replying to this post on Mastodon »</a>
|
||||
<a class="link-button" href="https://{{ metadata.mastodonHost }}/@{{ metadata.mastodonUser }}/{{ mastodon_id }}">
|
||||
<button type="button">
|
||||
Comment by replying to this post on Mastodon »
|
||||
</button>
|
||||
</a>
|
||||
</section>
|
||||
|
||||
<template id="comment-template">
|
||||
|
||||
@ -2,7 +2,9 @@
|
||||
<h2 class="visually-hidden">Top level navigation menu</h2>
|
||||
<ul class="nav">
|
||||
{%- for entry in collections.all | eleventyNavigation %}
|
||||
<a class="nav-item" href="{{ entry.url }}"{% if entry.url == page.url %} aria-current="page"{% endif %}><li {% if entry.url == page.url %} data-currentpage="true"{% endif %}>{{ entry.title }}</li></a>
|
||||
<a class="nav-item" href="{{ entry.url }}"{% if entry.url == page.url %} aria-current="page" data-currentpage="true"{% endif %}>
|
||||
<li>{{ entry.title }}</li>
|
||||
</a>
|
||||
{%- endfor %}
|
||||
<a class="nav-item" href="/feed/feed.xml">
|
||||
<li class="subscribe">
|
||||
|
||||
@ -3,41 +3,46 @@
|
||||
{%- set nextPost = collections.posts | getNextCollectionItem %}
|
||||
{%- if nextPost or previousPost %}
|
||||
<section class="links-nextprev">
|
||||
{%- if previousPost %}
|
||||
<article class="postlist-item{% if post.url == url %} postlist-item-active{% endif %}">
|
||||
<a href="{{ previousPost.url }}" class="postlist-link">
|
||||
<div class="post-image-container">
|
||||
<img class="post-image" {% if previousPost.data.imageURL %} src="{{ previousPost.data.imageURL }}" alt="{{ previousPost.data.imageAlt }}" {% else %} src="{{ metadata.defaultPostImageURL }}" alt="{{ metadata.defaultPostImageAlt }}"{% endif %}>
|
||||
</div>
|
||||
</a>
|
||||
<div class="post-copy">
|
||||
<h2>Read Next</h2>
|
||||
<div class="postlist-item-container">
|
||||
{%- if previousPost %}
|
||||
<article class="postlist-item{% if post.url == url %} postlist-item-active{% endif %}">
|
||||
<a href="{{ previousPost.url }}" class="postlist-link">
|
||||
<h3>
|
||||
{% if previousPost.data.title %}<span>Previous Article:</span><br>{{ previousPost.data.title }}{% else %}<code>{{ previousPost.url }}</code>{% endif %}
|
||||
</h3>
|
||||
<div class="post-image-container">
|
||||
<img class="post-image" {% if previousPost.data.imageURL %} src="{{ previousPost.data.imageURL }}" alt="{{ previousPost.data.imageAlt }}" {% else %} src="{{ metadata.defaultPostImageURL }}" alt="{{ metadata.defaultPostImageAlt }}"{% endif %}>
|
||||
</div>
|
||||
</a>
|
||||
<time class="postlist-date" datetime="{{ previousPost.date | htmlDateString }}">{{ previousPost.date | readableDate("LLLL yyyy") }}</time>
|
||||
{% if previousPost.data.synopsis %}<p>{{ previousPost.data.synopsis | truncate(150) | safe }}</p>{% else %}{{ previousPost.content | truncate(150) | safe }}{% endif %}
|
||||
</div>
|
||||
</article>
|
||||
|
||||
{% endif %}
|
||||
{%- if nextPost %}
|
||||
<article class="postlist-item{% if post.url == url %} postlist-item-active{% endif %}">
|
||||
<a href="{{ nextPost.url }}" class="postlist-link">
|
||||
<div class="post-image-container">
|
||||
<img class="post-image" {% if nextPost.data.imageURL %} src="{{ nextPost.data.imageURL }}" alt="{{ nextPost.data.imageAlt }}" {% else %} src="{{ metadata.defaultPostImageURL }}" alt="{{ metadata.defaultPostImageAlt }}"{% endif %}>
|
||||
<div class="post-copy">
|
||||
<a href="{{ previousPost.url }}" class="postlist-link">
|
||||
<p>Previous Article:</p>
|
||||
<h3>
|
||||
{% if previousPost.data.title %}{{ previousPost.data.title }}{% else %}<code>{{ previousPost.url }}</code>{% endif %}
|
||||
</h3>
|
||||
</a>
|
||||
<time class="postlist-date" datetime="{{ previousPost.date | htmlDateString }}">{{ previousPost.date | readableDate("LLLL yyyy") }}</time>
|
||||
{% if previousPost.data.synopsis %}<p>{{ previousPost.data.synopsis | truncate(105) | safe }}</p>{% else %}{{ previousPost.content | truncate(105) | safe }}{% endif %}
|
||||
</div>
|
||||
</a>
|
||||
<div class="post-copy">
|
||||
</article>
|
||||
|
||||
{% endif %}
|
||||
{%- if nextPost %}
|
||||
<article class="postlist-item{% if post.url == url %} postlist-item-active{% endif %}">
|
||||
<a href="{{ nextPost.url }}" class="postlist-link">
|
||||
<h3>
|
||||
{% if nextPost.data.title %}<span>Next Article:</span><br>{{ nextPost.data.title }}{% else %}<code>{{ nextPost.url }}</code>{% endif %}
|
||||
</h3>
|
||||
<div class="post-image-container">
|
||||
<img class="post-image" {% if nextPost.data.imageURL %} src="{{ nextPost.data.imageURL }}" alt="{{ nextPost.data.imageAlt }}" {% else %} src="{{ metadata.defaultPostImageURL }}" alt="{{ metadata.defaultPostImageAlt }}"{% endif %}>
|
||||
</div>
|
||||
</a>
|
||||
<time class="postlist-date" datetime="{{ nextPost.date | htmlDateString }}">{{ nextPost.date | readableDate("LLLL yyyy") }}</time>
|
||||
{% if nextPost.data.synopsis %}<p>{{ nextPost.data.synopsis | truncate(150) | safe }}</p>{% else %}{{ nextPost.content | truncate(150) | safe }}{% endif %}
|
||||
</div>
|
||||
<div class="post-copy">
|
||||
<a href="{{ nextPost.url }}" class="postlist-link">
|
||||
<p>Next Article:</p>
|
||||
<h3>
|
||||
{% if nextPost.data.title %}{{ nextPost.data.title }}{% else %}<code>{{ nextPost.url }}</code>{% endif %}
|
||||
</h3>
|
||||
</a>
|
||||
<time class="postlist-date" datetime="{{ nextPost.date | htmlDateString }}">{{ nextPost.date | readableDate("LLLL yyyy") }}</time>
|
||||
{% if nextPost.data.synopsis %}<p>{{ nextPost.data.synopsis | truncate(105) | safe }}</p>{% else %}{{ nextPost.content | truncate(105) | safe }}{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{% endif %}
|
||||
|
||||
|
||||
@ -15,7 +15,7 @@
|
||||
</h3>
|
||||
</a>
|
||||
<time class="postlist-date" datetime="{{ post.date | htmlDateString }}">{{ post.date | readableDate("LLLL yyyy") }}</time>
|
||||
{% if post.data.synopsis %}<p>{{ post.data.synopsis | truncate(150) | safe }}</p>{% else %}{{ post.content | truncate(150) | safe }}{% endif %}
|
||||
{% if post.data.synopsis %}<p>{{ post.data.synopsis | truncate(105) | safe }}</p>{% else %}{{ post.content | truncate(105) | safe }}{% endif %}
|
||||
</div>
|
||||
</article>
|
||||
{% endfor %}
|
||||
|
||||
@ -4,12 +4,20 @@ eleventyNavigation:
|
||||
key: About
|
||||
order: 3
|
||||
---
|
||||
# Who am I, Anyway?
|
||||
## About Nathan Upchurch and the Website He Made.
|
||||
I'm a prolific vegan home cook, classical trombonist, a <abbr title="Free/Libre Open Source Software">FLOSS</abbr> enthusiast, daily GNU/Linux user and unabashed <a href="https://kde.org/">KDE</a> stan, speaker of subpar elementary Spanish, incense appreciator, writer, electronics hobbyist, designer, programmer, music producer, print lover, and human with too many interests and too little time.
|
||||
<article>
|
||||
<h1>About me and this website I’ve built.</h1>
|
||||
<h2>All about Nathan</h2>
|
||||
<p>I'm a prolific vegan home cook, classical trombonist, a <abbr title="Free/Libre Open Source Software">FLOSS</abbr> enthusiast, daily GNU/Linux user and unabashed <a href="https://kde.org/">KDE</a> stan, speaker of subpar elementary Spanish, incense appreciator, 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, a little corner of the internet where I can talk about whatever I like without worrying about maintaining a 'personal brand,' or constraining subject matter to those topics which might help advance my career or establish me as a 'thought leader' should I choose to write about them. I'm here to express myself as a human and have fun writing about topics I enjoy. If you'd like to learn more about my professional accomplishments and work, I'll link my professional website here soon.
|
||||
This is my personal website and blog, a little corner of the internet where I can talk about whatever I like without worrying about maintaining a ‘personal brand’, or constraining subject matter to those topics which might help advance my career or establish me as a ‘thought leader’. I'm here to express myself as a human and have fun writing about topics I enjoy. If you'd like to learn more about my professional accomplishments and work, I'll link my professional website here soon.</p>
|
||||
|
||||
If you would like to say something nice, ask a question, or simply follow me on the fediverse, <a href="../me">here's where you can find me</a>.
|
||||
<h2>About this website</h2>
|
||||
<p>This website is made with <a href="https://www.11ty.dev/">the 11ty static site generator</a>, free and open source variable typefaces <a href="https://www.gent.media/manrope">Manrope</a> and <a href="https://fraunces.undercase.xyz/">Fraunces</a>, along with plain-old HTML, CSS, and some vanilla JavaScript for the web components that I built to handle comments. I used the handy calculators on <a href="https://utopia.fyi">utopia.fyi</a> to help me implement fluid typography and spacing.
|
||||
|
||||
This website is made with <a href="https://www.11ty.dev/">11ty</a>, <a href="https://www.gent.media/manrope">Manrope</a>, <a href="https://github.com/clauseggers/Playfair">Playfair Display</a>, and plain-old HTML & CSS. I don't collect any of your personal information, full-stop. All webfonts, icons, and images are hosted locally (these things can sometimes be used to <a href="https://www.firstpost.com/world/how-google-uses-fonts-to-track-what-users-do-online-and-sell-data-to-advertisers-12496552.html">track people across the internet</a>). I use <a href="https://umami.is/">umami</a>, an open source, privacy-respecting analytics tool, to see how many people visit this website. Miss when the internet was fun? Find more interesting personal blogs at <a href="https://blogroll.org">blogroll.org</a>, or <a href="https://ooh.directory/">ooh.directory</a>.
|
||||
I don't collect any of your personal information, full-stop. All webfonts, icons, and images are hosted locally (these things can sometimes be used to <a href="https://www.firstpost.com/world/how-google-uses-fonts-to-track-what-users-do-online-and-sell-data-to-advertisers-12496552.html">track people across the internet</a> otherwise). I use <a href="https://umami.is/">umami</a>, an open source, privacy-respecting analytics tool, to see how many people visit this website.
|
||||
|
||||
Miss when the internet was fun? Find more interesting personal blogs at <a href="https://blogroll.org">blogroll.org</a>, or <a href="https://ooh.directory/">ooh.directory</a>.</p>
|
||||
|
||||
<h2>Contact Me</h2>
|
||||
<p>If you would like to say something nice, ask a question, or simply follow me on the fediverse, <a href="../me">here's where you can find me</a>.</p>
|
||||
</article>
|
||||
|
||||
@ -13,5 +13,9 @@ numberOfLatestPostsToShow: 5
|
||||
|
||||
{% set morePosts = postsCount - numberOfLatestPostsToShow %}
|
||||
{% if morePosts > 0 %}
|
||||
<a class="big-link" href="/blog/">See {{ morePosts }} more post{% if morePosts != 1 %}s{% endif %} in the blog »</a>
|
||||
<a class="link-button" href="/blog/">
|
||||
<button type="button">
|
||||
See {{ morePosts }} more post{% if morePosts != 1 %}s{% endif %} in the blog
|
||||
</button>
|
||||
</a>
|
||||
{% endif %}
|
||||
|
||||
@ -10,12 +10,13 @@ numberOfLatestPostsToShow: 4
|
||||
{% set postslist = collections.now | head(-1 * numberOfLatestPostsToShow) %}
|
||||
{% set postslistCounter = postsCount %}
|
||||
{% set morePosts = postsCount - numberOfLatestPostsToShow %}
|
||||
|
||||
<h1>Now: What's Been Going on Lately?</h1>
|
||||
<article>
|
||||
<h1>Now: What’s Been Going on Lately?</h1>
|
||||
{% set now = collections.now | last %}
|
||||
<h2>{{ now.data.title }}</h2>
|
||||
{{ now.content | safe }}
|
||||
<p><br>Updated: {{ now.date | readableDate }} | <a href="https://nownownow.com/about">What is a now page?</a></p>
|
||||
<p class="metadata">Updated: {{ now.date | readableDate }} | <a href="https://nownownow.com/about">What is a now page?</a></p>
|
||||
</article>
|
||||
|
||||
{% if postsCount > 1 %}
|
||||
<h2>Previous Entries:</h2>
|
||||
|
||||
@ -41,5 +41,8 @@ permalink: "/tags/{{ tag | slugify }}/"
|
||||
|
||||
{% set postslist = collections[ tag ] %}
|
||||
{% include "postslist.njk" %}
|
||||
|
||||
<p class="nodropcap">See <a href="/tags/">all tags</a>.</p>
|
||||
<a class="link-button" href="/tags/">
|
||||
<button type="button">
|
||||
See all tags
|
||||
</button>
|
||||
</a>
|
||||
|
||||
@ -1,18 +0,0 @@
|
||||
main > article > p:not(.nodropcap):first-of-type:first-letter {
|
||||
float: left;
|
||||
font-size: 4rem;
|
||||
padding: .5rem .5rem .5rem .5rem;
|
||||
color: var(--contrast-color);
|
||||
border: solid 2px var(--contrast-color);
|
||||
font-family: var(--font-family-headline);
|
||||
font-weight: 700;
|
||||
margin: .25rem .5rem 0 0;
|
||||
border-radius: .2em;
|
||||
border-top-left-radius: 0;
|
||||
}
|
||||
|
||||
@media(max-width: 556px) {
|
||||
main > p:not(.nodropcap):first-of-type:first-letter {
|
||||
font-size: 3rem;
|
||||
}
|
||||
}
|
||||
@ -1,12 +1,49 @@
|
||||
@keyframes slide-in-blurred-bottom {
|
||||
0% {
|
||||
filter: blur(20px);
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
filter: blur(0);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* Defaults */
|
||||
:root {
|
||||
--font-family-headline: 'Playfair Display';
|
||||
--font-family: Manrope;
|
||||
--font-family: "Fraunces", serif;
|
||||
--font-family-headline: "Fraunces", serif;
|
||||
--font-family-ui: "Manrope", sans-serif;
|
||||
--font-variation-default: "opsz" 18, "wght" 310, "SOFT" 40, "WONK" 0;
|
||||
--font-variation-ui: "wght" 500;
|
||||
--font-family-monospace: Consolas, Menlo, Monaco, Andale Mono WT, Andale Mono, Lucida Console, Lucida Sans Typewriter, DejaVu Sans Mono, Bitstream Vera Sans Mono, Liberation Mono, Nimbus Mono L, Courier New, Courier, monospace;
|
||||
--meta-font-size: var(--step--1);
|
||||
--meta-font-style: italic;
|
||||
--meta-font-variation-settings: "opsz" 12, "wght" 310, "SOFT" 40, "WONK" 0;
|
||||
--ui-letter-spacing: var(--space-3xs);
|
||||
}
|
||||
|
||||
/*
|
||||
Font Axes, Fraunces:
|
||||
--------------------
|
||||
opsz: 9-144 (Optical Size)
|
||||
wght: 100-900 (Weight)
|
||||
SOFT: 0-100 (Soften)
|
||||
WONK: 0-1 (Wonk)
|
||||
|
||||
|
||||
Font Axes, Manrope:
|
||||
--------------------
|
||||
wght: 200-900 (Weight)
|
||||
|
||||
*/
|
||||
|
||||
/* Design Tokens */
|
||||
:root {
|
||||
/* Animations */
|
||||
--slide-in-blurred-bottom: slide-in-blurred-bottom 0.75s cubic-bezier(0.230, 1.000, 0.320, 1.000) both;
|
||||
|
||||
/* Colors */
|
||||
--color-gray-20: #e0e0e0;
|
||||
--color-gray-90: #333333;
|
||||
@ -19,6 +56,48 @@
|
||||
--text-color-link: var(--text-color);
|
||||
--text-color-tag: var(--contrast-color);
|
||||
|
||||
/* Font Size Scaling Tokens - https://utopia.fyi/ */
|
||||
--step--2: clamp(0.7813rem, 0.7747rem + 0.0326vi, 0.8rem);
|
||||
--step--1: clamp(0.9375rem, 0.9158rem + 0.1087vi, 1rem);
|
||||
--step-0: clamp(1.125rem, 1.0815rem + 0.2174vi, 1.25rem);
|
||||
--step-1: clamp(1.35rem, 1.2761rem + 0.3696vi, 1.5625rem);
|
||||
--step-2: clamp(1.62rem, 1.5041rem + 0.5793vi, 1.9531rem);
|
||||
--step-3: clamp(1.944rem, 1.771rem + 0.8651vi, 2.4414rem);
|
||||
--step-4: clamp(2.3328rem, 2.0827rem + 1.2504vi, 3.0518rem);
|
||||
--step-5: clamp(2.7994rem, 2.4462rem + 1.7658vi, 3.8147rem);
|
||||
--step-6: clamp(3.3592rem, 2.8691rem + 2.4507vi, 4.7684rem);
|
||||
--step-7: clamp(4.0311rem, 3.36rem + 3.3555vi, 5.9605rem);
|
||||
--step-8: clamp(4.8373rem, 3.9283rem + 4.5448vi, 7.4506rem);
|
||||
|
||||
/* Space Scaling Tokens - https://utopia.fyi/ */
|
||||
--space-3xs: clamp(0.3125rem, 0.3125rem + 0vi, 0.3125rem);
|
||||
--space-2xs: clamp(0.5625rem, 0.5408rem + 0.1087vi, 0.625rem);
|
||||
--space-xs: clamp(0.875rem, 0.8533rem + 0.1087vi, 0.9375rem);
|
||||
--space-s: clamp(1.125rem, 1.0815rem + 0.2174vi, 1.25rem);
|
||||
--space-m: clamp(1.6875rem, 1.6223rem + 0.3261vi, 1.875rem);
|
||||
--space-l: clamp(2.25rem, 2.163rem + 0.4348vi, 2.5rem);
|
||||
--space-xl: clamp(3.375rem, 3.2446rem + 0.6522vi, 3.75rem);
|
||||
--space-2xl: clamp(4.5rem, 4.3261rem + 0.8696vi, 5rem);
|
||||
--space-3xl: clamp(6.75rem, 6.4891rem + 1.3043vi, 7.5rem);
|
||||
|
||||
/* One-up pairs - https://utopia.fyi/ */
|
||||
--space-3xs-2xs: clamp(0.3125rem, 0.2038rem + 0.5435vi, 0.625rem);
|
||||
--space-2xs-xs: clamp(0.5625rem, 0.4321rem + 0.6522vi, 0.9375rem);
|
||||
--space-xs-s: clamp(0.875rem, 0.7446rem + 0.6522vi, 1.25rem);
|
||||
--space-s-m: clamp(1.125rem, 0.8641rem + 1.3043vi, 1.875rem);
|
||||
--space-m-l: clamp(1.6875rem, 1.4049rem + 1.413vi, 2.5rem);
|
||||
--space-l-xl: clamp(2.25rem, 1.7283rem + 2.6087vi, 3.75rem);
|
||||
--space-xl-2xl: clamp(3.375rem, 2.8098rem + 2.8261vi, 5rem);
|
||||
--space-2xl-3xl: clamp(4.5rem, 3.4565rem + 5.2174vi, 7.5rem);
|
||||
|
||||
/* Custom pairs - https://utopia.fyi/ */
|
||||
--space-s-l: clamp(1.125rem, 0.6467rem + 2.3913vi, 2.5rem);
|
||||
|
||||
/* Fluid Grid Tokens - https://utopia.fyi/ */
|
||||
--grid-max-width: 43.75rem;
|
||||
--grid-gutter: var(--space-s-l, clamp(1.125rem, -0.0329rem + 5.7895vw, 2.5rem));
|
||||
--grid-columns: 12;
|
||||
|
||||
/* Change <img> SVG color with filter */
|
||||
--logo-filter: brightness(0) saturate(100%) invert(16%) sepia(0%) saturate(1024%) hue-rotate(177deg) brightness(99%) contrast(88%);
|
||||
--icon-filter: none;
|
||||
@ -26,43 +105,21 @@
|
||||
/* Corners */
|
||||
--border-radius: .3rem;
|
||||
|
||||
/* Space & Size */
|
||||
--syntax-tab-size: 2;
|
||||
--half-gap: .5rem;
|
||||
--single-gap: 1rem;
|
||||
--double-gap: 2rem;
|
||||
--triple-gap: 3rem;
|
||||
--quad-gap: 4rem;
|
||||
|
||||
/* Transitions */
|
||||
--transition-normal: all .3s;
|
||||
|
||||
/* Font Sizes */
|
||||
--font-xxl: 3.75rem;
|
||||
--font-xl: 2rem;
|
||||
--font-l: 1.5rem;
|
||||
--font-n: 1rem;
|
||||
--font-s: .85rem;
|
||||
--font-xs: .65rem;
|
||||
|
||||
/* Font Weights */
|
||||
--weight-extraheavy: 700;
|
||||
--weight-heavy: 500;
|
||||
--weight-normal: 300;
|
||||
|
||||
/* Links */
|
||||
--link-decoration-thickness: .1rem;
|
||||
|
||||
/* Borders */
|
||||
--border-nav: 1px solid var(--text-color);
|
||||
--border-nav-currentpage: 20px solid var(--contrast-color);
|
||||
--border-nav-hover: 20px solid var(--text-color);
|
||||
--border-thin: 1px solid var(--color-gray-20);
|
||||
--border-nav-currentpage: var(--space-xs-s) solid var(--contrast-color);
|
||||
--border-nav-hover: var(--space-xs-s) solid var(--text-color);
|
||||
|
||||
/* Shadow */
|
||||
--box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
|
||||
|
||||
/* Components */
|
||||
/* Web Component Tokens */
|
||||
--wc-card-background-color: var(--card-color);
|
||||
--wc-card-border-radius: var(--border-radius);
|
||||
--wc-card-box-shadow: var(--box-shadow);
|
||||
@ -88,25 +145,14 @@
|
||||
--logo-filter: none;
|
||||
--icon-filter: brightness(0) saturate(100%) invert(9%) sepia(76%) saturate(340%) hue-rotate(168deg) brightness(95%) contrast(94%);
|
||||
}
|
||||
}
|
||||
|
||||
@media(max-width: 556px) {
|
||||
:root {
|
||||
/* Borders */
|
||||
--border-nav-currentpage: 15px solid var(--contrast-color);
|
||||
|
||||
/* Font Sizes */
|
||||
--font-xxl: 2.25rem;
|
||||
--font-xl: 1.5rem;
|
||||
--font-l: 1.5rem;
|
||||
--font-n: 1rem;
|
||||
.socialLinks a li img {
|
||||
filter: auto;
|
||||
}
|
||||
}
|
||||
|
||||
/* Global stylesheet */
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
line-height: calc(1em + 0.5rem);
|
||||
}
|
||||
|
||||
html,
|
||||
@ -114,18 +160,48 @@ body {
|
||||
background-color: var(--background-color);
|
||||
color: var(--text-color);
|
||||
font-family: var(--font-family);
|
||||
font-size: 13px;
|
||||
font-variation-settings: var(--font-variation-default);
|
||||
font-variant-Ligatures: normal;
|
||||
font-weight: var(--weight-normal);
|
||||
margin: 0 auto;
|
||||
padding: 0;
|
||||
}
|
||||
html {
|
||||
font-size: 13px;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
body {
|
||||
max-width: 40em;
|
||||
animation: var(--slide-in-blurred-bottom);
|
||||
font-size: var(--step-0);
|
||||
margin-inline: auto;
|
||||
max-width: var(--grid-max-width);
|
||||
padding-inline: var(--grid-gutter);
|
||||
padding-top: var(--space-m);
|
||||
padding-bottom: var(--space-m);
|
||||
}
|
||||
button, .nav-item {
|
||||
font-family: var(--font-family-ui);
|
||||
}
|
||||
header, footer, main {
|
||||
display: grid;
|
||||
gap: var(--grid-gutter);
|
||||
grid-template-columns: repeat(var(--grid-columns), 1fr);
|
||||
}
|
||||
nav {
|
||||
grid-column: 2 / span 12;
|
||||
}
|
||||
section {
|
||||
display: grid;
|
||||
grid-column: 1 / span 12;
|
||||
}
|
||||
.page-block {
|
||||
grid-column: 1 / span 12;
|
||||
font-size: var(--step-1);
|
||||
margin: 0;
|
||||
padding-bottom: var(--space-xl);
|
||||
padding-top: var(--space-l);
|
||||
line-height: calc(var(--step-1) * 0.5 + var(--step-1));
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration-color: var(--contrast-color);
|
||||
text-decoration-thickness: var(--link-decoration-thickness);
|
||||
@ -142,85 +218,115 @@ a {
|
||||
width: 1px;
|
||||
}
|
||||
footer {
|
||||
margin-top: var(--triple-gap);
|
||||
padding: var(--single-gap);
|
||||
}
|
||||
footer .copyright-notice {
|
||||
padding-right: var(--single-gap);
|
||||
padding: var(--space-xl) 0 var(--space-m) 0;
|
||||
}
|
||||
footer .webring {
|
||||
display: inline-block;
|
||||
padding-right: var(--single-gap);
|
||||
display: inline;
|
||||
padding-right: var(--space-xs);
|
||||
}
|
||||
footer p {
|
||||
font-size: var(--font-s);
|
||||
font-size: var(--step-0);
|
||||
grid-column: 1 / span 12;
|
||||
}
|
||||
h1, h2, h3 {
|
||||
color: var(--text-color);
|
||||
grid-column: 1 / span 12;
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
}
|
||||
h1 {
|
||||
font-family: var(--font-family-headline);
|
||||
font-weight: var(--weight-extraheavy);
|
||||
font-size: var(--font-xxl);
|
||||
font-variation-settings: "opsz" 100, "wght" 500, "SOFT" 10, "WONK" 1;
|
||||
font-size: var(--step-6);
|
||||
font-style: normal;
|
||||
margin-top: var(--triple-gap);
|
||||
margin-bottom: 0;
|
||||
line-height: calc(var(--step-6) * 0.25 + var(--step-6));
|
||||
}
|
||||
h2 {
|
||||
font-size: var(--font-xl);
|
||||
font-weight: var(--weight-extraheavy);
|
||||
margin: var(--quad-gap) auto 0 auto;
|
||||
font-size: var(--step-3);
|
||||
font-variation-settings: "opsz" 50, "wght" 300, "SOFT" 60, "WONK" 1;
|
||||
padding-bottom: var(--space-l);
|
||||
padding-top: var(--space-xl);
|
||||
}
|
||||
h3 {
|
||||
font-size: var(--font-l);
|
||||
}
|
||||
hr {
|
||||
border-top: var(--border-thin);
|
||||
font-size: var(--step-2);
|
||||
}
|
||||
|
||||
.logo {
|
||||
filter: var(--logo-filter);
|
||||
}
|
||||
main { --border-nav-currentpage: 15px solid var(--contrast-color);
|
||||
|
||||
padding: var(--single-gap);
|
||||
main {
|
||||
display: grid;
|
||||
grid-column: 1 / 12;
|
||||
padding-top: var(--space-3xl);
|
||||
}
|
||||
main > p > img, main > p > a > img {
|
||||
width: 100%;
|
||||
padding-top: var(--double-gap);
|
||||
padding-top: var(--space-l);
|
||||
}
|
||||
.post > p {
|
||||
margin: 0;
|
||||
padding-bottom: var(--space-s);
|
||||
}
|
||||
p:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
p, li {
|
||||
font-size: var(--font-n);
|
||||
font-size: var(--step-0);
|
||||
line-height: calc(var(--step-0) * 0.5 + var(--step-0));
|
||||
}
|
||||
figure {
|
||||
margin: 0;
|
||||
padding: var(--single-gap) 0 0 0;
|
||||
padding: var(--space-m) 0 var(--space-m) 0;
|
||||
width: 100%;
|
||||
}
|
||||
figure > a > img {
|
||||
border-radius: 1em;
|
||||
border-top-left-radius: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
box-shadow: .75em .75em 0 0 var(--contrast-color);
|
||||
box-shadow: var(--space-2xs) var(--space-2xs) 0 0 var(--contrast-color);
|
||||
}
|
||||
figcaption {
|
||||
|
||||
html.barebones, body.barebones {
|
||||
background-color: var(--background-color);
|
||||
text-align: center;
|
||||
padding-top: var(--single-gap);
|
||||
}
|
||||
.page-block {
|
||||
margin-bottom: var(--triple-gap);
|
||||
|
||||
figcaption {
|
||||
font-size: var(--meta-font-size);
|
||||
font-style: var(--meta-font-style);
|
||||
font-variation-settings: var(--meta-font-variation-settings);
|
||||
padding-top: var(--space-s);
|
||||
text-align: center;
|
||||
}
|
||||
.big-link {
|
||||
width: 100%;
|
||||
padding: var(--half-gap);
|
||||
border: var(--border-nav);
|
||||
button {
|
||||
background-color: var(--contrast-color);
|
||||
border: none;
|
||||
border-radius: var(--border-radius);
|
||||
margin: var(--single-gap) auto var(--single-gap) auto;
|
||||
color: var(--background-color);
|
||||
font-size: var(--step--2);
|
||||
font-variation-settings: var(--font-variation-ui);
|
||||
letter-spacing: var(--ui-letter-spacing);
|
||||
margin: var(--space-xl) 0 0 0;
|
||||
padding: var(--space-2xs) var(--space-xs);
|
||||
text-transform: uppercase;
|
||||
transition: var(--transition-normal);
|
||||
}
|
||||
.big-link:hover {
|
||||
border-color: var(--contrast-color);
|
||||
button > img {
|
||||
max-width: 1em;
|
||||
margin-right: .5em;
|
||||
filter: var(--icon-filter);
|
||||
}
|
||||
a.link-button {
|
||||
align-items: start;
|
||||
display: flex;
|
||||
grid-column: 1 / span 12;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
}
|
||||
button:hover {
|
||||
background-color: var(--color-gray-90);
|
||||
cursor: pointer;
|
||||
}
|
||||
a[href]:not(.icon-button) {
|
||||
color: var(--text-color-link);
|
||||
@ -233,9 +339,8 @@ a[href]:active:not(.icon-button) {
|
||||
color: var(--contrast-color);
|
||||
}
|
||||
.links-nextprev {
|
||||
list-style: none;
|
||||
padding: 0 0 var(--single-gap) 0;
|
||||
margin-top: var(--single-gap);
|
||||
padding: 0 0 var(--space-m) 0;
|
||||
margin-top: var(--space-m);
|
||||
}
|
||||
|
||||
table {
|
||||
@ -247,23 +352,26 @@ table th {
|
||||
}
|
||||
|
||||
/* Comments */
|
||||
.comment-ingress {
|
||||
margin-bottom: var(--double-gap);
|
||||
#comments {
|
||||
grid-column: 1 / span 12;
|
||||
}
|
||||
#comment-section h2 {
|
||||
margin: var(--quad-gap) auto 0 auto;
|
||||
.continue-discussion {
|
||||
grid-column: 1 / span 12;
|
||||
}
|
||||
.continue-discussion button {
|
||||
margin-top: var(--space-xs);
|
||||
}
|
||||
wc-comment::part(author-link) {
|
||||
font-size: var(--font-n);
|
||||
font-weight: var(--weight-extraheavy);
|
||||
font-size: var(--step-0);
|
||||
text-decoration: none;
|
||||
}
|
||||
wc-comment::part(main) {
|
||||
margin-bottom: var(--double-gap);
|
||||
margin-bottom: var(--space-l);
|
||||
}
|
||||
wc-comment::part(publish-date) {
|
||||
font-weight: var(--weight-heavy);
|
||||
font-size: var(--font-s);
|
||||
font-size: var(--meta-font-size);
|
||||
font-style: var(--meta-font-style);
|
||||
font-variation-settings: var(--font-variation-settings);
|
||||
margin-top: -.25rem;
|
||||
}
|
||||
|
||||
@ -290,26 +398,28 @@ code {
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
/* Dropcap */
|
||||
|
||||
main > section > article > p:not(.nodropcap):first-of-type:first-letter {
|
||||
float: left;
|
||||
font-size: var(--step-6);
|
||||
padding: .5rem .5rem .5rem .5rem;
|
||||
color: var(--contrast-color);
|
||||
border: solid 2px var(--contrast-color);
|
||||
font-family: var(--font-family-headline);
|
||||
font-variation-settings: "opsz" 144, "wght" 500, "SOFT" 10, "WONK" 0;
|
||||
margin: .5rem .7rem 0 0;
|
||||
border-radius: .2em;
|
||||
border-top-left-radius: 0;
|
||||
}
|
||||
|
||||
/* Header */
|
||||
header {
|
||||
align-items: end;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 1em .5em;
|
||||
padding: 1em;
|
||||
header .home-link {
|
||||
display: grid;
|
||||
grid-column: 1 / 1;
|
||||
}
|
||||
.home-link {
|
||||
align-items: end;
|
||||
display: flex;
|
||||
font-size: var(--font-n);
|
||||
font-weight: var(--weight-extraheavy);
|
||||
margin-right: var(--double-gap);
|
||||
}
|
||||
.home-link:link:not(:hover) {
|
||||
text-decoration: none;
|
||||
}
|
||||
.home-link img {
|
||||
width: 3rem;
|
||||
.logo {
|
||||
width: var(--space-l-xl);
|
||||
}
|
||||
|
||||
/* Nav */
|
||||
@ -321,38 +431,42 @@ header {
|
||||
nav ul {
|
||||
align-items: end;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
width: 20rem;
|
||||
justify-content: flex-end;
|
||||
gap: var(--space-xs-s);
|
||||
flex-flow: row wrap;
|
||||
}
|
||||
.nav-icon {
|
||||
fill: var(--color-gray-90);
|
||||
height: .8rem;
|
||||
height: var(--space-2xs);
|
||||
margin-right: .25rem;
|
||||
padding-bottom: .3rem;
|
||||
transition: var(--transition-normal);
|
||||
width: var(--single-gap);
|
||||
width: var(--space-2xs);
|
||||
}
|
||||
.nav-item {
|
||||
display: inline-block;
|
||||
text-decoration: none;
|
||||
border-top: var(--border-nav);
|
||||
}
|
||||
.nav-item li {
|
||||
align-items: end;
|
||||
border-top: var(--border-nav);
|
||||
align-items: baseline;
|
||||
color: var(--text-color);
|
||||
display: flex;
|
||||
font-size: var(--font-xs);
|
||||
font-weight: var(--weight-heavy);
|
||||
height: 2.8rem;
|
||||
margin-right: .5em;
|
||||
font-size: var(--step--2);
|
||||
font-variation-settings: var(--font-variation-ui);
|
||||
height: var(--space-l-xl);
|
||||
margin-bottom: 0;
|
||||
padding-top: var(--space-m);
|
||||
text-transform: uppercase;
|
||||
transition: var(--transition-normal);
|
||||
letter-spacing: .15rem;
|
||||
letter-spacing: var(--ui-letter-spacing);
|
||||
}
|
||||
.nav-item li:hover {
|
||||
.nav-item:hover {
|
||||
border-top: var(--border-nav-hover);
|
||||
}
|
||||
/* Compensate for increased border thickness on hover of a.nav-item */
|
||||
.nav-item:hover li {
|
||||
margin-top: calc(var(--space-xs-s) * -1);
|
||||
}
|
||||
.nav-item a[href]:visited {
|
||||
color: var(--text-color);
|
||||
}
|
||||
@ -365,27 +479,28 @@ nav ul {
|
||||
color: var(--text-color);
|
||||
text-decoration: none;
|
||||
}
|
||||
.nav-item li[data-currentpage="true"] {
|
||||
.nav-item[data-currentpage="true"] {
|
||||
border-top: var(--border-nav-currentpage);
|
||||
color: var(--contrast-color);
|
||||
}
|
||||
.nav a[href][aria-current="page"] {
|
||||
color: var(--text-color);
|
||||
.nav-item[data-currentpage="true"] li {
|
||||
margin-top: calc(var(--space-xs-s) * -1);
|
||||
}
|
||||
.nav a[href][aria-current="page"] li {
|
||||
color: var(--contrast-color);
|
||||
}
|
||||
.subscribe:hover {
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
/* Posts list */
|
||||
.postlist h2 {
|
||||
margin-bottom: var(--double-gap);
|
||||
}
|
||||
.postlist h3 {
|
||||
margin-top: 0;
|
||||
}
|
||||
.postlist-item-container {
|
||||
display: flex;
|
||||
flex-flow: column nowrap;
|
||||
gap: var(--space-xl);
|
||||
}
|
||||
.postlist-item {
|
||||
align-items: flex-start;
|
||||
@ -395,47 +510,59 @@ nav ul {
|
||||
display: flex;
|
||||
flex-flow: row nowrap;
|
||||
justify-content: flex-start;
|
||||
margin-bottom: var(--double-gap);
|
||||
padding: var(--single-gap) 1.1rem var(--single-gap) 1.1rem;
|
||||
padding: var(--space-m) 1.1rem var(--space-m) 1.1rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
|
||||
.postlist, .links-nextprev {
|
||||
container: postlist / inline-size;
|
||||
}
|
||||
|
||||
.post-image-container {
|
||||
border-radius: var(--border-radius);
|
||||
margin-right: var(--single-gap);
|
||||
box-shadow: var(--box-shadow);
|
||||
margin-left: calc(var(--space-l) * -1);
|
||||
max-height: 15rem;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.postlist-date,
|
||||
.postlist-item:before {
|
||||
color: var(--color-gray-90);
|
||||
font-size: var(--font-s); /* 13px /16 */
|
||||
font-size: var(--step--1); /* 13px /16 */
|
||||
}
|
||||
.postlist-date {
|
||||
word-spacing: -0.5px;
|
||||
}
|
||||
.postlist-link {
|
||||
font-size: var(--font-xl); /* 19px /16 */
|
||||
font-weight: var(--weight-extraheavy);
|
||||
font-size: var(--step-5); /* 19px /16 */
|
||||
padding-right: .5em;
|
||||
text-decoration: none;
|
||||
}
|
||||
.postlist-link h3 {
|
||||
font-size: var(--font-l);
|
||||
font-size: var(--step-2);
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.postlist-item-active .postlist-link {
|
||||
font-weight: var(--weight-extraheavy);
|
||||
.postlist-link p {
|
||||
background-color: var(--color-gray-90);
|
||||
border-radius: 100px;
|
||||
color: var(--background-color);
|
||||
font-family: var(--font-family-ui);
|
||||
font-size: var(--step--2);
|
||||
font-variation-settings: var(--font-variation-ui);
|
||||
letter-spacing: var(--space-3xs);
|
||||
margin-top: calc(var(--space-3xs) * -1);
|
||||
padding-left: var(--space-xs);
|
||||
padding-right: var(--space-xs);
|
||||
text-transform: uppercase;
|
||||
width: max-content;
|
||||
}
|
||||
.post-copy {
|
||||
display: flex;
|
||||
flex-flow: column wrap;
|
||||
}
|
||||
.post-copy a h3 span {
|
||||
font-size: var(--font-s);
|
||||
font-weight: var(--weight-normal);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: .15rem;
|
||||
}
|
||||
|
||||
.post-image {
|
||||
width: 15rem;
|
||||
height: 15rem;
|
||||
@ -443,10 +570,33 @@ nav ul {
|
||||
object-position: 50% 50%;
|
||||
}
|
||||
|
||||
@container postlist (max-width: 500px) {
|
||||
.postlist-item {
|
||||
flex-flow: column wrap;
|
||||
}
|
||||
.post-image-container {
|
||||
margin-left: 0;
|
||||
margin-top: calc(var(--space-l) * -1);
|
||||
width: 100%;
|
||||
}
|
||||
.post-image-container img.post-image {
|
||||
width: calc(100cqw - var(--space-m));
|
||||
}
|
||||
.postlist-link {
|
||||
padding: 0;
|
||||
}
|
||||
.postlist-link h3 {
|
||||
padding-top: var(--space-m);
|
||||
}
|
||||
.postlist-link p {
|
||||
margin-top: var(--space-xs);
|
||||
}
|
||||
}
|
||||
|
||||
/* Tags */
|
||||
a.post-tag {
|
||||
color: var(--text-color-tag);
|
||||
padding-right: var(--half-gap);
|
||||
padding-right: var(--space-5xs);
|
||||
text-decoration: none;
|
||||
}
|
||||
a.post-tag:before {
|
||||
@ -462,7 +612,7 @@ a.post-tag:hover {
|
||||
fill: var(--rss-orange);
|
||||
height: 3.5rem;
|
||||
transition: var(--transition-normal);
|
||||
width: var(--double-gap);
|
||||
width: var(--space-l);
|
||||
}
|
||||
.taglist {
|
||||
display: flex;
|
||||
@ -474,28 +624,29 @@ a.post-tag:hover {
|
||||
margin: 0em .5em 1.25em 0em;
|
||||
}
|
||||
.taglist li a {
|
||||
font-size: var(--font-l);
|
||||
font-size: var(--step-2);
|
||||
}
|
||||
|
||||
.postlist-item > .post-tag {
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
/* Article / Post */
|
||||
.post h2 {
|
||||
font-size: var(--font-l);
|
||||
font-size: var(--step-2);
|
||||
}
|
||||
|
||||
/* Post Metadata */
|
||||
.post-metadata {
|
||||
margin-bottom: var(--double-gap);
|
||||
margin-top: var(--single-gap);
|
||||
padding: 0 0 0 .4rem;
|
||||
padding: var(--space-m) 0 var(--space-l) 0;
|
||||
}
|
||||
.post-metadata p, .post-metadata ul, .post-metadata ul li, .post-metadata time {
|
||||
.post-metadata p, .post-metadata ul, .post-metadata ul li, time, .metadata {
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
font-size: var(--font-s);
|
||||
font-weight: var(--weight-heavy);
|
||||
font-size: var(--meta-font-size);
|
||||
font-style: var(--meta-font-style);
|
||||
font-variation-settings: var(--meta-font-variatoin-settings);
|
||||
line-height: calc(var(--step--1) * 0.5 + var(--step--1));
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding-left: 0em;
|
||||
@ -524,110 +675,22 @@ a[href].header-anchor:focus,
|
||||
color: #aaa;
|
||||
}
|
||||
h2 + .header-anchor {
|
||||
font-size: var(--font-l);
|
||||
font-size: var(--step-2);
|
||||
}
|
||||
|
||||
/* Mobile Styles */
|
||||
@media(max-width: 556px) {
|
||||
body {
|
||||
padding: 0rem 1.25rem 0rem 1.25rem;
|
||||
}
|
||||
figcaption {
|
||||
font-size: var(--font-n);
|
||||
}
|
||||
h1 {
|
||||
font-size: var(--font-xxl);
|
||||
margin-top: var(--single-gap);
|
||||
padding-top: 0;
|
||||
}
|
||||
h2, .postlist h2, main h2 {
|
||||
font-size: var(--font-xl);
|
||||
margin-bottom: var(--single-gap);
|
||||
}
|
||||
h3, .post-copy a h3 {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
/* Header */
|
||||
header {
|
||||
padding: 0rem var(--half-gap) var(--single-gap) var(--half-gap);
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.home-link {
|
||||
max-width: 1rem;
|
||||
margin-top: var(--single-gap);
|
||||
}
|
||||
|
||||
/* Footer */
|
||||
footer .webring {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* Nav */
|
||||
.nav {
|
||||
flex-flow: row wrap;
|
||||
}
|
||||
.nav-item {
|
||||
margin-right: var(--half-gap);
|
||||
}
|
||||
.nav-item li {
|
||||
height: 2rem;
|
||||
}
|
||||
.nav-item li:hover {
|
||||
border-top: 2px solid var(--contrast-color);
|
||||
}
|
||||
nav ul {
|
||||
align-items: end;
|
||||
display: flex;
|
||||
flex-flow: row nowrap;
|
||||
justify-content: auto;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
/* Posts List */
|
||||
.postlist {
|
||||
padding-top: 0;
|
||||
}
|
||||
.postlist-item {
|
||||
flex-flow: column wrap;
|
||||
width: 100%
|
||||
}
|
||||
.postlist-link {
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
}
|
||||
.post-image {
|
||||
width: 100%;
|
||||
min-width: 100%;
|
||||
}
|
||||
.post-image-container {
|
||||
margin-right: 0;
|
||||
max-height: 10em;
|
||||
width: 100%;
|
||||
}
|
||||
.post-metadata {
|
||||
margin-bottom: var(--single-gap);
|
||||
}
|
||||
|
||||
p, p.nodropcap, .post-copy p {
|
||||
font-size: var(--font-n);
|
||||
margin-top: var(--single-gap);
|
||||
}
|
||||
.post-metadata time, time.postlist-date {
|
||||
font-size: var(--font-s);
|
||||
}
|
||||
.post-tag, a.post-tag {
|
||||
font-size: var(--font-xs);
|
||||
}
|
||||
.tag-feed-icon {
|
||||
height: 2rem;
|
||||
transition: var(--transition-normal);
|
||||
width: var(--single-gap);
|
||||
}
|
||||
.taglist {
|
||||
flex-flow: column nowrap;
|
||||
}
|
||||
.taglist li a {
|
||||
font-size: var(--font-n);
|
||||
}
|
||||
/* Components */
|
||||
article.post {
|
||||
grid-column: 1 / span 12;
|
||||
}
|
||||
|
||||
/* Utilities */
|
||||
.grid-container {
|
||||
max-width: var(--grid-max-width);
|
||||
padding-inline: var(--grid-gutter);
|
||||
margin-inline: auto;
|
||||
}
|
||||
.grid {
|
||||
display: grid;
|
||||
gap: var(--grid-gutter);
|
||||
grid-template-columns: repeat(var(--grid-columns), 1fr);
|
||||
}
|
||||
|
||||
@ -1,77 +0,0 @@
|
||||
html.barebones, body.barebones {
|
||||
background-color: var(--background-color);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
h1.socialTitle {
|
||||
padding-top: 0;
|
||||
margin-top: 0;
|
||||
font-size: 2.5em;
|
||||
}
|
||||
|
||||
img.profilePic {
|
||||
max-width: 10em;
|
||||
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 a {
|
||||
background-color: var(--color-gray-90);
|
||||
border-radius: var(--corner-radius);
|
||||
padding: .5em;
|
||||
margin-bottom: 1em;
|
||||
list-style-type: none;
|
||||
transition: var(--transition-normal);
|
||||
width: 20em;
|
||||
display: flex;
|
||||
flex-flow: row nowrap;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-decoration: none;
|
||||
color: var(--background-color);
|
||||
}
|
||||
|
||||
.socialLinks a:hover {
|
||||
background-color: var(--contrast-color);
|
||||
transform: scale(1.05, 1.05);
|
||||
}
|
||||
|
||||
.socialLinks a li img {
|
||||
max-width: 1em;
|
||||
margin-right: .5em;
|
||||
filter: var(--icon-filter);
|
||||
}
|
||||
}
|
||||
|
||||
li.iconButton {
|
||||
color: var(--background-color);
|
||||
}
|
||||
|
||||
@media(max-width: 556px) {
|
||||
.socialLinks a {
|
||||
width: 90vw;
|
||||
height: 3rem;
|
||||
display: flex;
|
||||
flex-flow: row nowrap;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.socialLinks a li img {
|
||||
filter: auto;
|
||||
}
|
||||
}
|
||||
29
public/css/me.css
Normal file
29
public/css/me.css
Normal file
@ -0,0 +1,29 @@
|
||||
/* /Me */
|
||||
|
||||
.links-container {
|
||||
grid-column: 1 / span 12;
|
||||
padding: 0 var(--space-3xl);
|
||||
}
|
||||
|
||||
.socialLinks a button {
|
||||
width: 100%;
|
||||
margin: 0 0 var(--space-s) 0;
|
||||
}
|
||||
|
||||
h1.socialTitle {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
font-size: var(--step-4);
|
||||
}
|
||||
|
||||
.links-container p {
|
||||
font-size: var(--step-0);
|
||||
line-height: calc(var(--step-0) * 0.5 + var(--step-0));
|
||||
padding-top: var(--space-3xs);
|
||||
}
|
||||
|
||||
img.profilePic {
|
||||
max-width: var(--space-3xl);
|
||||
border-radius: 50%;
|
||||
border: solid 2px var(--text-color);
|
||||
}
|
||||
BIN
public/css/webfonts/Fraunces-Italic[SOFT,WONK,opsz,wght].woff2
Normal file
BIN
public/css/webfonts/Fraunces-Italic[SOFT,WONK,opsz,wght].woff2
Normal file
Binary file not shown.
BIN
public/css/webfonts/Fraunces[SOFT,WONK,opsz,wght].woff2
Normal file
BIN
public/css/webfonts/Fraunces[SOFT,WONK,opsz,wght].woff2
Normal file
Binary file not shown.
BIN
public/css/webfonts/Manrope[wght].woff2
Normal file
BIN
public/css/webfonts/Manrope[wght].woff2
Normal file
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
@ -1,417 +1,19 @@
|
||||
/* manrope-extralight-latin */
|
||||
@font-face {
|
||||
font-family: Manrope;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
src: local("Manrope ExtraLight"), local("Manrope-ExtraLight"), url(/css/webfonts/manrope-extralight-latin.woff2) format("woff2"), url(/css/webfonts/manrope-extralight-latin.woff) format("woff");
|
||||
unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2212,U+2215;
|
||||
font-weight: 200 900;
|
||||
src: url(/css/webfonts/Manrope[wght].woff2) format("woff2");
|
||||
}
|
||||
/* manrope-extralight-latin-ext */
|
||||
@font-face {
|
||||
font-family: Manrope;
|
||||
font-family: Fraunces;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
src: local("Manrope ExtraLight"), local("Manrope-ExtraLight"), url(/css/webfonts/manrope-extralight-latin-ext.woff2) format("woff2"), url(/css/webfonts/manrope-extralight-latin-ext.woff) format("woff");
|
||||
unicode-range: U+0100-024F,U+0259,U+1E00-1EFF,U+20A0-20CF,U+2C60-2C7F,U+A720-A7FF;
|
||||
font-weight: 100 900;
|
||||
src: url(/css/webfonts/Fraunces[SOFT,WONK,opsz,wght].woff2) format("woff2");
|
||||
}
|
||||
/* manrope-light-latin */
|
||||
@font-face {
|
||||
font-family: Manrope;
|
||||
font-style: normal;
|
||||
font-weight: 300;
|
||||
src: local("Manrope Light"), local("Manrope-Light"), url(/css/webfonts/manrope-light-latin.woff2) format("woff2"), url(/css/webfonts/manrope-light-latin.woff) format("woff");
|
||||
unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2212,U+2215;
|
||||
}
|
||||
/* manrope-light-latin-ext */
|
||||
@font-face {
|
||||
font-family: Manrope;
|
||||
font-style: normal;
|
||||
font-weight: 300;
|
||||
src: local("Manrope Light"), local("Manrope-Light"), url(/css/webfonts/manrope-light-latin-ext.woff2) format("woff2"), url(/css/webfonts/manrope-light-latin-ext.woff) format("woff");
|
||||
unicode-range: U+0100-024F,U+0259,U+1E00-1EFF,U+20A0-20CF,U+2C60-2C7F,U+A720-A7FF;
|
||||
}
|
||||
/* manrope-bold-latin */
|
||||
@font-face {
|
||||
font-family: Manrope;
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
src: local("Manrope Bold"), local("Manrope-Bold"), url(/css/webfonts/manrope-bold-latin.woff2) format("woff2"), url(/css/webfonts/manrope-bold-latin.woff) format("woff");
|
||||
unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2212,U+2215;
|
||||
}
|
||||
/* manrope-bold-latin-ext */
|
||||
@font-face {
|
||||
font-family: Manrope;
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
src: local("Manrope Bold"), local("Manrope-Bold"), url(/css/webfonts/manrope-bold-latin-ext.woff2) format("woff2"), url(/css/webfonts/manrope-bold-latin-ext.woff) format("woff");
|
||||
unicode-range: U+0100-024F,U+0259,U+1E00-1EFF,U+20A0-20CF,U+2C60-2C7F,U+A720-A7FF;
|
||||
}
|
||||
/* manrope-extrabold-latin */
|
||||
@font-face {
|
||||
font-family: Manrope;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
src: local("Manrope ExtraBold"), local("Manrope-ExtraBold"), url(/css/webfonts/manrope-extrabold-latin.woff2) format("woff2"), url(/css/webfonts/manrope-extrabold-latin.woff) format("woff");
|
||||
unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2212,U+2215;
|
||||
}
|
||||
/* manrope-extrabold-latin-ext *//* manrope-extralight-latin */
|
||||
@font-face {
|
||||
font-family: Manrope;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
src: local("Manrope ExtraLight"), local("Manrope-ExtraLight"), url(/css/webfonts/manrope-extralight-latin.woff2) format("woff2"), url(/css/webfonts/manrope-extralight-latin.woff) format("woff");
|
||||
unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2212,U+2215;
|
||||
}
|
||||
/* manrope-extralight-latin-ext */
|
||||
@font-face {
|
||||
font-family: Manrope;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
src: local("Manrope ExtraLight"), local("Manrope-ExtraLight"), url(/css/webfonts/manrope-extralight-latin-ext.woff2) format("woff2"), url(/css/webfonts/manrope-extralight-latin-ext.woff) format("woff");
|
||||
unicode-range: U+0100-024F,U+0259,U+1E00-1EFF,U+20A0-20CF,U+2C60-2C7F,U+A720-A7FF;
|
||||
}
|
||||
/* manrope-light-latin */
|
||||
@font-face {
|
||||
font-family: Manrope;
|
||||
font-style: normal;
|
||||
font-weight: 300;
|
||||
src: local("Manrope Light"), local("Manrope-Light"), url(/css/webfonts/manrope-light-latin.woff2) format("woff2"), url(/css/webfonts/manrope-light-latin.woff) format("woff");
|
||||
unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2212,U+2215;
|
||||
}
|
||||
/* manrope-light-latin-ext */
|
||||
@font-face {
|
||||
font-family: Manrope;
|
||||
font-style: normal;
|
||||
font-weight: 300;
|
||||
src: local("Manrope Light"), local("Manrope-Light"), url(/css/webfonts/manrope-light-latin-ext.woff2) format("woff2"), url(/css/webfonts/manrope-light-latin-ext.woff) format("woff");
|
||||
unicode-range: U+0100-024F,U+0259,U+1E00-1EFF,U+20A0-20CF,U+2C60-2C7F,U+A720-A7FF;
|
||||
}
|
||||
/* manrope-bold-latin */
|
||||
@font-face {
|
||||
font-family: Manrope;
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
src: local("Manrope Bold"), local("Manrope-Bold"), url(/css/webfonts/manrope-bold-latin.woff2) format("woff2"), url(/css/webfonts/manrope-bold-latin.woff) format("woff");
|
||||
unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2212,U+2215;
|
||||
}
|
||||
/* manrope-bold-latin-ext */
|
||||
@font-face {
|
||||
font-family: Manrope;
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
src: local("Manrope Bold"), local("Manrope-Bold"), url(/css/webfonts/manrope-bold-latin-ext.woff2) format("woff2"), url(/css/webfonts/manrope-bold-latin-ext.woff) format("woff");
|
||||
unicode-range: U+0100-024F,U+0259,U+1E00-1EFF,U+20A0-20CF,U+2C60-2C7F,U+A720-A7FF;
|
||||
}
|
||||
/* manrope-extrabold-latin */
|
||||
@font-face {
|
||||
font-family: Manrope;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
src: local("Manrope ExtraBold"), local("Manrope-ExtraBold"), url(/css/webfonts/manrope-extrabold-latin.woff2) format("woff2"), url(/css/webfonts/manrope-extrabold-latin.woff) format("woff");
|
||||
unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2212,U+2215;
|
||||
}
|
||||
/* manrope-extrabold-latin-ext */
|
||||
@font-face {
|
||||
font-family: Manrope;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
src: local("Manrope ExtraBold"), local("Manrope-ExtraBold"), url(/css/webfonts/manrope-extrabold-latin-ext.woff2) format("woff2"), url(/css/webfonts/manrope-extrabold-latin-ext.woff) format("woff");
|
||||
unicode-range: U+0100-024F,U+0259,U+1E00-1EFF,U+20A0-20CF,U+2C60-2C7F,U+A720-A7FF;
|
||||
}
|
||||
/* manrope-medium-latin */
|
||||
@font-face {
|
||||
font-family: Manrope;
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
src: local("Manrope Medium"), local("Manrope-Medium"), url(/css/webfonts/manrope-medium-latin.woff2) format("woff2"), url(/css/webfonts/manrope-medium-latin.woff) format("woff");
|
||||
unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2212,U+2215;
|
||||
}
|
||||
/* manrope-medium-latin-ext */
|
||||
@font-face {
|
||||
font-family: Manrope;
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
src: local("Manrope Medium"), local("Manrope-Medium"), url(/css/webfonts/manrope-medium-latin-ext.woff2) format("woff2"), url(/css/webfonts/manrope-medium-latin-ext.woff) format("woff");
|
||||
unicode-range: U+0100-024F,U+0259,U+1E00-1EFF,U+20A0-20CF,U+2C60-2C7F,U+A720-A7FF;
|
||||
}
|
||||
/* manrope-regular-latin */
|
||||
@font-face {
|
||||
font-family: Manrope;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
src: local("Manrope Regular"), local("Manrope-Regular"), url(/css/webfonts/manrope-regular-latin.woff2) format("woff2"), url(/css/webfonts/manrope-regular-latin.woff) format("woff");
|
||||
unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2212,U+2215;
|
||||
}
|
||||
/* manrope-regular-latin-ext */
|
||||
@font-face {
|
||||
font-family: Manrope;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
src: local("Manrope Regular"), local("Manrope-Regular"), url(/css/webfonts/manrope-regular-latin-ext.woff2) format("woff2"), url(/css/webfonts/manrope-regular-latin-ext.woff) format("woff");
|
||||
unicode-range: U+0100-024F,U+0259,U+1E00-1EFF,U+20A0-20CF,U+2C60-2C7F,U+A720-A7FF;
|
||||
}
|
||||
/* manrope-semibold-latin */
|
||||
@font-face {
|
||||
font-family: Manrope;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
src: local("Manrope SemiBold"), local("Manrope-SemiBold"), url(/css/webfonts/manrope-semibold-latin.woff2) format("woff2"), url(/css/webfonts/manrope-semibold-latin.woff) format("woff");
|
||||
unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2212,U+2215;
|
||||
}
|
||||
/* manrope-semibold-latin-ext */
|
||||
@font-face {
|
||||
font-family: Manrope;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
src: local("Manrope SemiBold"), local("Manrope-SemiBold"), url(/css/webfonts/manrope-semibold-latin-ext.woff2) format("woff2"), url(/css/webfonts/manrope-semibold-latin-ext.woff) format("woff");
|
||||
unicode-range: U+0100-024F,U+0259,U+1E00-1EFF,U+20A0-20CF,U+2C60-2C7F,U+A720-A7FF;
|
||||
font-family: Fraunces;
|
||||
font-style: italic;
|
||||
font-weight: 100 900;
|
||||
src: url(/css/webfonts/Fraunces-Italic[SOFT,WONK,opsz,wght].woff2) format("woff2");
|
||||
}
|
||||
|
||||
|
||||
@font-face {
|
||||
font-family: Manrope;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
src: local("Manrope ExtraBold"), local("Manrope-ExtraBold"), url(/css/webfonts/manrope-extrabold-latin-ext.woff2) format("woff2"), url(/css/webfonts/manrope-extrabold-latin-ext.woff) format("woff");
|
||||
unicode-range: U+0100-024F,U+0259,U+1E00-1EFF,U+20A0-20CF,U+2C60-2C7F,U+A720-A7FF;
|
||||
}
|
||||
/* manrope-medium-latin */
|
||||
@font-face {
|
||||
font-family: Manrope;
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
src: local("Manrope Medium"), local("Manrope-Medium"), url(/css/webfonts/manrope-medium-latin.woff2) format("woff2"), url(/css/webfonts/manrope-medium-latin.woff) format("woff");
|
||||
unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2212,U+2215;
|
||||
}
|
||||
/* manrope-medium-latin-ext */
|
||||
@font-face {
|
||||
font-family: Manrope;
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
src: local("Manrope Medium"), local("Manrope-Medium"), url(/css/webfonts/manrope-medium-latin-ext.woff2) format("woff2"), url(/css/webfonts/manrope-medium-latin-ext.woff) format("woff");
|
||||
unicode-range: U+0100-024F,U+0259,U+1E00-1EFF,U+20A0-20CF,U+2C60-2C7F,U+A720-A7FF;
|
||||
}
|
||||
/* manrope-regular-latin */
|
||||
@font-face {
|
||||
font-family: Manrope;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
src: local("Manrope Regular"), local("Manrope-Regular"), url(/css/webfonts/manrope-regular-latin.woff2) format("woff2"), url(/css/webfonts/manrope-regular-latin.woff) format("woff");
|
||||
unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2212,U+2215;
|
||||
}
|
||||
/* manrope-regular-latin-ext */
|
||||
@font-face {
|
||||
font-family: Manrope;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
src: local("Manrope Regular"), local("Manrope-Regular"), url(/css/webfonts/manrope-regular-latin-ext.woff2) format("woff2"), url(/css/webfonts/manrope-regular-latin-ext.woff) format("woff");
|
||||
unicode-range: U+0100-024F,U+0259,U+1E00-1EFF,U+20A0-20CF,U+2C60-2C7F,U+A720-A7FF;
|
||||
}
|
||||
/* manrope-semibold-latin */
|
||||
@font-face {
|
||||
font-family: Manrope;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
src: local("Manrope SemiBold"), local("Manrope-SemiBold"), url(/css/webfonts/manrope-semibold-latin.woff2) format("woff2"), url(/css/webfonts/manrope-semibold-latin.woff) format("woff");
|
||||
unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2212,U+2215;
|
||||
}
|
||||
/* manrope-semibold-latin-ext */
|
||||
@font-face {
|
||||
font-family: Manrope;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
src: local("Manrope SemiBold"), local("Manrope-SemiBold"), url(/css/webfonts/manrope-semibold-latin-ext.woff2) format("woff2"), url(/css/webfonts/manrope-semibold-latin-ext.woff) format("woff");
|
||||
unicode-range: U+0100-024F,U+0259,U+1E00-1EFF,U+20A0-20CF,U+2C60-2C7F,U+A720-A7FF;
|
||||
}
|
||||
/* playfair-display-black-latin */
|
||||
@font-face {
|
||||
font-family: Playfair Display;
|
||||
font-style: normal;
|
||||
font-weight: 900;
|
||||
src: local("Playfair Display Black"), local("PlayfairDisplay-Black"), url(/css/webfonts/playfair-display-black-latin.woff2) format("woff2"), url(/css/webfonts/playfair-display-black-latin.woff) format("woff");
|
||||
unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2212,U+2215;
|
||||
}
|
||||
/* playfair-display-black-latin-ext */
|
||||
@font-face {
|
||||
font-family: Playfair Display;
|
||||
font-style: normal;
|
||||
font-weight: 900;
|
||||
src: local("Playfair Display Black"), local("PlayfairDisplay-Black"), url(/css/webfonts/playfair-display-black-latin-ext.woff2) format("woff2"), url(/css/webfonts/playfair-display-black-latin-ext.woff) format("woff");
|
||||
unicode-range: U+0100-024F,U+0259,U+1E00-1EFF,U+20A0-20CF,U+2C60-2C7F,U+A720-A7FF;
|
||||
}
|
||||
/* playfair-display-black-italic-latin */
|
||||
@font-face {
|
||||
font-family: Playfair Display;
|
||||
font-style: italic;
|
||||
font-weight: 900;
|
||||
src: local("Playfair Display Black Italic"), local("PlayfairDisplay-BlackItalic"), url(/css/webfonts/playfair-display-black-italic-latin.woff2) format("woff2"), url(/css/webfonts/playfair-display-black-italic-latin.woff) format("woff");
|
||||
unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2212,U+2215;
|
||||
}
|
||||
/* playfair-display-black-italic-latin-ext */
|
||||
@font-face {
|
||||
font-family: Playfair Display;
|
||||
font-style: italic;
|
||||
font-weight: 900;
|
||||
src: local("Playfair Display Black Italic"), local("PlayfairDisplay-BlackItalic"), url(/css/webfonts/playfair-display-black-italic-latin-ext.woff2) format("woff2"), url(/css/webfonts/playfair-display-black-italic-latin-ext.woff) format("woff");
|
||||
unicode-range: U+0100-024F,U+0259,U+1E00-1EFF,U+20A0-20CF,U+2C60-2C7F,U+A720-A7FF;
|
||||
}
|
||||
/* playfair-display-bold-latin */
|
||||
@font-face {
|
||||
font-family: Playfair Display;
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
src: local("Playfair Display Bold"), local("PlayfairDisplay-Bold"), url(/css/webfonts/playfair-display-bold-latin.woff2) format("woff2"), url(/css/webfonts/playfair-display-bold-latin.woff) format("woff");
|
||||
unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2212,U+2215;
|
||||
}
|
||||
/* playfair-display-bold-latin-ext */
|
||||
@font-face {
|
||||
font-family: Playfair Display;
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
src: local("Playfair Display Bold"), local("PlayfairDisplay-Bold"), url(/css/webfonts/playfair-display-bold-latin-ext.woff2) format("woff2"), url(/css/webfonts/playfair-display-bold-latin-ext.woff) format("woff");
|
||||
unicode-range: U+0100-024F,U+0259,U+1E00-1EFF,U+20A0-20CF,U+2C60-2C7F,U+A720-A7FF;
|
||||
}
|
||||
/* playfair-display-bold-italic-latin */
|
||||
@font-face {
|
||||
font-family: Playfair Display;
|
||||
font-style: italic;
|
||||
font-weight: 700;
|
||||
src: local("Playfair Display Bold Italic"), local("PlayfairDisplay-BoldItalic"), url(/css/webfonts/playfair-display-bold-italic-latin.woff2) format("woff2"), url(/css/webfonts/playfair-display-bold-italic-latin.woff) format("woff");
|
||||
unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2212,U+2215;
|
||||
}
|
||||
/* playfair-display-bold-italic-latin-ext */
|
||||
@font-face {
|
||||
font-family: Playfair Display;
|
||||
font-style: italic;
|
||||
font-weight: 700;
|
||||
src: local("Playfair Display Bold Italic"), local("PlayfairDisplay-BoldItalic"), url(/css/webfonts/playfair-display-bold-italic-latin-ext.woff2) format("woff2"), url(/css/webfonts/playfair-display-bold-italic-latin-ext.woff) format("woff");
|
||||
unicode-range: U+0100-024F,U+0259,U+1E00-1EFF,U+20A0-20CF,U+2C60-2C7F,U+A720-A7FF;
|
||||
}
|
||||
/* playfair-display-extrabold-latin */
|
||||
@font-face {
|
||||
font-family: Playfair Display;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
src: local("Playfair Display ExtraBold"), local("PlayfairDisplay-ExtraBold"), url(/css/webfonts/playfair-display-extrabold-latin.woff2) format("woff2"), url(/css/webfonts/playfair-display-extrabold-latin.woff) format("woff");
|
||||
unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2212,U+2215;
|
||||
}
|
||||
/* playfair-display-extrabold-latin-ext */
|
||||
@font-face {
|
||||
font-family: Playfair Display;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
src: local("Playfair Display ExtraBold"), local("PlayfairDisplay-ExtraBold"), url(/css/webfonts/playfair-display-extrabold-latin-ext.woff2) format("woff2"), url(/css/webfonts/playfair-display-extrabold-latin-ext.woff) format("woff");
|
||||
unicode-range: U+0100-024F,U+0259,U+1E00-1EFF,U+20A0-20CF,U+2C60-2C7F,U+A720-A7FF;
|
||||
}
|
||||
/* playfair-display-extrabold-italic-latin */
|
||||
@font-face {
|
||||
font-family: Playfair Display;
|
||||
font-style: italic;
|
||||
font-weight: 400;
|
||||
src: local("Playfair Display ExtraBold Italic"), local("PlayfairDisplay-ExtraBoldItalic"), url(/css/webfonts/playfair-display-extrabold-italic-latin.woff2) format("woff2"), url(/css/webfonts/playfair-display-extrabold-italic-latin.woff) format("woff");
|
||||
unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2212,U+2215;
|
||||
}
|
||||
/* playfair-display-extrabold-italic-latin-ext */
|
||||
@font-face {
|
||||
font-family: Playfair Display;
|
||||
font-style: italic;
|
||||
font-weight: 400;
|
||||
src: local("Playfair Display ExtraBold Italic"), local("PlayfairDisplay-ExtraBoldItalic"), url(/css/webfonts/playfair-display-extrabold-italic-latin-ext.woff2) format("woff2"), url(/css/webfonts/playfair-display-extrabold-italic-latin-ext.woff) format("woff");
|
||||
unicode-range: U+0100-024F,U+0259,U+1E00-1EFF,U+20A0-20CF,U+2C60-2C7F,U+A720-A7FF;
|
||||
}
|
||||
/* playfair-display-italic-latin */
|
||||
@font-face {
|
||||
font-family: Playfair Display;
|
||||
font-style: italic;
|
||||
font-weight: 400;
|
||||
src: local("Playfair Display Italic"), local("PlayfairDisplay-Italic"), url(/css/webfonts/playfair-display-italic-latin.woff2) format("woff2"), url(/css/webfonts/playfair-display-italic-latin.woff) format("woff");
|
||||
unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2212,U+2215;
|
||||
}
|
||||
/* playfair-display-italic-latin-ext */
|
||||
@font-face {
|
||||
font-family: Playfair Display;
|
||||
font-style: italic;
|
||||
font-weight: 400;
|
||||
src: local("Playfair Display Italic"), local("PlayfairDisplay-Italic"), url(/css/webfonts/playfair-display-italic-latin-ext.woff2) format("woff2"), url(/css/webfonts/playfair-display-italic-latin-ext.woff) format("woff");
|
||||
unicode-range: U+0100-024F,U+0259,U+1E00-1EFF,U+20A0-20CF,U+2C60-2C7F,U+A720-A7FF;
|
||||
}
|
||||
/* playfair-display-medium-latin */
|
||||
@font-face {
|
||||
font-family: Playfair Display;
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
src: local("Playfair Display Medium"), local("PlayfairDisplay-Medium"), url(/css/webfonts/playfair-display-medium-latin.woff2) format("woff2"), url(/css/webfonts/playfair-display-medium-latin.woff) format("woff");
|
||||
unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2212,U+2215;
|
||||
}
|
||||
/* playfair-display-medium-latin-ext */
|
||||
@font-face {
|
||||
font-family: Playfair Display;
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
src: local("Playfair Display Medium"), local("PlayfairDisplay-Medium"), url(/css/webfonts/playfair-display-medium-latin-ext.woff2) format("woff2"), url(/css/webfonts/playfair-display-medium-latin-ext.woff) format("woff");
|
||||
unicode-range: U+0100-024F,U+0259,U+1E00-1EFF,U+20A0-20CF,U+2C60-2C7F,U+A720-A7FF;
|
||||
}
|
||||
/* playfair-display-medium-italic-latin */
|
||||
@font-face {
|
||||
font-family: Playfair Display;
|
||||
font-style: italic;
|
||||
font-weight: 500;
|
||||
src: local("Playfair Display Medium Italic"), local("PlayfairDisplay-MediumItalic"), url(/css/webfonts/playfair-display-medium-italic-latin.woff2) format("woff2"), url(/css/webfonts/playfair-display-medium-italic-latin.woff) format("woff");
|
||||
unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2212,U+2215;
|
||||
}
|
||||
/* playfair-display-medium-italic-latin-ext */
|
||||
@font-face {
|
||||
font-family: Playfair Display;
|
||||
font-style: italic;
|
||||
font-weight: 500;
|
||||
src: local("Playfair Display Medium Italic"), local("PlayfairDisplay-MediumItalic"), url(/css/webfonts/playfair-display-medium-italic-latin-ext.woff2) format("woff2"), url(/css/webfonts/playfair-display-medium-italic-latin-ext.woff) format("woff");
|
||||
unicode-range: U+0100-024F,U+0259,U+1E00-1EFF,U+20A0-20CF,U+2C60-2C7F,U+A720-A7FF;
|
||||
}
|
||||
/* playfair-display-regular-latin */
|
||||
@font-face {
|
||||
font-family: Playfair Display;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
src: local("Playfair Display Regular"), local("PlayfairDisplay-Regular"), url(/css/webfonts/playfair-display-regular-latin.woff2) format("woff2"), url(/css/webfonts/playfair-display-regular-latin.woff) format("woff");
|
||||
unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2212,U+2215;
|
||||
}
|
||||
/* playfair-display-regular-latin-ext */
|
||||
@font-face {
|
||||
font-family: Playfair Display;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
src: local("Playfair Display Regular"), local("PlayfairDisplay-Regular"), url(/css/webfonts/playfair-display-regular-latin-ext.woff2) format("woff2"), url(/css/webfonts/playfair-display-regular-latin-ext.woff) format("woff");
|
||||
unicode-range: U+0100-024F,U+0259,U+1E00-1EFF,U+20A0-20CF,U+2C60-2C7F,U+A720-A7FF;
|
||||
}
|
||||
/* playfair-display-semibold-latin */
|
||||
@font-face {
|
||||
font-family: Playfair Display;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
src: local("Playfair Display SemiBold"), local("PlayfairDisplay-SemiBold"), url(/css/webfonts/playfair-display-semibold-latin.woff2) format("woff2"), url(/css/webfonts/playfair-display-semibold-latin.woff) format("woff");
|
||||
unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2212,U+2215;
|
||||
}
|
||||
/* playfair-display-semibold-latin-ext */
|
||||
@font-face {
|
||||
font-family: Playfair Display;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
src: local("Playfair Display SemiBold"), local("PlayfairDisplay-SemiBold"), url(/css/webfonts/playfair-display-semibold-latin-ext.woff2) format("woff2"), url(/css/webfonts/playfair-display-semibold-latin-ext.woff) format("woff");
|
||||
unicode-range: U+0100-024F,U+0259,U+1E00-1EFF,U+20A0-20CF,U+2C60-2C7F,U+A720-A7FF;
|
||||
}
|
||||
/* playfair-display-semibold-italic-latin */
|
||||
@font-face {
|
||||
font-family: Playfair Display;
|
||||
font-style: italic;
|
||||
font-weight: 400;
|
||||
src: local("Playfair Display SemiBold Italic"), local("PlayfairDisplay-SemiBoldItalic"), url(/css/webfonts/playfair-display-semibold-italic-latin.woff2) format("woff2"), url(/css/webfonts/playfair-display-semibold-italic-latin.woff) format("woff");
|
||||
unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2212,U+2215;
|
||||
}
|
||||
/* playfair-display-semibold-italic-latin-ext */
|
||||
@font-face {
|
||||
font-family: Playfair Display;
|
||||
font-style: italic;
|
||||
font-weight: 400;
|
||||
src: local("Playfair Display SemiBold Italic"), local("PlayfairDisplay-SemiBoldItalic"), url(/css/webfonts/playfair-display-semibold-italic-latin-ext.woff2) format("woff2"), url(/css/webfonts/playfair-display-semibold-italic-latin-ext.woff) format("woff");
|
||||
unicode-range: U+0100-024F,U+0259,U+1E00-1EFF,U+20A0-20CF,U+2C60-2C7F,U+A720-A7FF;
|
||||
}
|
||||
|
||||
@ -1,4 +1,3 @@
|
||||
import './webComponents/card.js';
|
||||
import './webComponents/profilePic.js';
|
||||
import './webComponents/speechBubble.js';
|
||||
import './webComponents/comment.js';
|
||||
|
||||
@ -14,47 +14,48 @@
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<p>
|
||||
<i>This is an RSS feed. Subscribe by copying the URL from the address bar into your newsreader. Don't have a newsreader? <a href="../about-feeds/">Learn more and get started</a>. It’s free.</i>
|
||||
</p><hr />
|
||||
<h1>RSS Feed Preview</h1>
|
||||
<p class="nodropcap page-block">Here's the sort of thing you'll see in your newsreader when you subscribe. Done here? <a href="../">Go back to nathanupchurch.com</a></p>
|
||||
<p class="nodropcap page-block">This is an RSS feed. Subscribe by copying the URL from the address bar into your newsreader. Don't have a newsreader? <a href="../about-feeds/">Learn more and get started</a>. It’s free. Below is a preview of what you'll see in your newsreader when you subscribe. Done here? <a href="../">Go back to nathanupchurch.com</a></p>
|
||||
<h2>Latest posts</h2>
|
||||
<xsl:for-each select="/atom:feed/atom:entry">
|
||||
<article class="postlist-item">
|
||||
<a class="postlist-link">
|
||||
<xsl:attribute name="href">
|
||||
<xsl:value-of select="atom:link/@href"/>
|
||||
</xsl:attribute>
|
||||
<div class="post-image-container">
|
||||
<img class="post-image">
|
||||
<xsl:attribute name="src">
|
||||
<xsl:value-of select="atom:image/atom:url" />
|
||||
<section class="postlist">
|
||||
<div class="postlist-item-container">
|
||||
<xsl:for-each select="/atom:feed/atom:entry">
|
||||
<article class="postlist-item">
|
||||
<a class="postlist-link">
|
||||
<xsl:attribute name="href">
|
||||
<xsl:value-of select="atom:link/@href"/>
|
||||
</xsl:attribute>
|
||||
</img>
|
||||
</div>
|
||||
</a>
|
||||
<div class="post-copy">
|
||||
<a class="postlist-link">
|
||||
<xsl:attribute name="href">
|
||||
<xsl:value-of select="atom:link/@href"/>
|
||||
</xsl:attribute>
|
||||
<h3>
|
||||
<xsl:value-of select="atom:title"/>
|
||||
</h3>
|
||||
</a>
|
||||
<time class="postlist-date">
|
||||
<xsl:attribute name="datetime">
|
||||
<xsl:value-of select="substring(atom:updated, 0, 11)" />
|
||||
</xsl:attribute>
|
||||
<xsl:value-of select="substring(atom:updated, 0, 11)" />
|
||||
</time>
|
||||
<p>
|
||||
<xsl:value-of select="atom:description" />
|
||||
</p>
|
||||
</div>
|
||||
</article>
|
||||
</xsl:for-each>
|
||||
<div class="post-image-container">
|
||||
<img class="post-image">
|
||||
<xsl:attribute name="src">
|
||||
<xsl:value-of select="atom:image/atom:url" />
|
||||
</xsl:attribute>
|
||||
</img>
|
||||
</div>
|
||||
</a>
|
||||
<div class="post-copy">
|
||||
<a class="postlist-link">
|
||||
<xsl:attribute name="href">
|
||||
<xsl:value-of select="atom:link/@href"/>
|
||||
</xsl:attribute>
|
||||
<h3>
|
||||
<xsl:value-of select="atom:title"/>
|
||||
</h3>
|
||||
</a>
|
||||
<time class="postlist-date">
|
||||
<xsl:attribute name="datetime">
|
||||
<xsl:value-of select="substring(atom:updated, 0, 11)" />
|
||||
</xsl:attribute>
|
||||
<xsl:value-of select="substring(atom:updated, 0, 11)" />
|
||||
</time>
|
||||
<p>
|
||||
<xsl:value-of select="atom:description" />
|
||||
</p>
|
||||
</div>
|
||||
</article>
|
||||
</xsl:for-each>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user