ayo/ayco.io-astro
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat(now): publish date as small instead of em

Browse source
This commit is contained in:
Ayo Ayco 2025-03-23 11:32:33 +01:00
parent 21a0ac4767
commit 8b92fe54ae
20 changed files with 86 additions and 85 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
commands/now-template
View file

@ -16,11 +16,11 @@ publishedOn = publishedOn === '' ? publishDate : publishedOn
<main>
<h1><span class="text-gradient">{title}</span></h1>
<p>
<em>
<small>
Published on
<time datetime={publishDate}>{publishedOn}</time>
{publishState}
</em>
</small>
</p>
<Fragment set:html={content} />

2
src/constants/now.json
View file

@ -3,5 +3,5 @@
"description": "I am focused at bringing my own web ecosystem to life",
"publishDate": "2025-03-23",
"publishedOn": "the 23rd of March, 2025 in my home in Amsterdam",
"publishState": "where it is starting to get sunny again"
"publishState": "where it is starting to get sunny again (sometimes)"
}

97
src/pages/now.astro
View file

@ -13,58 +13,59 @@ const publishedOn = now.publishedOn === '' ? now.publishDate : now.publishedOn
<main>
<h1>What's up <span class="text-gradient">Now</span></h1>
<p>
<em
>Updated on <time datetime={now.publishDate}>{publishedOn}</time>{
<small>
Updated on <time datetime={now.publishDate}>{publishedOn}</time>{
now.publishState ? `, ${now.publishState}` : ''
}</em
>
}
<small> </small>
<Fragment set:html={nowHtml} />
<hr />
<em><a href="https://nownownow.com/about">About now pages</a></em>
&middot;
<em><a href="now/and-then/">Previously...</a></em>
<Footer />
</small>
</p>
<Fragment set:html={nowHtml} />
<hr />
<em><a href="https://nownownow.com/about">About now pages</a></em>
&middot;
<em><a href="now/and-then/">Previously...</a></em>
<Footer />
</main>
</Layout>
<style>
main {
margin: auto;
padding: 1em;
max-width: var(--content-width);
}
<style>
main {
margin: auto;
padding: 1em;
max-width: var(--content-width);
}
.text-gradient {
font-weight: 900;
background-image: var(--ayo-gradient);
animation: pulse 4s ease-in-out infinite;
background-size: 500% 500%;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-size: 100% 200%;
background-position-y: 100%;
border-radius: 0.4rem;
}
.text-gradient {
font-weight: 900;
background-image: var(--ayo-gradient);
animation: pulse 4s ease-in-out infinite;
background-size: 500% 500%;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-size: 100% 200%;
background-position-y: 100%;
border-radius: 0.4rem;
}
.highlighted-content {
margin: 1rem 0;
background: #4f39fa;
padding: 1rem;
border-radius: 0.4rem;
color: var(--color-bg);
}
.highlighted-content {
margin: 1rem 0;
background: #4f39fa;
padding: 1rem;
border-radius: 0.4rem;
color: var(--color-bg);
}
.highlighted-content code {
font-size: var(--font-size-base);
border: 0.1em solid var(--color-border);
border-radius: 4px;
padding: 0.15em 0.25em;
}
.highlighted-content code {
font-size: var(--font-size-base);
border: 0.1em solid var(--color-border);
border-radius: 4px;
padding: 0.15em 0.25em;
}
.link-card-grid {
display: grid;
gap: 1rem;
padding: 0;
}
</style>
.link-card-grid {
display: grid;
gap: 1rem;
padding: 0;
}
</style>
</main></Layout
>

4
src/pages/now/and-then/posts/2022-09-20.astro
View file

@ -10,10 +10,10 @@ const description =
<main>
<h1><span class="text-gradient">{title}</span></h1>
<p>
<em
<small
>Published on the <time datetime="2022-09-20"
>20th of September, 2022</time
></em
></small
>
</p>
<p>

4
src/pages/now/and-then/posts/2023-01-19.astro
View file

@ -10,10 +10,10 @@ const description =
<main>
<h1><span class="text-gradient">{title}</span></h1>
<p>
<em
<small
>Published on the <time datetime="2023-01-19"
>19th of January, 2023</time
></em
></small
>
</p>
<p>

4
src/pages/now/and-then/posts/2023-06-23.astro
View file

@ -9,9 +9,9 @@ const description = 'A project that aims to be a modern-day reading assistant'
<main>
<h1><span class="text-gradient">{title}</span></h1>
<p>
<em
<small
>Published on the <time datetime="2023-06-23">23rd of June, 2023</time
></em
></small
>
</p>
<p>

4
src/pages/now/and-then/posts/2023-09-09.astro
View file

@ -11,10 +11,10 @@ const description =
<main>
<h1><span class="text-gradient">{title}</span></h1>
<p>
<em
<small
>Published on the <time datetime="2023-09-09"
>9th of September, 2023</time
></em
></small
>
</p>

4
src/pages/now/and-then/posts/2024-04-19.astro
View file

@ -10,9 +10,9 @@ const description = 'Building again with Python'
<main>
<h1><span class="text-gradient">{title}</span></h1>
<p>
<em
<small
>Published on the <time datetime="2024-04-19">19th of April, 2024</time
></em
></small
>
</p>

