Compare commits
2 Commits
69d7cd1da6
...
26821b48ef
| Author | SHA1 | Date | |
|---|---|---|---|
| 26821b48ef | |||
| fcc91a17d4 |
@ -1,7 +1,7 @@
|
|||||||
<footer>
|
<footer>
|
||||||
<p>{% if metadata.copyrightNotice %}<span class="copyright-notice">{{ metadata.copyrightNotice }}</span>{% endif %}
|
<p>{% if metadata.copyrightNotice %}<span class="copyright-notice">{{ metadata.copyrightNotice }}</span>{% endif %}
|
||||||
|
|
||||||
{% if metadata.webrings %}
|
{% if metadata.webrings %}<br>
|
||||||
{% for webring in metadata.webrings %}
|
{% for webring in metadata.webrings %}
|
||||||
<span class="webring">
|
<span class="webring">
|
||||||
{% if webring.previousURL %}<a href="{{ webring.previousURL }}">←</a>{% endif %}
|
{% if webring.previousURL %}<a href="{{ webring.previousURL }}">←</a>{% endif %}
|
||||||
|
|||||||
@ -5,7 +5,6 @@
|
|||||||
{#- Bundle CSS #}
|
{#- Bundle CSS #}
|
||||||
{%- css %}{% include "public/css/index.css" %}{% endcss %}
|
{%- css %}{% include "public/css/index.css" %}{% endcss %}
|
||||||
{%- css %}{% include "public/css/webfonts/webfonts.css" %}{% endcss %}
|
{%- css %}{% include "public/css/webfonts/webfonts.css" %}{% endcss %}
|
||||||
{%- css %}{% include "public/css/dropcap.css" %}{% endcss %}
|
|
||||||
<style>{% getBundle "css" %}</style>
|
<style>{% getBundle "css" %}</style>
|
||||||
{% include "structuredData.njk" %}
|
{% include "structuredData.njk" %}
|
||||||
{% include "umami.html" %}
|
{% include "umami.html" %}
|
||||||
@ -13,7 +12,9 @@
|
|||||||
<body>
|
<body>
|
||||||
{% include "header.njk" %}
|
{% include "header.njk" %}
|
||||||
<main id="skip">
|
<main id="skip">
|
||||||
{{ content | safe }}
|
<section>
|
||||||
|
{{ content | safe }}
|
||||||
|
</section>
|
||||||
</main>
|
</main>
|
||||||
{% include "footer.njk" %}
|
{% include "footer.njk" %}
|
||||||
</body>
|
</body>
|
||||||
|
|||||||
@ -2,13 +2,16 @@
|
|||||||
layout: layouts/baseBareBones.njk
|
layout: layouts/baseBareBones.njk
|
||||||
hideNav: please
|
hideNav: please
|
||||||
---
|
---
|
||||||
{%- css %}{% include "public/css/links.css" %}{% endcss %}
|
{%- css %}{% include "public/css/me.css" %}{% endcss %}
|
||||||
<img class="profilePic" src="{{ metadata.author.profilePic }}">
|
<div class="links-container">
|
||||||
<h1 class="socialTitle">Nathan Upchurch</h1>
|
<img class="profilePic" src="{{ metadata.author.profilePic }}">
|
||||||
<p class="page-block nodropcap">Here's where you can find me on the internet:</p>
|
<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">
|
<div class="socialLinks">
|
||||||
{% for link in metadata.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>
|
<a class="link-button" {% if link.customAttribute %} {{ link.customAttribute | safe }} {% endif %} href="{{ link.linkURL }}">
|
||||||
{% endfor %}
|
<button type="button"><img src="{{ link.iconURL }}" />{{ link.linkDisplay }}</button>
|
||||||
</ul>
|
</a>
|
||||||
|
{% endfor %}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|||||||
@ -23,7 +23,7 @@ layout: layouts/base.njk
|
|||||||
<ul>
|
<ul>
|
||||||
{%- for tag in tags | filterTagList %}
|
{%- for tag in tags | filterTagList %}
|
||||||
{%- set tagUrl %}/tags/{{ tag | slugify }}/{% endset %}
|
{%- 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 %}
|
{%- endfor %}
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
@ -31,5 +31,4 @@ layout: layouts/base.njk
|
|||||||
{{ content | safe }}
|
{{ content | safe }}
|
||||||
</article>
|
</article>
|
||||||
{% include "mastodonComments.njk" %}
|
{% include "mastodonComments.njk" %}
|
||||||
<h2>Read Next</h2>
|
|
||||||
{% include "nextLast.njk" %}
|
{% include "nextLast.njk" %}
|
||||||
|
|||||||
@ -1,12 +1,16 @@
|
|||||||
{% if mastodon_id %}
|
{% if mastodon_id %}
|
||||||
<section id="comment-section">
|
<section class="" id="comment-section">
|
||||||
<h2>Comments</h2>
|
<h2>Comments</h2>
|
||||||
<div class="comment-ingress"></div>
|
<div class="comment-ingress"></div>
|
||||||
<div id="comments" data-id="{{ mastodon_id }}">
|
<div id="comments" data-id="{{ mastodon_id }}">
|
||||||
<p>Loading comments...</p>
|
<p>Loading comments...</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="continue-discussion">
|
<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>
|
</section>
|
||||||
|
|
||||||
<template id="comment-template">
|
<template id="comment-template">
|
||||||
|
|||||||
@ -2,7 +2,9 @@
|
|||||||
<h2 class="visually-hidden">Top level navigation menu</h2>
|
<h2 class="visually-hidden">Top level navigation menu</h2>
|
||||||
<ul class="nav">
|
<ul class="nav">
|
||||||
{%- for entry in collections.all | eleventyNavigation %}
|
{%- 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 %}
|
{%- endfor %}
|
||||||
<a class="nav-item" href="/feed/feed.xml">
|
<a class="nav-item" href="/feed/feed.xml">
|
||||||
<li class="subscribe">
|
<li class="subscribe">
|
||||||
|
|||||||
@ -3,41 +3,46 @@
|
|||||||
{%- set nextPost = collections.posts | getNextCollectionItem %}
|
{%- set nextPost = collections.posts | getNextCollectionItem %}
|
||||||
{%- if nextPost or previousPost %}
|
{%- if nextPost or previousPost %}
|
||||||
<section class="links-nextprev">
|
<section class="links-nextprev">
|
||||||
{%- if previousPost %}
|
<h2>Read Next</h2>
|
||||||
<article class="postlist-item{% if post.url == url %} postlist-item-active{% endif %}">
|
<div class="postlist-item-container">
|
||||||
<a href="{{ previousPost.url }}" class="postlist-link">
|
{%- if previousPost %}
|
||||||
<div class="post-image-container">
|
<article class="postlist-item{% if post.url == url %} postlist-item-active{% endif %}">
|
||||||
<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">
|
<a href="{{ previousPost.url }}" class="postlist-link">
|
||||||
<h3>
|
<div class="post-image-container">
|
||||||
{% if previousPost.data.title %}<span>Previous Article:</span><br>{{ previousPost.data.title }}{% else %}<code>{{ previousPost.url }}</code>{% endif %}
|
<img class="post-image" {% if previousPost.data.imageURL %} src="{{ previousPost.data.imageURL }}" alt="{{ previousPost.data.imageAlt }}" {% else %} src="{{ metadata.defaultPostImageURL }}" alt="{{ metadata.defaultPostImageAlt }}"{% endif %}>
|
||||||
</h3>
|
</div>
|
||||||
</a>
|
</a>
|
||||||
<time class="postlist-date" datetime="{{ previousPost.date | htmlDateString }}">{{ previousPost.date | readableDate("LLLL yyyy") }}</time>
|
<div class="post-copy">
|
||||||
{% if previousPost.data.synopsis %}<p>{{ previousPost.data.synopsis | truncate(150) | safe }}</p>{% else %}{{ previousPost.content | truncate(150) | safe }}{% endif %}
|
<a href="{{ previousPost.url }}" class="postlist-link">
|
||||||
</div>
|
<p>Previous Article:</p>
|
||||||
</article>
|
<h3>
|
||||||
|
{% if previousPost.data.title %}{{ previousPost.data.title }}{% else %}<code>{{ previousPost.url }}</code>{% endif %}
|
||||||
{% endif %}
|
</h3>
|
||||||
{%- if nextPost %}
|
</a>
|
||||||
<article class="postlist-item{% if post.url == url %} postlist-item-active{% endif %}">
|
<time class="postlist-date" datetime="{{ previousPost.date | htmlDateString }}">{{ previousPost.date | readableDate("LLLL yyyy") }}</time>
|
||||||
<a href="{{ nextPost.url }}" class="postlist-link">
|
{% if previousPost.data.synopsis %}<p>{{ previousPost.data.synopsis | truncate(105) | safe }}</p>{% else %}{{ previousPost.content | truncate(105) | safe }}{% endif %}
|
||||||
<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>
|
</article>
|
||||||
<div class="post-copy">
|
|
||||||
|
{% endif %}
|
||||||
|
{%- if nextPost %}
|
||||||
|
<article class="postlist-item{% if post.url == url %} postlist-item-active{% endif %}">
|
||||||
<a href="{{ nextPost.url }}" class="postlist-link">
|
<a href="{{ nextPost.url }}" class="postlist-link">
|
||||||
<h3>
|
<div class="post-image-container">
|
||||||
{% if nextPost.data.title %}<span>Next Article:</span><br>{{ nextPost.data.title }}{% else %}<code>{{ nextPost.url }}</code>{% endif %}
|
<img class="post-image" {% if nextPost.data.imageURL %} src="{{ nextPost.data.imageURL }}" alt="{{ nextPost.data.imageAlt }}" {% else %} src="{{ metadata.defaultPostImageURL }}" alt="{{ metadata.defaultPostImageAlt }}"{% endif %}>
|
||||||
</h3>
|
</div>
|
||||||
</a>
|
</a>
|
||||||
<time class="postlist-date" datetime="{{ nextPost.date | htmlDateString }}">{{ nextPost.date | readableDate("LLLL yyyy") }}</time>
|
<div class="post-copy">
|
||||||
{% if nextPost.data.synopsis %}<p>{{ nextPost.data.synopsis | truncate(150) | safe }}</p>{% else %}{{ nextPost.content | truncate(150) | safe }}{% endif %}
|
<a href="{{ nextPost.url }}" class="postlist-link">
|
||||||
</div>
|
<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>
|
</section>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
|
|
||||||
|
|||||||
@ -15,7 +15,7 @@
|
|||||||
</h3>
|
</h3>
|
||||||
</a>
|
</a>
|
||||||
<time class="postlist-date" datetime="{{ post.date | htmlDateString }}">{{ post.date | readableDate("LLLL yyyy") }}</time>
|
<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>
|
</div>
|
||||||
</article>
|
</article>
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
|
|||||||
@ -4,12 +4,20 @@ eleventyNavigation:
|
|||||||
key: About
|
key: About
|
||||||
order: 3
|
order: 3
|
||||||
---
|
---
|
||||||
# Who am I, Anyway?
|
<article>
|
||||||
## About Nathan Upchurch and the Website He Made.
|
<h1>About me and this website I’ve built.</h1>
|
||||||
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.
|
<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 %}
|
{% set morePosts = postsCount - numberOfLatestPostsToShow %}
|
||||||
{% if morePosts > 0 %}
|
{% 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 %}
|
{% endif %}
|
||||||
|
|||||||
@ -10,12 +10,13 @@ numberOfLatestPostsToShow: 4
|
|||||||
{% set postslist = collections.now | head(-1 * numberOfLatestPostsToShow) %}
|
{% set postslist = collections.now | head(-1 * numberOfLatestPostsToShow) %}
|
||||||
{% set postslistCounter = postsCount %}
|
{% set postslistCounter = postsCount %}
|
||||||
{% set morePosts = postsCount - numberOfLatestPostsToShow %}
|
{% 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 %}
|
{% set now = collections.now | last %}
|
||||||
<h2>{{ now.data.title }}</h2>
|
<h2>{{ now.data.title }}</h2>
|
||||||
{{ now.content | safe }}
|
{{ 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 %}
|
{% if postsCount > 1 %}
|
||||||
<h2>Previous Entries:</h2>
|
<h2>Previous Entries:</h2>
|
||||||
|
|||||||
@ -41,5 +41,8 @@ permalink: "/tags/{{ tag | slugify }}/"
|
|||||||
|
|
||||||
{% set postslist = collections[ tag ] %}
|
{% set postslist = collections[ tag ] %}
|
||||||
{% include "postslist.njk" %}
|
{% include "postslist.njk" %}
|
||||||
|
<a class="link-button" href="/tags/">
|
||||||
<p class="nodropcap">See <a href="/tags/">all tags</a>.</p>
|
<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 */
|
/* Defaults */
|
||||||
:root {
|
:root {
|
||||||
--font-family-headline: 'Playfair Display';
|
--font-family: "Fraunces", serif;
|
||||||
--font-family: Manrope;
|
--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;
|
--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 */
|
/* Design Tokens */
|
||||||
:root {
|
:root {
|
||||||
|
/* Animations */
|
||||||
|
--slide-in-blurred-bottom: slide-in-blurred-bottom 0.75s cubic-bezier(0.230, 1.000, 0.320, 1.000) both;
|
||||||
|
|
||||||
/* Colors */
|
/* Colors */
|
||||||
--color-gray-20: #e0e0e0;
|
--color-gray-20: #e0e0e0;
|
||||||
--color-gray-90: #333333;
|
--color-gray-90: #333333;
|
||||||
@ -19,6 +56,48 @@
|
|||||||
--text-color-link: var(--text-color);
|
--text-color-link: var(--text-color);
|
||||||
--text-color-tag: var(--contrast-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 */
|
/* 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%);
|
--logo-filter: brightness(0) saturate(100%) invert(16%) sepia(0%) saturate(1024%) hue-rotate(177deg) brightness(99%) contrast(88%);
|
||||||
--icon-filter: none;
|
--icon-filter: none;
|
||||||
@ -26,43 +105,21 @@
|
|||||||
/* Corners */
|
/* Corners */
|
||||||
--border-radius: .3rem;
|
--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 */
|
/* Transitions */
|
||||||
--transition-normal: all .3s;
|
--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 */
|
/* Links */
|
||||||
--link-decoration-thickness: .1rem;
|
--link-decoration-thickness: .1rem;
|
||||||
|
|
||||||
/* Borders */
|
/* Borders */
|
||||||
--border-nav: 1px solid var(--text-color);
|
--border-nav: 1px solid var(--text-color);
|
||||||
--border-nav-currentpage: 20px solid var(--contrast-color);
|
--border-nav-currentpage: var(--space-xs-s) solid var(--contrast-color);
|
||||||
--border-nav-hover: 20px solid var(--text-color);
|
--border-nav-hover: var(--space-xs-s) solid var(--text-color);
|
||||||
--border-thin: 1px solid var(--color-gray-20);
|
|
||||||
|
|
||||||
/* Shadow */
|
/* Shadow */
|
||||||
--box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
|
--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-background-color: var(--card-color);
|
||||||
--wc-card-border-radius: var(--border-radius);
|
--wc-card-border-radius: var(--border-radius);
|
||||||
--wc-card-box-shadow: var(--box-shadow);
|
--wc-card-box-shadow: var(--box-shadow);
|
||||||
@ -88,25 +145,14 @@
|
|||||||
--logo-filter: none;
|
--logo-filter: none;
|
||||||
--icon-filter: brightness(0) saturate(100%) invert(9%) sepia(76%) saturate(340%) hue-rotate(168deg) brightness(95%) contrast(94%);
|
--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 */
|
/* Global stylesheet */
|
||||||
* {
|
* {
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
line-height: calc(1em + 0.5rem);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
html,
|
html,
|
||||||
@ -114,18 +160,48 @@ body {
|
|||||||
background-color: var(--background-color);
|
background-color: var(--background-color);
|
||||||
color: var(--text-color);
|
color: var(--text-color);
|
||||||
font-family: var(--font-family);
|
font-family: var(--font-family);
|
||||||
font-size: 13px;
|
font-variation-settings: var(--font-variation-default);
|
||||||
font-variant-Ligatures: normal;
|
font-variant-Ligatures: normal;
|
||||||
font-weight: var(--weight-normal);
|
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
}
|
}
|
||||||
html {
|
html {
|
||||||
|
font-size: 13px;
|
||||||
overflow-y: scroll;
|
overflow-y: scroll;
|
||||||
}
|
}
|
||||||
body {
|
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 {
|
a {
|
||||||
text-decoration-color: var(--contrast-color);
|
text-decoration-color: var(--contrast-color);
|
||||||
text-decoration-thickness: var(--link-decoration-thickness);
|
text-decoration-thickness: var(--link-decoration-thickness);
|
||||||
@ -142,85 +218,115 @@ a {
|
|||||||
width: 1px;
|
width: 1px;
|
||||||
}
|
}
|
||||||
footer {
|
footer {
|
||||||
margin-top: var(--triple-gap);
|
padding: var(--space-xl) 0 var(--space-m) 0;
|
||||||
padding: var(--single-gap);
|
|
||||||
}
|
|
||||||
footer .copyright-notice {
|
|
||||||
padding-right: var(--single-gap);
|
|
||||||
}
|
}
|
||||||
footer .webring {
|
footer .webring {
|
||||||
display: inline-block;
|
display: inline;
|
||||||
padding-right: var(--single-gap);
|
padding-right: var(--space-xs);
|
||||||
}
|
}
|
||||||
footer p {
|
footer p {
|
||||||
font-size: var(--font-s);
|
font-size: var(--step-0);
|
||||||
|
grid-column: 1 / span 12;
|
||||||
}
|
}
|
||||||
h1, h2, h3 {
|
h1, h2, h3 {
|
||||||
color: var(--text-color);
|
color: var(--text-color);
|
||||||
|
grid-column: 1 / span 12;
|
||||||
|
margin: 0;
|
||||||
|
width: 100%;
|
||||||
}
|
}
|
||||||
h1 {
|
h1 {
|
||||||
font-family: var(--font-family-headline);
|
font-family: var(--font-family-headline);
|
||||||
font-weight: var(--weight-extraheavy);
|
font-variation-settings: "opsz" 100, "wght" 500, "SOFT" 10, "WONK" 1;
|
||||||
font-size: var(--font-xxl);
|
font-size: var(--step-6);
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
margin-top: var(--triple-gap);
|
line-height: calc(var(--step-6) * 0.25 + var(--step-6));
|
||||||
margin-bottom: 0;
|
|
||||||
}
|
}
|
||||||
h2 {
|
h2 {
|
||||||
font-size: var(--font-xl);
|
font-size: var(--step-3);
|
||||||
font-weight: var(--weight-extraheavy);
|
font-variation-settings: "opsz" 50, "wght" 300, "SOFT" 60, "WONK" 1;
|
||||||
margin: var(--quad-gap) auto 0 auto;
|
padding-bottom: var(--space-l);
|
||||||
|
padding-top: var(--space-xl);
|
||||||
}
|
}
|
||||||
h3 {
|
h3 {
|
||||||
font-size: var(--font-l);
|
font-size: var(--step-2);
|
||||||
}
|
|
||||||
hr {
|
|
||||||
border-top: var(--border-thin);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.logo {
|
.logo {
|
||||||
filter: var(--logo-filter);
|
filter: var(--logo-filter);
|
||||||
}
|
}
|
||||||
main { --border-nav-currentpage: 15px solid var(--contrast-color);
|
main {
|
||||||
|
display: grid;
|
||||||
padding: var(--single-gap);
|
grid-column: 1 / 12;
|
||||||
|
padding-top: var(--space-3xl);
|
||||||
}
|
}
|
||||||
main > p > img, main > p > a > img {
|
main > p > img, main > p > a > img {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
padding-top: var(--double-gap);
|
padding-top: var(--space-l);
|
||||||
|
}
|
||||||
|
.post > p {
|
||||||
|
margin: 0;
|
||||||
|
padding-bottom: var(--space-s);
|
||||||
}
|
}
|
||||||
p:last-child {
|
p:last-child {
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
}
|
}
|
||||||
p, li {
|
p, li {
|
||||||
font-size: var(--font-n);
|
font-size: var(--step-0);
|
||||||
|
line-height: calc(var(--step-0) * 0.5 + var(--step-0));
|
||||||
}
|
}
|
||||||
figure {
|
figure {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: var(--single-gap) 0 0 0;
|
padding: var(--space-m) 0 var(--space-m) 0;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
figure > a > img {
|
figure > a > img {
|
||||||
|
border-radius: 1em;
|
||||||
|
border-top-left-radius: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
width: 100%;
|
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;
|
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 {
|
button {
|
||||||
width: 100%;
|
background-color: var(--contrast-color);
|
||||||
padding: var(--half-gap);
|
border: none;
|
||||||
border: var(--border-nav);
|
|
||||||
border-radius: var(--border-radius);
|
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);
|
transition: var(--transition-normal);
|
||||||
}
|
}
|
||||||
.big-link:hover {
|
button > img {
|
||||||
border-color: var(--contrast-color);
|
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) {
|
a[href]:not(.icon-button) {
|
||||||
color: var(--text-color-link);
|
color: var(--text-color-link);
|
||||||
@ -233,9 +339,8 @@ a[href]:active:not(.icon-button) {
|
|||||||
color: var(--contrast-color);
|
color: var(--contrast-color);
|
||||||
}
|
}
|
||||||
.links-nextprev {
|
.links-nextprev {
|
||||||
list-style: none;
|
padding: 0 0 var(--space-m) 0;
|
||||||
padding: 0 0 var(--single-gap) 0;
|
margin-top: var(--space-m);
|
||||||
margin-top: var(--single-gap);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
table {
|
table {
|
||||||
@ -247,23 +352,26 @@ table th {
|
|||||||
}
|
}
|
||||||
|
|
||||||
/* Comments */
|
/* Comments */
|
||||||
.comment-ingress {
|
#comments {
|
||||||
margin-bottom: var(--double-gap);
|
grid-column: 1 / span 12;
|
||||||
}
|
}
|
||||||
#comment-section h2 {
|
.continue-discussion {
|
||||||
margin: var(--quad-gap) auto 0 auto;
|
grid-column: 1 / span 12;
|
||||||
|
}
|
||||||
|
.continue-discussion button {
|
||||||
|
margin-top: var(--space-xs);
|
||||||
}
|
}
|
||||||
wc-comment::part(author-link) {
|
wc-comment::part(author-link) {
|
||||||
font-size: var(--font-n);
|
font-size: var(--step-0);
|
||||||
font-weight: var(--weight-extraheavy);
|
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
wc-comment::part(main) {
|
wc-comment::part(main) {
|
||||||
margin-bottom: var(--double-gap);
|
margin-bottom: var(--space-l);
|
||||||
}
|
}
|
||||||
wc-comment::part(publish-date) {
|
wc-comment::part(publish-date) {
|
||||||
font-weight: var(--weight-heavy);
|
font-size: var(--meta-font-size);
|
||||||
font-size: var(--font-s);
|
font-style: var(--meta-font-style);
|
||||||
|
font-variation-settings: var(--font-variation-settings);
|
||||||
margin-top: -.25rem;
|
margin-top: -.25rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -290,26 +398,28 @@ code {
|
|||||||
word-break: break-all;
|
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 */
|
||||||
header {
|
header .home-link {
|
||||||
align-items: end;
|
display: grid;
|
||||||
display: flex;
|
grid-column: 1 / 1;
|
||||||
flex-wrap: wrap;
|
|
||||||
gap: 1em .5em;
|
|
||||||
padding: 1em;
|
|
||||||
}
|
}
|
||||||
.home-link {
|
.logo {
|
||||||
align-items: end;
|
width: var(--space-l-xl);
|
||||||
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 */
|
/* Nav */
|
||||||
@ -321,38 +431,42 @@ header {
|
|||||||
nav ul {
|
nav ul {
|
||||||
align-items: end;
|
align-items: end;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: flex-end;
|
||||||
width: 20rem;
|
gap: var(--space-xs-s);
|
||||||
|
flex-flow: row wrap;
|
||||||
}
|
}
|
||||||
.nav-icon {
|
.nav-icon {
|
||||||
fill: var(--color-gray-90);
|
fill: var(--color-gray-90);
|
||||||
height: .8rem;
|
height: var(--space-2xs);
|
||||||
margin-right: .25rem;
|
margin-right: .25rem;
|
||||||
padding-bottom: .3rem;
|
|
||||||
transition: var(--transition-normal);
|
transition: var(--transition-normal);
|
||||||
width: var(--single-gap);
|
width: var(--space-2xs);
|
||||||
}
|
}
|
||||||
.nav-item {
|
.nav-item {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
|
border-top: var(--border-nav);
|
||||||
}
|
}
|
||||||
.nav-item li {
|
.nav-item li {
|
||||||
align-items: end;
|
align-items: baseline;
|
||||||
border-top: var(--border-nav);
|
|
||||||
color: var(--text-color);
|
color: var(--text-color);
|
||||||
display: flex;
|
display: flex;
|
||||||
font-size: var(--font-xs);
|
font-size: var(--step--2);
|
||||||
font-weight: var(--weight-heavy);
|
font-variation-settings: var(--font-variation-ui);
|
||||||
height: 2.8rem;
|
height: var(--space-l-xl);
|
||||||
margin-right: .5em;
|
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
|
padding-top: var(--space-m);
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
transition: var(--transition-normal);
|
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);
|
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 {
|
.nav-item a[href]:visited {
|
||||||
color: var(--text-color);
|
color: var(--text-color);
|
||||||
}
|
}
|
||||||
@ -365,27 +479,28 @@ nav ul {
|
|||||||
color: var(--text-color);
|
color: var(--text-color);
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
.nav-item li[data-currentpage="true"] {
|
.nav-item[data-currentpage="true"] {
|
||||||
border-top: var(--border-nav-currentpage);
|
border-top: var(--border-nav-currentpage);
|
||||||
color: var(--contrast-color);
|
color: var(--contrast-color);
|
||||||
}
|
}
|
||||||
.nav a[href][aria-current="page"] {
|
.nav-item[data-currentpage="true"] li {
|
||||||
color: var(--text-color);
|
margin-top: calc(var(--space-xs-s) * -1);
|
||||||
|
}
|
||||||
|
.nav a[href][aria-current="page"] li {
|
||||||
|
color: var(--contrast-color);
|
||||||
}
|
}
|
||||||
.subscribe:hover {
|
.subscribe:hover {
|
||||||
color: var(--text-color);
|
color: var(--text-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Posts list */
|
/* Posts list */
|
||||||
.postlist h2 {
|
|
||||||
margin-bottom: var(--double-gap);
|
|
||||||
}
|
|
||||||
.postlist h3 {
|
.postlist h3 {
|
||||||
margin-top: 0;
|
margin-top: 0;
|
||||||
}
|
}
|
||||||
.postlist-item-container {
|
.postlist-item-container {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-flow: column nowrap;
|
flex-flow: column nowrap;
|
||||||
|
gap: var(--space-xl);
|
||||||
}
|
}
|
||||||
.postlist-item {
|
.postlist-item {
|
||||||
align-items: flex-start;
|
align-items: flex-start;
|
||||||
@ -395,47 +510,59 @@ nav ul {
|
|||||||
display: flex;
|
display: flex;
|
||||||
flex-flow: row nowrap;
|
flex-flow: row nowrap;
|
||||||
justify-content: flex-start;
|
justify-content: flex-start;
|
||||||
margin-bottom: var(--double-gap);
|
padding: var(--space-m) 1.1rem var(--space-m) 1.1rem;
|
||||||
padding: var(--single-gap) 1.1rem var(--single-gap) 1.1rem;
|
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.postlist, .links-nextprev {
|
||||||
|
container: postlist / inline-size;
|
||||||
|
}
|
||||||
|
|
||||||
.post-image-container {
|
.post-image-container {
|
||||||
border-radius: var(--border-radius);
|
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;
|
max-height: 15rem;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
.postlist-date,
|
.postlist-date,
|
||||||
.postlist-item:before {
|
.postlist-item:before {
|
||||||
color: var(--color-gray-90);
|
color: var(--color-gray-90);
|
||||||
font-size: var(--font-s); /* 13px /16 */
|
font-size: var(--step--1); /* 13px /16 */
|
||||||
}
|
}
|
||||||
.postlist-date {
|
.postlist-date {
|
||||||
word-spacing: -0.5px;
|
word-spacing: -0.5px;
|
||||||
}
|
}
|
||||||
.postlist-link {
|
.postlist-link {
|
||||||
font-size: var(--font-xl); /* 19px /16 */
|
font-size: var(--step-5); /* 19px /16 */
|
||||||
font-weight: var(--weight-extraheavy);
|
|
||||||
padding-right: .5em;
|
padding-right: .5em;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
.postlist-link h3 {
|
.postlist-link h3 {
|
||||||
font-size: var(--font-l);
|
font-size: var(--step-2);
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
}
|
}
|
||||||
.postlist-item-active .postlist-link {
|
.postlist-link p {
|
||||||
font-weight: var(--weight-extraheavy);
|
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 {
|
.post-copy {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-flow: column wrap;
|
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 {
|
.post-image {
|
||||||
width: 15rem;
|
width: 15rem;
|
||||||
height: 15rem;
|
height: 15rem;
|
||||||
@ -443,10 +570,33 @@ nav ul {
|
|||||||
object-position: 50% 50%;
|
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 */
|
/* Tags */
|
||||||
a.post-tag {
|
a.post-tag {
|
||||||
color: var(--text-color-tag);
|
color: var(--text-color-tag);
|
||||||
padding-right: var(--half-gap);
|
padding-right: var(--space-5xs);
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
a.post-tag:before {
|
a.post-tag:before {
|
||||||
@ -462,7 +612,7 @@ a.post-tag:hover {
|
|||||||
fill: var(--rss-orange);
|
fill: var(--rss-orange);
|
||||||
height: 3.5rem;
|
height: 3.5rem;
|
||||||
transition: var(--transition-normal);
|
transition: var(--transition-normal);
|
||||||
width: var(--double-gap);
|
width: var(--space-l);
|
||||||
}
|
}
|
||||||
.taglist {
|
.taglist {
|
||||||
display: flex;
|
display: flex;
|
||||||
@ -474,28 +624,29 @@ a.post-tag:hover {
|
|||||||
margin: 0em .5em 1.25em 0em;
|
margin: 0em .5em 1.25em 0em;
|
||||||
}
|
}
|
||||||
.taglist li a {
|
.taglist li a {
|
||||||
font-size: var(--font-l);
|
font-size: var(--step-2);
|
||||||
}
|
}
|
||||||
|
|
||||||
.postlist-item > .post-tag {
|
.postlist-item > .post-tag {
|
||||||
align-self: center;
|
align-self: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Article / Post */
|
/* Article / Post */
|
||||||
.post h2 {
|
.post h2 {
|
||||||
font-size: var(--font-l);
|
font-size: var(--step-2);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Post Metadata */
|
/* Post Metadata */
|
||||||
.post-metadata {
|
.post-metadata {
|
||||||
margin-bottom: var(--double-gap);
|
padding: var(--space-m) 0 var(--space-l) 0;
|
||||||
margin-top: var(--single-gap);
|
|
||||||
padding: 0 0 0 .4rem;
|
|
||||||
}
|
}
|
||||||
.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;
|
display: flex;
|
||||||
flex-flow: row wrap;
|
flex-flow: row wrap;
|
||||||
font-size: var(--font-s);
|
font-size: var(--meta-font-size);
|
||||||
font-weight: var(--weight-heavy);
|
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;
|
list-style: none;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding-left: 0em;
|
padding-left: 0em;
|
||||||
@ -524,110 +675,22 @@ a[href].header-anchor:focus,
|
|||||||
color: #aaa;
|
color: #aaa;
|
||||||
}
|
}
|
||||||
h2 + .header-anchor {
|
h2 + .header-anchor {
|
||||||
font-size: var(--font-l);
|
font-size: var(--step-2);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Mobile Styles */
|
/* Components */
|
||||||
@media(max-width: 556px) {
|
article.post {
|
||||||
body {
|
grid-column: 1 / span 12;
|
||||||
padding: 0rem 1.25rem 0rem 1.25rem;
|
}
|
||||||
}
|
|
||||||
figcaption {
|
/* Utilities */
|
||||||
font-size: var(--font-n);
|
.grid-container {
|
||||||
}
|
max-width: var(--grid-max-width);
|
||||||
h1 {
|
padding-inline: var(--grid-gutter);
|
||||||
font-size: var(--font-xxl);
|
margin-inline: auto;
|
||||||
margin-top: var(--single-gap);
|
}
|
||||||
padding-top: 0;
|
.grid {
|
||||||
}
|
display: grid;
|
||||||
h2, .postlist h2, main h2 {
|
gap: var(--grid-gutter);
|
||||||
font-size: var(--font-xl);
|
grid-template-columns: repeat(var(--grid-columns), 1fr);
|
||||||
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);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|||||||
@ -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-face {
|
||||||
font-family: Manrope;
|
font-family: Manrope;
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
font-weight: 400;
|
font-weight: 200 900;
|
||||||
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");
|
src: url(/css/webfonts/Manrope[wght].woff2) format("woff2");
|
||||||
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-face {
|
||||||
font-family: Manrope;
|
font-family: Fraunces;
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
font-weight: 400;
|
font-weight: 100 900;
|
||||||
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");
|
src: url(/css/webfonts/Fraunces[SOFT,WONK,opsz,wght].woff2) format("woff2");
|
||||||
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-face {
|
||||||
font-family: Manrope;
|
font-family: Fraunces;
|
||||||
font-style: normal;
|
font-style: italic;
|
||||||
font-weight: 300;
|
font-weight: 100 900;
|
||||||
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");
|
src: url(/css/webfonts/Fraunces-Italic[SOFT,WONK,opsz,wght].woff2) format("woff2");
|
||||||
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,4 +1,3 @@
|
|||||||
import './webComponents/card.js';
|
import './webComponents/card.js';
|
||||||
import './webComponents/profilePic.js';
|
import './webComponents/profilePic.js';
|
||||||
import './webComponents/speechBubble.js';
|
|
||||||
import './webComponents/comment.js';
|
import './webComponents/comment.js';
|
||||||
|
|||||||
@ -14,47 +14,48 @@
|
|||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<main>
|
<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>
|
<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>
|
<h2>Latest posts</h2>
|
||||||
<xsl:for-each select="/atom:feed/atom:entry">
|
<section class="postlist">
|
||||||
<article class="postlist-item">
|
<div class="postlist-item-container">
|
||||||
<a class="postlist-link">
|
<xsl:for-each select="/atom:feed/atom:entry">
|
||||||
<xsl:attribute name="href">
|
<article class="postlist-item">
|
||||||
<xsl:value-of select="atom:link/@href"/>
|
<a class="postlist-link">
|
||||||
</xsl:attribute>
|
<xsl:attribute name="href">
|
||||||
<div class="post-image-container">
|
<xsl:value-of select="atom:link/@href"/>
|
||||||
<img class="post-image">
|
|
||||||
<xsl:attribute name="src">
|
|
||||||
<xsl:value-of select="atom:image/atom:url" />
|
|
||||||
</xsl:attribute>
|
</xsl:attribute>
|
||||||
</img>
|
<div class="post-image-container">
|
||||||
</div>
|
<img class="post-image">
|
||||||
</a>
|
<xsl:attribute name="src">
|
||||||
<div class="post-copy">
|
<xsl:value-of select="atom:image/atom:url" />
|
||||||
<a class="postlist-link">
|
</xsl:attribute>
|
||||||
<xsl:attribute name="href">
|
</img>
|
||||||
<xsl:value-of select="atom:link/@href"/>
|
</div>
|
||||||
</xsl:attribute>
|
</a>
|
||||||
<h3>
|
<div class="post-copy">
|
||||||
<xsl:value-of select="atom:title"/>
|
<a class="postlist-link">
|
||||||
</h3>
|
<xsl:attribute name="href">
|
||||||
</a>
|
<xsl:value-of select="atom:link/@href"/>
|
||||||
<time class="postlist-date">
|
</xsl:attribute>
|
||||||
<xsl:attribute name="datetime">
|
<h3>
|
||||||
<xsl:value-of select="substring(atom:updated, 0, 11)" />
|
<xsl:value-of select="atom:title"/>
|
||||||
</xsl:attribute>
|
</h3>
|
||||||
<xsl:value-of select="substring(atom:updated, 0, 11)" />
|
</a>
|
||||||
</time>
|
<time class="postlist-date">
|
||||||
<p>
|
<xsl:attribute name="datetime">
|
||||||
<xsl:value-of select="atom:description" />
|
<xsl:value-of select="substring(atom:updated, 0, 11)" />
|
||||||
</p>
|
</xsl:attribute>
|
||||||
</div>
|
<xsl:value-of select="substring(atom:updated, 0, 11)" />
|
||||||
</article>
|
</time>
|
||||||
</xsl:for-each>
|
<p>
|
||||||
|
<xsl:value-of select="atom:description" />
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
</xsl:for-each>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
</main>
|
</main>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user