Skip to content

Commit 527f6fe

Browse files
andrewbranchandrewbranch
committed
Slide enter
1 parent 6e2479c commit 527f6fe

File tree

6 files changed

+98
-4
lines changed

6 files changed

+98
-4
lines changed

‎_layouts/base.liquid

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
<html lang="{{ metadata.language }}">
77
<head>
88
<meta charset="utf-8">
9-
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, shrink-to-fit=no">
9+
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
1010
<title>{{ fullTitle }}</title>
1111
<meta name="description" content="{{ description or metadata.description }}">
1212
<meta name="generator" content="{{ eleventy.generator }}">

‎_layouts/post.liquid

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
---
22
layout: base
33
---
4-
<div class="post-body">
4+
<div class="post-body slide-enter-content">
55
<h1
66
{% if bigTitle %}
77
class="font-normal text-center text-textHighContrast text-[2.8rem] md:text-[3.4rem]"

‎content/about.md

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,14 @@
22
layout: base
33
---
44

5+
<div class="slide-enter-content">
6+
57
# 👋
68

79
I live in beautiful Marin County, California, ten miles north of San Francisco, where I moved in 2015 and lived until the pandemic made me want to go somewhere with easier access to the outdoors.
810

911
I work on the TypeScript language and compiler at Microsoft. A lot of what I’ve worked on has been more or less related to [modules](https://www.typescriptlang.org/docs/handbook/modules).
1012

1113
Outside of work, I’m currently climbing, diving, and woodworking. I made a pretty good table and bed frame. I also occasionally backpack (I thru-hiked the [Appalachian Trail](https://en.wikipedia.org/wiki/Appalachian_Trail) in 2014), or [bike](/one-does-not-simply-walk-into-mordor) across a small country.
14+
15+
</div>

‎content/index.liquid

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
layout: index.liquid
33
title: Blog Posts
44
---
5-
<ol reversed>
5+
<ol reversed class="slide-enter-content">
66
{% for post in collections.post reversed %}
77
<li class="mb-4">
88
<a href="{{ post.url }}" class="no-underline">

‎content/styles/main.css

Lines changed: 90 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -343,3 +343,93 @@ a > code {
343343
font-feature-settings: "kern", "liga", "clig", "calt", "ss04", "ss05", "ss06", "ss07", "ss08", "ss09", "ss10", "onum";
344344
}
345345
/* #endregion */
346+
347+
/* #region slide-enter */
348+
349+
/* From https://antfu.me/posts/sliding-enter-animation */
350+
351+
@keyframes slide-enter {
352+
0% {
353+
transform: translateY(6px);
354+
opacity: 0;
355+
}
356+
357+
to {
358+
transform: translateY(0);
359+
opacity: 100;
360+
}
361+
}
362+
363+
@media (prefers-reduced-motion: no-preference) {
364+
[slide-enter],
365+
.slide-enter,
366+
.slide-enter-content > * {
367+
--enter-stage: 0;
368+
--enter-step: 75ms;
369+
--enter-initial: 0ms;
370+
animation: slide-enter 1s both 1;
371+
animation-delay: calc(var(--enter-initial) + var(--enter-stage) * var(--enter-step));
372+
}
373+
374+
.slide-enter-content > *:nth-child(1) {
375+
--enter-stage: 1;
376+
}
377+
.slide-enter-content > *:nth-child(2) {
378+
--enter-stage: 2;
379+
}
380+
.slide-enter-content > *:nth-child(3) {
381+
--enter-stage: 3;
382+
}
383+
.slide-enter-content > *:nth-child(4) {
384+
--enter-stage: 4;
385+
}
386+
.slide-enter-content > *:nth-child(5) {
387+
--enter-stage: 5;
388+
}
389+
.slide-enter-content > *:nth-child(6) {
390+
--enter-stage: 6;
391+
}
392+
.slide-enter-content > *:nth-child(7) {
393+
--enter-stage: 7;
394+
}
395+
.slide-enter-content > *:nth-child(8) {
396+
--enter-stage: 8;
397+
}
398+
.slide-enter-content > *:nth-child(9) {
399+
--enter-stage: 9;
400+
}
401+
.slide-enter-content > *:nth-child(10) {
402+
--enter-stage: 10;
403+
}
404+
.slide-enter-content > *:nth-child(11) {
405+
--enter-stage: 11;
406+
}
407+
.slide-enter-content > *:nth-child(12) {
408+
--enter-stage: 12;
409+
}
410+
.slide-enter-content > *:nth-child(13) {
411+
--enter-stage: 13;
412+
}
413+
.slide-enter-content > *:nth-child(14) {
414+
--enter-stage: 14;
415+
}
416+
.slide-enter-content > *:nth-child(15) {
417+
--enter-stage: 15;
418+
}
419+
.slide-enter-content > *:nth-child(16) {
420+
--enter-stage: 16;
421+
}
422+
.slide-enter-content > *:nth-child(17) {
423+
--enter-stage: 17;
424+
}
425+
.slide-enter-content > *:nth-child(18) {
426+
--enter-stage: 18;
427+
}
428+
.slide-enter-content > *:nth-child(19) {
429+
--enter-stage: 19;
430+
}
431+
.slide-enter-content > *:nth-child(20) {
432+
--enter-stage: 20;
433+
}
434+
}
435+
/* #endregion */

‎eleventy.config.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,7 @@ module.exports = (eleventyConfig) => {
4242
"node_modules/katex/dist/fonts": "bundle/fonts",
4343
});
4444

45-
eleventyConfig.addWatchTarget("./content/*.css");
45+
eleventyConfig.addWatchTarget("./content/styles/*.css");
4646

4747
eleventyConfig.addAsyncShortcode("ogImage", async function (src) {
4848
if (src) {

0 commit comments

Comments
 (0)