add update cards elements

src/assets/style/global.css

@@ -12,6 +12,7 @@ html {
 body {
   max-width: 95vw; /* leave some space in the end by default */
   margin: auto;
+  padding: 15px 0;
 }
 
 section:not(:first-child) {
@@ -45,3 +46,17 @@ section:not(:first-child) {
     max-width: 1536px;
   }
 }
+
+a {
+  color: var(--prj-link-text);
+}
+
+ul {
+  /* Make the marker position is inside the container */
+  list-style-position: inside;
+  margin: 0;
+}
+
+li:not(:last-child) {
+  margin-bottom: var(--prj-spacing-1);
+}

src/assets/style/utils.css

@@ -97,3 +97,15 @@
   text-align: justify;
   text-justify: inter-word;
 }
+
+.text-start {
+  text-align: start;
+}
+
+.text-middle {
+  text-align: middle;
+}
+
+.text-end {
+  text-align: end;
+}

src/components/Card.astro

@@ -1,63 +1,36 @@
 ---
 export interface Props {
-	title: string;
-	body: string;
-	href: string;
+  title: string;
+  body: string;
+  href: string;
 }
 
 const { href, title, body } = Astro.props;
 ---
 
-<li class="link-card">
-	<a href={href}>
-		<h2>
-			{title}
-			<span>&rarr;</span>
-		</h2>
-		<p>
-			{body}
-		</p>
-	</a>
-</li>
-<style>
-	.link-card {
-		list-style: none;
-		display: flex;
-		padding: 0.25rem;
-		background-color: white;
-		background-image: none;
-		background-size: 400%;
-		border-radius: 0.6rem;
-		background-position: 100%;
-		transition: background-position 0.6s cubic-bezier(0.22, 1, 0.36, 1);
-		box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
-	}
+<div class="card">
+  <div class="title">
+    <slot name="title" />
+  </div>
 
-	.link-card > a {
-		width: 100%;
-		text-decoration: none;
-		line-height: 1.4;
-		padding: 1rem 1.3rem;
-		border-radius: 0.35rem;
-		color: #111;
-		background-color: white;
-		opacity: 0.8;
-	}
-	h2 {
-		margin: 0;
-		font-size: 1.25rem;
-		transition: color 0.6s cubic-bezier(0.22, 1, 0.36, 1);
-	}
-	p {
-		margin-top: 0.5rem;
-		margin-bottom: 0;
-		color: #444;
-	}
-	.link-card:is(:hover, :focus-within) {
-		background-position: 0;
-		background-image: var(--accent-gradient);
-	}
-	.link-card:is(:hover, :focus-within) h2 {
-		color: rgb(var(--accent));
-	}
+  <div class="content">
+    <slot />
+  </div>
+
+  <div class="footer">
+    <slot name="footer" />
+  </div>
+</div>
+
+<style>
+  .card {
+    border: 1px solid var(--prj-accent-bg);
+    border-radius: 8px;
+
+    padding: var(--prj-spacing-2) var(--prj-spacing-3);
+  }
+
+  .title > :global(:last-child) {
+    margin-bottom: var(--prj-spacing-2);
+  }
 </style>

src/components/Navbar.astro

@@ -26,12 +26,11 @@ const links = [
 
 <script>
   // Add active class to the current link
- const link = document.querySelector(`a[href='${location.pathname}']`);
-
- if (link) {
-   link.classList.add("active");
- }
+  const link = document.querySelector(`a[href='${location.pathname}']`);
 
+  if (link) {
+    link.classList.add('active');
+  }
 </script>
 
 <style>
@@ -39,13 +38,16 @@ const links = [
     width: fit-content;
   }
 
+  ul {
+    padding: 0;
+  }
+
   li > a {
     padding: 0.25rem 0.5rem;
   }
 
   a {
     --boder-color: transparent;
-    color: var(--prj-link-text);
     border: 1px solid var(--boder-color);
     border-radius: 4px;
     text-decoration: none;

src/pages/index.astro

@@ -20,6 +20,56 @@ import portrait from '../assets/images/portrait.jpg';
     </div>
 
     <p class="text-justify">
+      Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nihil ea rerum
+      doloremque numquam hic eius culpa nesciunt maiores repellat assumenda
+      incidunt, molestias odit perspiciatis dolore reiciendis praesentium
+      itaque! Et, ad!
+    </p>
+  </section>
+
+  <section>
+    <div class="grid grid-cols-3">
+      <Card>
+        <h3 slot="title">Portafolio</h3>
+        <ul>
+          <li><a href="">Entry 1</a></li>
+          <li><a href="">Entry 2</a></li>
+          <li><a href="">Entry 3</a></li>
+        </ul>
+        <div slot="footer" class="text-end">
+          <a href="">See more...</a>
+        </div>
+      </Card>
+
+      <Card>
+        <h3 slot="title">Blog</h3>
+        <ul>
+          <li><a href="">Entry 1</a></li>
+          <li><a href="">Entry 2</a></li>
+          <li><a href="">Entry 3</a></li>
+        </ul>
+        <div slot="footer" class="text-end">
+          <a href="">See more...</a>
+        </div>
+      </Card>
+
+      <Card>
+        <h3 slot="title">Games</h3>
+        <ul>
+          <li><a href="">Entry 1</a></li>
+          <li><a href="">Entry 2</a></li>
+          <li><a href="">Entry 3</a></li>
+        </ul>
+        <div slot="footer" class="text-end">
+          <a href="">See more...</a>
+        </div>
+      </Card>
+    </div>
+  </section>
+
+  <section>
+    <h2>About me</h2>
+    <p>
       Lorem ipsum dolor sit amet, officia excepteur ex fugiat reprehenderit enim
       labore culpa sint ad nisi Lorem pariatur mollit ex esse exercitation amet.
       Nisi anim cupidatat excepteur officia. Reprehenderit nostrud nostrud ipsum
@@ -32,14 +82,6 @@ import portrait from '../assets/images/portrait.jpg';
       ut ea consectetur et est culpa et culpa duis.
     </p>
   </section>
-
-  <section>
-    <div class="grid grid-cols-3">
-      <Card />
-      <Card />
-      <Card />
-    </div>
-  </section>
 </Layout>
 
 <style>