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",
|
||||
"version": "10.3.4",
|
||||
"version": "11.0.0",
|
||||
"description": "The source for my personal site. Built using 11ty.",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
|
|
|
|||
|
|
@ -16,13 +16,7 @@
|
|||
<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-Regular.min.woff2" as="font" type="font/woff2" crossorigin>
|
||||
{% capture 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>
|
||||
<link rel="stylesheet" href="/assets/styles/index.css?v={% appVersion %}" type="text/css" />
|
||||
<script async data-id="101449513" src="/23af0256fe76a.js"></script>
|
||||
<link rel="canonical" href="{{ fullUrl }}" />
|
||||
<meta property="og:title" content="{{ pageTitle }}" />
|
||||
|
|
|
|||
|
|
@ -1,13 +1,6 @@
|
|||
---
|
||||
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 %}
|
||||
{% render "../assets/scripts/media-toggles.js" %}
|
||||
{% endcapture %}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,3 @@
|
|||
{% capture css %}
|
||||
{% render "../../assets/styles/components/addon-links.css" %}
|
||||
{% endcapture %}
|
||||
<style>{{ css }}</style>
|
||||
<div class="addon-links__wrapper">
|
||||
{%- if analytics.size > 0 -%}
|
||||
<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">
|
||||
<a href="https://11ty.dev">
|
||||
{% 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">
|
||||
<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>
|
||||
|
|
@ -1,7 +1,3 @@
|
|||
{% capture css %}
|
||||
{% render "../../../assets/styles/components/banners.css" %}
|
||||
{% endcapture %}
|
||||
<style>{{ css }}</style>
|
||||
<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>
|
||||
</div>
|
||||
|
|
@ -1,9 +1,5 @@
|
|||
{% assign isOldPost = date | oldPost %}
|
||||
{% if isOldPost %}
|
||||
{% capture css %}
|
||||
{% render "../../../assets/styles/components/banners.css" %}
|
||||
{% endcapture %}
|
||||
<style>{{ css }}</style>
|
||||
<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>
|
||||
</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>
|
||||
<template id="link-peek-template">
|
||||
<figure>
|
||||
|
|
|
|||
|
|
@ -1,9 +1,5 @@
|
|||
{%- assign shareLink = postUrl | findPost: linkPosts -%}
|
||||
{%- 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>
|
||||
<template id="mastodon-post-template">
|
||||
<div class="mastodon-post-wrapper">
|
||||
|
|
|
|||
|
|
@ -1,8 +1,4 @@
|
|||
<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">
|
||||
<theme-toggle>
|
||||
<button
|
||||
|
|
|
|||
|
|
@ -1,11 +1,4 @@
|
|||
{% 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 %}
|
||||
<div class="media__grid {% if shape == 'square' %}square{% else %}vertical{% endif %}">
|
||||
{% for item in media limit: count %}
|
||||
|
|
|
|||
|
|
@ -1,3 +1,3 @@
|
|||
<p class="my-2">
|
||||
<p>
|
||||
{{ status.emoji }} {{ status.content }}
|
||||
</p>
|
||||
|
|
@ -1,10 +1,4 @@
|
|||
{% 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">
|
||||
{% for item in data limit: 10 %}
|
||||
{%- assign percentage = item.plays | calculatePlayPercentage: mostPlayed -%}
|
||||
|
|
@ -21,4 +15,5 @@
|
|||
{% render "partials/now/progress-bar.liquid", percentage:percentage %}
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
|
@ -1,9 +1,4 @@
|
|||
{% if data.size > 0 %}
|
||||
{% capture css %}
|
||||
{% render "../../../assets/styles/components/track-chart.css" %}
|
||||
{% endcapture %}
|
||||
<style>{{ css}}</style>
|
||||
{% endif %}
|
||||
<div class="track__chart">
|
||||
{% for item in data limit: 10 %}
|
||||
{% capture alt %}{{ item.track }} by {{ item.track }}{% endcapture %}
|
||||
|
|
@ -22,4 +17,5 @@
|
|||
</div>
|
||||
</div>
|
||||
{% 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>
|
||||
<nav aria-label="Blog pagination" class="pagination flex--centered">
|
||||
{% if pagination.href.previous %}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{% assign posts = posts | getPopularPosts: analytics %}
|
||||
{% if posts.size > 0 %}
|
||||
<h2 class="flex--centered">
|
||||
<h2 class="link__list--header flex--centered">
|
||||
{% tablericon "flame" "Popular" %}
|
||||
Popular posts
|
||||
</h2>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,3 @@
|
|||
{% capture css %}
|
||||
{% render "../../assets/styles/components/post-graph.css" %}
|
||||
{% endcapture %}
|
||||
<style>{{ css }}</style>
|
||||
<div class="post-graph">
|
||||
{% assign years = postYears | reverse %}
|
||||
{%- for year in years %}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
{% 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" %}
|
||||
Recent links
|
||||
</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>
|
||||
<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>
|
||||
|
|
|
|||
|
|
@ -4,11 +4,6 @@ schema: blog
|
|||
---
|
||||
{% render "partials/header.liquid", meta: meta, page: page, nav: nav %}
|
||||
{%- 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">
|
||||
<article class="h-entry">
|
||||
<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 {
|
||||
display: grid;
|
||||
gap: var(--sizing-sm);
|
||||
grid-template-columns: var(--grid);
|
||||
}
|
||||
grid-template-columns: repeat(1,minmax(0,1fr));
|
||||
|
||||
.addon-links__wrapper h2 {
|
||||
margin-top: 0;
|
||||
}
|
||||
& h2 {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.addon-links__wrapper div:last-of-type h2 {
|
||||
margin-top: var(--sizing-base);
|
||||
& div:last-of-type h2 {
|
||||
margin-top: var(--sizing-base);
|
||||
}
|
||||
|
||||
&.link__list {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 768px) {
|
||||
:root {
|
||||
--grid: repeat(2,minmax(0,1fr));
|
||||
}
|
||||
.addon-links__wrapper {
|
||||
grid-template-columns: repeat(2,minmax(0,1fr));
|
||||
|
||||
.addon-links__wrapper div h2 {
|
||||
margin-top: 0 !important;
|
||||
& div:first-of-type {
|
||||
margin-right: var(--sizing-lg);
|
||||
}
|
||||
|
||||
& div h2 {
|
||||
margin-top: 0 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,24 +1,20 @@
|
|||
:root {
|
||||
--grid: repeat(3,minmax(0,1fr));
|
||||
}
|
||||
|
||||
.badge__grid {
|
||||
display: grid;
|
||||
gap: var(--sizing-md);
|
||||
grid-template-columns: var(--grid);
|
||||
}
|
||||
grid-template-columns: repeat(3,minmax(0,1fr));
|
||||
|
||||
.badge__grid > * {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
& > * {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.badge__grid img {
|
||||
image-rendering: pixelated;
|
||||
img {
|
||||
image-rendering: pixelated;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 768px) {
|
||||
:root {
|
||||
--grid: repeat(4,minmax(0,1fr));
|
||||
.badge__grid {
|
||||
grid-template-columns: repeat(4,minmax(0,1fr));
|
||||
}
|
||||
}
|
||||
|
|
@ -3,38 +3,38 @@
|
|||
padding: var(--sizing-md);
|
||||
border: 1px solid;
|
||||
border-radius: var(--rounded);
|
||||
}
|
||||
|
||||
.banner.old-post {
|
||||
border-color: var(--gray-light);
|
||||
}
|
||||
& p {
|
||||
font-size: var(--font-size-sm);
|
||||
line-height: var(--line-height-sm);
|
||||
margin: 0 !important;
|
||||
|
||||
.banner.npm {
|
||||
border-color: var(--brand-npm);
|
||||
}
|
||||
& > svg {
|
||||
display: inline;
|
||||
vertical-align: middle;
|
||||
height: var(--sizing-lg);
|
||||
width: var(--sizing-lg);
|
||||
margin-right: var(--sizing-xs);
|
||||
}
|
||||
}
|
||||
|
||||
.banner.npm svg {
|
||||
stroke: var(--brand-npm);
|
||||
}
|
||||
&.old-post {
|
||||
border-color: var(--gray-light);
|
||||
}
|
||||
|
||||
.banner.github {
|
||||
border-color: var(--brand-github);
|
||||
}
|
||||
&.npm {
|
||||
border-color: var(--brand-npm);
|
||||
|
||||
.banner.github svg {
|
||||
stroke: var(--brand-github);
|
||||
}
|
||||
& svg {
|
||||
stroke: var(--brand-npm);
|
||||
}
|
||||
}
|
||||
|
||||
.banner p {
|
||||
font-size: var(--font-size-sm);
|
||||
line-height: var(--line-height-sm);
|
||||
margin: 0 !important;
|
||||
}
|
||||
&.github {
|
||||
border-color: var(--brand-github);
|
||||
|
||||
.banner p > svg {
|
||||
display: inline;
|
||||
vertical-align: middle;
|
||||
height: var(--sizing-lg);
|
||||
width: var(--sizing-lg);
|
||||
margin-right: var(--sizing-xs);
|
||||
& svg {
|
||||
stroke: var(--brand-github);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,48 +1,50 @@
|
|||
button:not(.theme__toggle, .share) {
|
||||
border-radius: var(--rounded-full);
|
||||
padding: var(--sizing-sm) var(--sizing-lg);
|
||||
margin: 0 var(--sizing-xs) var(--sizing-md) 0;
|
||||
cursor: pointer;
|
||||
display: inline-flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
font-size: var(--font-size-base);
|
||||
font-weight: var(--font-weight-bold);
|
||||
line-height: var(--line-height-base);
|
||||
color: var(--color-lightest);
|
||||
background-color: var(--accent-color);
|
||||
appearance: none;
|
||||
border: 2px solid var(--accent-color);
|
||||
transition-property: all;
|
||||
}
|
||||
button {
|
||||
&:not(.theme__toggle, .share) {
|
||||
border-radius: var(--rounded-full);
|
||||
padding: var(--sizing-sm) var(--sizing-lg);
|
||||
margin: 0 var(--sizing-xs) var(--sizing-md) 0;
|
||||
cursor: pointer;
|
||||
display: inline-flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
font-size: var(--font-size-base);
|
||||
font-weight: var(--font-weight-bold);
|
||||
line-height: var(--line-height-base);
|
||||
color: var(--color-lightest);
|
||||
background-color: var(--accent-color);
|
||||
appearance: none;
|
||||
border: 2px solid var(--accent-color);
|
||||
transition-property: all;
|
||||
}
|
||||
|
||||
button:not(.theme__toggle, .share, .active):hover,
|
||||
button:not(.theme__toggle, .share, .active):active,
|
||||
button:not(.theme__toggle, .share, .active):focus {
|
||||
background-color: var(--accent-color-hover);
|
||||
border-color: var(--accent-color-hover);
|
||||
transition-timing-function: var(--transition-ease-in-out);
|
||||
transition-duration: var(--transition-duration-default);
|
||||
}
|
||||
&:not(.theme__toggle, .share, .active):hover,
|
||||
&:not(.theme__toggle, .share, .active):active,
|
||||
&:not(.theme__toggle, .share, .active):focus {
|
||||
background-color: var(--accent-color-hover);
|
||||
border-color: var(--accent-color-hover);
|
||||
transition-timing-function: var(--transition-ease-in-out);
|
||||
transition-duration: var(--transition-duration-default);
|
||||
}
|
||||
|
||||
button.small {
|
||||
font-size: var(--font-size-sm);
|
||||
line-height: var(--line-height-sm);
|
||||
padding: var(--sizing-xs) var(--sizing-sm);
|
||||
}
|
||||
&.small {
|
||||
font-size: var(--font-size-sm);
|
||||
line-height: var(--line-height-sm);
|
||||
padding: var(--sizing-xs) var(--sizing-sm);
|
||||
}
|
||||
|
||||
button.secondary {
|
||||
color: var(--accent-color);
|
||||
background: transparent;
|
||||
}
|
||||
&.secondary {
|
||||
color: var(--accent-color);
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
button.secondary:not(.theme__toggle, .share):hover,
|
||||
button.secondary:not(.theme__toggle, .share):active,
|
||||
button.secondary:not(.theme__toggle, .share):focus {
|
||||
color: var(--accent-color-hover);
|
||||
background: transparent;
|
||||
}
|
||||
&.secondary:not(.theme__toggle, .share):hover,
|
||||
&.secondary:not(.theme__toggle, .share):active,
|
||||
&.secondary:not(.theme__toggle, .share):focus {
|
||||
color: var(--accent-color-hover);
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
button.active {
|
||||
cursor: not-allowed;
|
||||
&.active {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
|
|
@ -35,9 +35,9 @@ textarea:focus {
|
|||
margin-top: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.search__results li {
|
||||
margin-top: var(--sizing-sm);
|
||||
margin-bottom: var(--sizing-sm);
|
||||
& li {
|
||||
margin-top: var(--sizing-sm);
|
||||
margin-bottom: var(--sizing-sm);
|
||||
}
|
||||
}
|
||||
|
|
@ -1,36 +1,42 @@
|
|||
link-peek:defined a:not([data-key]) {
|
||||
display: none;
|
||||
}
|
||||
link-peek {
|
||||
&:defined {
|
||||
& a:not([data-key]) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
link-peek:defined figure {
|
||||
position: relative;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(300px, max-content));
|
||||
gap: 1rem;
|
||||
max-inline-size: max-content;
|
||||
border: 1px solid var(--gray-light);
|
||||
border-radius: var(--rounded);
|
||||
padding: 1rem;
|
||||
margin: 0 0 var(--sizing-base);
|
||||
font-size: var(--font-size-sm);
|
||||
line-height: var(--line-height-sm);
|
||||
}
|
||||
& figure {
|
||||
position: relative;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(300px, max-content));
|
||||
gap: 1rem;
|
||||
max-inline-size: max-content;
|
||||
border: 1px solid var(--gray-light);
|
||||
border-radius: var(--rounded);
|
||||
padding: 1rem;
|
||||
margin: 0 0 var(--sizing-base);
|
||||
font-size: var(--font-size-sm);
|
||||
line-height: var(--line-height-sm);
|
||||
}
|
||||
|
||||
link-peek:defined a[data-key="data.title.link"],
|
||||
link-peek:defined figure p {
|
||||
font-size: var(--font-size-sm);
|
||||
line-height: var(--line-height-sm);
|
||||
}
|
||||
& a[data-key="data.title.link"],
|
||||
& figure p {
|
||||
font-size: var(--font-size-sm);
|
||||
line-height: var(--line-height-sm);
|
||||
}
|
||||
}
|
||||
|
||||
link-peek img[data-key="data.logo.url"] {
|
||||
margin-right: var(--sizing-xs);
|
||||
inline-size: var(--sizing-lg);
|
||||
block-size: var(--sizing-lg);
|
||||
vertical-align: middle;
|
||||
}
|
||||
& img {
|
||||
&[data-key="data.logo.url"] {
|
||||
margin-right: var(--sizing-xs);
|
||||
inline-size: var(--sizing-lg);
|
||||
block-size: var(--sizing-lg);
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
link-peek img[data-key="data.image.url"] {
|
||||
max-inline-size: 100%;
|
||||
block-size: auto;
|
||||
border-radius: var(--rounded);
|
||||
&[data-key="data.image.url"] {
|
||||
max-inline-size: 100%;
|
||||
block-size: auto;
|
||||
border-radius: var(--rounded);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,18 +1,18 @@
|
|||
.mastodon-post-wrapper {
|
||||
border-bottom: 1px solid var(--gray-light);
|
||||
margin-bottom: var(--sizing-base);
|
||||
padding-bottom: var(--sizing-xs);
|
||||
}
|
||||
padding-bottom: var(--sizing-base);
|
||||
|
||||
dl {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
& dl {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
dd {
|
||||
margin-left: var(--sizing-xs);
|
||||
}
|
||||
& dd {
|
||||
margin-left: var(--sizing-xs);
|
||||
|
||||
dd:not(:last-child) {
|
||||
margin-right: var(--sizing-lg);
|
||||
&:not(:last-child) {
|
||||
margin-right: var(--sizing-lg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -3,8 +3,7 @@
|
|||
--grid-vertical: repeat(3,minmax(0,1fr));
|
||||
}
|
||||
|
||||
.now__section--header,
|
||||
.recent__links-header {
|
||||
.now__section--header {
|
||||
margin: var(--sizing-3xl) 0 var(--sizing-lg);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,24 +1,24 @@
|
|||
.pagination {
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.pagination button {
|
||||
background: none;
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
& button {
|
||||
background: none;
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.pagination a {
|
||||
display: flex;
|
||||
}
|
||||
& a {
|
||||
display: flex;
|
||||
|
||||
.pagination a > svg {
|
||||
stroke: var(--accent-color);
|
||||
cursor: pointer;
|
||||
}
|
||||
& > svg {
|
||||
stroke: var(--accent-color);
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.pagination span.disabled svg {
|
||||
cursor: not-allowed;
|
||||
stroke: color-mix(in srgb, var(--text-color), transparent 50%);
|
||||
stroke-width: var(--stroke-width-default);
|
||||
& span.disabled svg {
|
||||
cursor: not-allowed;
|
||||
stroke: color-mix(in srgb, var(--text-color), transparent 50%);
|
||||
stroke-width: var(--stroke-width-default);
|
||||
}
|
||||
}
|
||||
|
|
@ -1,19 +1,16 @@
|
|||
webcare-webshare {
|
||||
font-size: var(--font-size-sm);
|
||||
line-height: var(--line-height-xs);
|
||||
}
|
||||
|
||||
webcare-webshare button {
|
||||
color: var(--gray-dark);
|
||||
background: transparent;
|
||||
padding: 0;
|
||||
}
|
||||
& button {
|
||||
color: var(--gray-dark);
|
||||
background: transparent;
|
||||
padding: 0;
|
||||
cursor: pointer;
|
||||
|
||||
webcare-webshare button > svg {
|
||||
stroke: var(--gray-dark) !important;
|
||||
}
|
||||
|
||||
webcare-webshare button,
|
||||
webcare-webshare button > svg {
|
||||
cursor: pointer;
|
||||
& > svg {
|
||||
stroke: var(--gray-dark) !important;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,37 +1,41 @@
|
|||
.theme__toggle {
|
||||
background: transparent;
|
||||
padding: 0;
|
||||
|
||||
& svg {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
& svg:hover {
|
||||
stroke-width: var(--stroke-width-bold);
|
||||
}
|
||||
|
||||
& > .light svg { stroke: var(--sun) !important; }
|
||||
& > .dark svg { stroke: var(--moon) !important; }
|
||||
|
||||
& > .light ,
|
||||
& > .dark {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.theme__toggle svg {
|
||||
cursor: pointer;
|
||||
.theme__dark {
|
||||
& .theme__toggle > .light {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
& .theme__toggle > .dark {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.theme__toggle:hover,
|
||||
.theme__toggle svg:hover {
|
||||
stroke-width: var(--stroke-width-bold);
|
||||
}
|
||||
.theme__light {
|
||||
& .theme__toggle > .light {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.theme__toggle > .light svg { stroke: var(--sun) !important; }
|
||||
.theme__toggle > .dark svg { stroke: var(--moon) !important; }
|
||||
|
||||
.theme__toggle > .light ,
|
||||
.theme__toggle > .dark {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.theme__dark .theme__toggle > .light {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.theme__dark .theme__toggle > .dark {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.theme__light .theme__toggle > .light {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.theme__light .theme__toggle > .dark {
|
||||
display: inline;
|
||||
& .theme__toggle > .dark {
|
||||
display: inline;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,5 +1,14 @@
|
|||
.track__chart--item {
|
||||
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,
|
||||
|
|
@ -9,15 +18,6 @@
|
|||
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 {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
|
@ -49,15 +49,17 @@
|
|||
line-height: var(--line-height-sm);
|
||||
}
|
||||
|
||||
.track__chart--item img {
|
||||
border: 1px solid var(--accent-color);
|
||||
border-radius: var(--rounded);
|
||||
}
|
||||
.track__chart--item {
|
||||
& img {
|
||||
border: 1px solid var(--accent-color);
|
||||
border-radius: var(--rounded);
|
||||
}
|
||||
|
||||
.track__chart--item img,
|
||||
.track__chart--item picture {
|
||||
width: calc(var(--sizing-3xl) * 1.5);
|
||||
height: calc(var(--sizing-3xl) * 1.5);
|
||||
& img,
|
||||
& picture {
|
||||
width: calc(var(--sizing-3xl) * 1.5);
|
||||
height: calc(var(--sizing-3xl) * 1.5);
|
||||
}
|
||||
}
|
||||
|
||||
.track__chart--meta {
|
||||
|
|
|
|||
|
|
@ -1,556 +1,41 @@
|
|||
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;
|
||||
}
|
||||
|
||||
.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);
|
||||
}
|
||||
}
|
||||
@layer reset, defaults, base, page, components, plugins;
|
||||
|
||||
/* style resets */
|
||||
@import url('./reset.css') layer(reset);
|
||||
|
||||
/* core defaults */
|
||||
@import url('./defaults/fonts.css') layer(defaults);
|
||||
@import url('./defaults/vars.css') layer(defaults);
|
||||
@import url('./defaults/animations.css') layer(defaults);
|
||||
|
||||
/* base styles */
|
||||
@import url('./base/index.css') layer(base);
|
||||
|
||||
/* plugins */
|
||||
@import url('./plugins/prism.css') layer(plugins);
|
||||
|
||||
/* page styles */
|
||||
@import url('./pages/404.css') layer(page);
|
||||
@import url('./pages/about.css') layer(page);
|
||||
@import url('./pages/blogroll.css') layer(page);
|
||||
@import url('./pages/contact.css') layer(page);
|
||||
@import url('./pages/links.css') layer(page);
|
||||
@import url('./pages/now.css') layer(page);
|
||||
@import url('./pages/post.css') layer(page);
|
||||
@import url('./pages/webrings.css') layer(page);
|
||||
|
||||
/* component styles */
|
||||
@import url('./components/addon-links.css') layer(components);
|
||||
@import url('./components/badge-grid.css') layer(components);
|
||||
@import url('./components/banners.css') layer(components);
|
||||
@import url('./components/buttons.css') layer(components);
|
||||
@import url('./components/forms.css') layer(components);
|
||||
@import url('./components/link-peek.css') layer(components);
|
||||
@import url('./components/mastodon-post.css') layer(components);
|
||||
@import url('./components/media-grid.css') layer(components.media);
|
||||
@import url('./components/paginator.css') layer(components);
|
||||
@import url('./components/post-graph.css') layer(components);
|
||||
@import url('./components/progress-bar.css') layer(components.media);
|
||||
@import url('./components/share-button.css') layer(components);
|
||||
@import url('./components/theme-toggle.css') layer(components);
|
||||
@import url('./components/track-chart.css') layer(components.media);
|
||||
|
|
@ -1,3 +1,9 @@
|
|||
.four-oh-four__wrapper .image__banner {
|
||||
margin-bottom: var(--sizing-base);
|
||||
.four-oh-four__wrapper {
|
||||
& .image__banner {
|
||||
margin-bottom: var(--sizing-base);
|
||||
}
|
||||
|
||||
& .page__header {
|
||||
margin-bottom: var(--sizing-xs);
|
||||
}
|
||||
}
|
||||
|
|
@ -5,28 +5,26 @@
|
|||
.avatar__wrapper {
|
||||
margin-bottom: var(--sizing-xl);
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.avatar__wrapper .avatar__wrapper--interior {
|
||||
width: var(--avatar-size);
|
||||
height: var(--avatar-size);;
|
||||
border: 1px solid var(--accent-color);
|
||||
border-radius: var(--rounded-full);
|
||||
display: flex;
|
||||
padding: var(--sizing-lg);
|
||||
background-color: var(--color-lightest);
|
||||
}
|
||||
|
||||
.avatar__wrapper,
|
||||
.avatar__wrapper .avatar__wrapper--interior {
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.avatar__wrapper .avatar__wrapper--interior picture > *,
|
||||
.avatar__wrapper .avatar__wrapper--interior img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
& .avatar__wrapper--interior {
|
||||
width: var(--avatar-size);
|
||||
height: var(--avatar-size);;
|
||||
border: 1px solid var(--accent-color);
|
||||
border-radius: var(--rounded-full);
|
||||
display: flex;
|
||||
padding: var(--sizing-lg);
|
||||
background-color: var(--color-lightest);
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
|
||||
& picture > *,
|
||||
& img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 768px) {
|
||||
|
|
|
|||
|
|
@ -1,11 +1,11 @@
|
|||
.blog--roll__icons {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-direction: row !important;
|
||||
gap: var(--sizing-xs);
|
||||
}
|
||||
|
||||
.blog--roll__icons a {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
& a {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,27 +1,31 @@
|
|||
.contact__wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
& textarea {
|
||||
height: calc(var(--sizing-3xl) * 5);
|
||||
resize: none;
|
||||
}
|
||||
|
||||
& .column.contact__description p:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.contact__wrapper textarea {
|
||||
height: calc(var(--sizing-3xl) * 5);
|
||||
resize: none;
|
||||
}
|
||||
|
||||
.contact__wrapper .column.contact__description p:first-child {
|
||||
margin-top: 0;
|
||||
.contact__success--header {
|
||||
margin: 0 0 var(--sizing-lg);
|
||||
}
|
||||
|
||||
@media screen and (min-width: 768px) {
|
||||
.contact__wrapper {
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.contact__wrapper .column {
|
||||
width: 50%;
|
||||
}
|
||||
& .column {
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.contact__wrapper .column.contact__description {
|
||||
padding-right: var(--sizing-xl);
|
||||
& .column.contact__description {
|
||||
padding-right: var(--sizing-xl);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,5 +1,4 @@
|
|||
.link__list {
|
||||
padding-left: 0;
|
||||
.default__wrapper > .link__list {
|
||||
margin-top: 0;
|
||||
margin-bottom: var(--sizing-3xl);
|
||||
}
|
||||
|
|
@ -1,26 +1,25 @@
|
|||
/* now */
|
||||
.now__section--text {
|
||||
padding-left: var(--sizing-base);
|
||||
|
||||
& p {
|
||||
margin: var(--sizing-xs) 0;
|
||||
|
||||
& > svg {
|
||||
display: inline;
|
||||
vertical-align: middle;
|
||||
height: var(--sizing-base);
|
||||
width: var(--sizing-base);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.now__section--text p {
|
||||
margin: var(--sizing-xs) 0;
|
||||
}
|
||||
|
||||
.now__section--text p > svg {
|
||||
display: inline;
|
||||
vertical-align: middle;
|
||||
height: var(--sizing-base);
|
||||
width: var(--sizing-base);
|
||||
}
|
||||
|
||||
.now__section--header,
|
||||
.recent__links-header {
|
||||
.now__section--header {
|
||||
margin: var(--sizing-3xl) 0 var(--sizing-lg);
|
||||
}
|
||||
|
||||
.default__wrapper > .now__section--header:first-of-type {
|
||||
margin-top: 0;
|
||||
margin-top: 0 !important;
|
||||
}
|
||||
|
||||
.link__list {
|
||||
|
|
@ -31,10 +30,4 @@
|
|||
font-size: var(--font-size-xs);
|
||||
line-height: var(--line-height-xs);
|
||||
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 {
|
||||
margin-bottom: 0 !important;
|
||||
padding-left: 0 !important;
|
||||
}
|
||||
|
||||
.footnotes-list li:last-child {
|
||||
margin-bottom: 0;
|
||||
& li:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.footnotes {
|
||||
|
|
|
|||
|
|
@ -1,7 +1,11 @@
|
|||
.webring__wrapper {
|
||||
margin: var(--sizing-base) 0;
|
||||
}
|
||||
|
||||
.webring__wrapper > .webring__centered {
|
||||
justify-content: center;
|
||||
h3 {
|
||||
margin: var(--sizing-2xl) 0 var(--sizing-lg);
|
||||
}
|
||||
|
||||
& > .webring__centered {
|
||||
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
|
||||
size: 30
|
||||
---
|
||||
{% capture css %}
|
||||
{% render "./assets/styles/pages/links.css" %}
|
||||
{% endcapture %}
|
||||
<style>{{ css }}</style>
|
||||
<ul class="link__list">
|
||||
{% for link in pagination.items %}
|
||||
<li>
|
||||
|
|
|
|||
|
|
@ -4,10 +4,6 @@ layout: default
|
|||
permalink: /404.html
|
||||
image: /assets/img/404.jpg
|
||||
---
|
||||
{% capture css %}
|
||||
{% render "../assets/styles/pages/404.css" %}
|
||||
{% endcapture %}
|
||||
<style>{{ css }}</style>
|
||||
<div class="four-oh-four__wrapper">
|
||||
{% image 'https://coryd.dev/.netlify/images/?url=/assets/img/404.jpg&w=1000', title, 'image__banner', 'eager' %}
|
||||
<div class="text--centered">
|
||||
|
|
|
|||
|
|
@ -6,10 +6,6 @@ permalink: /about.html
|
|||
{%- assign artist = music.artists | first -%}
|
||||
{%- assign book = books | 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--interior">
|
||||
{%- capture about_alt -%}{{ meta.siteName }} - image by David Neal / @reverentgeek{%- endcapture -%}
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ layout: default
|
|||
permalink: /contact/success.html
|
||||
---
|
||||
<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>
|
||||
</div>
|
||||
<hr class="large__spacing" />
|
||||
|
|
|
|||
|
|
@ -4,12 +4,6 @@ layout: default
|
|||
permalink: /contact.html
|
||||
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>
|
||||
<div class="contact__wrapper">
|
||||
<div class="column contact__description">
|
||||
|
|
|
|||
|
|
@ -4,10 +4,6 @@ description: "Search through and find the posts on my site."
|
|||
layout: default
|
||||
permalink: /search.html
|
||||
---
|
||||
{% capture css %}
|
||||
{% render "../assets/styles/components/forms.css" %}
|
||||
{% endcapture %}
|
||||
<style>{{ css }}</style>
|
||||
<script src="/assets/scripts/components/minisearch.js"></script>
|
||||
<script type="module">
|
||||
(() => {
|
||||
|
|
|
|||
|
|
@ -4,10 +4,6 @@ layout: default
|
|||
permalink: /webrings.html
|
||||
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
|
||||
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" %}
|
||||
Favorite books
|
||||
</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">
|
||||
{% tablericon "vinyl" "Favorite albums" %}
|
||||
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
|
||||
```
|
||||
|
||||
The site include's Prism for code syntax highlighting and this is embedded and minified in the `<head>` of each page at build time:
|
||||
{% 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`:
|
||||
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 %}
|
||||
|
||||
```javascript
|
||||
|
|
|
|||
|
|
@ -35,10 +35,6 @@ This all lands in a `mastodon-post.liquid` partial that I render inside my post
|
|||
```liquid
|
||||
{%- assign shareLink = postUrl | findPost: linkPosts -%}
|
||||
{%- 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>
|
||||
<template id="mastodon-post-template">
|
||||
<div class="mastodon-post-wrapper">
|
||||
|
|
|
|||
|
|
@ -118,10 +118,6 @@ The final template that leverages the component looks like this:
|
|||
{% raw %}
|
||||
```liquid
|
||||
<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">
|
||||
<button class="theme__toggle">
|
||||
<span class="light">
|
||||
|
|
|
|||
Reference in a new issue