From 5bde1eb8d3fd5610c42956f0e6553e29e1ac66d6 Mon Sep 17 00:00:00 2001
From: aleidk <ale.navarro.parra@gmail.com>
Date: Sun, 27 Aug 2023 12:54:35 -0400
Subject: [PATCH] update cards style

---
 src/assets/style/themes.css |  12 +++-
 src/assets/style/utils.css  | 118 ++++++++++++++++++++++++++++++++++++
 src/components/Card.astro   |  14 ++++-
 src/pages/index.astro       |  32 +++++++---
 4 files changed, 164 insertions(+), 12 deletions(-)

diff --git a/src/assets/style/themes.css b/src/assets/style/themes.css
index 84a5918..c4c4db0 100644
--- a/src/assets/style/themes.css
+++ b/src/assets/style/themes.css
@@ -4,10 +4,20 @@
 /* Variables prefixed with prj to avoid collisions */
 :root {
   /* Using catppuccin for now, make a theme switcher later */
-  --prj-bg: var(--ctp-macchiato-base);
+  /* Colors are inspired by Material Design: https://m2.material.io/design/color/the-color-system.html */
+  --prj-bg: var(--ctp-macchiato-mantle);
   --prj-text: var(--ctp-macchiato-text);
+
+  --prj-surface-1: var(--ctp-macchiato-base);
+  --prj-surface-2: var(--ctp-macchiato-surface0);
+  --prj-surface-3: var(--ctp-macchiato-surface1);
+  --prj-surface-text: var(--ctp-macchiato-text);
+
   --prj-link-text: var(--ctp-macchiato-teal);
 
   --prj-accent-bg: var(--ctp-macchiato-teal);
   --prj-accent-text: var(--ctp-macchiato-base);
+
+  --prj-primary: var(--ctp-macchiato-teal);
+  --prj-primary-text: var(--ctp-macchiato-base);
 }
diff --git a/src/assets/style/utils.css b/src/assets/style/utils.css
index db3c2cc..3b9c47e 100644
--- a/src/assets/style/utils.css
+++ b/src/assets/style/utils.css
@@ -13,6 +13,16 @@
   align-items: center;
 }
 
