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

commands/now-template

@@ -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} />

src/constants/now.json

@@ -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)"
 }

src/pages/now.astro

@@ -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
+      <small>
-        >Updated on <time datetime={now.publishDate}>{publishedOn}</time>{
+        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>
+    <style>
-  main {
+      main {
-    margin: auto;
+        margin: auto;
-    padding: 1em;
+        padding: 1em;
-    max-width: var(--content-width);
+        max-width: var(--content-width);
-  }
+      }
 
-  .text-gradient {
+      .text-gradient {
-    font-weight: 900;
+        font-weight: 900;
-    background-image: var(--ayo-gradient);
+        background-image: var(--ayo-gradient);
-    animation: pulse 4s ease-in-out infinite;
+        animation: pulse 4s ease-in-out infinite;
-    background-size: 500% 500%;
+        background-size: 500% 500%;
-    -webkit-background-clip: text;
+        -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
+        -webkit-text-fill-color: transparent;
-    background-size: 100% 200%;
+        background-size: 100% 200%;
-    background-position-y: 100%;
+        background-position-y: 100%;
-    border-radius: 0.4rem;
+        border-radius: 0.4rem;
-  }
+      }
 
-  .highlighted-content {
+      .highlighted-content {
-    margin: 1rem 0;
+        margin: 1rem 0;
-    background: #4f39fa;
+        background: #4f39fa;
-    padding: 1rem;
+        padding: 1rem;
-    border-radius: 0.4rem;
+        border-radius: 0.4rem;
-    color: var(--color-bg);
+        color: var(--color-bg);
-  }
+      }
 
-  .highlighted-content code {
+      .highlighted-content code {
-    font-size: var(--font-size-base);
+        font-size: var(--font-size-base);
-    border: 0.1em solid var(--color-border);
+        border: 0.1em solid var(--color-border);
-    border-radius: 4px;
+        border-radius: 4px;
-    padding: 0.15em 0.25em;
+        padding: 0.15em 0.25em;
-  }
+      }
 
-  .link-card-grid {
+      .link-card-grid {
-    display: grid;
+        display: grid;
-    gap: 1rem;
+        gap: 1rem;
-    padding: 0;
+        padding: 0;
-  }
+      }
-</style>
+    </style>
+  </main></Layout
+>

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

@@ -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>

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

@@ -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>

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

@@ -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>

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

@@ -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>
 

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

@@ -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>
 

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

@@ -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>
 

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

@@ -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>

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

@@ -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>
 

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

@@ -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} />

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

@@ -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} />

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

@@ -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} />

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

@@ -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} />

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

@@ -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} />

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

@@ -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} />

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

@@ -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} />

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

@@ -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} />

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

@@ -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} />