Starting to implement the layout for blog posts

nx-academy · Jul 28, 2024 · 2ff6cb2 · 2ff6cb2
1 parent 92fec30
commit 2ff6cb2
Show file tree

Hide file tree

Showing 4 changed files with 49 additions and 11 deletions.
diff --git a/src/layouts/BlogPostLayout.astro b/src/layouts/BlogPostLayout.astro
@@ -6,16 +6,44 @@ import Footer from "../components/Footer.astro";
 ---
 
 <BaseLayout>
-    <div>
-        <Header />
-        <slot />
-        <Footer />
-    </div>
+  <div>
+    <Header />
+    <section>
+      <slot />
+    </section>
+    <Footer />
+  </div>
 </BaseLayout>
 
 <style>
-    div {
-        padding-left: 1.5rem;
-        padding-bottom: 1.5rem;
-    }
+  div {
+    padding-top: 1.5rem;
+    padding-bottom: 1.5rem;
+  }
+
+  section {
+    width: 90%;
+    max-inline-size: 66ch;
+    margin-left: auto;
+    margin-right: auto;
+  }
+</style>
+
+<style is:global>
+  h1 {
+    font-size: clamp(2.5rem, 0.75rem + 1.5vw, 4rem);
+    margin-top: 0;
+    margin-bottom: 1rem;
+  }
+
+  h2 {
+    font-size: 1.75rem;
+    margin-bottom: 1rem;
+  }
+
+  img {
+    width: 100%;
+    margin-bottom: 1rem;
+    border-radius: 8px;
+  }
 </style>
diff --git a/src/pages/blog/decouvrez-fiches-techniques.md b/src/pages/blog/decouvrez-fiches-techniques.md
@@ -0,0 +1,2 @@
+# Découvrez les fiches techniques
+
diff --git a/src/pages/blog/new-welcome-v2.md b/src/pages/blog/new-welcome-v2.md
@@ -0,0 +1,10 @@
+---
+layout: ../../layouts/BlogPostLayout.astro
+---
+
+# Bienvenue sur la V2
+
+![Quelqu'un assis dans un jardin au printemps, pixel art](/jardin-printemps.webp)
+
+
+## Comme un parfum de printemps.
diff --git a/src/pages/blog/welcome-v2.astro b/src/pages/blog/welcome-v2.astro
@@ -121,7 +121,6 @@ import ContentLayout from "../../layouts/ContentLayout.astro";
 
 <style>
   h1 {
-    /* font-size: 2.5rem; */
     font-size: clamp(2.5rem, 0.75rem + 1.5vw, 4rem);
     margin-top: 0;
     margin-bottom: 1rem;
@@ -140,7 +139,6 @@ import ContentLayout from "../../layouts/ContentLayout.astro";
 
   section {
     width: 90%;
-    /* max-width: 680px; */
     max-inline-size: 66ch;
     margin-left: auto;
     margin-right: auto;