feat: new layout

EstebanBorai · Sep 15, 2024 · e0e11c3 · e0e11c3
1 parent f51d529
commit e0e11c3
Show file tree

Hide file tree

Showing 14 changed files with 110 additions and 131 deletions.
diff --git a/src/app.css b/src/app.css
@@ -109,16 +109,9 @@ h3 code {
 h1,
 h2,
 h3 {
-  @apply font-body font-semibold;
+  @apply font-body font-semibold text-lt-title dark:text-dk-title;
 }
 
-.safe-zone {
-  max-width: 920px;
-  width: 100%;
-}
-
-@media only screen and (max-width: 920px) {
-  .safe-zone {
-    width: 100%;
-  }
+.max-width {
+  @apply w-full md:max-w-[1200px];
 }
diff --git a/src/app.html b/src/app.html
@@ -8,7 +8,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     %sveltekit.head%
   </head>
-  <body class="dark:text-white dark:bg-black">
+  <body class="bg-lt-base text-lt-text dark:bg-dk-base dark:text-dk-text">
     <div id="svelte">%sveltekit.body%</div>
   </body>
 </html>
diff --git a/src/lib/components/Footer.svelte b/src/lib/components/Footer.svelte
@@ -97,10 +97,12 @@
   };
 </script>
 
-<footer class="text-sm flex flex-col border-t py-2 px-4">
+<footer
+  class="text-sm flex flex-col border-t py-6 px-4 border-lt-alte dark:border-dk-alte"
+>
   <div class="flex flex-col md:grid md:grid-cols-12">
     <article class="md:col-start-2 md:col-span-3">
-      <h4>{$LL.HOMEPAGE.SOCIAL_LINKS()}</h4>
+      <h4 class="uppercase text-xs">{$LL.HOMEPAGE.SOCIAL_LINKS()}</h4>
       <ul class="flex flex-col justify-evenly py-4 space-y-2 text-xs">
         <li class="hover:text-zinc-900 text-zinc-600">
           <a
@@ -127,7 +129,7 @@
       </ul>
     </article>
     <article class="md:col-start-6 md:col-span-3">
-      <h4>SiteMap</h4>
+      <h4 class="uppercase text-xs">SiteMap</h4>
       <ul class="flex flex-col justify-evenly py-4 text-xs">
         <li class="mr-4">
           <a href="/{$page.params.lang}/notes">

diff --git a/src/lib/components/Header.svelte b/src/lib/components/Header.svelte
@@ -77,30 +77,38 @@
   };
 </script>
 
-<header class="text-sm flex justify-between items-center py-2 px-4 border-b">
-  <div class="flex justify-between items-center">
-    <a href="/{$page.params.lang}">
-      <h1 class="m-0 p-0">Esteban Borai</h1>
-    </a>
-    <nav class="hidden md:flex justify-center items-center px-4 md:space-x-2">
-      <a href="/{$page.params.lang}/notes">
-        {$LL.LAYOUT.NAV.NOTES()}
+<header class="border-b border-lt-alte dark:border-dk-alte">
+  <div
+    class="mx-auto text-sm flex justify-between items-center py-2 px-4 max-width"
+  >
+    <div class="flex justify-between items-center">
+      <a href="/{$page.params.lang}">
+        <h1 class="m-0 p-0">Esteban Borai</h1>
       </a>
