Update CSS Pipeline (#4)
All checks were successful
Build and Deploy / build_and_deploy (push) Successful in 1m19s
All checks were successful
Build and Deploy / build_and_deploy (push) Successful in 1m19s
The goal of this change was to speed up my CSS pipeline. Previously builds would take up to 30s because it had to rebuild the CSS for every page (I inlined the CSS). This updates the pipeline to remain somewhat the same, but offloads the busywork of computing my theme CSS (my design system in other words), and is replaced by a mostly static file (`css/global/lilypad.css`), which I can update as my design system changes. I also offloaded several of my utility classes as I know I will want to use them in other sites I design, so it made sense to move them as well. The new pipeline makes use of 11ty's bundle feature (newly included in 11ty v3), which allows me to bundle all my CSS together into one file. Since I know my core styles like `lilypad.css` will always remain the same, I decided to keep that inline. I use the `transforms` feature for bundling to run a PostCSS transform on the bundled output, which resolves any imports and minifies the final output. In order to cut down my build times even further, I removed my XML minifier - it was taking upwards of 3 seconds to minify XML to probably a small benefit to end users. Reviewed-on: #4 Co-authored-by: Devin Haska <wonderfulfrog@noreply.git.cloud.haska.me> Co-committed-by: Devin Haska <wonderfulfrog@noreply.git.cloud.haska.me>
This commit is contained in:
parent
07a71e8f99
commit
efcdb7296e
59 changed files with 344 additions and 1996 deletions
|
|
@ -2,8 +2,8 @@
|
|||
align-items: center;
|
||||
color: var(--color-text);
|
||||
display: inline-flex;
|
||||
gap: var(--spacing-0\.5);
|
||||
padding: var(--spacing-0\.5) var(--spacing-1);
|
||||
gap: var(--spacing-2);
|
||||
padding: var(--spacing-2) var(--spacing-4);
|
||||
position: relative;
|
||||
text-decoration: none;
|
||||
transition: transform 0.3s var(--transition-bounce);
|
||||
|
|
@ -11,7 +11,7 @@
|
|||
|
||||
&::before,
|
||||
&::after {
|
||||
border-radius: var(--spacing-0\.5);
|
||||
border-radius: var(--spacing-2);
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
content: "";
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
.card {
|
||||
border: 1px solid var(--color-shadow);
|
||||
border-radius: var(--spacing-0\.5);
|
||||
padding: var(--spacing-1);
|
||||
border-radius: var(--spacing-2);
|
||||
padding: var(--spacing-4);
|
||||
background-color: var(--color-surface);
|
||||
}
|
||||
|
||||
.card--secondary {
|
||||
|
|
|
|||
|
|
@ -1,38 +1,30 @@
|
|||
.media-metadata-grid {
|
||||
display: grid;
|
||||
gap: var(--spacing-4);
|
||||
|
||||
@container (min-width: 48rem) {
|
||||
grid-template-columns: 200px 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
.media-metadata {
|
||||
display: grid;
|
||||
grid-template-columns: 150px 1fr;
|
||||
row-gap: var(--spacing-1);
|
||||
}
|
||||
|
||||
.media-image {
|
||||
--aspect-ratio: 0.8;
|
||||
|
||||
border: 1px solid var(--color-shadow);
|
||||
border-radius: var(--spacing-0\.5);
|
||||
overflow: hidden;
|
||||
|
||||
source,
|
||||
img {
|
||||
aspect-ratio: var(--aspect-ratio);
|
||||
height: auto;
|
||||
object-fit: cover;
|
||||
border-radius: var(--spacing-1);
|
||||
}
|
||||
}
|
||||
|
||||
.media-image--tall {
|
||||
--aspect-ratio: 0.67;
|
||||
}
|
||||
|
||||
.media-meta-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 225px 1fr;
|
||||
}
|
||||
|
||||
.meta-grid--full {
|
||||
grid-column: 1/3;
|
||||
}
|
||||
|
||||
.media-meta {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
|
||||
@container (max-width: 36rem) {
|
||||
.media-meta-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
|
||||
display: grid;
|
||||
grid-template-columns: repeat(var(--column-count), minmax(0, 1fr));
|
||||
grid-gap: var(--spacing-0\.5);
|
||||
grid-gap: var(--spacing-2);
|
||||
|
||||
li {
|
||||
border: 1px solid var(--color-shadow);
|
||||
|
|
@ -15,6 +15,7 @@
|
|||
color: var(--color-white);
|
||||
|
||||
picture {
|
||||
border-radius: 0;
|
||||
height: 100%;
|
||||
|
||||
img {
|
||||
|
|
@ -62,7 +63,7 @@
|
|||
|
||||
.meta-text {
|
||||
transition-delay: 0.05s;
|
||||
transform: translateY(var(--spacing-1));
|
||||
transform: translateY(var(--spacing-4));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@
|
|||
font-family: var(--font-family-body);
|
||||
font-weight: var(--font-weight-body-regular);
|
||||
line-height: 0.8rem;
|
||||
padding-inline: var(--spacing-0\.5);
|
||||
padding-block: var(--spacing-0\.25);
|
||||
border-radius: var(--spacing-0\.5);
|
||||
padding-inline: var(--spacing-2);
|
||||
padding-block: var(--spacing-1);
|
||||
border-radius: var(--spacing-2);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,10 +6,10 @@ spacing, regardless of their size
|
|||
*/
|
||||
|
||||
.cluster {
|
||||
--gap: var(--spacing-1);
|
||||
--gap: var(--spacing-4);
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--gap, --spacing-1);
|
||||
gap: var(--gap, --spacing-4);
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@ there is space in the viewport and stacks on small viewports
|
|||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: var(--spacing-0\.5);
|
||||
gap: var(--spacing-2);
|
||||
}
|
||||
|
||||
.repel[data-nowrap] {
|
||||
|
|
|
|||
|
|
@ -11,6 +11,8 @@
|
|||
|
||||
html {
|
||||
scrollbar-color: var(--color-primary) var(--color-surface);
|
||||
scrollbar-gutter: stable;
|
||||
scrollbar-width: thin;
|
||||
}
|
||||
|
||||
body {
|
||||
|
|
@ -50,14 +52,14 @@ h2 {
|
|||
|
||||
h3 {
|
||||
font-size: 1.5rem;
|
||||
font-weight: var(--font-weight-bold);
|
||||
font-weight: var(--font-weight-normal);
|
||||
letter-spacing: -0.05rem;
|
||||
line-height: 1.5rem;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: 1.125rem;
|
||||
font-weight: var(--font-weight-bold);
|
||||
font-weight: var(--font-weight-normal);
|
||||
letter-spacing: -0.05rem;
|
||||
line-height: 1.125rem;
|
||||
text-transform: uppercase;
|
||||
|
|
@ -103,9 +105,9 @@ blockquote {
|
|||
border-inline-start: 2px solid var(--color-primary);
|
||||
margin-inline-start: 0;
|
||||
margin-inline-end: 0;
|
||||
padding: var(--spacing-1);
|
||||
padding: var(--spacing-4);
|
||||
background-color: var(--color-surface);
|
||||
border-radius: var(--spacing-0\.5);
|
||||
border-radius: var(--spacing-2);
|
||||
}
|
||||
|
||||
blockquote > * + * {
|
||||
|
|
@ -138,7 +140,7 @@ code {
|
|||
|
||||
:not(pre) > code {
|
||||
background-color: var(--color-surface);
|
||||
border-radius: var(--spacing-0\.25);
|
||||
border-radius: var(--spacing-1);
|
||||
padding-block: 0.15em;
|
||||
padding-inline: 0.25em;
|
||||
}
|
||||
|
|
@ -153,7 +155,7 @@ picture {
|
|||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin-inline: 0;
|
||||
border-radius: var(--spacing-0\.5);
|
||||
border-radius: var(--spacing-2);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
|
|
@ -172,20 +174,20 @@ picture img {
|
|||
|
||||
aside {
|
||||
background-color: var(--color-surface);
|
||||
padding: var(--spacing-1);
|
||||
border-radius: var(--spacing-0\.5);
|
||||
margin-inline: calc(-1 * var(--spacing-1));
|
||||
padding: var(--spacing-4);
|
||||
border-radius: var(--spacing-2);
|
||||
margin-inline: calc(-1 * var(--spacing-4));
|
||||
}
|
||||
|
||||
mark {
|
||||
background-color: var(--color-border);
|
||||
color: var(--color-text);
|
||||
padding-block: var(--spacing-0\.25);
|
||||
padding-block: var(--spacing-1);
|
||||
}
|
||||
|
||||
[href="#main"] {
|
||||
background-color: var(--color-background);
|
||||
margin-inline: var(--spacing-1);
|
||||
margin-inline: var(--spacing-4);
|
||||
}
|
||||
|
||||
[href="#main"]:not(:focus) {
|
||||
|
|
@ -202,7 +204,7 @@ mark {
|
|||
|
||||
table {
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--spacing-0\.5);
|
||||
border-radius: var(--spacing-2);
|
||||
border-spacing: 0;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
|
|
@ -218,8 +220,8 @@ table thead th {
|
|||
|
||||
table th,
|
||||
table td {
|
||||
padding-block: var(--spacing-0\.5);
|
||||
padding-inline: var(--spacing-1);
|
||||
padding-block: var(--spacing-2);
|
||||
padding-inline: var(--spacing-4);
|
||||
}
|
||||
|
||||
table tbody tr:first-child td {
|
||||
|
|
@ -230,6 +232,10 @@ table tbody tr:not(:last-child) td {
|
|||
border-bottom: 1px solid var(--color-border);
|
||||
}
|
||||
|
||||
dd {
|
||||
margin-inline-start: 0;
|
||||
}
|
||||
|
||||
/*
|
||||
* Snippet from:
|
||||
* https://nerdy.dev/6-css-snippets-every-front-end-developer-should-know-in-2025#transition-animation-for-%3Cdetails%3E
|
||||
|
|
|
|||
1
src/includes/css/global/lilypad.css
Normal file
1
src/includes/css/global/lilypad.css
Normal file
File diff suppressed because one or more lines are too long
|
|
@ -1,8 +1,22 @@
|
|||
@import "global/reset.css";
|
||||
@import "global/variables.css";
|
||||
|
||||
@import "global/global-styles.css";
|
||||
|
||||
@import-glob "blocks/*.css";
|
||||
@import-glob "compositions/*.css";
|
||||
@import-glob "utilities/*.css";
|
||||
@import "blocks/button.css";
|
||||
@import "blocks/card.css";
|
||||
@import "blocks/media-display.css";
|
||||
@import "blocks/media-grid.css";
|
||||
@import "blocks/pill.css";
|
||||
@import "blocks/posts.css";
|
||||
@import "blocks/prism.css";
|
||||
@import "blocks/site-header.css";
|
||||
@import "blocks/site-logo.css";
|
||||
@import "blocks/stars.css";
|
||||
|
||||
@import "compositions/cluster.css";
|
||||
@import "compositions/repel.css";
|
||||
|
||||
@import "utilities/fonts.css";
|
||||
@import "utilities/image.css";
|
||||
@import "utilities/table.css";
|
||||
@import "utilities/wrapper.css";
|
||||
|
|
|
|||
|
|
@ -1,32 +0,0 @@
|
|||
.flex {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.flex-col {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.items-center {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.items-end {
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.justify-center {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.justify-between {
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.flex-wrap {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.flex-1 {
|
||||
flex: 1;
|
||||
}
|
||||
|
|
@ -1,8 +0,0 @@
|
|||
/*
|
||||
* FLOW UTILITY
|
||||
* Like the Every Layout stack: https://every-layout.dev/layouts/stack/
|
||||
* Info about this implementation: https://piccalil.li/quick-tip/flow-utility/
|
||||
*/
|
||||
.flow > * + * {
|
||||
margin-block-start: var(--flow-space, 1em);
|
||||
}
|
||||
|
|
@ -2,22 +2,6 @@
|
|||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.font-size-m {
|
||||
font-size: 1.125rem;
|
||||
}
|
||||
|
||||
.font-size-l {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.font-size-xl {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.font-size-2xl {
|
||||
font-size: 3rem;
|
||||
}
|
||||
|
||||
.line-height-s {
|
||||
line-height: 0.8rem;
|
||||
}
|
||||
|
|
@ -29,7 +13,3 @@
|
|||
.line-height-l {
|
||||
line-height: 1.5rem;
|
||||
}
|
||||
|
||||
.line-height-xl {
|
||||
line-height: 2rem;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,11 +1,11 @@
|
|||
.image-shrink {
|
||||
max-width: 50%;
|
||||
border-radius: var(--spacing-0\.5);
|
||||
border-radius: var(--spacing-2);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.image-tiny {
|
||||
max-width: 25%;
|
||||
border-radius: var(--spacing-0\.5);
|
||||
border-radius: var(--spacing-2);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,11 +0,0 @@
|
|||
.list-none {
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
.list-disc {
|
||||
list-style-type: disc;
|
||||
}
|
||||
|
||||
.list-decimal {
|
||||
list-style-type: decimal;
|
||||
}
|
||||
|
|
@ -1,15 +0,0 @@
|
|||
/*
|
||||
* VISUALLY HIDDEN UTILITY
|
||||
* Info: https://piccalil.li/quick-tip/visually-hidden/
|
||||
*/
|
||||
.visually-hidden {
|
||||
border: 0;
|
||||
clip: rect(0 0 0 0);
|
||||
height: 0;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
|
@ -20,12 +20,13 @@
|
|||
<script type="module"
|
||||
src="https://cdn.jsdelivr.net/npm/@justinribeiro/lite-youtube@1.4.0/lite-youtube.min.js"></script>
|
||||
{% endif %}
|
||||
{% set css %}
|
||||
<style>{% include "css/global/lilypad.css" %}</style>
|
||||
{% css %}
|
||||
{% include "css/styles.css" %}
|
||||
{% endset %}
|
||||
<style>{{ css | postcss | safe }}</style>
|
||||
{% endcss %}
|
||||
<link rel="stylesheet" href="{% getBundleFileUrl "css" %}">
|
||||
</head>
|
||||
<body class="flex-col">
|
||||
<body class="flex flex-col">
|
||||
{% include "partials/header.html" %}
|
||||
<main id="main" class="flow flex-1 wrapper" tabindex="-1">
|
||||
{{ content | safe }}
|
||||
|
|
|
|||
|
|
@ -3,47 +3,43 @@ layout: "layouts/base"
|
|||
---
|
||||
|
||||
{% from "macros/date.njk" import format %}
|
||||
{% from "macros/utils.njk" import stars %}
|
||||
{% from "macros/utils.njk" import stars, spoilerWarning %}
|
||||
{% from "macros/tags.njk" import tagList %}
|
||||
<header class="flow flow-space-1">
|
||||
{{ format(page.date) }}
|
||||
<h1>{{ title }}</h1>
|
||||
{% if pullquote %}<p class="text-fadeText flow-space-0.25">{{ pullquote }}</p>{% endif %}
|
||||
</header>
|
||||
{% if hasSpoilers %}
|
||||
<section class="bg-surface radius-0.5 p-1">
|
||||
<span class="text-secondary">{% include "svgs/triangle-exclamation.svg" %}</span>
|
||||
<strong>Warning!</strong>
|
||||
The following may contain spoilers!
|
||||
</section>
|
||||
{% endif %}
|
||||
{% if content %}
|
||||
<section class="flow">
|
||||
{{ content | safe }}
|
||||
</section>
|
||||
{% endif %}
|
||||
<hr class="my-2" />
|
||||
<footer class="media-meta-grid gap-1">
|
||||
<div class="media-image media-image--tall">
|
||||
<img src="{{ image }}" alt="" />
|
||||
</div>
|
||||
<div class="flow flex-col justify-center">
|
||||
<h2>{{ title }}</h2>
|
||||
{% if subtitle %}<p class="text-fadeText flow-space-0.5 line-height-m">{{ subtitle }}</p>{% endif %}
|
||||
{% if rating %}{{ stars(rating) }}{% endif %}
|
||||
<ul class="list-none p-0 mb-0 media-meta gap-0.5">
|
||||
{% if author %}
|
||||
<li class="flex-col">
|
||||
<strong>Author</strong><span>{{ author }}</span>
|
||||
</li>
|
||||
{% endif %}
|
||||
{% if year %}
|
||||
<li class="flex-col">
|
||||
<strong>Published</strong><span>{{ year }}</span>
|
||||
</li>
|
||||
{% endif %}
|
||||
</ul>
|
||||
</div>
|
||||
</footer>
|
||||
<hr class="my-2">
|
||||
{{ tagList(tags | filter("book") , "/books") }}
|
||||
<article class="flow">
|
||||
<header class="flow">
|
||||
<div class="flow flow-space-1">
|
||||
<h1>{{ title }}</h1>
|
||||
{% if pullquote %}<h3 class="text-fadeText">{{ pullquote }}</h3>{% endif %}
|
||||
</div>
|
||||
{{ format(page.date) }}
|
||||
</header>
|
||||
{% if hasSpoilers %}
|
||||
{{ spoilerWarning() }}
|
||||
{% endif %}
|
||||
{% if content %}
|
||||
<section class="flow flow-space-default">
|
||||
{{ content | safe }}
|
||||
</section>
|
||||
{% endif %}
|
||||
<footer class="card media-metadata-grid">
|
||||
<div class="media-image media-image--tall">
|
||||
<img src="{{ image }}" alt="" />
|
||||
</div>
|
||||
<div class="flow flex flex-col justify-center flow-space-4">
|
||||
<h2>{{ title }}</h2>
|
||||
{% if subtitle %}<p class="text-fadeText flow-space-2 line-height-m">{{ subtitle }}</p>{% endif %}
|
||||
{% if rating %}{{ stars(rating) }}{% endif %}
|
||||
<dl class="media-metadata">
|
||||
{% if author %}
|
||||
<dt><strong>Author</strong></dt>
|
||||
<dd>{{ author }}</dd>
|
||||
{% endif %}
|
||||
{% if year %}
|
||||
<dt><strong>Published</strong></dt>
|
||||
<dd>{{ year }}</dd>
|
||||
{% endif %}
|
||||
</dl>
|
||||
</div>
|
||||
</footer>
|
||||
{{ tagList(tags | filter("book") , "/books") }}
|
||||
</article>
|
||||
|
|
|
|||
|
|
@ -3,54 +3,46 @@ layout: "layouts/base"
|
|||
---
|
||||
|
||||
{% from "macros/date.njk" import format %}
|
||||
{% from "macros/utils.njk" import stars %}
|
||||
{% from "macros/utils.njk" import stars, spoilerWarning %}
|
||||
{% from "macros/tags.njk" import tagList %}
|
||||
<header class="flow flow-space-1">
|
||||
{{ format(page.date) }}
|
||||
<h1>{{ title }}</h1>
|
||||
{% if pullquote %}<p class="text-fadeText flow-space-0.25">{{ pullquote }}</p>{% endif %}
|
||||
</header>
|
||||
{% if hasSpoilers %}
|
||||
<section class="bg-surface radius-0.5 p-1">
|
||||
<span class="text-secondary">{% include "svgs/triangle-exclamation.svg" %}</span>
|
||||
<strong>Warning!</strong>
|
||||
The following may contain spoilers!
|
||||
</section>
|
||||
{% endif %}
|
||||
{% if content %}
|
||||
<section class="flow">
|
||||
{{ content | safe }}
|
||||
</section>
|
||||
{% endif %}
|
||||
<hr class="my-2" />
|
||||
<footer class="media-meta-grid gap-1">
|
||||
<div class="media-image media-image--tall">
|
||||
<img src="{{ image }}" alt="" />
|
||||
</div>
|
||||
<div class="flow flex-col justify-center">
|
||||
<div class="flex items-center gap-0.5 flex-wrap">
|
||||
<h2>{{ title }}</h2>
|
||||
<article class="flow">
|
||||
<header class="flow">
|
||||
<div class="flow flow-space-1">
|
||||
<h1>{{ title }}</h1>
|
||||
{% if pullquote %}<h3 class="text-fadeText">{{ pullquote }}</h3>{% endif %}
|
||||
</div>
|
||||
{% if subtitle %}<h2>{{ subtitle }}</h2>{% endif %}
|
||||
{% if rating %}{{ stars(rating) }}{% endif %}
|
||||
<ul class="list-none p-0 mb-0 media-meta gap-0.5">
|
||||
{% if year %}
|
||||
<li class="flex-col">
|
||||
<strong>Released</strong><span>{{ year }}</span>
|
||||
</li>
|
||||
{% endif %}
|
||||
{% if platform %}
|
||||
<li class="flex-col">
|
||||
<strong>Platform</strong><span>{{ platform }}</span>
|
||||
</li>
|
||||
{% endif %}
|
||||
{% if playtime %}
|
||||
<li class="flex-col">
|
||||
<strong>Playtime</strong><span>{{ playtime }}</span>
|
||||
</li>
|
||||
{% endif %}
|
||||
</ul>
|
||||
</div>
|
||||
</footer>
|
||||
<hr class="my-2">
|
||||
{{ tagList(tags | filter("game") , "/games") }}
|
||||
{{ format(page.date) }}
|
||||
</header>
|
||||
{% if hasSpoilers %}
|
||||
{{ spoilerWarning() }}
|
||||
{% endif %}
|
||||
{% if content %}
|
||||
<section class="flow flow-space-default">
|
||||
{{ content | safe }}
|
||||
</section>
|
||||
{% endif %}
|
||||
<footer class="card media-metadata-grid">
|
||||
<div class="media-image media-image--tall">
|
||||
<img src="{{ image }}" alt="" />
|
||||
</div>
|
||||
<div class="flow flex flex-col justify-center flow-space-4">
|
||||
<h2>{{ title }}</h2>
|
||||
{% if rating %}{{ stars(rating) }}{% endif %}
|
||||
<dl class="media-metadata">
|
||||
{% if year %}
|
||||
<dt><strong>Released</strong></dt>
|
||||
<dd>{{ year }}</dd>
|
||||
{% endif %}
|
||||
{% if platform %}
|
||||
<dt><strong>Platform</strong></dt>
|
||||
<dd>{{ platform }}</dd>
|
||||
{% endif %}
|
||||
{% if playtime %}
|
||||
<dt><strong>Playtime</strong></dt>
|
||||
<dd>{{ playtime }}</dd>
|
||||
{% endif %}
|
||||
</dl>
|
||||
</div>
|
||||
</footer>
|
||||
{{ tagList(tags | filter("game") , "/games") }}
|
||||
</article>
|
||||
|
|
|
|||
|
|
@ -3,66 +3,59 @@ layout: "layouts/base"
|
|||
---
|
||||
|
||||
{% from "macros/date.njk" import format %}
|
||||
{% from "macros/utils.njk" import stars %}
|
||||
{% from "macros/utils.njk" import stars, spoilerWarning %}
|
||||
{% from "macros/tags.njk" import tagList %}
|
||||
<header class="flow flow-space-1">
|
||||
{{ format(page.date) }}
|
||||
<h1>{{ title }}</h1>
|
||||
<p class="text-fadeText flow-space-0.25">{{ pullquote }}</p>
|
||||
</header>
|
||||
{% if hasSpoilers %}
|
||||
<section class="bg-surface radius-0.5 p-1">
|
||||
<span class="text-secondary">{% include "svgs/triangle-exclamation.svg" %}</span>
|
||||
<strong>Warning!</strong>
|
||||
The following may contain spoilers!
|
||||
</section>
|
||||
{% endif %}
|
||||
{% if watchHistory.length > 1 %}
|
||||
<p>
|
||||
<span class="text-primary">{% include "svgs/circle-info.svg" %}</span>
|
||||
I've seen this movie <strong>{{ watchHistory.length }}</strong> {{ "time" | pluralize(watchHistory) }}!
|
||||
</p>
|
||||
{% endif %}
|
||||
{% if favourite or isFavourite %}
|
||||
<p>
|
||||
<span class="text-secondary">{% include "svgs/star.svg" %}</span>
|
||||
This is one of my favourite movies!
|
||||
</p>
|
||||
{% endif %}
|
||||
{% if content %}
|
||||
<section class="flow">
|
||||
{{ content | safe }}
|
||||
</section>
|
||||
{% endif %}
|
||||
<hr class="my-2" />
|
||||
<footer class="media-meta-grid gap-1">
|
||||
<div class="media-image media-image--tall">
|
||||
<img src="{{ image }}" alt="" />
|
||||
</div>
|
||||
<div class="flow flex-col justify-center">
|
||||
<div class="flex items-center gap-0.5 flex-wrap">
|
||||
<h2>{{ title }}</h2>
|
||||
<article class="flow">
|
||||
<header class="flow">
|
||||
<div class="flow flow-space-1">
|
||||
<h1>{{ title }}</h1>
|
||||
{% if pullquote %}<h3 class="text-fadeText">{{ pullquote }}</h3>{% endif %}
|
||||
</div>
|
||||
{% if subtitle %}<h2>{{ subtitle }}</h2>{% endif %}
|
||||
{% if rating %}{{ stars(rating) }}{% endif %}
|
||||
<ul class="list-none p-0 mb-0 media-meta gap-0.5">
|
||||
{% if year %}
|
||||
<li class="flex-col">
|
||||
<strong>Released</strong><span>{{ year }}</span>
|
||||
</li>
|
||||
{% endif %}
|
||||
{% if director %}
|
||||
<li class="flex-col">
|
||||
<strong>Director</strong>{{ director }}
|
||||
</li>
|
||||
{% endif %}
|
||||
{% if runtime %}
|
||||
<li class="flex-col">
|
||||
<strong>Runtime</strong><span>{{ runtime }} mins</span>
|
||||
</li>
|
||||
{% endif %}
|
||||
</ul>
|
||||
</div>
|
||||
</footer>
|
||||
<hr class="my-2">
|
||||
{{ tagList(tags | filter("movie") , "/watching/movies") }}
|
||||
{{ format(page.date) }}
|
||||
</header>
|
||||
{% if hasSpoilers %}
|
||||
{{ spoilerWarning() }}
|
||||
{% endif %}
|
||||
{% if watchHistory.length > 1 %}
|
||||
<p>
|
||||
<span class="text-primary">{% include "svgs/circle-info.svg" %}</span>
|
||||
I've seen this movie <strong>{{ watchHistory.length }}</strong> {{ "time" | pluralize(watchHistory) }}!
|
||||
</p>
|
||||
{% endif %}
|
||||
{% if favourite or isFavourite %}
|
||||
<p>
|
||||
<span class="text-secondary">{% include "svgs/star.svg" %}</span>
|
||||
This is one of my favourite movies!
|
||||
</p>
|
||||
{% endif %}
|
||||
{% if content %}
|
||||
<section class="flow flow-space-default">
|
||||
{{ content | safe }}
|
||||
</section>
|
||||
{% endif %}
|
||||
<footer class="card media-metadata-grid">
|
||||
<div class="media-image media-image--tall">
|
||||
<img src="{{ image }}" alt="" />
|
||||
</div>
|
||||
<div class="flow flex flex-col justify-center flow-space-4">
|
||||
<h2>{{ title }}</h2>
|
||||
{% if subtitle %}<p class="text-fadeText flow-space-2 line-height-m">{{ subtitle }}</p>{% endif %}
|
||||
{% if rating %}{{ stars(rating) }}{% endif %}
|
||||
<dl class="media-metadata">
|
||||
{% if year %}
|
||||
<dt><strong>Released</strong></dt>
|
||||
<dd>{{ year }}</dd>
|
||||
{% endif %}
|
||||
{% if director %}
|
||||
<dt><strong>Director</strong></dt>
|
||||
<dd>{{ director }}</dd>
|
||||
{% endif %}
|
||||
{% if runtime %}
|
||||
<dt><strong>Runtime</strong></dt>
|
||||
<dd>{{ runtime }} minutes</dd>
|
||||
{% endif %}
|
||||
</dl>
|
||||
</div>
|
||||
</footer>
|
||||
{{ tagList(tags | filter("movie") , "/watching/movies") }}
|
||||
</article>
|
||||
|
|
|
|||
|
|
@ -3,20 +3,17 @@ layout: "layouts/base"
|
|||
---
|
||||
|
||||
{% from "macros/date.njk" import format %}
|
||||
{% from "macros/tags.njk" import tagList %}
|
||||
<article class="flow">
|
||||
<header class="flow flow-space-1 mb-2">
|
||||
<header class="flow">
|
||||
<div class="flow flow-space-1">
|
||||
<h1>{{ title }}</h1>
|
||||
<h3 class="text-fadeText">{{ excerpt }}</h3>
|
||||
</div>
|
||||
{{ format(page.date) }}
|
||||
<h1>{{ title }}</h1>
|
||||
<p class="text-fadeText flow-space-0.25">{{ excerpt }}</p>
|
||||
<ul class="categories cluster list-none p-0 flow-space-2 line-height-m">
|
||||
{% for tag in tags | filter(["post"]) %}
|
||||
<li>
|
||||
<a class="button" href="/tags/{{ tag | slugify }}">
|
||||
{% include "svgs/frame.svg" %}
|
||||
{{ tag }}</a>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</header>
|
||||
{{ content | safe }}
|
||||
<section class="flow flow-space-default">
|
||||
{{ content | safe }}
|
||||
</section>
|
||||
{{ tagList(tags | filter("post") , "/posts") }}
|
||||
</article>
|
||||
|
|
|
|||
|
|
@ -3,61 +3,50 @@ layout: "layouts/base"
|
|||
---
|
||||
|
||||
{% from "macros/date.njk" import format %}
|
||||
{% from "macros/utils.njk" import stars %}
|
||||
{% from "macros/utils.njk" import stars, spoilerWarning %}
|
||||
{% from "macros/tags.njk" import tagList %}
|
||||
<header class="flow flow-space-1">
|
||||
{{ format(page.date) }}
|
||||
<h1>{{ title }}</h1>
|
||||
<p class="text-fadeText flow-space-0.25">{{ pullquote }}</p>
|
||||
</header>
|
||||
{% if hasSpoilers %}
|
||||
<section class="bg-surface radius-0.5 p-1">
|
||||
<span class="text-secondary">{% include "svgs/triangle-exclamation.svg" %}</span>
|
||||
<strong>Warning!</strong>
|
||||
The following may contain spoilers!
|
||||
</section>
|
||||
{% endif %}
|
||||
{% if content %}
|
||||
<section class="flow">
|
||||
{{ content | safe }}
|
||||
</section>
|
||||
{% endif %}
|
||||
{% if favourite or isFavourite %}
|
||||
<p>
|
||||
<span class="text-secondary">{% include "svgs/star.svg" %}</span>
|
||||
This is one of my favourite shows!
|
||||
</p>
|
||||
{% endif %}
|
||||
<hr class="my-2" />
|
||||
<footer class="media-meta-grid gap-1">
|
||||
<div class="media-image media-image--tall">
|
||||
<img src="{{ image }}" alt="" />
|
||||
</div>
|
||||
<div class="flow flex-col justify-center">
|
||||
<div class="flex items-center gap-0.5 flex-wrap">
|
||||
<h2>{{ title }}</h2>
|
||||
<article class="flow">
|
||||
<header class="flow">
|
||||
<div class="flow flow-space-1">
|
||||
<h1>{{ title }}</h1>
|
||||
{% if pullquote %}<h3 class="text-fadeText">{{ pullquote }}</h3>{% endif %}
|
||||
</div>
|
||||
{% if subtitle %}<h2>{{ subtitle }}</h2>{% endif %}
|
||||
{% if director %}
|
||||
<p class="flex gap-0.5">
|
||||
<span class="text-fadeText">Directed by</span>{{ director }}
|
||||
</p>
|
||||
{% endif %}
|
||||
{% if watchHistory %}<p class="flow-space-0.25">{{ format(watchHistory | last) }}</p>{% endif %}
|
||||
{% if rating %}{{ stars(rating) }}{% endif %}
|
||||
<ul class="list-none p-0 mb-0 media-meta gap-0.5">
|
||||
{% if year %}
|
||||
<li class="flex-col">
|
||||
<strong>Released</strong><span>{{ year }}</span>
|
||||
</li>
|
||||
{% endif %}
|
||||
{% if runtime %}
|
||||
<li class="flex-col">
|
||||
<strong>Runtime</strong><span>{{ runtime }} mins</span>
|
||||
</li>
|
||||
{% endif %}
|
||||
</ul>
|
||||
</div>
|
||||
</footer>
|
||||
<hr class="my-2">
|
||||
{{ tagList(tags | filter("tv") , "/watching/shows") }}
|
||||
{{ format(page.date) }}
|
||||
</header>
|
||||
{% if hasSpoilers %}
|
||||
{{ spoilerWarning() }}
|
||||
{% endif %}
|
||||
{% if content %}
|
||||
<section class="flow flow-space-default">
|
||||
{{ content | safe }}
|
||||
</section>
|
||||
{% endif %}
|
||||
{% if favourite or isFavourite %}
|
||||
<p>
|
||||
<span class="text-secondary">{% include "svgs/star.svg" %}</span>
|
||||
This is one of my favourite shows!
|
||||
</p>
|
||||
{% endif %}
|
||||
<footer class="card media-metadata-grid">
|
||||
<div class="media-image media-image--tall">
|
||||
<img src="{{ image }}" alt="" />
|
||||
</div>
|
||||
<div class="flow flex flex-col justify-center flow-space-4">
|
||||
<h2>{{ title }}</h2>
|
||||
{% if subtitle %}<p class="text-fadeText flow-space-2 line-height-m">{{ subtitle }}</p>{% endif %}
|
||||
{% if rating %}{{ stars(rating) }}{% endif %}
|
||||
{% if watchHistory %}<p class="flow-space-1">{{ format(watchHistory | last) }}</p>{% endif %}
|
||||
<dl class="media-metadata">
|
||||
{% if year %}
|
||||
<dt><strong>Released</strong></dt>
|
||||
<dd>{{ year }}</dd>
|
||||
{% endif %}
|
||||
{% if runtime %}
|
||||
<dt><strong>Runtime</strong></dt>
|
||||
<dd>{{ runtime }} minutes</dd>
|
||||
{% endif %}
|
||||
</dl>
|
||||
</div>
|
||||
</footer>
|
||||
{{ tagList(tags | filter("tv") , "/watching/shows") }}
|
||||
</article>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
{% macro format(dateString) %}
|
||||
<time class="date flex items-center gap-0.5 text-fadeText"
|
||||
<time class="date flex items-center gap-2 text-fadeText"
|
||||
datetime="{{ dateString }}">
|
||||
<span class="text-primary line-height-s">{% include "svgs/calendar.svg" %}</span>{{ dateString | formatDate("MMMM Do YYYY") }}
|
||||
</time>
|
||||
|
|
|
|||
|
|
@ -1,10 +1,10 @@
|
|||
{% macro grid(data, shape = "vertical") %}
|
||||
<ul class="media-grid {{ shape }} list-none p-0">
|
||||
{% for item in data %}
|
||||
<li class="radius-0.5">
|
||||
<li class="radius-2">
|
||||
<a href="{{ item.url }}">
|
||||
{% if item.data.image %}<img src="{{ item.data.image }}" alt="" />{% endif %}
|
||||
<div class="meta font-size-s line-height-s flex items-end px-0.5 pb-0.5">
|
||||
<div class="meta font-size-s line-height-s flex items-end px-2 pb-2">
|
||||
<span class="meta-text">{{ item.data.title }}</span>
|
||||
</div>
|
||||
</a>
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@
|
|||
{% endmacro %}
|
||||
{% macro list(posts, format = "MM/DD") %}
|
||||
<ol class="flow p-0" role="list">
|
||||
{% for post in posts %}<li class="flow-space-0.5">{{ one(post, format) }}</li>{% endfor %}
|
||||
{% for post in posts %}<li class="flow-space-2">{{ one(post, format) }}</li>{% endfor %}
|
||||
</ol>
|
||||
{% endmacro %}
|
||||
{% macro yearList(posts, year, format = "MM/DD") %}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
{% macro tagList(tags, urlPrefix) %}
|
||||
<ul class="categories cluster list-none p-0 line-height-m">
|
||||
<ul class="categories cluster list-none p-0 line-height-m flow-space-default">
|
||||
{% for tag in tags %}
|
||||
<li>
|
||||
<a class="button" href="{{ urlPrefix }}/tag/{{ tag | slugify }}">
|
||||
|
|
|
|||
|
|
@ -11,3 +11,11 @@
|
|||
{% endfor %}
|
||||
</ul>
|
||||
{% endmacro %}
|
||||
|
||||
{% macro spoilerWarning() %}
|
||||
<section class="bg-surface radius-1 p-4 flow-space-default">
|
||||
<span class="text-secondary">{% include "svgs/triangle-exclamation.svg" %}</span>
|
||||
<strong>Warning!</strong>
|
||||
The following may contain spoilers!
|
||||
</section>
|
||||
{% endmacro %}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
<footer class="bg-surface mt-1.5 py-1.5">
|
||||
<footer class="bg-surface mt-8 py-4">
|
||||
<div class="wrapper flow">
|
||||
<div class="repel">
|
||||
<p>© {{ meta.author }} 2018 - 2025.</p>
|
||||
|
|
@ -13,8 +13,8 @@
|
|||
</nav>
|
||||
</div>
|
||||
<div class="repel">
|
||||
<nav class="flow-space-0.5">
|
||||
<ul class="cluster p-0 m-0 gap-0.5" role="list">
|
||||
<nav class="flow-space-2">
|
||||
<ul class="cluster p-0 m-0 gap-1" role="list">
|
||||
<li>
|
||||
<a href="/feeds"
|
||||
class="button button--alt"
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
<header class="navbar py-1 mb-2">
|
||||
<header class="navbar py-4 mb-8">
|
||||
<a href="#main">Skip to content</a>
|
||||
<div class="wrapper">
|
||||
<nav class="repel">
|
||||
<div class="site-logo flex items-center gap-0.5">
|
||||
<div class="site-logo flex items-center gap-2">
|
||||
<a class="logo flex items-center justify-center"
|
||||
aria-label="Go to index"
|
||||
href="{{ meta.url }}">
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue