feat: style layers, imports and nesting
This commit is contained in:
Cory Dransfeldt
parent
8e5d497389
commit
d4c87b8abe
58 changed files with 968 additions and 981 deletions
|
|
@ -1,6 +1,6 @@
|
||||||
{
|
{
|
||||||
"name": "coryd.dev",
|
"name": "coryd.dev",
|
||||||
"version": "10.3.4",
|
"version": "11.0.0",
|
||||||
"description": "The source for my personal site. Built using 11ty.",
|
"description": "The source for my personal site. Built using 11ty.",
|
||||||
"type": "module",
|
"type": "module",
|
||||||
"scripts": {
|
"scripts": {
|
||||||
|
|
|
||||||
|
|
@ -16,13 +16,7 @@
|
||||||
<title>{{ pageTitle }}</title>
|
<title>{{ pageTitle }}</title>
|
||||||
<link rel="preload" href="/assets/fonts/Poppins-Bold.min.woff2" as="font" type="font/woff2" crossorigin>
|
<link rel="preload" href="/assets/fonts/Poppins-Bold.min.woff2" as="font" type="font/woff2" crossorigin>
|
||||||
<link rel="preload" href="/assets/fonts/Poppins-Regular.min.woff2" as="font" type="font/woff2" crossorigin>
|
<link rel="preload" href="/assets/fonts/Poppins-Regular.min.woff2" as="font" type="font/woff2" crossorigin>
|
||||||
{% capture css %}
|
<link rel="stylesheet" href="/assets/styles/index.css?v={% appVersion %}" type="text/css" />
|
||||||
{% render "../assets/styles/partials/fonts.css" %}
|
|
||||||
{% render "../assets/styles/partials/vars.css" %}
|
|
||||||
{% render "../assets/styles/partials/animations.css" %}
|
|
||||||
{% render "../assets/styles/index.css" %}
|
|
||||||
{% endcapture %}
|
|
||||||
<style>{{ css }}</style>
|
|
||||||
<script async data-id="101449513" src="/23af0256fe76a.js"></script>
|
<script async data-id="101449513" src="/23af0256fe76a.js"></script>
|
||||||
<link rel="canonical" href="{{ fullUrl }}" />
|
<link rel="canonical" href="{{ fullUrl }}" />
|
||||||
<meta property="og:title" content="{{ pageTitle }}" />
|
<meta property="og:title" content="{{ pageTitle }}" />
|
||||||
|
|
|
||||||
|
|
@ -1,13 +1,6 @@
|
||||||
---
|
---
|
||||||
layout: default
|
layout: default
|
||||||
---
|
---
|
||||||
{% capture css %}
|
|
||||||
{% render "../assets/styles/pages/now.css" %}
|
|
||||||
{% render "../assets/styles/components/media-grid.css" %}
|
|
||||||
{% render "../assets/styles/components/progress-bar.css" %}
|
|
||||||
{% render "../assets/styles/components/buttons.css" %}
|
|
||||||
{% endcapture %}
|
|
||||||
<style>{{ css }}</style>
|
|
||||||
{% capture js %}
|
{% capture js %}
|
||||||
{% render "../assets/scripts/media-toggles.js" %}
|
{% render "../assets/scripts/media-toggles.js" %}
|
||||||
{% endcapture %}
|
{% endcapture %}
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,3 @@
|
||||||
{% capture css %}
|
|
||||||
{% render "../../assets/styles/components/addon-links.css" %}
|
|
||||||
{% endcapture %}
|
|
||||||
<style>{{ css }}</style>
|
|
||||||
<div class="addon-links__wrapper">
|
<div class="addon-links__wrapper">
|
||||||
{%- if analytics.size > 0 -%}
|
{%- if analytics.size > 0 -%}
|
||||||
<div>{% render "partials/popular-posts.liquid", posts:posts, analytics:analytics %}</div>
|
<div>{% render "partials/popular-posts.liquid", posts:posts, analytics:analytics %}</div>
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,3 @@
|
||||||
{% capture css %}
|
|
||||||
{% render "../../assets/styles/components/badge-grid.css" %}
|
|
||||||
{% endcapture %}
|
|
||||||
<style>{{ css }}</style>
|
|
||||||
<div class="badge__grid">
|
<div class="badge__grid">
|
||||||
<a href="https://11ty.dev">
|
<a href="https://11ty.dev">
|
||||||
{% image './src/assets/img/badges/eleventy.png', 'Made with 11ty', '', 'lazy' %}
|
{% image './src/assets/img/badges/eleventy.png', 'Made with 11ty', '', 'lazy' %}
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,3 @@
|
||||||
{% capture css %}
|
|
||||||
{% render "../../../assets/styles/components/banners.css" %}
|
|
||||||
{% endcapture %}
|
|
||||||
<style>{{ css }}</style>
|
|
||||||
<div class="banner github">
|
<div class="banner github">
|
||||||
<p>{% tablericon "brand-github" "GitHub repository" %} Take a look at <a href="{{ url }}">the GitHub repository for this project</a>. (And give it a star if you feel like it.)</p>
|
<p>{% tablericon "brand-github" "GitHub repository" %} Take a look at <a href="{{ url }}">the GitHub repository for this project</a>. (And give it a star if you feel like it.)</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -1,7 +1,3 @@
|
||||||
{% capture css %}
|
|
||||||
{% render "../../../assets/styles/components/banners.css" %}
|
|
||||||
{% endcapture %}
|
|
||||||
<style>{{ css }}</style>
|
|
||||||
<div class="banner npm">
|
<div class="banner npm">
|
||||||
<p>{% tablericon "brand-npm" "NPM package" %} <a href="{{ url }}">You can take a look at this package on NPM</a> or install it by running <code>{{ command }}</code>.</p>
|
<p>{% tablericon "brand-npm" "NPM package" %} <a href="{{ url }}">You can take a look at this package on NPM</a> or install it by running <code>{{ command }}</code>.</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -1,9 +1,5 @@
|
||||||
{% assign isOldPost = date | oldPost %}
|
{% assign isOldPost = date | oldPost %}
|
||||||
{% if isOldPost %}
|
{% if isOldPost %}
|
||||||
{% capture css %}
|
|
||||||
{% render "../../../assets/styles/components/banners.css" %}
|
|
||||||
{% endcapture %}
|
|
||||||
<style>{{ css }}</style>
|
|
||||||
<div class="banner old-post">
|
<div class="banner old-post">
|
||||||
<p>{% tablericon "clock-x" "Old post" %} This post is over 3 years old. I've probably changed my mind since it was written and it <em>could</em> be out of date.</p>
|
<p>{% tablericon "clock-x" "Old post" %} This post is over 3 years old. I've probably changed my mind since it was written and it <em>could</em> be out of date.</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,3 @@
|
||||||
{% capture css %}
|
|
||||||
{% render "../../assets/styles/components/link-peek.css" %}
|
|
||||||
{% endcapture %}
|
|
||||||
<style>{{ css }}</style>
|
|
||||||
<script type="module" src="/assets/scripts/components/link-peek.js"></script>
|
<script type="module" src="/assets/scripts/components/link-peek.js"></script>
|
||||||
<template id="link-peek-template">
|
<template id="link-peek-template">
|
||||||
<figure>
|
<figure>
|
||||||
|
|
|
||||||
|
|
@ -1,9 +1,5 @@
|
||||||
{%- assign shareLink = postUrl | findPost: linkPosts -%}
|
{%- assign shareLink = postUrl | findPost: linkPosts -%}
|
||||||
{%- if shareLink %}
|
{%- if shareLink %}
|
||||||
{% capture css %}
|
|
||||||
{% render "../../assets/styles/components/mastodon-post.css" %}
|
|
||||||
{% endcapture %}
|
|
||||||
<style>{{ css }}</style>
|
|
||||||
<script type="module" src="/assets/scripts/components/mastodon-post.js"></script>
|
<script type="module" src="/assets/scripts/components/mastodon-post.js"></script>
|
||||||
<template id="mastodon-post-template">
|
<template id="mastodon-post-template">
|
||||||
<div class="mastodon-post-wrapper">
|
<div class="mastodon-post-wrapper">
|
||||||
|
|
|
||||||
|
|
@ -1,8 +1,4 @@
|
||||||
<script type="module" src="/assets/scripts/components/theme-toggle.js"></script>
|
<script type="module" src="/assets/scripts/components/theme-toggle.js"></script>
|
||||||
{% capture css %}
|
|
||||||
{% render "../../../assets/styles/components/theme-toggle.css" %}
|
|
||||||
{% endcapture %}
|
|
||||||
<style>{{ css }}</style>
|
|
||||||
<span class="client-side">
|
<span class="client-side">
|
||||||
<theme-toggle>
|
<theme-toggle>
|
||||||
<button
|
<button
|
||||||
|
|
|
||||||
|
|
@ -1,11 +1,4 @@
|
||||||
{% if data.size > 0 %}
|
{% if data.size > 0 %}
|
||||||
{% if embeddedStyles == true %}
|
|
||||||
{% capture css %}
|
|
||||||
{% render "../../../assets/styles/components/media-grid.css" %}
|
|
||||||
{% render "../../../assets/styles/components/progress-bar.css" %}
|
|
||||||
{% endcapture %}
|
|
||||||
<style>{{ css }}</style>
|
|
||||||
{% endif %}
|
|
||||||
{% assign media = data | normalizeMedia %}
|
{% assign media = data | normalizeMedia %}
|
||||||
<div class="media__grid {% if shape == 'square' %}square{% else %}vertical{% endif %}">
|
<div class="media__grid {% if shape == 'square' %}square{% else %}vertical{% endif %}">
|
||||||
{% for item in media limit: count %}
|
{% for item in media limit: count %}
|
||||||
|
|
|
||||||
|
|
@ -1,3 +1,3 @@
|
||||||
<p class="my-2">
|
<p>
|
||||||
{{ status.emoji }} {{ status.content }}
|
{{ status.emoji }} {{ status.content }}
|
||||||
</p>
|
</p>
|
||||||
|
|
@ -1,10 +1,4 @@
|
||||||
{% if data.size > 0 %}
|
{% if data.size > 0 %}
|
||||||
{% capture css %}
|
|
||||||
{% render "../../../assets/styles/components/track-chart.css" %}
|
|
||||||
{% render "../../../assets/styles/components/progress-bar.css" %}
|
|
||||||
{% endcapture %}
|
|
||||||
<style>{{ css}}</style>
|
|
||||||
{% endif %}
|
|
||||||
<div class="track__chart">
|
<div class="track__chart">
|
||||||
{% for item in data limit: 10 %}
|
{% for item in data limit: 10 %}
|
||||||
{%- assign percentage = item.plays | calculatePlayPercentage: mostPlayed -%}
|
{%- assign percentage = item.plays | calculatePlayPercentage: mostPlayed -%}
|
||||||
|
|
@ -22,3 +16,4 @@
|
||||||
</div>
|
</div>
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
</div>
|
</div>
|
||||||
|
{% endif %}
|
||||||
|
|
@ -1,9 +1,4 @@
|
||||||
{% if data.size > 0 %}
|
{% if data.size > 0 %}
|
||||||
{% capture css %}
|
|
||||||
{% render "../../../assets/styles/components/track-chart.css" %}
|
|
||||||
{% endcapture %}
|
|
||||||
<style>{{ css}}</style>
|
|
||||||
{% endif %}
|
|
||||||
<div class="track__chart">
|
<div class="track__chart">
|
||||||
{% for item in data limit: 10 %}
|
{% for item in data limit: 10 %}
|
||||||
{% capture alt %}{{ item.track }} by {{ item.track }}{% endcapture %}
|
{% capture alt %}{{ item.track }} by {{ item.track }}{% endcapture %}
|
||||||
|
|
@ -23,3 +18,4 @@
|
||||||
</div>
|
</div>
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
</div>
|
</div>
|
||||||
|
{% endif %}
|
||||||
|
|
@ -1,7 +1,3 @@
|
||||||
{% capture css %}
|
|
||||||
{% render "../../assets/styles/components/paginator.css" %}
|
|
||||||
{% endcapture %}
|
|
||||||
<style>{{ css }}</style>
|
|
||||||
<script type="module" src="/assets/scripts/components/select-pagination.js"></script>
|
<script type="module" src="/assets/scripts/components/select-pagination.js"></script>
|
||||||
<nav aria-label="Blog pagination" class="pagination flex--centered">
|
<nav aria-label="Blog pagination" class="pagination flex--centered">
|
||||||
{% if pagination.href.previous %}
|
{% if pagination.href.previous %}
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
{% assign posts = posts | getPopularPosts: analytics %}
|
{% assign posts = posts | getPopularPosts: analytics %}
|
||||||
{% if posts.size > 0 %}
|
{% if posts.size > 0 %}
|
||||||
<h2 class="flex--centered">
|
<h2 class="link__list--header flex--centered">
|
||||||
{% tablericon "flame" "Popular" %}
|
{% tablericon "flame" "Popular" %}
|
||||||
Popular posts
|
Popular posts
|
||||||
</h2>
|
</h2>
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,3 @@
|
||||||
{% capture css %}
|
|
||||||
{% render "../../assets/styles/components/post-graph.css" %}
|
|
||||||
{% endcapture %}
|
|
||||||
<style>{{ css }}</style>
|
|
||||||
<div class="post-graph">
|
<div class="post-graph">
|
||||||
{% assign years = postYears | reverse %}
|
{% assign years = postYears | reverse %}
|
||||||
{%- for year in years %}
|
{%- for year in years %}
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
{% if links.size > 0 %}
|
{% if links.size > 0 %}
|
||||||
<h2 id="links" class="recent__links-header flex--centered">
|
<h2 id="links" class="link__list--header flex--centered">
|
||||||
{% tablericon "link" "Links" %}
|
{% tablericon "link" "Links" %}
|
||||||
Recent links
|
Recent links
|
||||||
</h2>
|
</h2>
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,3 @@
|
||||||
{% capture css %}
|
|
||||||
{% render "../../assets/styles/components/share-button.css" %}
|
|
||||||
{% endcapture %}
|
|
||||||
<style>{{ css }}</style>
|
|
||||||
<script type="module" src="/assets/scripts/components/webcare-webshare.js"></script>
|
<script type="module" src="/assets/scripts/components/webcare-webshare.js"></script>
|
||||||
<webcare-webshare share-text="{{ title }} {{ url | tagLookup: tagMap }}" share-url="{{ url }}" copy-text="{{ title }} {{ url | tagLookup: tagMap }} {{ url }}">
|
<webcare-webshare share-text="{{ title }} {{ url | tagLookup: tagMap }}" share-url="{{ url }}" copy-text="{{ title }} {{ url | tagLookup: tagMap }} {{ url }}">
|
||||||
<button class="share icon--small icon--center__vertical" disabled>{% tablericon "share" "Share" %}</button>
|
<button class="share icon--small icon--center__vertical" disabled>{% tablericon "share" "Share" %}</button>
|
||||||
|
|
|
||||||
|
|
@ -4,11 +4,6 @@ schema: blog
|
||||||
---
|
---
|
||||||
{% render "partials/header.liquid", meta: meta, page: page, nav: nav %}
|
{% render "partials/header.liquid", meta: meta, page: page, nav: nav %}
|
||||||
{%- capture postUrl %}{{ meta.url }}{{ page.url }}{% endcapture -%}
|
{%- capture postUrl %}{{ meta.url }}{{ page.url }}{% endcapture -%}
|
||||||
{% capture css %}
|
|
||||||
{% render "../assets/styles/plugins/prism.css" %}
|
|
||||||
{% render "../assets/styles/pages/post.css" %}
|
|
||||||
{% endcapture %}
|
|
||||||
<style>{{ css }}</style>
|
|
||||||
<div class="default__wrapper">
|
<div class="default__wrapper">
|
||||||
<article class="h-entry">
|
<article class="h-entry">
|
||||||
<div class="flex--centered">
|
<div class="flex--centered">
|
||||||
|
|
|
||||||
565
src/assets/styles/base/index.css
Normal file
565
src/assets/styles/base/index.css
Normal file
|
|
@ -0,0 +1,565 @@
|
||||||
|
body,
|
||||||
|
html {
|
||||||
|
color: var(--text-color);
|
||||||
|
font-family: var(--font-sans);
|
||||||
|
font-size: var(--font-size-base);
|
||||||
|
line-height: var(--line-height-base);
|
||||||
|
background: var(--background-color);
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
::-moz-selection {
|
||||||
|
color: var(--color-lightest);
|
||||||
|
background: var(--selection-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
::selection {
|
||||||
|
color: var(--color-lightest);
|
||||||
|
background: var(--selection-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* scrollbars */
|
||||||
|
body,
|
||||||
|
html {
|
||||||
|
scrollbar-width: thin;
|
||||||
|
scrollbar-color: var(--accent-color) var(--gray-light);
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-scrollbar {
|
||||||
|
width: var(--sizing-xs);
|
||||||
|
height: var(--sizing-xs);
|
||||||
|
}
|
||||||
|
|
||||||
|
body::-webkit-scrollbar {
|
||||||
|
width: var(--sizing-md);
|
||||||
|
height: var(--sizing-md);
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-scrollbar-thumb {
|
||||||
|
background: var(--accent-color);
|
||||||
|
border-radius: var(--rounded-full);
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-scrollbar-track {
|
||||||
|
background-color: var(--gray-light);
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-scrollbar-button {
|
||||||
|
background-color: var(--accent-color);
|
||||||
|
border-radius: var(--rounded);
|
||||||
|
}
|
||||||
|
|
||||||
|
p,
|
||||||
|
blockquote {
|
||||||
|
line-height: var(--line-height-lg);
|
||||||
|
margin: var(--sizing-base) 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
blockquote {
|
||||||
|
font-size: var(--font-size-lg);
|
||||||
|
padding-left: var(--sizing-lg);
|
||||||
|
color: var(--gray-dark);
|
||||||
|
border-left: var(--sizing-xs) solid var(--gray-dark);
|
||||||
|
word-break: break-word;
|
||||||
|
}
|
||||||
|
|
||||||
|
:is(body, html, nav .tags, nav .search) svg {
|
||||||
|
stroke: var(--text-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
:is(h1, h2, h3, h4, h5, h6) > svg {
|
||||||
|
margin-right: var(--sizing-xs);
|
||||||
|
stroke-width: var(--stroke-width-bold) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
sup.footnote-ref {
|
||||||
|
line-height: var(--line-height-xs);
|
||||||
|
}
|
||||||
|
|
||||||
|
strong,
|
||||||
|
blockquote {
|
||||||
|
font-weight: var(--font-weight-bold);
|
||||||
|
}
|
||||||
|
|
||||||
|
em,
|
||||||
|
blockquote {
|
||||||
|
font-style: italic;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* links */
|
||||||
|
a {
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
a,
|
||||||
|
.active {
|
||||||
|
color: var(--accent-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
a:hover,
|
||||||
|
a:focus,
|
||||||
|
a:active,
|
||||||
|
:is(.main__title, footer nav:last-child) a:hover,
|
||||||
|
:is(.main__title, footer nav:last-child) a:focus,
|
||||||
|
:is(.main__title, footer nav:last-child) a:active {
|
||||||
|
color: var(--accent-color-hover);
|
||||||
|
transition-property: color;
|
||||||
|
transition-timing-function: var(--transition-ease-in-out);
|
||||||
|
transition-duration: var(--transition-duration-default);
|
||||||
|
}
|
||||||
|
|
||||||
|
:is(
|
||||||
|
a:has(svg):hover,
|
||||||
|
a:has(svg):active,
|
||||||
|
a:has(svg):focus,
|
||||||
|
button:has(svg):hover,
|
||||||
|
button:has(svg):active,
|
||||||
|
button:has(svg):focus
|
||||||
|
) svg {
|
||||||
|
stroke: var(--accent-color-hover);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* headers */
|
||||||
|
h1, h2, h3, h4, h5, h6 {
|
||||||
|
font-weight: var(--font-weight-bold);
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 { font-size: var(--font-size-3xl) }
|
||||||
|
h2 { font-size: var(--font-size-2xl) }
|
||||||
|
h3 { font-size: var(--font-size-xl) }
|
||||||
|
h4 { font-size: var(--font-size-lg) }
|
||||||
|
h5 { font-size: var(--font-size-base) }
|
||||||
|
h6 { font-size: var(--font-size-sm) }
|
||||||
|
|
||||||
|
hr {
|
||||||
|
height: 1px;
|
||||||
|
background-color: var(--gray-light);
|
||||||
|
border: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
hr.large__spacing {
|
||||||
|
margin: var(--sizing-base) 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* tables */
|
||||||
|
table {
|
||||||
|
display: block;
|
||||||
|
overflow-x: scroll;
|
||||||
|
width: 100%;
|
||||||
|
max-width: fit-content;
|
||||||
|
margin: 0 auto;
|
||||||
|
white-space: nowrap;
|
||||||
|
border-radius: var(--rounded);
|
||||||
|
border: 1px solid var(--gray-light);
|
||||||
|
}
|
||||||
|
|
||||||
|
table,
|
||||||
|
th,
|
||||||
|
td {
|
||||||
|
border-collapse: collapse;
|
||||||
|
}
|
||||||
|
|
||||||
|
:is(th, td):not(:last-child) {
|
||||||
|
border-right: 1px solid var(--gray-light);
|
||||||
|
}
|
||||||
|
|
||||||
|
th,
|
||||||
|
tr:not(:last-child) {
|
||||||
|
border-bottom: 1px solid var(--gray-light);
|
||||||
|
}
|
||||||
|
|
||||||
|
th,
|
||||||
|
td {
|
||||||
|
padding: var(--sizing-sm);
|
||||||
|
min-width: calc(var(--sizing-3xl) * 2);
|
||||||
|
word-break: break-word;
|
||||||
|
}
|
||||||
|
|
||||||
|
th {
|
||||||
|
font-weight: var(--font-weight-bold);
|
||||||
|
background-color: var(--gray-lighter);
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* header */
|
||||||
|
.main__title {
|
||||||
|
width: 100%;
|
||||||
|
padding-top: var(--sizing-3xl);
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
|
||||||
|
& h1 {
|
||||||
|
line-height: 1.25;
|
||||||
|
margin: 0;
|
||||||
|
padding-bottom: var(--sizing-md);
|
||||||
|
font-size: var(--font-size-2xl);
|
||||||
|
line-height: var(--line-height-2xl);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* nav */
|
||||||
|
nav.menu__primary {
|
||||||
|
gap: var(--sizing-md);
|
||||||
|
|
||||||
|
& a,
|
||||||
|
& span {
|
||||||
|
height: var(--sizing-xl);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
:is(a:hover, a:active, a:focus) svg,
|
||||||
|
a svg:hover,
|
||||||
|
a svg:active,
|
||||||
|
a svg:focus,
|
||||||
|
button:hover svg,
|
||||||
|
button svg:hover,
|
||||||
|
.icon--bold > svg {
|
||||||
|
stroke-width: var(--stroke-width-bold);
|
||||||
|
}
|
||||||
|
|
||||||
|
.active,
|
||||||
|
.active svg {
|
||||||
|
cursor: not-allowed;
|
||||||
|
}
|
||||||
|
|
||||||
|
a svg,
|
||||||
|
nav .active svg,
|
||||||
|
nav ul li .active svg {
|
||||||
|
stroke: var(--accent-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.active:hover svg,
|
||||||
|
.active svg:hover,
|
||||||
|
nav ul li .active:hover svg,
|
||||||
|
nav ul li .active svg:hover {
|
||||||
|
stroke-width: var(--stroke-width-default);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* social icons */
|
||||||
|
.at svg { stroke: var(--brand-hey) !important; }
|
||||||
|
.brand-github svg { stroke: var(--brand-github) !important; }
|
||||||
|
.brand-npm svg { stroke: var(--brand-npm) !important; }
|
||||||
|
.brand-mastodon svg { stroke: var(--brand-mastodon) !important; }
|
||||||
|
.brand-lastfm svg { stroke: var(--brand-lastfm) !important; }
|
||||||
|
.device-tv svg { stroke: var(--brand-trakt) !important; }
|
||||||
|
.books svg { stroke: var(--brand-storygraph) !important; }
|
||||||
|
.coffee svg { stroke: var(--brand-buy-me-a-coffee) !important; }
|
||||||
|
.heart-handshake svg { stroke: var(--webrings) !important; }
|
||||||
|
.rss svg { stroke: var(--brand-rss) !important; }
|
||||||
|
|
||||||
|
/* layout */
|
||||||
|
.default__wrapper {
|
||||||
|
padding-top: var(--sizing-3xl);
|
||||||
|
}
|
||||||
|
|
||||||
|
.main__wrapper {
|
||||||
|
min-height: 100vh;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
main {
|
||||||
|
flex: 1 1 0%;
|
||||||
|
width: 80%;
|
||||||
|
margin-left: auto;
|
||||||
|
margin-right: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* now */
|
||||||
|
.now__topper,
|
||||||
|
article {
|
||||||
|
border-bottom: 1px solid var(--gray-light);
|
||||||
|
margin-bottom: var(--sizing-base);
|
||||||
|
}
|
||||||
|
|
||||||
|
.now__topper p:first-child {
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
footer nav:first-child {
|
||||||
|
gap: var(--sizing-sm);
|
||||||
|
margin-top: var(--sizing-3xl);
|
||||||
|
padding: var(--sizing-3xl) 0 var(--sizing-lg);
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
& svg {
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
& a {
|
||||||
|
width: var(--sizing-xl);
|
||||||
|
height: var(--sizing-xl);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
footer nav:last-child {
|
||||||
|
font-size: var(--font-size-sm);
|
||||||
|
line-height: var(--line-height-sm);
|
||||||
|
padding-bottom: var(--sizing-3xl);
|
||||||
|
|
||||||
|
& span:not(.active) {
|
||||||
|
margin-left: var(--sizing-xs);
|
||||||
|
margin-right: var(--sizing-xs);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
:is(.main__title, footer nav:last-child) a {
|
||||||
|
color: var(--text-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.highlight-text {
|
||||||
|
color: var(--color-lightest);
|
||||||
|
background-color: var(--accent-color);
|
||||||
|
padding: var(--sizing-xs);
|
||||||
|
}
|
||||||
|
|
||||||
|
code {
|
||||||
|
padding: var(--sizing-xs);
|
||||||
|
color: var(--text-color-inverted);
|
||||||
|
background-color: var(--background-color-inverted);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* articles */
|
||||||
|
article {
|
||||||
|
& h2 {
|
||||||
|
color: var(--text-color);
|
||||||
|
line-height: var(--line-height-2xl);
|
||||||
|
margin: 0 0 var(--sizing-lg);
|
||||||
|
transition-property: color;
|
||||||
|
}
|
||||||
|
|
||||||
|
& a h2:hover,
|
||||||
|
& a h2:focus,
|
||||||
|
& a h2:active {
|
||||||
|
color: var(--accent-color-hover);
|
||||||
|
transition-timing-function: var(--transition-ease-in-out);
|
||||||
|
transition-duration: var(--transition-duration-default);
|
||||||
|
}
|
||||||
|
|
||||||
|
& [rel="author"],
|
||||||
|
& time {
|
||||||
|
color: var(--gray-dark);
|
||||||
|
font-size: var(--font-size-sm);
|
||||||
|
line-height: var(--line-height-sm);
|
||||||
|
margin-right: var(--sizing-xs);
|
||||||
|
}
|
||||||
|
|
||||||
|
& [rel="author"] {
|
||||||
|
margin-bottom: var(--sizing-xs);
|
||||||
|
}
|
||||||
|
|
||||||
|
& p:first-of-type {
|
||||||
|
margin-top: var(--sizing-sm);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.tag {
|
||||||
|
margin-bottom: var(--sizing-lg);
|
||||||
|
display: inline-block;
|
||||||
|
|
||||||
|
&:not(:last-child) {
|
||||||
|
margin-right: var(--sizing-lg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* buttons */
|
||||||
|
button {
|
||||||
|
appearance: none;
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* icons */
|
||||||
|
svg {
|
||||||
|
stroke-width: var(--stroke-width-default);
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon--small > svg {
|
||||||
|
width: var(--sizing-lg);
|
||||||
|
height: var(--sizing-lg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon--center__vertical > svg {
|
||||||
|
display: inline;
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* lists */
|
||||||
|
ul, ol {
|
||||||
|
list-style-position: inside;
|
||||||
|
margin: var(--sizing-base) 0;
|
||||||
|
padding-left: var(--sizing-base);
|
||||||
|
}
|
||||||
|
|
||||||
|
li {
|
||||||
|
margin-top: var(--sizing-lg);
|
||||||
|
margin-bottom: var(--sizing-lg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.link__list {
|
||||||
|
margin-bottom: 0;
|
||||||
|
|
||||||
|
& li {
|
||||||
|
margin-top: var(--sizing-sm);
|
||||||
|
margin-bottom: var(--sizing-sm);
|
||||||
|
|
||||||
|
&:last-child {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.link__list--header {
|
||||||
|
margin: var(--sizing-3xl) 0 var(--sizing-lg);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* images */
|
||||||
|
.image__banner {
|
||||||
|
border: 1px solid var(--accent-color);
|
||||||
|
border-radius: var(--rounded);
|
||||||
|
height: auto;
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
& > * {
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* pages */
|
||||||
|
.page__header {
|
||||||
|
font-size: var(--font-size-2xl);
|
||||||
|
line-height: var(--line-height-2xl);
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* selects */
|
||||||
|
select {
|
||||||
|
appearance: none;
|
||||||
|
background-color: transparent;
|
||||||
|
margin: 0;
|
||||||
|
width: 100%;
|
||||||
|
z-index: 1;
|
||||||
|
outline: none;
|
||||||
|
appearance: none;
|
||||||
|
border: none;
|
||||||
|
color: var(--color-lightest);
|
||||||
|
cursor: pointer;
|
||||||
|
font-size: var(--font-size-base);
|
||||||
|
font-weight: var(--font-weight-bold);
|
||||||
|
line-height: var(--line-height-base);
|
||||||
|
}
|
||||||
|
|
||||||
|
.select,
|
||||||
|
select-pagination {
|
||||||
|
border-radius: var(--rounded-full);
|
||||||
|
background-color: var(--accent-color);
|
||||||
|
padding: 0 var(--sizing-lg);
|
||||||
|
display: grid;
|
||||||
|
align-items: center;
|
||||||
|
position: relative;
|
||||||
|
text-align: center;
|
||||||
|
text-align-last: center;
|
||||||
|
-moz-text-align-last: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.select,
|
||||||
|
.select select,
|
||||||
|
select-pagination,
|
||||||
|
select-pagination select {
|
||||||
|
min-width: calc(var(--sizing-3xl) * 4);
|
||||||
|
padding-top: var(--sizing-xs);
|
||||||
|
padding-bottom: var(--sizing-xs);
|
||||||
|
}
|
||||||
|
|
||||||
|
.select select,
|
||||||
|
.select::after,
|
||||||
|
select-pagination select,
|
||||||
|
select-pagination::after {
|
||||||
|
grid-area: select;
|
||||||
|
}
|
||||||
|
|
||||||
|
.select::after,
|
||||||
|
select-pagination::after {
|
||||||
|
content: '';
|
||||||
|
width: var(--sizing-md);
|
||||||
|
height: var(--sizing-sm);
|
||||||
|
display: inline-block;
|
||||||
|
background-color: var(--color-lightest);
|
||||||
|
clip-path: polygon(100% 0%, 0 0%, 50% 100%);
|
||||||
|
justify-self: end;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* utilities */
|
||||||
|
.hidden {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text--centered {
|
||||||
|
text-align: center !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text--small {
|
||||||
|
font-size: var(--font-size-sm) !important;
|
||||||
|
line-height: var(--line-height-sm) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.flex--centered {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.justify--centered {
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.flex--wrap {
|
||||||
|
flex-wrap: wrap
|
||||||
|
}
|
||||||
|
|
||||||
|
/* screens: md */
|
||||||
|
@media screen and (min-width: 768px) {
|
||||||
|
.main__title {
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
.main__title h1 {
|
||||||
|
padding-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
main {
|
||||||
|
max-width: 768px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.main__title h1,
|
||||||
|
.page__header {
|
||||||
|
font-size: var(--font-size-3xl);
|
||||||
|
line-height: var(--line-height-3xl);
|
||||||
|
}
|
||||||
|
|
||||||
|
article {
|
||||||
|
& h2 {
|
||||||
|
margin: 0 0 var(--sizing-xs);
|
||||||
|
}
|
||||||
|
|
||||||
|
& p:first-of-type {
|
||||||
|
margin-top: var(--sizing-md);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.tag {
|
||||||
|
margin-bottom: var(--sizing-sm);
|
||||||
|
|
||||||
|
&:not(:last-child) {
|
||||||
|
margin-right: var(--sizing-sm);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
footer nav:first-child {
|
||||||
|
gap: var(--sizing-md);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -1,27 +1,31 @@
|
||||||
:root {
|
|
||||||
--grid: repeat(1,minmax(0,1fr));
|
|
||||||
}
|
|
||||||
|
|
||||||
.addon-links__wrapper {
|
.addon-links__wrapper {
|
||||||
display: grid;
|
display: grid;
|
||||||
gap: var(--sizing-sm);
|
gap: var(--sizing-sm);
|
||||||
grid-template-columns: var(--grid);
|
grid-template-columns: repeat(1,minmax(0,1fr));
|
||||||
}
|
|
||||||
|
|
||||||
.addon-links__wrapper h2 {
|
& h2 {
|
||||||
margin-top: 0;
|
margin-top: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.addon-links__wrapper div:last-of-type h2 {
|
& div:last-of-type h2 {
|
||||||
margin-top: var(--sizing-base);
|
margin-top: var(--sizing-base);
|
||||||
|
}
|
||||||
|
|
||||||
|
&.link__list {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media screen and (min-width: 768px) {
|
@media screen and (min-width: 768px) {
|
||||||
:root {
|
.addon-links__wrapper {
|
||||||
--grid: repeat(2,minmax(0,1fr));
|
grid-template-columns: repeat(2,minmax(0,1fr));
|
||||||
|
|
||||||
|
& div:first-of-type {
|
||||||
|
margin-right: var(--sizing-lg);
|
||||||
}
|
}
|
||||||
|
|
||||||
.addon-links__wrapper div h2 {
|
& div h2 {
|
||||||
margin-top: 0 !important;
|
margin-top: 0 !important;
|
||||||
}
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -1,24 +1,20 @@
|
||||||
:root {
|
|
||||||
--grid: repeat(3,minmax(0,1fr));
|
|
||||||
}
|
|
||||||
|
|
||||||
.badge__grid {
|
.badge__grid {
|
||||||
display: grid;
|
display: grid;
|
||||||
gap: var(--sizing-md);
|
gap: var(--sizing-md);
|
||||||
grid-template-columns: var(--grid);
|
grid-template-columns: repeat(3,minmax(0,1fr));
|
||||||
}
|
|
||||||
|
|
||||||
.badge__grid > * {
|
& > * {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.badge__grid img {
|
img {
|
||||||
image-rendering: pixelated;
|
image-rendering: pixelated;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media screen and (min-width: 768px) {
|
@media screen and (min-width: 768px) {
|
||||||
:root {
|
.badge__grid {
|
||||||
--grid: repeat(4,minmax(0,1fr));
|
grid-template-columns: repeat(4,minmax(0,1fr));
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -3,38 +3,38 @@
|
||||||
padding: var(--sizing-md);
|
padding: var(--sizing-md);
|
||||||
border: 1px solid;
|
border: 1px solid;
|
||||||
border-radius: var(--rounded);
|
border-radius: var(--rounded);
|
||||||
}
|
|
||||||
|
|
||||||
.banner.old-post {
|
& p {
|
||||||
border-color: var(--gray-light);
|
|
||||||
}
|
|
||||||
|
|
||||||
.banner.npm {
|
|
||||||
border-color: var(--brand-npm);
|
|
||||||
}
|
|
||||||
|
|
||||||
.banner.npm svg {
|
|
||||||
stroke: var(--brand-npm);
|
|
||||||
}
|
|
||||||
|
|
||||||
.banner.github {
|
|
||||||
border-color: var(--brand-github);
|
|
||||||
}
|
|
||||||
|
|
||||||
.banner.github svg {
|
|
||||||
stroke: var(--brand-github);
|
|
||||||
}
|
|
||||||
|
|
||||||
.banner p {
|
|
||||||
font-size: var(--font-size-sm);
|
font-size: var(--font-size-sm);
|
||||||
line-height: var(--line-height-sm);
|
line-height: var(--line-height-sm);
|
||||||
margin: 0 !important;
|
margin: 0 !important;
|
||||||
}
|
|
||||||
|
|
||||||
.banner p > svg {
|
& > svg {
|
||||||
display: inline;
|
display: inline;
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
height: var(--sizing-lg);
|
height: var(--sizing-lg);
|
||||||
width: var(--sizing-lg);
|
width: var(--sizing-lg);
|
||||||
margin-right: var(--sizing-xs);
|
margin-right: var(--sizing-xs);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.old-post {
|
||||||
|
border-color: var(--gray-light);
|
||||||
|
}
|
||||||
|
|
||||||
|
&.npm {
|
||||||
|
border-color: var(--brand-npm);
|
||||||
|
|
||||||
|
& svg {
|
||||||
|
stroke: var(--brand-npm);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.github {
|
||||||
|
border-color: var(--brand-github);
|
||||||
|
|
||||||
|
& svg {
|
||||||
|
stroke: var(--brand-github);
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -1,4 +1,5 @@
|
||||||
button:not(.theme__toggle, .share) {
|
button {
|
||||||
|
&:not(.theme__toggle, .share) {
|
||||||
border-radius: var(--rounded-full);
|
border-radius: var(--rounded-full);
|
||||||
padding: var(--sizing-sm) var(--sizing-lg);
|
padding: var(--sizing-sm) var(--sizing-lg);
|
||||||
margin: 0 var(--sizing-xs) var(--sizing-md) 0;
|
margin: 0 var(--sizing-xs) var(--sizing-md) 0;
|
||||||
|
|
@ -14,35 +15,36 @@ button:not(.theme__toggle, .share) {
|
||||||
appearance: none;
|
appearance: none;
|
||||||
border: 2px solid var(--accent-color);
|
border: 2px solid var(--accent-color);
|
||||||
transition-property: all;
|
transition-property: all;
|
||||||
}
|
}
|
||||||
|
|
||||||
button:not(.theme__toggle, .share, .active):hover,
|
&:not(.theme__toggle, .share, .active):hover,
|
||||||
button:not(.theme__toggle, .share, .active):active,
|
&:not(.theme__toggle, .share, .active):active,
|
||||||
button:not(.theme__toggle, .share, .active):focus {
|
&:not(.theme__toggle, .share, .active):focus {
|
||||||
background-color: var(--accent-color-hover);
|
background-color: var(--accent-color-hover);
|
||||||
border-color: var(--accent-color-hover);
|
border-color: var(--accent-color-hover);
|
||||||
transition-timing-function: var(--transition-ease-in-out);
|
transition-timing-function: var(--transition-ease-in-out);
|
||||||
transition-duration: var(--transition-duration-default);
|
transition-duration: var(--transition-duration-default);
|
||||||
}
|
}
|
||||||
|
|
||||||
button.small {
|
&.small {
|
||||||
font-size: var(--font-size-sm);
|
font-size: var(--font-size-sm);
|
||||||
line-height: var(--line-height-sm);
|
line-height: var(--line-height-sm);
|
||||||
padding: var(--sizing-xs) var(--sizing-sm);
|
padding: var(--sizing-xs) var(--sizing-sm);
|
||||||
}
|
}
|
||||||
|
|
||||||
button.secondary {
|
&.secondary {
|
||||||
color: var(--accent-color);
|
color: var(--accent-color);
|
||||||
background: transparent;
|
background: transparent;
|
||||||
}
|
}
|
||||||
|
|
||||||
button.secondary:not(.theme__toggle, .share):hover,
|
&.secondary:not(.theme__toggle, .share):hover,
|
||||||
button.secondary:not(.theme__toggle, .share):active,
|
&.secondary:not(.theme__toggle, .share):active,
|
||||||
button.secondary:not(.theme__toggle, .share):focus {
|
&.secondary:not(.theme__toggle, .share):focus {
|
||||||
color: var(--accent-color-hover);
|
color: var(--accent-color-hover);
|
||||||
background: transparent;
|
background: transparent;
|
||||||
}
|
}
|
||||||
|
|
||||||
button.active {
|
&.active {
|
||||||
cursor: not-allowed;
|
cursor: not-allowed;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -35,9 +35,9 @@ textarea:focus {
|
||||||
margin-top: 0;
|
margin-top: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
list-style: none;
|
list-style: none;
|
||||||
}
|
|
||||||
|
|
||||||
.search__results li {
|
& li {
|
||||||
margin-top: var(--sizing-sm);
|
margin-top: var(--sizing-sm);
|
||||||
margin-bottom: var(--sizing-sm);
|
margin-bottom: var(--sizing-sm);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -1,8 +1,10 @@
|
||||||
link-peek:defined a:not([data-key]) {
|
link-peek {
|
||||||
|
&:defined {
|
||||||
|
& a:not([data-key]) {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
link-peek:defined figure {
|
& figure {
|
||||||
position: relative;
|
position: relative;
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: repeat(auto-fit, minmax(300px, max-content));
|
grid-template-columns: repeat(auto-fit, minmax(300px, max-content));
|
||||||
|
|
@ -14,23 +16,27 @@ link-peek:defined figure {
|
||||||
margin: 0 0 var(--sizing-base);
|
margin: 0 0 var(--sizing-base);
|
||||||
font-size: var(--font-size-sm);
|
font-size: var(--font-size-sm);
|
||||||
line-height: var(--line-height-sm);
|
line-height: var(--line-height-sm);
|
||||||
}
|
}
|
||||||
|
|
||||||
link-peek:defined a[data-key="data.title.link"],
|
& a[data-key="data.title.link"],
|
||||||
link-peek:defined figure p {
|
& figure p {
|
||||||
font-size: var(--font-size-sm);
|
font-size: var(--font-size-sm);
|
||||||
line-height: var(--line-height-sm);
|
line-height: var(--line-height-sm);
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
link-peek img[data-key="data.logo.url"] {
|
& img {
|
||||||
|
&[data-key="data.logo.url"] {
|
||||||
margin-right: var(--sizing-xs);
|
margin-right: var(--sizing-xs);
|
||||||
inline-size: var(--sizing-lg);
|
inline-size: var(--sizing-lg);
|
||||||
block-size: var(--sizing-lg);
|
block-size: var(--sizing-lg);
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
}
|
}
|
||||||
|
|
||||||
link-peek img[data-key="data.image.url"] {
|
&[data-key="data.image.url"] {
|
||||||
max-inline-size: 100%;
|
max-inline-size: 100%;
|
||||||
block-size: auto;
|
block-size: auto;
|
||||||
border-radius: var(--rounded);
|
border-radius: var(--rounded);
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -1,18 +1,18 @@
|
||||||
.mastodon-post-wrapper {
|
.mastodon-post-wrapper {
|
||||||
border-bottom: 1px solid var(--gray-light);
|
border-bottom: 1px solid var(--gray-light);
|
||||||
margin-bottom: var(--sizing-base);
|
margin-bottom: var(--sizing-base);
|
||||||
padding-bottom: var(--sizing-xs);
|
padding-bottom: var(--sizing-base);
|
||||||
}
|
|
||||||
|
|
||||||
dl {
|
& dl {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
}
|
}
|
||||||
|
|
||||||
dd {
|
& dd {
|
||||||
margin-left: var(--sizing-xs);
|
margin-left: var(--sizing-xs);
|
||||||
}
|
|
||||||
|
|
||||||
dd:not(:last-child) {
|
&:not(:last-child) {
|
||||||
margin-right: var(--sizing-lg);
|
margin-right: var(--sizing-lg);
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -3,8 +3,7 @@
|
||||||
--grid-vertical: repeat(3,minmax(0,1fr));
|
--grid-vertical: repeat(3,minmax(0,1fr));
|
||||||
}
|
}
|
||||||
|
|
||||||
.now__section--header,
|
.now__section--header {
|
||||||
.recent__links-header {
|
|
||||||
margin: var(--sizing-3xl) 0 var(--sizing-lg);
|
margin: var(--sizing-3xl) 0 var(--sizing-lg);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,24 +1,24 @@
|
||||||
.pagination {
|
.pagination {
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
}
|
|
||||||
|
|
||||||
.pagination button {
|
& button {
|
||||||
background: none;
|
background: none;
|
||||||
padding-left: 0;
|
padding-left: 0;
|
||||||
padding-right: 0;
|
padding-right: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pagination a {
|
& a {
|
||||||
display: flex;
|
display: flex;
|
||||||
}
|
|
||||||
|
|
||||||
.pagination a > svg {
|
& > svg {
|
||||||
stroke: var(--accent-color);
|
stroke: var(--accent-color);
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.pagination span.disabled svg {
|
& span.disabled svg {
|
||||||
cursor: not-allowed;
|
cursor: not-allowed;
|
||||||
stroke: color-mix(in srgb, var(--text-color), transparent 50%);
|
stroke: color-mix(in srgb, var(--text-color), transparent 50%);
|
||||||
stroke-width: var(--stroke-width-default);
|
stroke-width: var(--stroke-width-default);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -1,19 +1,16 @@
|
||||||
webcare-webshare {
|
webcare-webshare {
|
||||||
font-size: var(--font-size-sm);
|
font-size: var(--font-size-sm);
|
||||||
line-height: var(--line-height-xs);
|
line-height: var(--line-height-xs);
|
||||||
}
|
|
||||||
|
|
||||||
webcare-webshare button {
|
& button {
|
||||||
color: var(--gray-dark);
|
color: var(--gray-dark);
|
||||||
background: transparent;
|
background: transparent;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
}
|
|
||||||
|
|
||||||
webcare-webshare button > svg {
|
|
||||||
stroke: var(--gray-dark) !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
webcare-webshare button,
|
|
||||||
webcare-webshare button > svg {
|
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
|
||||||
|
& > svg {
|
||||||
|
stroke: var(--gray-dark) !important;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -1,37 +1,41 @@
|
||||||
.theme__toggle {
|
.theme__toggle {
|
||||||
background: transparent;
|
background: transparent;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
}
|
|
||||||
|
|
||||||
.theme__toggle svg {
|
& svg {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
.theme__toggle:hover,
|
&:hover,
|
||||||
.theme__toggle svg:hover {
|
& svg:hover {
|
||||||
stroke-width: var(--stroke-width-bold);
|
stroke-width: var(--stroke-width-bold);
|
||||||
}
|
}
|
||||||
|
|
||||||
.theme__toggle > .light svg { stroke: var(--sun) !important; }
|
& > .light svg { stroke: var(--sun) !important; }
|
||||||
.theme__toggle > .dark svg { stroke: var(--moon) !important; }
|
& > .dark svg { stroke: var(--moon) !important; }
|
||||||
|
|
||||||
.theme__toggle > .light ,
|
& > .light ,
|
||||||
.theme__toggle > .dark {
|
& > .dark {
|
||||||
display: none;
|
display: none;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.theme__dark .theme__toggle > .light {
|
.theme__dark {
|
||||||
|
& .theme__toggle > .light {
|
||||||
display: inline;
|
display: inline;
|
||||||
}
|
}
|
||||||
|
|
||||||
.theme__dark .theme__toggle > .dark {
|
& .theme__toggle > .dark {
|
||||||
display: none;
|
display: none;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.theme__light .theme__toggle > .light {
|
.theme__light {
|
||||||
|
& .theme__toggle > .light {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.theme__light .theme__toggle > .dark {
|
& .theme__toggle > .dark {
|
||||||
display: inline;
|
display: inline;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -1,5 +1,14 @@
|
||||||
.track__chart--item {
|
.track__chart--item {
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
|
|
||||||
|
&:not(:last-of-type) {
|
||||||
|
margin-bottom: var(--sizing-md);
|
||||||
|
}
|
||||||
|
|
||||||
|
& .progress-bar__wrapper {
|
||||||
|
max-width: 40%;
|
||||||
|
margin-left: var(--sizing-lg);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.track__chart--item,
|
.track__chart--item,
|
||||||
|
|
@ -9,15 +18,6 @@
|
||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.track__chart--item:not(:last-of-type) {
|
|
||||||
margin-bottom: var(--sizing-md);
|
|
||||||
}
|
|
||||||
|
|
||||||
.track__chart--item .progress-bar__wrapper {
|
|
||||||
max-width: 40%;
|
|
||||||
margin-left: var(--sizing-lg);
|
|
||||||
}
|
|
||||||
|
|
||||||
.track__chart--presentation {
|
.track__chart--presentation {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
|
|
@ -49,15 +49,17 @@
|
||||||
line-height: var(--line-height-sm);
|
line-height: var(--line-height-sm);
|
||||||
}
|
}
|
||||||
|
|
||||||
.track__chart--item img {
|
.track__chart--item {
|
||||||
|
& img {
|
||||||
border: 1px solid var(--accent-color);
|
border: 1px solid var(--accent-color);
|
||||||
border-radius: var(--rounded);
|
border-radius: var(--rounded);
|
||||||
}
|
}
|
||||||
|
|
||||||
.track__chart--item img,
|
& img,
|
||||||
.track__chart--item picture {
|
& picture {
|
||||||
width: calc(var(--sizing-3xl) * 1.5);
|
width: calc(var(--sizing-3xl) * 1.5);
|
||||||
height: calc(var(--sizing-3xl) * 1.5);
|
height: calc(var(--sizing-3xl) * 1.5);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.track__chart--meta {
|
.track__chart--meta {
|
||||||
|
|
|
||||||
|
|
@ -1,556 +1,41 @@
|
||||||
body,
|
@layer reset, defaults, base, page, components, plugins;
|
||||||
html {
|
|
||||||
color: var(--text-color);
|
/* style resets */
|
||||||
font-family: var(--font-sans);
|
@import url('./reset.css') layer(reset);
|
||||||
font-size: var(--font-size-base);
|
|
||||||
line-height: var(--line-height-base);
|
/* core defaults */
|
||||||
background: var(--background-color);
|
@import url('./defaults/fonts.css') layer(defaults);
|
||||||
margin: 0;
|
@import url('./defaults/vars.css') layer(defaults);
|
||||||
}
|
@import url('./defaults/animations.css') layer(defaults);
|
||||||
|
|
||||||
::-moz-selection {
|
/* base styles */
|
||||||
color: var(--color-lightest);
|
@import url('./base/index.css') layer(base);
|
||||||
background: var(--selection-color);
|
|
||||||
}
|
/* plugins */
|
||||||
|
@import url('./plugins/prism.css') layer(plugins);
|
||||||
::selection {
|
|
||||||
color: var(--color-lightest);
|
/* page styles */
|
||||||
background: var(--selection-color);
|
@import url('./pages/404.css') layer(page);
|
||||||
}
|
@import url('./pages/about.css') layer(page);
|
||||||
|
@import url('./pages/blogroll.css') layer(page);
|
||||||
/* scrollbars */
|
@import url('./pages/contact.css') layer(page);
|
||||||
body,
|
@import url('./pages/links.css') layer(page);
|
||||||
html {
|
@import url('./pages/now.css') layer(page);
|
||||||
scrollbar-width: thin;
|
@import url('./pages/post.css') layer(page);
|
||||||
scrollbar-color: var(--accent-color) var(--gray-light);
|
@import url('./pages/webrings.css') layer(page);
|
||||||
}
|
|
||||||
|
/* component styles */
|
||||||
::-webkit-scrollbar {
|
@import url('./components/addon-links.css') layer(components);
|
||||||
width: var(--sizing-xs);
|
@import url('./components/badge-grid.css') layer(components);
|
||||||
height: var(--sizing-xs);
|
@import url('./components/banners.css') layer(components);
|
||||||
}
|
@import url('./components/buttons.css') layer(components);
|
||||||
|
@import url('./components/forms.css') layer(components);
|
||||||
body::-webkit-scrollbar {
|
@import url('./components/link-peek.css') layer(components);
|
||||||
width: var(--sizing-md);
|
@import url('./components/mastodon-post.css') layer(components);
|
||||||
height: var(--sizing-md);
|
@import url('./components/media-grid.css') layer(components.media);
|
||||||
}
|
@import url('./components/paginator.css') layer(components);
|
||||||
|
@import url('./components/post-graph.css') layer(components);
|
||||||
::-webkit-scrollbar-thumb {
|
@import url('./components/progress-bar.css') layer(components.media);
|
||||||
background: var(--accent-color);
|
@import url('./components/share-button.css') layer(components);
|
||||||
border-radius: var(--rounded-full);
|
@import url('./components/theme-toggle.css') layer(components);
|
||||||
}
|
@import url('./components/track-chart.css') layer(components.media);
|
||||||
|
|
||||||
::-webkit-scrollbar-track {
|
|
||||||
background-color: var(--gray-light);
|
|
||||||
}
|
|
||||||
|
|
||||||
::-webkit-scrollbar-button {
|
|
||||||
background-color: var(--accent-color);
|
|
||||||
border-radius: var(--rounded);
|
|
||||||
}
|
|
||||||
|
|
||||||
p,
|
|
||||||
blockquote {
|
|
||||||
line-height: var(--line-height-lg);
|
|
||||||
margin: var(--sizing-base) 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
blockquote {
|
|
||||||
font-size: var(--font-size-lg);
|
|
||||||
padding-left: var(--sizing-lg);
|
|
||||||
color: var(--gray-dark);
|
|
||||||
border-left: var(--sizing-xs) solid var(--gray-dark);
|
|
||||||
word-break: break-word;
|
|
||||||
}
|
|
||||||
|
|
||||||
:is(body, html, nav .tags, nav .search) svg {
|
|
||||||
stroke: var(--text-color);
|
|
||||||
}
|
|
||||||
|
|
||||||
:is(h1, h2, h3, h4, h5, h6) > svg {
|
|
||||||
margin-right: var(--sizing-xs);
|
|
||||||
stroke-width: var(--stroke-width-bold) !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
sup.footnote-ref {
|
|
||||||
line-height: var(--line-height-xs);
|
|
||||||
}
|
|
||||||
|
|
||||||
strong,
|
|
||||||
blockquote {
|
|
||||||
font-weight: var(--font-weight-bold);
|
|
||||||
}
|
|
||||||
|
|
||||||
em,
|
|
||||||
blockquote {
|
|
||||||
font-style: italic;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* links */
|
|
||||||
a {
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
a,
|
|
||||||
.active {
|
|
||||||
color: var(--accent-color);
|
|
||||||
}
|
|
||||||
|
|
||||||
a:hover,
|
|
||||||
a:focus,
|
|
||||||
a:active,
|
|
||||||
:is(.main__title, footer nav:last-child) a:hover,
|
|
||||||
:is(.main__title, footer nav:last-child) a:focus,
|
|
||||||
:is(.main__title, footer nav:last-child) a:active {
|
|
||||||
color: var(--accent-color-hover);
|
|
||||||
transition-property: color;
|
|
||||||
transition-timing-function: var(--transition-ease-in-out);
|
|
||||||
transition-duration: var(--transition-duration-default);
|
|
||||||
}
|
|
||||||
|
|
||||||
:is(
|
|
||||||
a:has(svg):hover,
|
|
||||||
a:has(svg):active,
|
|
||||||
a:has(svg):focus,
|
|
||||||
button:has(svg):hover,
|
|
||||||
button:has(svg):active,
|
|
||||||
button:has(svg):focus
|
|
||||||
) svg {
|
|
||||||
stroke: var(--accent-color-hover);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* headers */
|
|
||||||
h1, h2, h3, h4, h5, h6 {
|
|
||||||
font-weight: var(--font-weight-bold);
|
|
||||||
}
|
|
||||||
|
|
||||||
h1 { font-size: var(--font-size-3xl) }
|
|
||||||
h2 { font-size: var(--font-size-2xl) }
|
|
||||||
h3 { font-size: var(--font-size-xl) }
|
|
||||||
h4 { font-size: var(--font-size-lg) }
|
|
||||||
h5 { font-size: var(--font-size-base) }
|
|
||||||
h6 { font-size: var(--font-size-sm) }
|
|
||||||
|
|
||||||
hr {
|
|
||||||
height: 1px;
|
|
||||||
background-color: var(--gray-light);
|
|
||||||
border: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
hr.large__spacing {
|
|
||||||
margin: var(--sizing-base) 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* tables */
|
|
||||||
table {
|
|
||||||
display: block;
|
|
||||||
overflow-x: scroll;
|
|
||||||
width: 100%;
|
|
||||||
max-width: fit-content;
|
|
||||||
margin: 0 auto;
|
|
||||||
white-space: nowrap;
|
|
||||||
border-radius: var(--rounded);
|
|
||||||
border: 1px solid var(--gray-light);
|
|
||||||
}
|
|
||||||
|
|
||||||
table,
|
|
||||||
th,
|
|
||||||
td {
|
|
||||||
border-collapse: collapse;
|
|
||||||
}
|
|
||||||
|
|
||||||
:is(th, td):not(:last-child) {
|
|
||||||
border-right: 1px solid var(--gray-light);
|
|
||||||
}
|
|
||||||
|
|
||||||
th,
|
|
||||||
tr:not(:last-child) {
|
|
||||||
border-bottom: 1px solid var(--gray-light);
|
|
||||||
}
|
|
||||||
|
|
||||||
th,
|
|
||||||
td {
|
|
||||||
padding: var(--sizing-sm);
|
|
||||||
min-width: calc(var(--sizing-3xl) * 2);
|
|
||||||
word-break: break-word;
|
|
||||||
}
|
|
||||||
|
|
||||||
th {
|
|
||||||
font-weight: var(--font-weight-bold);
|
|
||||||
background-color: var(--gray-lighter);
|
|
||||||
text-align: left;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* header */
|
|
||||||
.main__title {
|
|
||||||
width: 100%;
|
|
||||||
padding-top: var(--sizing-3xl);
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
|
|
||||||
.main__title h1 {
|
|
||||||
line-height: 1.25;
|
|
||||||
margin: 0;
|
|
||||||
padding-bottom: var(--sizing-md);
|
|
||||||
font-size: var(--font-size-2xl);
|
|
||||||
line-height: var(--line-height-2xl);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* nav */
|
|
||||||
nav.menu__primary {
|
|
||||||
gap: var(--sizing-md);
|
|
||||||
}
|
|
||||||
|
|
||||||
nav.menu__primary a,
|
|
||||||
nav.menu__primary span {
|
|
||||||
height: var(--sizing-xl);
|
|
||||||
}
|
|
||||||
|
|
||||||
:is(a:hover, a:active, a:focus) svg,
|
|
||||||
a svg:hover,
|
|
||||||
a svg:active,
|
|
||||||
a svg:focus,
|
|
||||||
button:hover svg,
|
|
||||||
button svg:hover,
|
|
||||||
.icon--bold > svg {
|
|
||||||
stroke-width: var(--stroke-width-bold);
|
|
||||||
}
|
|
||||||
|
|
||||||
.active,
|
|
||||||
.active svg {
|
|
||||||
cursor: not-allowed;
|
|
||||||
}
|
|
||||||
|
|
||||||
a svg,
|
|
||||||
nav .active svg,
|
|
||||||
nav ul li .active svg {
|
|
||||||
stroke: var(--accent-color);
|
|
||||||
}
|
|
||||||
|
|
||||||
.active:hover svg,
|
|
||||||
.active svg:hover,
|
|
||||||
nav ul li .active:hover svg,
|
|
||||||
nav ul li .active svg:hover {
|
|
||||||
stroke-width: var(--stroke-width-default);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* social icons */
|
|
||||||
.at svg { stroke: var(--brand-hey) !important; }
|
|
||||||
.brand-github svg { stroke: var(--brand-github) !important; }
|
|
||||||
.brand-npm svg { stroke: var(--brand-npm) !important; }
|
|
||||||
.brand-mastodon svg { stroke: var(--brand-mastodon) !important; }
|
|
||||||
.brand-lastfm svg { stroke: var(--brand-lastfm) !important; }
|
|
||||||
.device-tv svg { stroke: var(--brand-trakt) !important; }
|
|
||||||
.books svg { stroke: var(--brand-storygraph) !important; }
|
|
||||||
.coffee svg { stroke: var(--brand-buy-me-a-coffee) !important; }
|
|
||||||
.heart-handshake svg { stroke: var(--webrings) !important; }
|
|
||||||
.rss svg { stroke: var(--brand-rss) !important; }
|
|
||||||
|
|
||||||
/* layout */
|
|
||||||
.default__wrapper {
|
|
||||||
padding-top: var(--sizing-3xl);
|
|
||||||
}
|
|
||||||
|
|
||||||
.main__wrapper {
|
|
||||||
min-height: 100vh;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
|
|
||||||
main {
|
|
||||||
flex: 1 1 0%;
|
|
||||||
width: 80%;
|
|
||||||
margin-left: auto;
|
|
||||||
margin-right: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* now */
|
|
||||||
.now__topper,
|
|
||||||
article {
|
|
||||||
border-bottom: 1px solid var(--gray-light);
|
|
||||||
margin-bottom: var(--sizing-base);
|
|
||||||
}
|
|
||||||
|
|
||||||
.now__topper p:first-child {
|
|
||||||
margin-top: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
footer nav:first-child {
|
|
||||||
gap: var(--sizing-sm);
|
|
||||||
margin-top: var(--sizing-3xl);
|
|
||||||
padding: var(--sizing-3xl) 0 var(--sizing-lg);
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
footer nav:first-child svg {
|
|
||||||
margin-top: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
footer nav:first-child a {
|
|
||||||
width: var(--sizing-xl);
|
|
||||||
height: var(--sizing-xl);
|
|
||||||
}
|
|
||||||
|
|
||||||
footer nav:last-child {
|
|
||||||
font-size: var(--font-size-sm);
|
|
||||||
line-height: var(--line-height-sm);
|
|
||||||
padding-bottom: var(--sizing-3xl);
|
|
||||||
}
|
|
||||||
|
|
||||||
footer nav:last-child span:not(.active) {
|
|
||||||
margin-left: var(--sizing-xs);
|
|
||||||
margin-right: var(--sizing-xs);
|
|
||||||
}
|
|
||||||
|
|
||||||
:is(.main__title, footer nav:last-child) a {
|
|
||||||
color: var(--text-color);
|
|
||||||
}
|
|
||||||
|
|
||||||
.highlight-text {
|
|
||||||
color: var(--color-lightest);
|
|
||||||
background-color: var(--accent-color);
|
|
||||||
padding: var(--sizing-xs);
|
|
||||||
}
|
|
||||||
|
|
||||||
code {
|
|
||||||
padding: var(--sizing-xs);
|
|
||||||
color: var(--text-color-inverted);
|
|
||||||
background-color: var(--background-color-inverted);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* articles */
|
|
||||||
article h2 {
|
|
||||||
color: var(--text-color);
|
|
||||||
line-height: var(--line-height-2xl);
|
|
||||||
margin: 0 0 var(--sizing-lg);
|
|
||||||
transition-property: color;
|
|
||||||
}
|
|
||||||
|
|
||||||
article a h2:hover,
|
|
||||||
article a h2:focus,
|
|
||||||
article a h2:active {
|
|
||||||
color: var(--accent-color-hover);
|
|
||||||
transition-timing-function: var(--transition-ease-in-out);
|
|
||||||
transition-duration: var(--transition-duration-default);
|
|
||||||
}
|
|
||||||
|
|
||||||
article [rel="author"],
|
|
||||||
article time {
|
|
||||||
color: var(--gray-dark);
|
|
||||||
font-size: var(--font-size-sm);
|
|
||||||
line-height: var(--line-height-sm);
|
|
||||||
margin-right: var(--sizing-xs);
|
|
||||||
}
|
|
||||||
|
|
||||||
article [rel="author"] {
|
|
||||||
margin-bottom: var(--sizing-xs);
|
|
||||||
}
|
|
||||||
|
|
||||||
article p:first-of-type {
|
|
||||||
margin-top: var(--sizing-sm);
|
|
||||||
}
|
|
||||||
|
|
||||||
.tag {
|
|
||||||
margin-bottom: var(--sizing-lg);
|
|
||||||
display: inline-block;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tag:not(:last-child) {
|
|
||||||
margin-right: var(--sizing-lg);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* buttons */
|
|
||||||
button {
|
|
||||||
appearance: none;
|
|
||||||
border: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* icons */
|
|
||||||
svg {
|
|
||||||
stroke-width: var(--stroke-width-default);
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon--small > svg {
|
|
||||||
width: var(--sizing-lg);
|
|
||||||
height: var(--sizing-lg);
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon--center__vertical > svg {
|
|
||||||
display: inline;
|
|
||||||
vertical-align: middle;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* lists */
|
|
||||||
ul, ol {
|
|
||||||
list-style-position: inside;
|
|
||||||
margin: var(--sizing-base) 0;
|
|
||||||
padding-left: var(--sizing-base);
|
|
||||||
}
|
|
||||||
|
|
||||||
li {
|
|
||||||
margin-top: var(--sizing-lg);
|
|
||||||
margin-bottom: var(--sizing-lg);
|
|
||||||
}
|
|
||||||
|
|
||||||
.link__list li {
|
|
||||||
margin-top: var(--sizing-sm);
|
|
||||||
margin-bottom: var(--sizing-sm);
|
|
||||||
}
|
|
||||||
|
|
||||||
.link__list,
|
|
||||||
.link__list li:last-child {
|
|
||||||
margin-bottom: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* images */
|
|
||||||
.image__banner {
|
|
||||||
border: 1px solid var(--accent-color);
|
|
||||||
border-radius: var(--rounded);
|
|
||||||
height: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.image__banner,
|
|
||||||
.image__banner > * {
|
|
||||||
display: block;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.image__banner > * {
|
|
||||||
height: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* pages */
|
|
||||||
.page__header {
|
|
||||||
font-size: var(--font-size-2xl);
|
|
||||||
line-height: var(--line-height-2xl);
|
|
||||||
margin-top: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* selects */
|
|
||||||
select {
|
|
||||||
appearance: none;
|
|
||||||
background-color: transparent;
|
|
||||||
margin: 0;
|
|
||||||
width: 100%;
|
|
||||||
z-index: 1;
|
|
||||||
outline: none;
|
|
||||||
appearance: none;
|
|
||||||
border: none;
|
|
||||||
color: var(--color-lightest);
|
|
||||||
cursor: pointer;
|
|
||||||
font-size: var(--font-size-base);
|
|
||||||
font-weight: var(--font-weight-bold);
|
|
||||||
line-height: var(--line-height-base);
|
|
||||||
}
|
|
||||||
|
|
||||||
.select,
|
|
||||||
select-pagination {
|
|
||||||
border-radius: var(--rounded-full);
|
|
||||||
background-color: var(--accent-color);
|
|
||||||
padding: 0 var(--sizing-lg);
|
|
||||||
display: grid;
|
|
||||||
align-items: center;
|
|
||||||
position: relative;
|
|
||||||
text-align: center;
|
|
||||||
text-align-last: center;
|
|
||||||
-moz-text-align-last: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.select,
|
|
||||||
.select select,
|
|
||||||
select-pagination,
|
|
||||||
select-pagination select {
|
|
||||||
min-width: calc(var(--sizing-3xl) * 4);
|
|
||||||
padding-top: var(--sizing-xs);
|
|
||||||
padding-bottom: var(--sizing-xs);
|
|
||||||
}
|
|
||||||
|
|
||||||
.select select,
|
|
||||||
.select::after,
|
|
||||||
select-pagination select,
|
|
||||||
select-pagination::after {
|
|
||||||
grid-area: select;
|
|
||||||
}
|
|
||||||
|
|
||||||
.select::after,
|
|
||||||
select-pagination::after {
|
|
||||||
content: '';
|
|
||||||
width: var(--sizing-md);
|
|
||||||
height: var(--sizing-sm);
|
|
||||||
display: inline-block;
|
|
||||||
background-color: var(--color-lightest);
|
|
||||||
clip-path: polygon(100% 0%, 0 0%, 50% 100%);
|
|
||||||
justify-self: end;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* utilities */
|
|
||||||
.hidden {
|
|
||||||
display: none !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.text--centered {
|
|
||||||
text-align: center !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.text--small {
|
|
||||||
font-size: var(--font-size-sm) !important;
|
|
||||||
line-height: var(--line-height-sm) !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.flex--centered {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.justify--centered {
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.flex--wrap {
|
|
||||||
flex-wrap: wrap
|
|
||||||
}
|
|
||||||
|
|
||||||
/* screens: md */
|
|
||||||
@media screen and (min-width: 768px) {
|
|
||||||
.main__title {
|
|
||||||
flex-direction: row;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-between;
|
|
||||||
}
|
|
||||||
|
|
||||||
.main__title h1 {
|
|
||||||
padding-bottom: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
main {
|
|
||||||
max-width: 768px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.main__title h1,
|
|
||||||
.page__header {
|
|
||||||
font-size: var(--font-size-3xl);
|
|
||||||
line-height: var(--line-height-3xl);
|
|
||||||
}
|
|
||||||
|
|
||||||
article h2 {
|
|
||||||
margin: 0 0 var(--sizing-xs);
|
|
||||||
}
|
|
||||||
|
|
||||||
article p:first-of-type {
|
|
||||||
margin-top: var(--sizing-md);
|
|
||||||
}
|
|
||||||
|
|
||||||
.tag {
|
|
||||||
margin-bottom: var(--sizing-sm);
|
|
||||||
}
|
|
||||||
|
|
||||||
.tag:not(:last-child) {
|
|
||||||
margin-right: var(--sizing-sm);
|
|
||||||
}
|
|
||||||
|
|
||||||
footer nav:first-child {
|
|
||||||
gap: var(--sizing-md);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,3 +1,9 @@
|
||||||
.four-oh-four__wrapper .image__banner {
|
.four-oh-four__wrapper {
|
||||||
|
& .image__banner {
|
||||||
margin-bottom: var(--sizing-base);
|
margin-bottom: var(--sizing-base);
|
||||||
|
}
|
||||||
|
|
||||||
|
& .page__header {
|
||||||
|
margin-bottom: var(--sizing-xs);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -5,9 +5,10 @@
|
||||||
.avatar__wrapper {
|
.avatar__wrapper {
|
||||||
margin-bottom: var(--sizing-xl);
|
margin-bottom: var(--sizing-xl);
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
justify-content: center;
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
.avatar__wrapper .avatar__wrapper--interior {
|
& .avatar__wrapper--interior {
|
||||||
width: var(--avatar-size);
|
width: var(--avatar-size);
|
||||||
height: var(--avatar-size);;
|
height: var(--avatar-size);;
|
||||||
border: 1px solid var(--accent-color);
|
border: 1px solid var(--accent-color);
|
||||||
|
|
@ -15,18 +16,15 @@
|
||||||
display: flex;
|
display: flex;
|
||||||
padding: var(--sizing-lg);
|
padding: var(--sizing-lg);
|
||||||
background-color: var(--color-lightest);
|
background-color: var(--color-lightest);
|
||||||
}
|
|
||||||
|
|
||||||
.avatar__wrapper,
|
|
||||||
.avatar__wrapper .avatar__wrapper--interior {
|
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
|
||||||
|
|
||||||
.avatar__wrapper .avatar__wrapper--interior picture > *,
|
& picture > *,
|
||||||
.avatar__wrapper .avatar__wrapper--interior img {
|
& img {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media screen and (min-width: 768px) {
|
@media screen and (min-width: 768px) {
|
||||||
|
|
|
||||||
|
|
@ -1,11 +1,11 @@
|
||||||
.blog--roll__icons {
|
.blog--roll__icons {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: row !important;
|
||||||
gap: var(--sizing-xs);
|
gap: var(--sizing-xs);
|
||||||
}
|
|
||||||
|
|
||||||
.blog--roll__icons a {
|
& a {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -1,27 +1,31 @@
|
||||||
.contact__wrapper {
|
.contact__wrapper {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
}
|
|
||||||
|
|
||||||
.contact__wrapper textarea {
|
& textarea {
|
||||||
height: calc(var(--sizing-3xl) * 5);
|
height: calc(var(--sizing-3xl) * 5);
|
||||||
resize: none;
|
resize: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
& .column.contact__description p:first-child {
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.contact__wrapper .column.contact__description p:first-child {
|
.contact__success--header {
|
||||||
margin-top: 0;
|
margin: 0 0 var(--sizing-lg);
|
||||||
}
|
}
|
||||||
|
|
||||||
@media screen and (min-width: 768px) {
|
@media screen and (min-width: 768px) {
|
||||||
.contact__wrapper {
|
.contact__wrapper {
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
}
|
|
||||||
|
|
||||||
.contact__wrapper .column {
|
& .column {
|
||||||
width: 50%;
|
width: 50%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.contact__wrapper .column.contact__description {
|
& .column.contact__description {
|
||||||
padding-right: var(--sizing-xl);
|
padding-right: var(--sizing-xl);
|
||||||
}
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -1,5 +1,4 @@
|
||||||
.link__list {
|
.default__wrapper > .link__list {
|
||||||
padding-left: 0;
|
|
||||||
margin-top: 0;
|
margin-top: 0;
|
||||||
margin-bottom: var(--sizing-3xl);
|
margin-bottom: var(--sizing-3xl);
|
||||||
}
|
}
|
||||||
|
|
@ -1,26 +1,25 @@
|
||||||
/* now */
|
/* now */
|
||||||
.now__section--text {
|
.now__section--text {
|
||||||
padding-left: var(--sizing-base);
|
padding-left: var(--sizing-base);
|
||||||
}
|
|
||||||
|
|
||||||
.now__section--text p {
|
& p {
|
||||||
margin: var(--sizing-xs) 0;
|
margin: var(--sizing-xs) 0;
|
||||||
}
|
|
||||||
|
|
||||||
.now__section--text p > svg {
|
& > svg {
|
||||||
display: inline;
|
display: inline;
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
height: var(--sizing-base);
|
height: var(--sizing-base);
|
||||||
width: var(--sizing-base);
|
width: var(--sizing-base);
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.now__section--header,
|
.now__section--header {
|
||||||
.recent__links-header {
|
|
||||||
margin: var(--sizing-3xl) 0 var(--sizing-lg);
|
margin: var(--sizing-3xl) 0 var(--sizing-lg);
|
||||||
}
|
}
|
||||||
|
|
||||||
.default__wrapper > .now__section--header:first-of-type {
|
.default__wrapper > .now__section--header:first-of-type {
|
||||||
margin-top: 0;
|
margin-top: 0 !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.link__list {
|
.link__list {
|
||||||
|
|
@ -32,9 +31,3 @@
|
||||||
line-height: var(--line-height-xs);
|
line-height: var(--line-height-xs);
|
||||||
padding-top: var(--sizing-lg);
|
padding-top: var(--sizing-lg);
|
||||||
}
|
}
|
||||||
|
|
||||||
@media screen and (min-width: 768px) {
|
|
||||||
.now__section--text {
|
|
||||||
padding-left: var(--sizing-3xl);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -11,10 +11,10 @@ hr.footnotes-sep {
|
||||||
.footnotes-list {
|
.footnotes-list {
|
||||||
margin-bottom: 0 !important;
|
margin-bottom: 0 !important;
|
||||||
padding-left: 0 !important;
|
padding-left: 0 !important;
|
||||||
}
|
|
||||||
|
|
||||||
.footnotes-list li:last-child {
|
& li:last-child {
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.footnotes {
|
.footnotes {
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,11 @@
|
||||||
.webring__wrapper {
|
.webring__wrapper {
|
||||||
margin: var(--sizing-base) 0;
|
margin: var(--sizing-base) 0;
|
||||||
}
|
|
||||||
|
|
||||||
.webring__wrapper > .webring__centered {
|
h3 {
|
||||||
|
margin: var(--sizing-2xl) 0 var(--sizing-lg);
|
||||||
|
}
|
||||||
|
|
||||||
|
& > .webring__centered {
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
46
src/assets/styles/reset.css
Normal file
46
src/assets/styles/reset.css
Normal file
|
|
@ -0,0 +1,46 @@
|
||||||
|
/*
|
||||||
|
1. Use a more-intuitive box-sizing model.
|
||||||
|
*/
|
||||||
|
*, *::before, *::after {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
/*
|
||||||
|
2. Remove default margin
|
||||||
|
*/
|
||||||
|
* {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
/*
|
||||||
|
Typographic tweaks!
|
||||||
|
3. Add accessible line-height
|
||||||
|
4. Improve text rendering
|
||||||
|
*/
|
||||||
|
body {
|
||||||
|
line-height: 1.5;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
}
|
||||||
|
/*
|
||||||
|
5. Improve media defaults
|
||||||
|
*/
|
||||||
|
img, picture, video, canvas, svg {
|
||||||
|
display: block;
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
|
/*
|
||||||
|
6. Remove built-in form typography styles
|
||||||
|
*/
|
||||||
|
input, button, textarea, select {
|
||||||
|
font: inherit;
|
||||||
|
}
|
||||||
|
/*
|
||||||
|
7. Avoid text overflows
|
||||||
|
*/
|
||||||
|
p, h1, h2, h3, h4, h5, h6 {
|
||||||
|
overflow-wrap: break-word;
|
||||||
|
}
|
||||||
|
/*
|
||||||
|
8. Create a root stacking context
|
||||||
|
*/
|
||||||
|
#root, #__next {
|
||||||
|
isolation: isolate;
|
||||||
|
}
|
||||||
|
|
@ -5,10 +5,6 @@ pagination:
|
||||||
data: links
|
data: links
|
||||||
size: 30
|
size: 30
|
||||||
---
|
---
|
||||||
{% capture css %}
|
|
||||||
{% render "./assets/styles/pages/links.css" %}
|
|
||||||
{% endcapture %}
|
|
||||||
<style>{{ css }}</style>
|
|
||||||
<ul class="link__list">
|
<ul class="link__list">
|
||||||
{% for link in pagination.items %}
|
{% for link in pagination.items %}
|
||||||
<li>
|
<li>
|
||||||
|
|
|
||||||
|
|
@ -4,10 +4,6 @@ layout: default
|
||||||
permalink: /404.html
|
permalink: /404.html
|
||||||
image: /assets/img/404.jpg
|
image: /assets/img/404.jpg
|
||||||
---
|
---
|
||||||
{% capture css %}
|
|
||||||
{% render "../assets/styles/pages/404.css" %}
|
|
||||||
{% endcapture %}
|
|
||||||
<style>{{ css }}</style>
|
|
||||||
<div class="four-oh-four__wrapper">
|
<div class="four-oh-four__wrapper">
|
||||||
{% image 'https://coryd.dev/.netlify/images/?url=/assets/img/404.jpg&w=1000', title, 'image__banner', 'eager' %}
|
{% image 'https://coryd.dev/.netlify/images/?url=/assets/img/404.jpg&w=1000', title, 'image__banner', 'eager' %}
|
||||||
<div class="text--centered">
|
<div class="text--centered">
|
||||||
|
|
|
||||||
|
|
@ -6,10 +6,6 @@ permalink: /about.html
|
||||||
{%- assign artist = music.artists | first -%}
|
{%- assign artist = music.artists | first -%}
|
||||||
{%- assign book = books | first -%}
|
{%- assign book = books | first -%}
|
||||||
{%- assign show = tv | first -%}
|
{%- assign show = tv | first -%}
|
||||||
{% capture css %}
|
|
||||||
{% render "../assets/styles/pages/about.css" %}
|
|
||||||
{% endcapture %}
|
|
||||||
<style>{{ css }}</style>
|
|
||||||
<div class="avatar__wrapper flex--centered">
|
<div class="avatar__wrapper flex--centered">
|
||||||
<div class="avatar__wrapper--interior">
|
<div class="avatar__wrapper--interior">
|
||||||
{%- capture about_alt -%}{{ meta.siteName }} - image by David Neal / @reverentgeek{%- endcapture -%}
|
{%- capture about_alt -%}{{ meta.siteName }} - image by David Neal / @reverentgeek{%- endcapture -%}
|
||||||
|
|
|
||||||
|
|
@ -4,7 +4,7 @@ layout: default
|
||||||
permalink: /contact/success.html
|
permalink: /contact/success.html
|
||||||
---
|
---
|
||||||
<div class="text--centered">
|
<div class="text--centered">
|
||||||
<h2>{{ title }}</h2>
|
<h2 class="contact__success--header">{{ title }}</h2>
|
||||||
I'll be in touch soon! <a href="/">Head home</a>
|
I'll be in touch soon! <a href="/">Head home</a>
|
||||||
</div>
|
</div>
|
||||||
<hr class="large__spacing" />
|
<hr class="large__spacing" />
|
||||||
|
|
|
||||||
|
|
@ -4,12 +4,6 @@ layout: default
|
||||||
permalink: /contact.html
|
permalink: /contact.html
|
||||||
description: 'How to contact me.'
|
description: 'How to contact me.'
|
||||||
---
|
---
|
||||||
{% capture css %}
|
|
||||||
{% render "../assets/styles/components/forms.css" %}
|
|
||||||
{% render "../assets/styles/components/buttons.css" %}
|
|
||||||
{% render "../assets/styles/pages/contact.css" %}
|
|
||||||
{% endcapture %}
|
|
||||||
<style>{{ css }}</style>
|
|
||||||
<h2 class="page__header">{{ title }}</h2>
|
<h2 class="page__header">{{ title }}</h2>
|
||||||
<div class="contact__wrapper">
|
<div class="contact__wrapper">
|
||||||
<div class="column contact__description">
|
<div class="column contact__description">
|
||||||
|
|
|
||||||
|
|
@ -4,10 +4,6 @@ description: "Search through and find the posts on my site."
|
||||||
layout: default
|
layout: default
|
||||||
permalink: /search.html
|
permalink: /search.html
|
||||||
---
|
---
|
||||||
{% capture css %}
|
|
||||||
{% render "../assets/styles/components/forms.css" %}
|
|
||||||
{% endcapture %}
|
|
||||||
<style>{{ css }}</style>
|
|
||||||
<script src="/assets/scripts/components/minisearch.js"></script>
|
<script src="/assets/scripts/components/minisearch.js"></script>
|
||||||
<script type="module">
|
<script type="module">
|
||||||
(() => {
|
(() => {
|
||||||
|
|
|
||||||
|
|
@ -4,10 +4,6 @@ layout: default
|
||||||
permalink: /webrings.html
|
permalink: /webrings.html
|
||||||
description: "Webrings are awesome! These are the ones I'm a member of."
|
description: "Webrings are awesome! These are the ones I'm a member of."
|
||||||
---
|
---
|
||||||
{% capture css %}
|
|
||||||
{% render "../assets/styles/pages/webrings.css" %}
|
|
||||||
{% endcapture %}
|
|
||||||
<style>{{ css }}</style>
|
|
||||||
<h2
|
<h2
|
||||||
class="m-0 text-xl font-black leading-tight tracking-normal dark:text-white md:text-2xl mb-2"
|
class="m-0 text-xl font-black leading-tight tracking-normal dark:text-white md:text-2xl mb-2"
|
||||||
>
|
>
|
||||||
|
|
|
||||||
|
|
@ -18,7 +18,7 @@ tags: ['books', 'music', 'development', 'Eleventy']
|
||||||
{% tablericon "books" "Favorite books" %}
|
{% tablericon "books" "Favorite books" %}
|
||||||
Favorite books
|
Favorite books
|
||||||
</h2>
|
</h2>
|
||||||
{% render "partials/now/media-grid.liquid", data:roundups['2023'].books, shape: "vertical", count: 6, embeddedStyles: true %}
|
{% render "partials/now/media-grid.liquid", data:roundups['2023'].books, shape: "vertical", count: 6 %}
|
||||||
<h2 class="now__section--header flex--centered">
|
<h2 class="now__section--header flex--centered">
|
||||||
{% tablericon "vinyl" "Favorite albums" %}
|
{% tablericon "vinyl" "Favorite albums" %}
|
||||||
Favorite books
|
Favorite books
|
||||||
|
|
|
||||||
|
|
@ -57,18 +57,7 @@ I use [Tailwind](https://tailwindcss.com) for CSS styles[^1] which is minified a
|
||||||
ELEVENTY_PRODUCTION=true eleventy && NODE_ENV=production npx tailwindcss -i ./tailwind.css -c ./tailwind.config.js -o _site/assets/styles/tailwind.css --minify
|
ELEVENTY_PRODUCTION=true eleventy && NODE_ENV=production npx tailwindcss -i ./tailwind.css -c ./tailwind.config.js -o _site/assets/styles/tailwind.css --minify
|
||||||
```
|
```
|
||||||
|
|
||||||
The site include's Prism for code syntax highlighting and this is embedded and minified in the `<head>` of each page at build time:
|
The site include's Prism for code syntax highlighting and this is embedded and minified in the `<head>` of each page at build time. This is made possible by leveraging CleanCSS in (you guessed it) `.eleventy.js`:
|
||||||
{% raw %}
|
|
||||||
|
|
||||||
```liquid
|
|
||||||
{% capture css %}
|
|
||||||
{% include "../assets/styles/prism.css" %}
|
|
||||||
{% endcapture %}
|
|
||||||
<style>{{ css }}</style>
|
|
||||||
```
|
|
||||||
|
|
||||||
{% endraw %}
|
|
||||||
This is made possible by leveraging CleanCSS in (you guessed it) `.eleventy.js`:
|
|
||||||
{% raw %}
|
{% raw %}
|
||||||
|
|
||||||
```javascript
|
```javascript
|
||||||
|
|
|
||||||
|
|
@ -35,10 +35,6 @@ This all lands in a `mastodon-post.liquid` partial that I render inside my post
|
||||||
```liquid
|
```liquid
|
||||||
{%- assign shareLink = postUrl | findPost: linkPosts -%}
|
{%- assign shareLink = postUrl | findPost: linkPosts -%}
|
||||||
{%- if shareLink %}
|
{%- if shareLink %}
|
||||||
{% capture css %}
|
|
||||||
{% render "../../assets/styles/components/mastodon-post.css" %}
|
|
||||||
{% endcapture %}
|
|
||||||
<style>{{ css }}</style>
|
|
||||||
<script type="module" src="/assets/scripts/components/mastodon-post.js"></script>
|
<script type="module" src="/assets/scripts/components/mastodon-post.js"></script>
|
||||||
<template id="mastodon-post-template">
|
<template id="mastodon-post-template">
|
||||||
<div class="mastodon-post-wrapper">
|
<div class="mastodon-post-wrapper">
|
||||||
|
|
|
||||||
|
|
@ -118,10 +118,6 @@ The final template that leverages the component looks like this:
|
||||||
{% raw %}
|
{% raw %}
|
||||||
```liquid
|
```liquid
|
||||||
<script type="module" src="/assets/scripts/components/theme-toggle.js"></script>
|
<script type="module" src="/assets/scripts/components/theme-toggle.js"></script>
|
||||||
{% capture css %}
|
|
||||||
{% render "../../../assets/styles/components/theme-toggle.css" %}
|
|
||||||
{% endcapture %}
|
|
||||||
<style>{{ css }}</style>
|
|
||||||
<template id="theme-toggle-template">
|
<template id="theme-toggle-template">
|
||||||
<button class="theme__toggle">
|
<button class="theme__toggle">
|
||||||
<span class="light">
|
<span class="light">
|
||||||
|
|
|
||||||
Reference in a new issue