Fix page about

Author: rubenhensen

src/routes/about/+page.svelte

@@ -3,11 +3,10 @@
     import aboutImg from '$lib/assets/images/about.svg'
 </script>
 
-<div class="about-container">
-    <div class="about-content">
-        <h2 class="page-title"><span>{$_('about.title')}</span></h2>
-
-        <div class="content-grid">
+<div class="page-wrapper">
+    <div class="grid-container">
+        <div class="grid-item header">
+            <h2><span>{$_('about.title')}</span></h2>
             <div class="text-content">
                 <h3>{$_('about.subtitle1')}</h3>
                 <p>
@@ -22,70 +21,54 @@
                     {$_('about.subpar3')}
                 </p>
             </div>
-
-            <div class="image-content">
-                <img
-                    src={aboutImg}
-                    alt="about"
-                    class="invert"
-                />
-                
-            </div>
+        </div>
+        <div class="grid-item content-box">
+            <img
+                src={aboutImg}
+                alt="about"
+                class="invert"
+            />
             <div id="team">
-                    <h3>{$_('about.team.header')}</h3>
-                    <p>
-                        {@html $_('about.team.par')}
-                    </p>
+                <h3>{$_('about.team.header')}</h3>
+                <p>
+                    {@html $_('about.team.par')}
+                </p>
             </div>
         </div>
     </div>
 </div>
 
 <style lang="scss">
-    .image-content{ 
-        display: flex;
-        justify-content: center
-    }
-
-    img {
-        width: 100%;
-    }
-    .about-container {
+    .page-wrapper {
+        height: 100%;
         display: flex;
+        align-items: center;
         justify-content: center;
-        align-items: flex-start;
-        width: 100%;
-        height: calc(100vh - 52px - 0.5rem - 1rem);
-        overflow-y: auto;
-        padding: 2rem 1rem;
-    }
-
-    .about-content {
-        max-width: 1100px;
-        width: 100%;
     }
 
-    .page-title {
-        text-align: center;
-        margin-bottom: 2rem;
+    .grid-item {
+        height: 100%;
+        display: flex;
+        flex-direction: column;
     }
 
-    .content-grid {
+    .grid-container {
         display: grid;
-        grid-template-columns: 1fr 1fr;
-        gap: 4rem;
+        grid-template-columns: repeat(2, minmax(0, 550px));
+        height: auto;
         align-items: start;
+        overflow-y: auto;
     }
 
-    .text-content {
-        text-align: left;
+    img {
+        width: 90%;
+        margin-bottom: 1rem;
+    }
 
+    .text-content {
         h3 {
             margin-top: 1.5rem;
             margin-bottom: 0.5rem;
-            font-size: 1.1rem;
-            font-weight: 700;
-            color: var(--pg-text);
         }
 
         h3:first-child {
@@ -99,19 +82,17 @@
         }
     }
 
-    .image-content {
-        text-align: left;
-
-        img {
-            max-width: 100%;
-            height: auto;
-        }
+    .content-box {
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-evenly;
     }
 
     #team {
-        border: 1px dashed var(--pg-text);
-        border-radius: 16px; 
-        padding: 1.5rem 2rem;
+        border: 1px dashed black;
+        border-radius: 8px;
+        padding: 20px;
 
         h3 {
             margin-top: 0;
@@ -126,17 +107,8 @@
     }
 
     @media only screen and (max-width: 800px) {
-        .about-container {
-            padding: 1rem 0.5rem;
-        }
-
-        .about-content {
-            width: 96%;
-        }
-
-        .content-grid {
+        .grid-container {
             grid-template-columns: 1fr;
-            gap: 2rem;
         }
     }
 </style>