n_u/nathanupchurch.com
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Compare commits

base: n_u:26821b48ef5ee51e9c0336e7eb058b20584ff7c6
Branches Tags
n_u:main
n_u:responsive-images
..
compare: n_u:69d7cd1da644b43d1768fa0a2ff78a0f83f2b3c3
Branches Tags
n_u:main
n_u:responsive-images

No commits in common. "26821b48ef5ee51e9c0336e7eb058b20584ff7c6" and "69d7cd1da644b43d1768fa0a2ff78a0f83f2b3c3" have entirely different histories.
26821b48ef ... 69d7cd1da6

98 changed files with 860 additions and 489 deletions
Show Stats Expand all files Collapse all files

2
_includes/footer.njk
View File

@ -1,7 +1,7 @@
<footer>
<p>{% if metadata.copyrightNotice %}<span class="copyright-notice">{{ metadata.copyrightNotice }}</span>{% endif %}
{% if metadata.webrings %}<br>
{% if metadata.webrings %}
{% for webring in metadata.webrings %}
<span class="webring">
{% if webring.previousURL %}<a href="{{ webring.previousURL }}">←</a>{% endif %}

5
_includes/layouts/base.njk
View File

@ -5,6 +5,7 @@
{#- 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" %}
@ -12,9 +13,7 @@
<body>
{% include "header.njk" %}
<main id="skip">
<section>
{{ content | safe }}
</section>
{{ content | safe }}
</main>
{% include "footer.njk" %}
</body>

23
_includes/layouts/links.njk
View File

@ -2,16 +2,13 @@
layout: layouts/baseBareBones.njk
hideNav: please
---
{%- 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>
{%- 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>

3
_includes/layouts/post.njk
View File

@ -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 }}&nbsp;</a></li>
<li><a href="{{ tagUrl }}" class="post-tag">{{ tag }}</a></li>
{%- endfor %}
</ul>
</div>
@ -31,4 +31,5 @@ layout: layouts/base.njk
{{ content | safe }}
</article>
{% include "mastodonComments.njk" %}
<h2>Read Next</h2>
{% include "nextLast.njk" %}

8
_includes/mastodonComments.njk
View File

@ -1,16 +1,12 @@
{% if mastodon_id %}
<section class="" id="comment-section">
<section 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="link-button" href="https://{{ metadata.mastodonHost }}/@{{ metadata.mastodonUser }}/{{ mastodon_id }}">
<button type="button">
Comment by replying to this post on Mastodon &#187;
</button>
</a>
<a class="big-link" href="https://{{ metadata.mastodonHost }}/@{{ metadata.mastodonUser }}/{{ mastodon_id }}">Comment by replying to this post on Mastodon &#187;</a>
</section>
<template id="comment-template">

4
_includes/nav.njk
View File

@ -2,9 +2,7 @@
<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" data-currentpage="true"{% endif %}>
<li>{{ entry.title }}</li>
</a>
<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>
{%- endfor %}
<a class="nav-item" href="/feed/feed.xml">
<li class="subscribe">

67
_includes/nextLast.njk
View File

@ -3,46 +3,41 @@
{%- set nextPost = collections.posts | getNextCollectionItem %}
{%- if nextPost or previousPost %}
<section class="links-nextprev">
<h2>Read Next</h2>
<div class="postlist-item-container">
{%- if previousPost %}
<article class="postlist-item{% if post.url == url %} postlist-item-active{% endif %}">
{%- 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">
<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>
<h3>
{% if previousPost.data.title %}<span>Previous Article:</span><br>{{ previousPost.data.title }}{% else %}<code>{{ previousPost.url }}</code>{% endif %}
</h3>
</a>
<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>
</article>
<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>
</a>
<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 %}
{% 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>
</div>
</a>
<div class="post-copy">
<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>
</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>
</section>
{% endif %}

2
_includes/postslist.njk
View File

@ -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(105) | safe }}</p>{% else %}{{ post.content | truncate(105) | safe }}{% endif %}
{% if post.data.synopsis %}<p>{{ post.data.synopsis | truncate(150) | safe }}</p>{% else %}{{ post.content | truncate(150) | safe }}{% endif %}
</div>
</article>
{% endfor %}