+.vstack {
+  --prj-gap: var(--prj-spacing-3);
+  display: flex;
+  flex-direction: column;
+}
+
+.flex-grow {
+  flex-grow: 1;
+}
+
 .grid {
   --prj-gap: var(--prj-spacing-3);
   --prj-columns: repeat(3, 1fr);
@@ -109,3 +119,111 @@
 .text-end {
   text-align: end;
 }
+
+/* Start Margins */
+.m-1 {
+  margin: var(--prj-spacing-1);
+}
+.m-2 {
+  margin: var(--prj-spacing-2);
+}
+.m-3 {
+  margin: var(--prj-spacing-3);
+}
+.m-4 {
+  margin: var(--prj-spacing-4);
+}
+.m-5 {
+  margin: var(--prj-spacing-5);
+}
+.mx-1 {
+  margin-right: var(--prj-spacing-1) 0;
+}
+.mx-2 {
+  margin-right: var(--prj-spacing-2) 0;
+}
+.mx-3 {
+  margin-right: var(--prj-spacing-3) 0;
+}
+.mx-4 {
+  margin-right: var(--prj-spacing-4) 0;
+}
+.mx-5 {
+  margin-right: var(--prj-spacing-5) 0;
+}
+.my-1 {
+  margin-right: 0 var(--prj-spacing-1);
+}
+.my-2 {
+  margin-right: 0 var(--prj-spacing-2);
+}
+.my-3 {
+  margin-right: 0 var(--prj-spacing-3);
+}
+.my-4 {
+  margin-right: 0 var(--prj-spacing-4);
+}
+.my-5 {
+  margin-right: 0 var(--prj-spacing-5);
+}
+.mt-1 {
+  margin-top: var(--prj-spacing-1);
+}
+.mt-2 {
+  margin-top: var(--prj-spacing-2);
+}
+.mt-3 {
+  margin-top: var(--prj-spacing-3);
+}
+.mt-4 {
+  margin-top: var(--prj-spacing-4);
+}
+.mt-5 {
+  margin-top: var(--prj-spacing-5);
+}
+.mb-1 {
+  margin-bottom: var(--prj-spacing-1);
+}
+.mb-2 {
+  margin-bottom: var(--prj-spacing-2);
+}
+.mb-3 {
+  margin-bottom: var(--prj-spacing-3);
+}
+.mb-4 {
+  margin-bottom: var(--prj-spacing-4);
+}
+.mb-5 {
+  margin-bottom: var(--prj-spacing-5);
+}
+.ml-1 {
+  margin-left: var(--prj-spacing-1);
+}
+.ml-2 {
+  margin-left: var(--prj-spacing-2);
+}
+.ml-3 {
+  margin-left: var(--prj-spacing-3);
+}
+.ml-4 {
+  margin-left: var(--prj-spacing-4);
+}
+.ml-5 {
+  margin-left: var(--prj-spacing-5);
+}
+.mr-1 {
+  margin-right: var(--prj-spacing-1);
+}
+.mr-2 {
+  margin-right: var(--prj-spacing-2);
+}
+.mr-3 {
+  margin-right: var(--prj-spacing-3);
+}
+.mr-4 {
+  margin-right: var(--prj-spacing-4);
+}
+.mr-5 {
+  margin-right: var(--prj-spacing-5);
+}
+/* End Margins */
diff --git a/src/components/Card.astro b/src/components/Card.astro
index 0cbd2be..cb5591b 100644
--- a/src/components/Card.astro
+++ b/src/components/Card.astro
@@ -8,12 +8,12 @@ export interface Props {
 const { href, title, body } = Astro.props;
 ---
 
-<div class="card">
+<div class="card vstack">
   <div class="title">
     <slot name="title" />
   </div>
 
-  <div class="content">
+  <div class="content flex-grow mb-3">
     <slot />
   </div>
 
@@ -24,12 +24,22 @@ const { href, title, body } = Astro.props;
 
 <style>
   .card {
+    background-color: var(--prj-surface-1);
+    color: var(--prj-surface-text);
     border: 1px solid var(--prj-accent-bg);
     border-radius: 8px;
 
     padding: var(--prj-spacing-2) var(--prj-spacing-3);
   }
 
+  .card :global(a) {
+    text-decoration-line: none;
+  }
+
+  .card :global(a):hover {
+    text-decoration-line: underline;
+  }
+
   .title > :global(:last-child) {
     margin-bottom: var(--prj-spacing-2);
   }
diff --git a/src/pages/index.astro b/src/pages/index.astro
index cfb5734..5090a2c 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -1,9 +1,11 @@
 ---
+import { getCollection } from 'astro:content';
 import Layout from '../layouts/Layout.astro';
 import Card from '../components/Card.astro';
 import { Image } from 'astro:assets';
 
 import portrait from '../assets/images/portrait.jpg';
+const games = await getCollection('games', (_, idx) => idx < 3);
 ---
 
 <Layout title="aleidk">
@@ -32,9 +34,9 @@ import portrait from '../assets/images/portrait.jpg';
       <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>
+          <li><a href="">This is a project X</a></li>
+          <li><a href="">This is a project Y</a></li>
+          <li><a href="">This is a project Z</a></li>
         </ul>
         <div slot="footer" class="text-end">
           <a href="">See more...</a>
@@ -44,9 +46,17 @@ import portrait from '../assets/images/portrait.jpg';
       <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>
+          <li><a href="">How I do X thing because I wanted</a></li>
+          <li>
+            <a href=""
+              >The day I discover something marvelous and everything was better</a
+            >
+          </li>
+          <li>
+            <a href=""
+              >This is a clickbait title trying to make you enter this article</a
+            >
+          </li>
         </ul>
         <div slot="footer" class="text-end">
           <a href="">See more...</a>
@@ -56,9 +66,13 @@ import portrait from '../assets/images/portrait.jpg';
       <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>
+          {
+            games.map((item) => (
+              <li>
+                <a href={`games/${item.slug}`}>{item.data.Title}</a>
+              </li>
+            ))
+          }
         </ul>
         <div slot="footer" class="text-end">
           <a href="">See more...</a>