-      <a href="/{$page.params.lang}/bookmarks">
-        {$LL.LAYOUT.NAV.BOOKMARKS()}
-      </a>
-    </nav>
-  </div>
-  <div class="hidden md:flex items-center justify-center">
-    <select class="text-sm" value={$locale} on:change={handleLanguageChange}>
-      {#each LANGS as { text, locale }}
-        <option value={locale}>{text}</option>
-      {/each}
-    </select>
-    <select class="text-sm" value={currentTheme} on:change={handleThemeChange}>
-      <option value="dark">Dark</option>
-      <option value="light">Light</option>
-    </select>
+      <nav class="hidden md:flex justify-center items-center px-4 md:space-x-2">
+        <a href="/{$page.params.lang}/notes">
+          {$LL.LAYOUT.NAV.NOTES()}
+        </a>
+        <a href="/{$page.params.lang}/bookmarks">
+          {$LL.LAYOUT.NAV.BOOKMARKS()}
+        </a>
+      </nav>
+    </div>
+    <div class="hidden md:flex items-center justify-center">
+      <select class="text-sm" value={$locale} on:change={handleLanguageChange}>
+        {#each LANGS as { text, locale }}
+          <option value={locale}>{text}</option>
+        {/each}
+      </select>
+      <select
+        class="text-sm"
+        value={currentTheme}
+        on:change={handleThemeChange}
+      >
+        <option value="dark">Dark</option>
+        <option value="light">Light</option>
+      </select>
+    </div>
+    <button class="flex md:hidden"> M </button>
   </div>
-  <button class="flex md:hidden"> M </button>
 </header>
diff --git a/src/lib/components/Sidebar.svelte b/src/lib/components/Sidebar.svelte
@@ -98,7 +98,7 @@
 </script>
 
 <aside
-  class="hidden md:flex bg-light-background-alt dark:bg-dark-background-alt px-4 pt-8 flex-col justify-between"
+  class="hidden md:flex bg-lt-base-alt dark:bg-dk-base-alt px-4 pt-8 flex-col justify-between"
 >
   <div>
     <header class="flex flex-col justify-center items-center">

diff --git a/src/lib/components/Tag.svelte b/src/lib/components/Tag.svelte
@@ -3,7 +3,7 @@
 </script>
 
 <span
-  class="font-mono inline-block dark:bg-zinc-800 bg-zinc-100 rounded-md px-2 py-0.25 text-center dark:text-white"
+  class="uppercase inline-block bg-lt-alte dark:bg-dk-alte rounded-md px-2 py-0.25 text-center"
 >
-  <span class="lowercase text-xs">{title}</span>
+  <span class="text-xs">{title}</span>
 </span>
diff --git a/src/lib/components/notes/Layout.svelte b/src/lib/components/notes/Layout.svelte
@@ -52,7 +52,7 @@
   <meta name="twitter:image:src" content={preview_image_url} />
 </svelte:head>
 
-<div class="safe-zone note-container">
+<div class="w-full md:max-w-[1000px] mx-auto pb-6">
   <figure
     class="flex justify-center items-center overflow-hidden rounded h-[300px]"
   >
@@ -70,13 +70,7 @@
       </span>
     </div>
   </header>
-  <slot />
+  <article>
+    <slot />
+  </article>
 </div>
-
-<style>
-  @media only screen and (max-width: 920px) {
-    .note-container {
-      padding: 0 1rem;
-    }
-  }
-</style>
diff --git a/src/lib/components/notes/styles/note.css b/src/lib/components/notes/styles/note.css
@@ -1,13 +1,13 @@
 .note-container p code,
 .note-container ul li code {
-  @apply bg-light-background dark:bg-dark-background rounded;
+  @apply bg-lt-base dark:bg-dk-base rounded;
 
   color: #f04f4f !important;
   padding: 0.2rem;
 }
 
 .note-container h2 code {
-  @apply bg-light-background dark:bg-dark-background rounded;
+  @apply bg-lt-base dark:bg-dk-base rounded;
 
   color: #f04f4f !important;
   padding: 0.2rem;

diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
@@ -37,7 +37,7 @@
 <a hidden rel="me" href="https://hachyderm.io/@estebanborai">Mastodon</a>
 
 <Header />
-<main class="min-h-screen">
+<main class="min-h-screen max-width p-4 mx-auto">
   <slot />
 </main>
 <Footer />
diff --git a/src/routes/[lang=lang]/+page.svelte b/src/routes/[lang=lang]/+page.svelte
@@ -36,7 +36,7 @@
       <img src={avatarUrl} alt="Esteban Borai Profile" />
     </figure>
     <div class="col-start-2 col-end-2">
-      <span class="inline-block text-lg font-semibold pb-2">I'm Esteban,</span>
+      <h2 class="inline-block font-semibold pb-2">I'm Esteban,</h2>
       <p class="inline-block pb-2">
         A Software Developer focused in Systems Programming &amp; Web
         Development with {2024 - 2017} years of experience.

diff --git a/src/routes/[lang=lang]/notes/+page.svelte b/src/routes/[lang=lang]/notes/+page.svelte
@@ -15,8 +15,10 @@
   let avatarUrl = 'https://avatars.githubusercontent.com/u/34756077?v=4';
   let notesIndex = [];
 
+  const PAGE_SIZE = 9;
+
   function nextPage(page: number): any {
-    const pageSize = 6;
+    const pageSize = PAGE_SIZE;
 
     return {
       notes: data.notesIndex.slice((page - 1) * pageSize, page * pageSize),
@@ -83,30 +85,25 @@
   <meta name="twitter:image:src" content={avatarUrl} />
 </svelte:head>
 
-<section>
-  <ul>
-    {#each notesIndex as page}
-      <ul class="flex flex-col gap-4 p-4">
-        {#each page as { meta, slug }, idx}
-          <Entry
-            title={meta.title}
-            description={meta.description}
-            publishDate={new Date(meta.date)}
-            tags={meta.categories}
-            previewImageUrl={meta.preview_image_url}
-            {slug}
-          />
-        {/each}
-      </ul>
-    {/each}
-  </ul>
-  {#if hasNextPage}
-    <div class="flex justify-center items-center py-6">
-      <Button
-        title="Show more"
-        disabled={!hasNextPage}
-        on:click={handleShowMore}
+<section class="grid gap-y-8 gap-x-6 grid-cols-4 md:grid-cols-12">
+  {#each notesIndex as page}
+    {#each page as { meta, slug }, idx}
+      <Entry
+        title={meta.title}
+        description={meta.description}
+        publishDate={new Date(meta.date)}
+        tags={meta.categories}
+        {slug}
       />
-    </div>
-  {/if}
+    {/each}
+  {/each}
 </section>
+{#if hasNextPage}
+  <div class="flex justify-center items-center py-6 w-full">
+    <Button
+      title="Show more"
+      disabled={!hasNextPage}
+      on:click={handleShowMore}
+    />
+  </div>
+{/if}
diff --git a/src/routes/[lang=lang]/notes/[slug]/+page.svelte b/src/routes/[lang=lang]/notes/[slug]/+page.svelte
@@ -1,7 +1,7 @@
-<script>
+<script lang="ts">
   export let data;
 </script>
 
-<article class="flex justify-center mx-auto p-4 md:p-2 md:w-11/12">
+<div id="note-container">
   <svelte:component this={data.content} />
-</article>
+</div>
diff --git a/src/routes/[lang=lang]/notes/components/Entry.svelte b/src/routes/[lang=lang]/notes/components/Entry.svelte
@@ -9,7 +9,6 @@
   export let publishDate: Date;
   export let tags: string[];
   export let slug: string;
-  export let previewImageUrl: string;
 
   const langTags = ['python', 'rust', 'svelte', 'typescript'];
 
@@ -19,43 +18,25 @@
     .slice(0, 3);
 </script>
 
-<li
-  class="grid gap-4 grid-cols-[100px,auto] md:grid-cols-[200px,auto] md:w-[720px] w-full"
->
-  <figure
-    class="rounded flex justify-center items-center overflow-hidden w-[100px] h-[100px] md:h-[200px] md:w-[200px]"
-  >
-    <img
-      class="w-full h-full object-cover"
-      loading="lazy"
-      decoding="async"
-      alt={title}
-      src={previewImageUrl}
-    />
-  </figure>
-  <article>
-    <h3 class="text-lg md:text-xl hover:underline">
-      <a href="/{$page.params.lang}/notes/{slug}">
-        {title}
-      </a>
-    </h3>
-    <p aria-label={description} class="py-2 text-sm line-clamp-3 text-gray-400">
-      {description}
-    </p>
-    <ul class="flex justify-start items-start flex-wrap gap-2 py-2">
-      {#each displayTags as category}
-        <Tag title={category} />
-      {/each}
-    </ul>
-    <div class="flex">
-      <span class="flex items-center">
-        <time
-          class="py-2 text-gray-600 text-xs uppercase"
-          datetime={publishDate.toString()}
-        >
-          {formattedDate}
-        </time>
-      </span>
-    </div>
-  </article>
-</li>
+<article class="self-start flex flex-col justify-start w-full col-span-4">
+  <h3 class="text-lg md:text-xl hover:underline">
+    <a href="/{$page.params.lang}/notes/{slug}">
+      {title}
+    </a>
+  </h3>
+  <p aria-label={description} class="py-2 text-sm truncate">
+    {description}
+  </p>
+  <ul class="flex justify-start items-start flex-wrap gap-2 py-2">
+    {#each displayTags as category}
+      <Tag title={category} />
+    {/each}
+  </ul>
+  <div class="flex">
+    <span class="flex items-center">
+      <time class="py-2 text-xs uppercase" datetime={publishDate.toString()}>
+        {formattedDate}
+      </time>
+    </span>
+  </div>
+</article>
diff --git a/tailwind.config.cjs b/tailwind.config.cjs
@@ -9,13 +9,17 @@ module.exports = {
   theme: {
     extend: {
       colors: {
-        light: {
-          background: '#FFFFFF',
-          'background-alt': '#F6F8FA',
+        lt: {
+          base: '#f9f9f9',
+          alte: '#f1f1f1',
+          text: '#353535',
+          title: '#13192d',
         },
-        dark: {
-          background: '#1C1C1C',
-          'background-alt': '#1A1A1A',
+        dk: {
+          base: '#0c0c0f',
+          alte: '#17171b',
+          text: '#9aa0b0',
+          title: '#e0e1eb',
         },
       },
       fontFamily: {