20
content/about/index.md
View File

@ -4,20 +4,12 @@ eleventyNavigation:
key: About
order: 3
---
<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.
# 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.
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>
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.
<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.
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>.
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>
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>.

6
content/index.njk
View File

@ -13,9 +13,5 @@ numberOfLatestPostsToShow: 5
{% set morePosts = postsCount - numberOfLatestPostsToShow %}
{% if morePosts > 0 %}
<a class="link-button" href="/blog/">
<button type="button">
See {{ morePosts }} more post{% if morePosts != 1 %}s{% endif %} in the blog
</button>
</a>
<a class="big-link" href="/blog/">See {{ morePosts }} more post{% if morePosts != 1 %}s{% endif %} in the blog &#187;</a>
{% endif %}

7
content/now.njk
View File

@ -10,13 +10,12 @@ numberOfLatestPostsToShow: 4
{% set postslist = collections.now | head(-1 * numberOfLatestPostsToShow) %}
{% set postslistCounter = postsCount %}
{% set morePosts = postsCount - numberOfLatestPostsToShow %}
<article>
<h1>Now: What’s Been Going on Lately?</h1>
<h1>Now: What's Been Going on Lately?</h1>
{% set now = collections.now | last %}
<h2>{{ now.data.title }}</h2>
{{ now.content | safe }}
<p class="metadata">Updated: {{ now.date | readableDate }} |&nbsp;<a href="https://nownownow.com/about">What is a now page?</a></p>
</article>
<p><br>Updated: {{ now.date | readableDate }} | <a href="https://nownownow.com/about">What is a now page?</a></p>
{% if postsCount > 1 %}
<h2>Previous Entries:</h2>

7
content/tags.njk
View File

@ -41,8 +41,5 @@ permalink: "/tags/{{ tag | slugify }}/"
{% set postslist = collections[ tag ] %}
{% include "postslist.njk" %}
<a class="link-button" href="/tags/">
<button type="button">
See all tags
</button>
</a>
<p class="nodropcap">See <a href="/tags/">all tags</a>.</p>

18
public/css/dropcap.css Normal file
View File

@ -0,0 +1,18 @@
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;
}
}

577
public/css/index.css
View File

