fix: various article layout issues

src/components/Box.astro

@@ -31,19 +31,24 @@ const {
 const itemCenterProps = itemCenter ? "items-center" : "items-start";
 const borderProps = button?.border ? "border-white border" : "";
 const buttonTextColor = button?.textcolor ? button.textcolor : "text-black";
+const textAlignmentProps = itemCenter ? "text-center" : "";
 ---
 
-<div class={`${backgroundColor} p-4 rounded-xl flex flex-col space-y-2 `}>
+<div
+  class={`${backgroundColor} m-4 p-4 rounded-3xl flex flex-col space-y-2 sm:m-auto sm:rounded-2xl`}
+>
   {
     title && (
-      <div class={`flex flex-col ${itemCenterProps} space-y-2`}>
-        <h2 class={`text-2xl font-bold ${titleColor}`}>{title}</h2>
-        {date && <p class={`${dateColor}`}>{date}</p>}
-        {text && <p class={`${textColor}`}>{text}</p>}
+      <div class={`flex flex-col ${itemCenterProps} ${textAlignmentProps}`}>
+        <div class="space-y-2">
+          <h2 class={`text-2xl font-bold ${titleColor}`}>{title}</h2>
+          {date && <p class={`${dateColor}`}>{date}</p>}
+          {text && <p class={`${textColor}`}>{text}</p>}
+        </div>
         {button && (
           <a
             href={button.link}
-            class={`${buttonTextColor} ${button?.color} ${borderProps} inline-block px-4 py-2 rounded-full content-center`}
+            class={`${buttonTextColor} ${button?.color} ${borderProps} w-full mt-6 inline-block px-4 py-2 rounded-full content-center`}
           >
             {button.text}
           </a>

src/components/ContentContainer.astro

@@ -0,0 +1,3 @@
+<section class="md:px-12">
+  <slot />
+</section>

src/components/Footer.astro

@@ -9,11 +9,11 @@ import BrandYoutube from "./icons/BrandYoutube.astro";
 ---
 
 <footer
-  class="flex flex-col gap-5 items-center mx-auto sm:flex-col sm:items-start max-w-7xl px-5 py-5 w-full"
+  class="flex flex-col gap-6 items-center mx-auto sm:flex-col sm:items-start max-w-7xl px-5 py-5 w-full"
 >
-  <div class="sm:flex gap-10">
+  <div class="sm:flex gap-6 grid">
     <div>
-      <a href="/" class="flex items-center">
+      <a href="/" class="flex items-center mb-4">
         <img
           src="/images/tglogo-color.png"
           alt="The Gathering logo"

src/components/H1.astro

@@ -6,4 +6,4 @@ type Props = {
 const { text, color = "text-white" } = Astro.props;
 ---
 
-<h1 class=`text-6xl ${color} font-bold mb-2`>{text}</h1>
+<h1 class=`text-6xl ${color} font-bold mb-8`>{text}</h1>

src/components/Header.astro

@@ -1,5 +1,5 @@
 <header
-  class="flex justify-between items-center px-5 py-5 max-w-7xl justify-self-center w-full mx-auto bg-backgroundSecondary sm:rounded-3xl"
+  class="flex justify-between items-center p-5 max-w-7xl mb-8 justify-self-center w-full mx-auto bg-backgroundSecondary sm:rounded-3xl sm:mx-5 sm:mt-4 sm:mb-8 sm:w-auto xl:mx-auto xl:w-full"
 >
   <!-- <a href="/" class="flex gap-x-4 items-center "> -->
   <a href="/" class="sm:flex gap-x-4 items-center hidden">

src/components/Main.astro

@@ -1,3 +1,5 @@
-<main class="px-24 max-w-7xl mx-auto w-full sm:flex-1 max-sm:px-5">
-  <slot />
-</main>
+---
+import Sponsors from "../components/Sponsors.astro";
+---
+
+<main class="px-5 max-w-7xl xl:mx-auto"><slot /> <Sponsors /></main>

src/components/NewsComp.astro

@@ -13,7 +13,7 @@ const articles = await fetchArticles({
 
 <section>
   <H2 text="Nyheter >_" />
-  <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 sm:px-44">
+  <div class="grid grid-cols-1 sm:grid-cols-2 gap-y-4 gap-x-5 lg:px-28">
     {
       articles.map((article) => (
         <a href={`/news/${article.meta.slug}`}>
@@ -45,7 +45,7 @@ const articles = await fetchArticles({
               <img
                 src={article.main_image.sizes.thumbnail.url}
                 alt={article.main_image.alt}
-                class="w-24 h-24 object-cover ml-2 rounded-lg"
+                class="w-24 h-24 object-cover ml-4 rounded-lg"
               />
             )}
           </article>

src/components/Sponsors.astro

@@ -1,5 +1,5 @@
 <sponsor
-  class="flex my-4 py-5 max-sm:px-5 max-sm:py-10 max-w-7xl justify-center gap-4 w-full mx-auto bg-backgroundSecondary sm:rounded-3xl"
+  class="flex my-4 py-5 max-sm:px-5 max-sm:py-10 max-w-7xl justify-center gap-4 w-full mx-auto bg-backgroundSecondary rounded-3xl"
 >
   <a href="/" class="">
     <img

src/components/sections/AboutComp.astro

@@ -5,7 +5,7 @@
 <section
   class="text-white p-8 rounded-3xl border-solid border-4 border-backgroundSecondary my-2"
 >
-  <div class="container mx-auto">
+  <div class="container mx-auto prose">
     <h1 class="text-3xl font-bold text-center mb-6">Hva er The Gathering?</h1>
     <p class="text-center mb-4">
       Hver påske samler vi spill- og teknologientusiaster i Vikingskipet i

src/components/sections/CrewJoinComp.astro

@@ -14,7 +14,7 @@ const { image } = Astro.props;
     alt="Crew beskrivelse bilde"
     class="w-full h-full object-cover rounded-3xl"
   />
-  <div class="absolute inset-0 flex justify-center items-center">
+  <div class="absolute inset-0 flex justify-center items-start sm:items-center">
     <Box
       itemCenter={true}
       title="Vi søker frivillige!"

src/components/sections/NewsComp.astro

@@ -28,8 +28,8 @@ const articles = await fetchArticles({
       );
     } else {
       return (
-        <section class="text-white p-8 rounded-3xl border-solid border-4 border-backgroundSecondary my-2">
-          <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 sm:px-44">
+        <section class="text-white sm:p-8 rounded-3xl border-solid border-4 border-backgroundSecondary my-2">
+          <div class="grid grid-cols-1 sm:grid-cols-2 gap-y-4 gap-x-5 lg:px-28">
             {articles.map((article) => (
               <a href={`/news/${article.meta.slug}`}>
                 <article class="overflow-hidden flex flex-row p-4">
@@ -63,7 +63,7 @@ const articles = await fetchArticles({
                     <img
                       src={article.main_image.sizes.thumbnail.url}
                       alt={article.main_image.alt}
-                      class="w-24 h-24 object-cover ml-2 rounded-lg"
+                      class="w-24 h-24 object-cover ml-4 rounded-lg"
                     />
                   )}
                 </article>

src/components/sections/TechBlogComp.astro

@@ -14,7 +14,7 @@ const { image } = Astro.props;
     alt="Tech blogg bilde"
     class="w-full h-full object-cover rounded-3xl"
   />
-  <div class="absolute inset-0 flex justify-center items-center">
+  <div class="absolute inset-0 flex justify-center items-end sm:items-center">
     <Box
       itemCenter={true}
       title="Hvordan blir nettverket til?"

src/layouts/Layout.astro

@@ -1,6 +1,5 @@
 ---
 import Header from "../components/Header.astro";
-import Sponsors from "../components/Sponsors.astro";
 import Footer from "../components/Footer.astro";
 interface Props {
   title: string;
@@ -37,7 +36,7 @@ const matomoInstanceUrl =
   <head>
     <meta charset="UTF-8" />
     <meta name="description" content={finalDescription} />
-    <meta name="viewport" content="width=device-width" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <link rel="icon" type="image/png" href="/favicon-48x48.png" sizes="48x48" />
     <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
     <link rel="shortcut icon" href="/favicon.ico" />
@@ -84,10 +83,9 @@ const matomoInstanceUrl =
     </script>
     <!-- End Matomo Code -->
   </head>
-  <body class="min-h-screen bg-background sm:flex sm:flex-col">
+  <body class="min-w-96 min-h-screen bg-background sm:flex sm:flex-col">
     <Header />
     <slot />
-    <Sponsors />
     <Footer />
   </body>
 </html>

src/pages/news/[slug].astro

@@ -1,6 +1,7 @@
 ---
 import H1 from "../../components/H1.astro";
 import Main from "../../components/Main.astro";
+import ContentContainer from "../../components/ContentContainer.astro";
 import Layout from "../../layouts/Layout.astro";
 import { fetchArticleIdBySlug, fetchArticleById } from "../../utils";
 
@@ -34,54 +35,60 @@ const article = await fetchArticleById({
   image=`${article.main_image?.sizes.large.url}`
 >
   <Main>
-    <!-- Article Title -->
-    <H1 text=`${article.title}` />
-    <!-- Display Tags -->
-    <p class="text-sm text-gray-600 mb-2">
+    <ContentContainer>
+      <!-- Article Title -->
+      <H1 text=`${article.title}` />
+      <!-- Main Image -->
       {
-        article.tags
-          .filter((tag) => tag.name !== "NotNews") // Filter out the "NotNews" tag
-          .map((tag) => {
-            return tag.name
-              .split(" ")
-              .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
-              .join(" ");
-          })
-          .join(", ")
+        article.main_image && (
+          <img
+            src={article.main_image.sizes.large.url}
+            srcset={`${article.main_image.sizes.large.url} 500w, ${article.main_image.sizes.extra_large.url} 1000w`}
+            alt={article.main_image.alt}
+            class="w-auto rounded-3xl mb-5"
+          />
+        )
       }
-    </p>
-    <!-- Publish Date -->
-    <time
-      datetime={article.meta.first_published_at}
-      class="text-sm text-gray-500 mb-2 block"
-    >
-      {new Date(article.meta.first_published_at).toLocaleDateString()}
-    </time>
-    <!-- Author -->
-    <table class="">
-      <tbody class="text-sm text-gray-500 mb-2 block">
-        {
-          article.contributors.map((contributor) => (
-            <tr>
-              <td class="">{contributor.contribution_type}</td>
-              <td class="">| {contributor.name}</td>
-            </tr>
-          ))
-        }
-      </tbody>
-    </table>
-    <!-- Main Image -->
-    {
-      article.main_image && (
-        <img
-          src={article.main_image.sizes.large.url}
-          srcset={`${article.main_image.sizes.large.url} 500w, ${article.main_image.sizes.extra_large.url} 1000w`}
-          alt={article.main_image.alt}
-          class="w-auto h-auto mb-4"
-        />
-      )
-    }
-    <!-- Article Content -->
-    <div class="prose" set:html={article.body} />
+      <!-- Display Tags -->
+      <aside class="mb-5">
+        <p class="text-sm text-gray-600 mb-2">
+          {
+            article.tags
+              .filter((tag) => tag.name !== "NotNews") // Filter out the "NotNews" tag
+              .map((tag) => {
+                return tag.name
+                  .split(" ")
+                  .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+                  .join(" ");
+              })
+              .join(", ")
+          }
+        </p>
+        <!-- Publish Date -->
+        <time
+          datetime={article.meta.first_published_at}
+          class="text-sm text-gray-500 mb-2 block"
+        >
+          {new Date(article.meta.first_published_at).toLocaleDateString()}
+        </time>
+        <!-- Author -->
+        <table class="">
+          <tbody class="text-sm text-gray-500 mb-2 block">
+            {
+              article.contributors.map((contributor) => (
+                <tr>
+                  <td class="">{contributor.contribution_type}</td>
+                  <td class="">| {contributor.name}</td>
+                </tr>
+              ))
+            }
+          </tbody>
+        </table>
+      </aside>
+    </ContentContainer>
+    <ContentContainer>
+      <!-- Article Content -->
+      <div class="prose" set:html={article.body} />
+    </ContentContainer>
   </Main>
 </Layout>