4
src/pages/now/and-then/posts/2024-06-17.astro
View file

@ -10,9 +10,9 @@ const description = 'I have joined ING as a Chapter Lead for Web Engineering'
<main>
<h1><span class="text-gradient">{title}</span></h1>
<p>
<em
<small
>Published on the <time datetime="2024-06-17">17th of June, 2024</time
></em
></small
>
</p>

4
src/pages/now/and-then/posts/2024-09-05.astro
View file

@ -10,10 +10,10 @@ const description = 'This is a dump of what my current state, more or less'
<main>
<h1><span class="text-gradient">{title}</span></h1>
<p>
<em
<small
>Published on the <time datetime="2024-09-05"
>5th of September, 2024</time
> from my home in Amsterdam, where it is starting to get colder again :)</em
> from my home in Amsterdam, where it is starting to get colder again :)</small
>
</p>
<p>

4
src/pages/now/and-then/posts/2024-09-27.astro
View file

@ -11,11 +11,11 @@ const description =
<main>
<h1><span class="text-gradient">{title}</span></h1>
<p>
<em
<small
>Published on the <time datetime="2024-09-05"
>27th of September, 2024</time
> from my home in Amsterdam, where it's beginning to rain more often again
:)</em
:)</small
>
</p>

4
src/pages/now/and-then/posts/2024-12-25.astro
View file

@ -21,11 +21,11 @@ const content = `<p>Christmas holidays as started for me.</p>
<main>
<h1><span class="text-gradient">{title}</span></h1>
<p>
<em>
<small>
Published on
<time datetime={publishDate}>{publishedOn}</time>
{publishState}
</em>
</small>
</p>
<Fragment set:html={content} />

4
src/pages/now/and-then/posts/2025-01-04.astro
View file

@ -20,11 +20,11 @@ const content = `<p>Happy with how I organized my spaces at home with separation
<main>
<h1><span class="text-gradient">{title}</span></h1>
<p>
<em>
<small>
Published on
<time datetime={publishDate}>{publishedOn}</time>
{publishState}
</em>
</small>
</p>
<Fragment set:html={content} />

4
src/pages/now/and-then/posts/2025-01-09.astro
View file

@ -21,11 +21,11 @@ const content = `<h2>Annual Sickness</h2>
<main>
<h1><span class="text-gradient">{title}</span></h1>
<p>
<em>
<small>
Published on
<time datetime={publishDate}>{publishedOn}</time>
{publishState}
</em>
</small>
</p>
<Fragment set:html={content} />

4
src/pages/now/and-then/posts/2025-01-15.astro
View file

@ -17,11 +17,11 @@ const content = `<h2>FOSDEM 2025</h2>
<main>
<h1><span class="text-gradient">{title}</span></h1>
<p>
<em>
<small>
Published on
<time datetime={publishDate}>{publishedOn}</time>
{publishState}
</em>
</small>
</p>
<Fragment set:html={content} />

4
src/pages/now/and-then/posts/2025-01-31.astro
View file

@ -18,11 +18,11 @@ const content = `<h2>At FOSDEM Social Web</h2>
<main>
<h1><span class="text-gradient">{title}</span></h1>
<p>
<em>
<small>
Published on
<time datetime={publishDate}>{publishedOn}</time>
{publishState}
</em>
</small>
</p>
<Fragment set:html={content} />

4
src/pages/now/and-then/posts/2025-02-05.astro
View file

@ -22,11 +22,11 @@ publishedOn = publishedOn === '' ? publishDate : publishedOn
<main>
<h1><span class="text-gradient">{title}</span></h1>
<p>
<em>
<small>
Published on
<time datetime={publishDate}>{publishedOn}</time>
{publishState}
</em>
</small>
</p>
<Fragment set:html={content} />

4
src/pages/now/and-then/posts/2025-02-11.astro
View file

@ -21,11 +21,11 @@ publishedOn = publishedOn === '' ? publishDate : publishedOn
<main>
<h1><span class="text-gradient">{title}</span></h1>
<p>
<em>
<small>
Published on
<time datetime={publishDate}>{publishedOn}</time>
{publishState}
</em>
</small>
</p>
<Fragment set:html={content} />

4
src/pages/now/and-then/posts/2025-02-15.astro
View file

@ -18,11 +18,11 @@ publishedOn = publishedOn === '' ? publishDate : publishedOn
<main>
<h1><span class="text-gradient">{title}</span></h1>
<p>
<em>
<small>
Published on
<time datetime={publishDate}>{publishedOn}</time>
{publishState}
</em>
</small>
</p>
<Fragment set:html={content} />

4
src/pages/now/and-then/posts/2025-03-13.astro
View file

@ -21,11 +21,11 @@ publishedOn = publishedOn === '' ? publishDate : publishedOn
<main>
<h1><span class="text-gradient">{title}</span></h1>
<p>
<em>
<small>
Published on
<time datetime={publishDate}>{publishedOn}</time>
{publishState}
</em>
</small>
</p>
<Fragment set:html={content} />