b

src/components/bits/ProjectCard.astro

@@ -1,5 +1,8 @@
 ---
 import type { CollectionEntry } from 'astro:content';
+import dayjs from "dayjs";
+import de from "dayjs/locale/de";
+dayjs.locale(de);
 
 interface Props {
   project: CollectionEntry<"projects">;
@@ -8,20 +11,23 @@ interface Props {
 const { project } = Astro.props;
 ---
 
-<a href=`/projects/${project.id}` id="card-link">
+<a href=`/projects/${project.id}` class="card-link">
     <div class="glass">
-        <h2>{project.data.title}</h2>
+        <hgroup>
+            <h2>{project.data.title}</h2>
+            <p class="date">{dayjs(project.data.published ?? project.data.lastModified).format("DD.MM.YYYY")}</p>
+        </hgroup>
         <hr />
-        <p>{project.data.description}</p>
+        <p>{project.data.summary}</p>
         { project.data.tags ? 
-            <div id="tag-area">Tags: <ul>{project.data.tags.map(tag => <li>{ tag }</li>)}</ul></div>
+            <div class="tag-area">Tags: <ul>{project.data.tags.map(tag => <li>{ tag }</li>)}</ul></div>
             : null 
         }
     </div>
 </a>
 
 <style lang="scss">
-    #card-link {
+    .card-link {
         display: inline-block;
         width: min-content;
         min-width: 250px;
@@ -31,6 +37,12 @@ const { project } = Astro.props;
         scroll-snap-align: start;
     }
 
+    .date {
+        font-size: 80%;
+        color: var(--text-color-dark, var(--projects-text-color-dark));
+        margin-top: 0rem;
+    }
+
     div {
         --border-width: 1px;
         padding: 1rem;
@@ -38,7 +50,7 @@ const { project } = Astro.props;
 
         h2 {
             margin: 0;
-            color: var(--accent-color);
+            color: var(--accent-color, var(--projects-accent-color));
         }
 
         &::after {
@@ -49,7 +61,7 @@ const { project } = Astro.props;
             pointer-events: none;
             border-radius: inherit;
             background: transparent;
-            border: 5px solid var(--glass-color);
+            border: 5px solid var(--glass-color, var(--projects-glass-color));
             filter: blur(4px);
             opacity: 0;
             transition: opacity .3s, filter 1s;
@@ -70,7 +82,7 @@ const { project } = Astro.props;
         }
     }
 
-    #tag-area {
+    .tag-area {
         display: flex;
         flex-direction: row;
         align-items: center;