Development

src/components/Aside.astro

@@ -201,7 +201,6 @@ const { titles } = Astro.props;
       z-index: 1;
       background-color: var(--secondary);
       padding-top: 20px;
-      overflow-x: hidden;
       padding: 20px;
     }
 

src/components/MyHero.astro

@@ -26,12 +26,11 @@ const { BASE_URL } = import.meta.env;
 
 <style>
   section {
-    height: 100vh;
+    height: 85vh;
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: start;
-    max-width: 1000px;
     gap: 10px;
   }
 
@@ -90,5 +89,15 @@ const { BASE_URL } = import.meta.env;
 
   section div {
     margin-top: 20px;
+    display: flex;
+    gap: 20px;
+    flex-direction: column;
+    width: 100%;
+  }
+
+  @media screen and (min-width: 720px) {
+    section div {
+      flex-direction: row;
+    }
   }
 </style>

src/components/PostPreview.astro

@@ -193,7 +193,7 @@ const postUrl = `${BASE_URL}posts/${title.toLowerCase().replace(/\s/g, "-")}/`;
     }
 
     .description-container {
-      background-color: var(--code-background);
+      background-color: var(--primary);
       border-bottom-left-radius: unset;
       border-bottom-right-radius: unset;
     }
@@ -208,8 +208,7 @@ const postUrl = `${BASE_URL}posts/${title.toLowerCase().replace(/\s/g, "-")}/`;
     .preview-container {
       display: grid;
       grid-template-columns: repeat(12, 1fr);
-      margin-top: 24px;
-      margin-bottom: 24px;
+      margin-top: 50px;
       align-content: center;
       align-items: center;
     }

src/pages/index.astro

@@ -1,39 +1,10 @@
 ---
 import Base from "../layouts/Base.astro";
-import PostPreview from "components/PostPreview.astro";
 import MyHero from "components/MyHero.astro";
-import { getEntry } from "astro:content";
-
-const postsNames = [
-  "python-virtual-environments",
-  "python-great-features",
-  "réflexions-2024",
-];
-const postsPromises = postsNames.map((post) => getEntry("posts", post));
-const posts = (await Promise.all(postsPromises)).filter(
-  (post) => post !== undefined,
-);
 ---
 
 <Base title="Yeison Liscano" description="Blog posts about web development">
   <MyHero />
-  <h2>Posts</h2>
-  <hr />
-  <section class="posts-preview">
-    {
-      posts.map((post) => (
-        <PostPreview
-          title={post.data.title}
-          pubDate={post.data.pubDate}
-          description={post.data.description}
-          tags={post.data.tags}
-          slug={post.slug}
-          readingTime={post.data.readingTime}
-          snippet={post.data.snippet}
-        />
-      ))
-    }
-  </section>
 </Base>
 
 <style>

src/styles/base.css

@@ -1,36 +1,40 @@
 :root {
   --primary: #050605;
-  --secondary: #0c0e16;
-  --neutral: #092e39;
-  --contrast: #1d7272;
+  --secondary: #171c28;
+  --neutral: #8695b7;
+  --contrast: #ef6b73;
   --text-color: #d7dce2;
   --text-secondary-color: #b8c1d5;
-  --code-background: #141314;
+  --code-background: #1d2433;
 
   --max-width: 720px;
 
   color: var(--text-color);
   background-color: var(--primary);
   font-family:
-    ui-monospace,
+    __Spline_Sans_Mono_ca083e,
+    __Spline_Sans_Mono_Fallback_ca083e,
     SFMono-Regular,
-    SF Mono,
     Menlo,
     Consolas,
+    Monaco,
     Liberation Mono,
-    monospace;
+    Courier New,
+    monospace,
+    ui-monospace,
+    SF Mono;
   height: 100%;
 
   line-height: 1.5;
 }
 
 [data-theme="light"] {
   --primary: #ffffff;
-  --secondary: #ccd2d9;
+  --secondary: #171c28;
   --neutral: #dce0e8;
   --contrast: #af63f7;
   --text-color: #000000;
-  --code-background: #eff1f5;
+  --code-background: #1d2433;
 }
 
 @media (prefers-color-scheme: light) {