style\refac(front): #2 update distribution

src/components/Aside.astro

@@ -101,6 +101,15 @@ const { titles } = Astro.props;
   };
 
   wrapperFN1();
+
+  const onMount = () => {
+    const themeToggle = document.getElementById("theme-toggle");
+    if (themeToggle) {
+      themeToggle.addEventListener("click", window.theme.toggle);
+    }
+  };
+
+  document.getElementById("show-menu")?.addEventListener("click", onMount);
 </script>
 
 <style>
@@ -133,7 +142,7 @@ const { titles } = Astro.props;
     opacity: 0.95;
     top: 0;
     right: 0;
-    height: 100vh;
+    height: 100%;
     width: 250px;
     z-index: 1;
     box-shadow: -10px 0px 10px rgba(0, 0, 0, 0.1);
@@ -150,23 +159,20 @@ const { titles } = Astro.props;
   }
 
   #mobile-nav-dropdown {
-    width: 100%;
-    margin-top: 80px;
+    margin-top: 20px;
   }
 
   #mobile-buttons {
-    background-color: var(--primary);
     color: var(--text-color);
     position: absolute;
-    right: 20px;
-    top: 20px;
+    top: 5px;
+    right: 5px;
     z-index: 2;
   }
 
   #mobile-buttons button {
     background-color: var(--primary);
     color: var(--text-color);
-    margin-right: 20px;
     padding: 4px;
     border: none;
     border-radius: 4px;

src/components/PostPreview.astro

@@ -22,7 +22,7 @@ const date = new Date(pubDate).toDateString();
 const postUrl = `${BASE_URL}posts/${title.toLowerCase().replace(/\s/g, "-")}/`;
 ---
 
-<div class="preview-container">
+<div id="preview-container">
   <div class="description-container">
     <div>
       <div>
@@ -41,22 +41,22 @@ const postUrl = `${BASE_URL}posts/${title.toLowerCase().replace(/\s/g, "-")}/`;
     <div class="tags-container">
       {
         tags.map((tag) => (
-          <button class="tag">
-            <a href={postUrl}>{tag[0].toUpperCase() + tag.slice(1)}</a>
-          </button>
+          <a href={postUrl}>
+            <button class="tag">{tag[0].toUpperCase() + tag.slice(1)}</button>
+          </a>
         ))
       }
-      <button class="tag">
-        <a href={postUrl}>Read Post</a>
-      </button>
+      <a href={postUrl}>
+        <button class="tag"> Read Post </button>
+      </a>
     </div>
   </div>
   <div class="container-like-image">
-    <button class="code-tag">
-      <a href={postUrl}>
+    <a href={postUrl}>
+      <button class="code-tag">
         {snippet.language[0].toUpperCase() + snippet.language.slice(1)}
-      </a>
-    </button>
+      </button>
+    </a>
     <Code
       code={snippet.code}
       lang={snippet.language}
@@ -67,9 +67,17 @@ const postUrl = `${BASE_URL}posts/${title.toLowerCase().replace(/\s/g, "-")}/`;
 </div>
 
 <style>
+  button {
+    cursor: pointer;
+  }
   p {
     white-space: break-spaces;
   }
+
+  #preview-container {
+    margin-top: 40px;
+  }
+
   .description-container {
     background-color: var(--secondary);
     padding: 8px;
@@ -166,7 +174,7 @@ const postUrl = `${BASE_URL}posts/${title.toLowerCase().replace(/\s/g, "-")}/`;
       border-radius: 8px;
     }
 
-    .preview-container {
+    #preview-container {
       display: grid;
       grid-template-columns: repeat(12, 1fr);
       margin-top: 24px;
@@ -175,24 +183,24 @@ const postUrl = `${BASE_URL}posts/${title.toLowerCase().replace(/\s/g, "-")}/`;
       align-items: center;
     }
 
-    .preview-container:nth-child(even) .description-container {
+    #preview-container:nth-child(even) .description-container {
       grid-column: 1 / 7;
       z-index: 2;
       margin-right: -100px;
       opacity: 0.9;
       grid-row: 1 / 2;
     }
-    .preview-container:nth-child(even) .container-like-image {
+    #preview-container:nth-child(even) .container-like-image {
       align-items: start;
       grid-column: 7 / 13;
       z-index: 1;
     }
 
-    .preview-container:nth-child(odd) .container-like-image {
+    #preview-container:nth-child(odd) .container-like-image {
       grid-column: 1 / 7;
       z-index: 1;
     }
-    .preview-container:nth-child(odd) .description-container {
+    #preview-container:nth-child(odd) .description-container {
       grid-column: 7 / 13;
       z-index: 2;
       margin-left: -100px;

src/components/ThemeToggle.astro

@@ -2,7 +2,7 @@
 import Icon from "./Icon.astro";
 ---
 
-<button id="theme-toggle">
+<button id="theme-toggle" aria-label="Toggle theme">
   <span class="icon" id="icon-light"
     ><Icon icon="sun" color="currentColor" /></span
   >

src/layouts/Post.astro

@@ -46,11 +46,17 @@ const {
   #main-content {
     display: flex;
     flex-direction: column;
-    align-self: center;
-    justify-self: center;
     gap: 10px;
   }
 
+  section {
+    padding: 10px;
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+    line-height: 25px;
+  }
+
   @media screen and (min-width: 720px) {
     #main-content {
       gap: 16px;

src/pages/index.astro

@@ -4,7 +4,11 @@ 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"];
+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,

src/styles/base.css

@@ -4,7 +4,7 @@
   --neutral: #092e39;
   --contrast: #1d7272;
   --text-color: #d7dce2;
-  --text-color-low-contrast: #8695b7;
+  --text-secondary-color: #b8c1d5;
   --code-background: #050605;
 
   --max-width: 720px;
@@ -60,8 +60,6 @@ body {
 }
 
 blockquote {
-  margin: 0;
-  padding: 0;
   border-left: 4px solid var(--contrast);
   padding-left: 1rem;
   color: var(--text-color-low-contrast);