@ -1,49 +1,12 @@
@keyframes slide-in-blurred-bottom {
0% {
filter: blur(20px);
opacity: 0;
}
100% {
filter: blur(0);
opacity: 1;
}
}
/* Defaults */
:root {
--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-headline: 'Playfair Display';
--font-family: Manrope;
--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;
@ -56,48 +19,6 @@
--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;
@ -105,21 +26,43 @@
/* 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: var(--space-xs-s) solid var(--contrast-color);
--border-nav-hover: var(--space-xs-s) 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);
/* Shadow */
--box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
/* Web Component Tokens */
/* Components */
--wc-card-background-color: var(--card-color);
--wc-card-border-radius: var(--border-radius);
--wc-card-box-shadow: var(--box-shadow);
@ -145,14 +88,25 @@
--logo-filter: none;
--icon-filter: brightness(0) saturate(100%) invert(9%) sepia(76%) saturate(340%) hue-rotate(168deg) brightness(95%) contrast(94%);
}
.socialLinks a li img {
filter: auto;
}
@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;
}
}
/* Global stylesheet */
* {
box-sizing: border-box;
line-height: calc(1em + 0.5rem);
}
html,
@ -160,48 +114,18 @@ body {
background-color: var(--background-color);
color: var(--text-color);
font-family: var(--font-family);
font-variation-settings: var(--font-variation-default);
font-size: 13px;
font-variant-Ligatures: normal;
font-weight: var(--weight-normal);
margin: 0 auto;
padding: 0;
}
html {
font-size: 13px;
overflow-y: scroll;
}
body {
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);
max-width: 40em;
}
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);
@ -218,115 +142,85 @@ a {
width: 1px;
}
footer {
padding: var(--space-xl) 0 var(--space-m) 0;
margin-top: var(--triple-gap);
padding: var(--single-gap);
}
footer .copyright-notice {
padding-right: var(--single-gap);
}
footer .webring {
display: inline;
padding-right: var(--space-xs);
display: inline-block;
padding-right: var(--single-gap);
}
footer p {
font-size: var(--step-0);
grid-column: 1 / span 12;
font-size: var(--font-s);
}
h1, h2, h3 {
color: var(--text-color);
grid-column: 1 / span 12;
margin: 0;
width: 100%;
}
h1 {
font-family: var(--font-family-headline);
font-variation-settings: "opsz" 100, "wght" 500, "SOFT" 10, "WONK" 1;
font-size: var(--step-6);
font-weight: var(--weight-extraheavy);
font-size: var(--font-xxl);
font-style: normal;
line-height: calc(var(--step-6) * 0.25 + var(--step-6));
margin-top: var(--triple-gap);
margin-bottom: 0;
}
h2 {
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);
font-size: var(--font-xl);
font-weight: var(--weight-extraheavy);
margin: var(--quad-gap) auto 0 auto;
}
h3 {
font-size: var(--step-2);
font-size: var(--font-l);
}
hr {
border-top: var(--border-thin);
}
.logo {
filter: var(--logo-filter);
}
main {
display: grid;
grid-column: 1 / 12;
padding-top: var(--space-3xl);
main { --border-nav-currentpage: 15px solid var(--contrast-color);
padding: var(--single-gap);
}
main > p > img, main > p > a > img {
width: 100%;
padding-top: var(--space-l);
}
.post > p {
margin: 0;
padding-bottom: var(--space-s);
padding-top: var(--double-gap);
}
p:last-child {
margin-bottom: 0;
}
p, li {
font-size: var(--step-0);
line-height: calc(var(--step-0) * 0.5 + var(--step-0));
font-size: var(--font-n);
}
figure {
margin: 0;
padding: var(--space-m) 0 var(--space-m) 0;
padding: var(--single-gap) 0 0 0;
width: 100%;
}
figure > a > img {
border-radius: 1em;
border-top-left-radius: 0;
padding: 0;
width: 100%;
box-shadow: var(--space-2xs) var(--space-2xs) 0 0 var(--contrast-color);
box-shadow: .75em .75em 0 0 var(--contrast-color);
}
html.barebones, body.barebones {
background-color: var(--background-color);
text-align: center;
}
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;
padding-top: var(--single-gap);
}
button {
background-color: var(--contrast-color);
border: none;
.page-block {
margin-bottom: var(--triple-gap);
}
.big-link {
width: 100%;
padding: var(--half-gap);
border: var(--border-nav);
border-radius: var(--border-radius);
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;
margin: var(--single-gap) auto var(--single-gap) auto;
transition: var(--transition-normal);
}
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;
.big-link:hover {
border-color: var(--contrast-color);
}
a[href]:not(.icon-button) {
color: var(--text-color-link);
@ -339,8 +233,9 @@ a[href]:active:not(.icon-button) {
color: var(--contrast-color);
}
.links-nextprev {
padding: 0 0 var(--space-m) 0;
margin-top: var(--space-m);
list-style: none;
padding: 0 0 var(--single-gap) 0;
margin-top: var(--single-gap);
}
table {
@ -352,26 +247,23 @@ table th {
}
/* Comments */
#comments {
grid-column: 1 / span 12;
.comment-ingress {
margin-bottom: var(--double-gap);
}
.continue-discussion {
grid-column: 1 / span 12;
}
.continue-discussion button {
margin-top: var(--space-xs);
#comment-section h2 {
margin: var(--quad-gap) auto 0 auto;
}
wc-comment::part(author-link) {
font-size: var(--step-0);
font-size: var(--font-n);
font-weight: var(--weight-extraheavy);
text-decoration: none;
}
wc-comment::part(main) {
margin-bottom: var(--space-l);
margin-bottom: var(--double-gap);
}
wc-comment::part(publish-date) {
font-size: var(--meta-font-size);
font-style: var(--meta-font-style);
font-variation-settings: var(--font-variation-settings);
font-weight: var(--weight-heavy);
font-size: var(--font-s);
margin-top: -.25rem;
}
@ -398,28 +290,26 @@ 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 .home-link {
display: grid;
grid-column: 1 / 1;
header {
align-items: end;
display: flex;
flex-wrap: wrap;
gap: 1em .5em;
padding: 1em;
}
.logo {
width: var(--space-l-xl);
.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;
}
/* Nav */
@ -431,42 +321,38 @@ header .home-link {
nav ul {
align-items: end;
display: flex;
justify-content: flex-end;
gap: var(--space-xs-s);
flex-flow: row wrap;
justify-content: space-between;
width: 20rem;
}
.nav-icon {
fill: var(--color-gray-90);
height: var(--space-2xs);
height: .8rem;
margin-right: .25rem;
padding-bottom: .3rem;
transition: var(--transition-normal);
width: var(--space-2xs);
width: var(--single-gap);
}
.nav-item {
display: inline-block;
text-decoration: none;
border-top: var(--border-nav);
}
.nav-item li {
align-items: baseline;
align-items: end;
border-top: var(--border-nav);
color: var(--text-color);
display: flex;
font-size: var(--step--2);
font-variation-settings: var(--font-variation-ui);
height: var(--space-l-xl);
font-size: var(--font-xs);
font-weight: var(--weight-heavy);
height: 2.8rem;
margin-right: .5em;
margin-bottom: 0;
padding-top: var(--space-m);
text-transform: uppercase;
transition: var(--transition-normal);
letter-spacing: var(--ui-letter-spacing);
letter-spacing: .15rem;
}
.nav-item:hover {
.nav-item li: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);
}
@ -479,28 +365,27 @@ nav ul {
color: var(--text-color);
text-decoration: none;
}
.nav-item[data-currentpage="true"] {
.nav-item li[data-currentpage="true"] {
border-top: var(--border-nav-currentpage);
color: var(--contrast-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);
.nav a[href][aria-current="page"] {
color: var(--text-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;
@ -510,59 +395,47 @@ nav ul {
display: flex;
flex-flow: row nowrap;
justify-content: flex-start;
padding: var(--space-m) 1.1rem var(--space-m) 1.1rem;
margin-bottom: var(--double-gap);
padding: var(--single-gap) 1.1rem var(--single-gap) 1.1rem;
width: 100%;
}
.postlist, .links-nextprev {
container: postlist / inline-size;
}
.post-image-container {
border-radius: var(--border-radius);
box-shadow: var(--box-shadow);
margin-left: calc(var(--space-l) * -1);
margin-right: var(--single-gap);
max-height: 15rem;
overflow: hidden;
}
.postlist-date,
.postlist-item:before {
color: var(--color-gray-90);
font-size: var(--step--1); /* 13px /16 */
font-size: var(--font-s); /* 13px /16 */
}
.postlist-date {
word-spacing: -0.5px;
}
.postlist-link {
font-size: var(--step-5); /* 19px /16 */
font-size: var(--font-xl); /* 19px /16 */
font-weight: var(--weight-extraheavy);
padding-right: .5em;
text-decoration: none;
}
.postlist-link h3 {
font-size: var(--step-2);
font-size: var(--font-l);
margin-bottom: 0;
}
.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;
.postlist-item-active .postlist-link {
font-weight: var(--weight-extraheavy);
}
.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;
@ -570,33 +443,10 @@ 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(--space-5xs);
padding-right: var(--half-gap);
text-decoration: none;
}
a.post-tag:before {
@ -612,7 +462,7 @@ a.post-tag:hover {
fill: var(--rss-orange);
height: 3.5rem;
transition: var(--transition-normal);
width: var(--space-l);
width: var(--double-gap);
}
.taglist {
display: flex;
@ -624,29 +474,28 @@ a.post-tag:hover {
margin: 0em .5em 1.25em 0em;
}
.taglist li a {
font-size: var(--step-2);
font-size: var(--font-l);
}
.postlist-item > .post-tag {
align-self: center;
}
/* Article / Post */
.post h2 {
font-size: var(--step-2);
font-size: var(--font-l);
}
/* Post Metadata */
.post-metadata {
padding: var(--space-m) 0 var(--space-l) 0;
margin-bottom: var(--double-gap);
margin-top: var(--single-gap);
padding: 0 0 0 .4rem;
}
.post-metadata p, .post-metadata ul, .post-metadata ul li, time, .metadata {
.post-metadata p, .post-metadata ul, .post-metadata ul li, .post-metadata time {
display: flex;
flex-flow: row wrap;
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));
font-size: var(--font-s);
font-weight: var(--weight-heavy);
list-style: none;
margin: 0;
padding-left: 0em;
@ -675,22 +524,110 @@ a[href].header-anchor:focus,
color: #aaa;
}
h2 + .header-anchor {
font-size: var(--step-2);
font-size: var(--font-l);
}
/* Components */
article.post {
grid-column: 1 / span 12;
}
/* 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;
}
/* 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);
/* 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);
}
}

77
public/css/links.css Normal file
View File

@ -0,0 +1,77 @@
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
View File

@ -1,29 +0,0 @@
/* /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
View File

Binary file not shown.

BIN
public/css/webfonts/Fraunces[SOFT,WONK,opsz,wght].woff2
View File

Binary file not shown.

BIN
public/css/webfonts/Manrope[wght].woff2
View File

Binary file not shown.

BIN
public/css/webfonts/manrope-bold-latin-ext.woff Normal file
View File

Binary file not shown.

BIN
public/css/webfonts/manrope-bold-latin-ext.woff2 Normal file
View File

Binary file not shown.

BIN
public/css/webfonts/manrope-bold-latin.woff Normal file
View File

Binary file not shown.

BIN
public/css/webfonts/manrope-bold-latin.woff2 Normal file
View File

Binary file not shown.

BIN
public/css/webfonts/manrope-extrabold-latin-ext.woff Normal file
View File

Binary file not shown.

BIN
public/css/webfonts/manrope-extrabold-latin-ext.woff2 Normal file
View File

Binary file not shown.

BIN
public/css/webfonts/manrope-extrabold-latin.woff Normal file
View File

Binary file not shown.

BIN
public/css/webfonts/manrope-extrabold-latin.woff2 Normal file
View File

Binary file not shown.

BIN
public/css/webfonts/manrope-extralight-latin-ext.woff Normal file
View File

Binary file not shown.

BIN
public/css/webfonts/manrope-extralight-latin-ext.woff2 Normal file
View File

Binary file not shown.

BIN
public/css/webfonts/manrope-extralight-latin.woff Normal file
View File

Binary file not shown.

BIN
public/css/webfonts/manrope-extralight-latin.woff2 Normal file
View File

Binary file not shown.

BIN
public/css/webfonts/manrope-light-latin-ext.woff Normal file
View File

Binary file not shown.

BIN
public/css/webfonts/manrope-light-latin-ext.woff2 Normal file
View File

Binary file not shown.

BIN
public/css/webfonts/manrope-light-latin.woff Normal file
View File

Binary file not shown.

BIN
public/css/webfonts/manrope-light-latin.woff2 Normal file
View File

Binary file not shown.

BIN
public/css/webfonts/manrope-medium-latin-ext.woff Normal file
View File

Binary file not shown.

BIN
public/css/webfonts/manrope-medium-latin-ext.woff2 Normal file
View File

Binary file not shown.

BIN
public/css/webfonts/manrope-medium-latin.woff Normal file
View File

Binary file not shown.

BIN
public/css/webfonts/manrope-medium-latin.woff2 Normal file
View File

Binary file not shown.

BIN
public/css/webfonts/manrope-regular-latin-ext.woff Normal file
View File

Binary file not shown.

BIN
public/css/webfonts/manrope-regular-latin-ext.woff2 Normal file
View File

Binary file not shown.

BIN
public/css/webfonts/manrope-regular-latin.woff Normal file
View File

Binary file not shown.

BIN
public/css/webfonts/manrope-regular-latin.woff2 Normal file
View File

Binary file not shown.

BIN
public/css/webfonts/manrope-semibold-latin-ext.woff Normal file
View File

Binary file not shown.

BIN
public/css/webfonts/manrope-semibold-latin-ext.woff2 Normal file
View File

Binary file not shown.

BIN
public/css/webfonts/manrope-semibold-latin.woff Normal file
View File

Binary file not shown.

BIN
public/css/webfonts/manrope-semibold-latin.woff2 Normal file
View File

Binary file not shown.

BIN
public/css/webfonts/playfair-display-black-italic-latin-ext.woff Normal file
View File

Binary file not shown.

BIN
public/css/webfonts/playfair-display-black-italic-latin-ext.woff2 Normal file
View File

Binary file not shown.

BIN
public/css/webfonts/playfair-display-black-italic-latin.woff Normal file
View File

Binary file not shown.

BIN
public/css/webfonts/playfair-display-black-italic-latin.woff2 Normal file
View File

Binary file not shown.

BIN
public/css/webfonts/playfair-display-black-latin-ext.woff Normal file
View File

Binary file not shown.

BIN
public/css/webfonts/playfair-display-black-latin-ext.woff2 Normal file
View File

Binary file not shown.

BIN
public/css/webfonts/playfair-display-black-latin.woff Normal file
View File

Binary file not shown.

BIN
public/css/webfonts/playfair-display-black-latin.woff2 Normal file
View File

Binary file not shown.

BIN
public/css/webfonts/playfair-display-bold-italic-latin-ext.woff Normal file
View File

Binary file not shown.

BIN
public/css/webfonts/playfair-display-bold-italic-latin-ext.woff2 Normal file
View File

Binary file not shown.

BIN
public/css/webfonts/playfair-display-bold-italic-latin.woff Normal file
View File

Binary file not shown.

BIN
public/css/webfonts/playfair-display-bold-italic-latin.woff2 Normal file
View File

Binary file not shown.

BIN
public/css/webfonts/playfair-display-bold-latin-ext.woff Normal file
View File

Binary file not shown.

BIN
public/css/webfonts/playfair-display-bold-latin-ext.woff2 Normal file
View File

Binary file not shown.

BIN
public/css/webfonts/playfair-display-bold-latin.woff Normal file
View File

Binary file not shown.

BIN
public/css/webfonts/playfair-display-bold-latin.woff2 Normal file
View File

Binary file not shown.

BIN
public/css/webfonts/playfair-display-extrabold-italic-latin-ext.woff Normal file
View File

Binary file not shown.

BIN
public/css/webfonts/playfair-display-extrabold-italic-latin-ext.woff2 Normal file
View File

Binary file not shown.

BIN
public/css/webfonts/playfair-display-extrabold-italic-latin.woff Normal file
View File

Binary file not shown.

BIN
public/css/webfonts/playfair-display-extrabold-italic-latin.woff2 Normal file
View File

Binary file not shown.

BIN
public/css/webfonts/playfair-display-extrabold-latin-ext.woff Normal file
View File

Binary file not shown.

BIN
public/css/webfonts/playfair-display-extrabold-latin-ext.woff2 Normal file
View File

Binary file not shown.

BIN
public/css/webfonts/playfair-display-extrabold-latin.woff Normal file
View File

Binary file not shown.

BIN
public/css/webfonts/playfair-display-extrabold-latin.woff2 Normal file
View File

Binary file not shown.

BIN
public/css/webfonts/playfair-display-italic-latin-ext.woff Normal file
View File

Binary file not shown.

BIN
public/css/webfonts/playfair-display-italic-latin-ext.woff2 Normal file
View File

Binary file not shown.

BIN
public/css/webfonts/playfair-display-italic-latin.woff Normal file
View File

Binary file not shown.

BIN
public/css/webfonts/playfair-display-italic-latin.woff2 Normal file
View File

Binary file not shown.

BIN
public/css/webfonts/playfair-display-medium-italic-latin-ext.woff Normal file
View File

Binary file not shown.

BIN
public/css/webfonts/playfair-display-medium-italic-latin-ext.woff2 Normal file
View File

Binary file not shown.

BIN
public/css/webfonts/playfair-display-medium-italic-latin.woff Normal file
View File

Binary file not shown.

BIN
public/css/webfonts/playfair-display-medium-italic-latin.woff2 Normal file
View File

Binary file not shown.

BIN
public/css/webfonts/playfair-display-medium-latin-ext.woff Normal file
View File

Binary file not shown.

BIN
public/css/webfonts/playfair-display-medium-latin-ext.woff2 Normal file
View File

Binary file not shown.

BIN
public/css/webfonts/playfair-display-medium-latin.woff Normal file
View File

Binary file not shown.

BIN
public/css/webfonts/playfair-display-medium-latin.woff2 Normal file
View File

Binary file not shown.

BIN
public/css/webfonts/playfair-display-regular-latin-ext.woff Normal file
View File

Binary file not shown.

BIN
public/css/webfonts/playfair-display-regular-latin-ext.woff2 Normal file
View File

Binary file not shown.

BIN
public/css/webfonts/playfair-display-regular-latin.woff Normal file
View File

Binary file not shown.

BIN
public/css/webfonts/playfair-display-regular-latin.woff2 Normal file
View File

Binary file not shown.

BIN
public/css/webfonts/playfair-display-semibold-italic-latin-ext.woff Normal file
View File

Binary file not shown.

BIN
public/css/webfonts/playfair-display-semibold-italic-latin-ext.woff2 Normal file
View File

Binary file not shown.

BIN
public/css/webfonts/playfair-display-semibold-italic-latin.woff Normal file
View File

Binary file not shown.

BIN
public/css/webfonts/playfair-display-semibold-italic-latin.woff2 Normal file
View File

Binary file not shown.

BIN
public/css/webfonts/playfair-display-semibold-latin-ext.woff Normal file
View File

Binary file not shown.

BIN
public/css/webfonts/playfair-display-semibold-latin-ext.woff2 Normal file
View File

Binary file not shown.

BIN
public/css/webfonts/playfair-display-semibold-latin.woff Normal file
View File

Binary file not shown.

BIN
public/css/webfonts/playfair-display-semibold-latin.woff2 Normal file
View File

Binary file not shown.

416
public/css/webfonts/webfonts.css
View File

@ -1,19 +1,417 @@
/* manrope-extralight-latin */
@font-face {
font-family: Manrope;
font-style: normal;
font-weight: 200 900;
src: url(/css/webfonts/Manrope[wght].woff2) format("woff2");
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: Fraunces;
font-family: Manrope;
font-style: normal;
font-weight: 100 900;
src: url(/css/webfonts/Fraunces[SOFT,WONK,opsz,wght].woff2) format("woff2");
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: Fraunces;
font-style: italic;
font-weight: 100 900;
src: url(/css/webfonts/Fraunces-Italic[SOFT,WONK,opsz,wght].woff2) format("woff2");
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-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
public/js/main.js
View File

@ -1,3 +1,4 @@
import './webComponents/card.js';
import './webComponents/profilePic.js';
import './webComponents/speechBubble.js';
import './webComponents/comment.js';

77
public/xsl/basic.xsl
View File

@ -14,48 +14,47 @@
</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">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>
<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>
<h2>Latest posts</h2>
<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: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" />
</xsl:attribute>
<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>
</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>
</main>
</body>
</html>