From 7f01d5a12e34daef9676606a10d917306f1189e3 Mon Sep 17 00:00:00 2001
From: "Sandra Viktoria D. Toftemo" <sandra.toftemo@gmail.com>
Date: Wed, 14 Aug 2024 10:13:53 +0200
Subject: [PATCH] refactor: use new default slug for project article (#757)

* fix: use new default slug for project article

* chore: delete unused file
---
 src/layouts/work.astro           | 62 --------------------------------
 src/pages/arbeid/[...slug].astro | 33 ++++++++++++++---
 2 files changed, 29 insertions(+), 66 deletions(-)
 delete mode 100644 src/layouts/work.astro

diff --git a/src/layouts/work.astro b/src/layouts/work.astro
deleted file mode 100644
index 43aaaf90..00000000
--- a/src/layouts/work.astro
+++ /dev/null
@@ -1,62 +0,0 @@
----
-import type { MarkdownLayoutProps } from 'astro';
-import Layout, { type Props as DefaultLayoutProps } from './default.astro';
-
-export type Props = MarkdownLayoutProps<DefaultLayoutProps>;
-const { frontmatter } = Astro.props;
----
-
-<Layout {...frontmatter}>
-  <main>
-    {
-      frontmatter.headline && (
-        <aside>
-          <h1>{frontmatter.headline}</h1>
-        </aside>
-      )
-    }
-    <section>
-      <slot />
-    </section>
-  </main>
-</Layout>
-
-<style>
-  main {
-    margin-block: 2rem;
-    width: min(90ch, 100% - 4rem);
-    margin-inline: auto;
-
-    display: flex;
-    gap: 1.5rem;
-    flex-wrap: wrap;
-  }
-
-  :global(section > :first-child) {
-    font-weight: 600;
-    font-size: 1.25rem;
-    line-height: 1.4;
-  }
-
-  aside {
-    max-width: 275px;
-  }
-
-  h1 {
-    font-size: 2rem;
-    font-weight: 600;
-    margin-block: 0.7rem;
-    text-wrap: pretty;
-  }
-
-  section {
-    max-width: 60ch;
-  }
-
-  main :global(img) {
-    max-width: 100%;
-    height: auto;
-    margin-block: 2rem;
-  }
-
-</style>
diff --git a/src/pages/arbeid/[...slug].astro b/src/pages/arbeid/[...slug].astro
index 8d3dfff0..f64dd38e 100644
--- a/src/pages/arbeid/[...slug].astro
+++ b/src/pages/arbeid/[...slug].astro
@@ -1,6 +1,6 @@
 ---
 import { getCollection } from 'astro:content';
-import Layout from '@layouts/work.astro';
+import Layout from '@layouts/default.astro';
 
 export async function getStaticPaths() {
   const blogEntries = await getCollection('project');
@@ -14,7 +14,32 @@ const { entry } = Astro.props;
 const { Content } = await entry.render();
 ---
 
-<Layout frontmatter={entry}>
-  <h1>{entry.data.title}</h1>
-  <Content />
+<Layout {...entry.data}>
+  <main>
+    <h1>{entry.data.title}</h1>
+    <Content />
+  </main>
 </Layout>
+
+<style>
+  main {
+    width: var(--container-width);
+    margin-inline: auto;
+  }
+  h1 {
+    font-size: clamp(3rem, 5vw, 2.5rem);
+    font-weight: 400;
+    line-height: 1.3;
+    grid-column: 1 / 6;
+
+    text-wrap: pretty;
+    max-width: 25ch;
+
+    margin-bottom: 0;
+  }
+  @media (max-width: 640px) {
+    h1 {
+      font-size: clamp(2rem, 5vw, 2rem);
+    }
+  }
+</style>