WIP: further improvement of features page

src/components/ImageSection.astro

@@ -19,12 +19,14 @@ import "../styles/components/ImageSection.scss";
 ---
 
 <section class:list={["ImageSection", { centered }]}>
-  <h1>{title}</h1>
+  <div class="firstHalf">
-  <div class="imgDiv">
+    <h1>{title}</h1>
-    <img src={imgUrl} alt={imgAlt} />
+    <div class="imgDiv">
-    <p>{description}</p>
+      <img src={imgUrl} alt={imgAlt} />
+      <p>{description}</p>
+    </div>
   </div>
-  <div>
+  <div class="noteP">
     <p>{note}</p>
   </div>
 </section>

src/pages/about.astro

@@ -10,13 +10,7 @@ import Layout from "@layouts/Layout.astro";
         href="https://static.moonleay.net/img/lilJuddWeb/about/oldplanningmsg.png"
         >these planning messages</a
       > and I thought that this should be automated. Some time later the first
-      version of li'l Judd was born.
+      version of li'l Judd was born. Today the bot has more features and keeps getting more of them! It is
-    </p>
-  </section>
-  <section>
-    <h1>What now?</h1>
-    <p>
-      Today the bot has more features and keeps getting more of them! It is
       designed to actually improve the Splatoon experience and not be the
       10000th moderation and general utility bot with the same features as all
       bots.
@@ -44,8 +38,8 @@ import Layout from "@layouts/Layout.astro";
   <section>
     <h1>Where is my data stored?</h1>
     <p>
-      Your data is stored in my basement on my server in Germany. And this will
+      Your data is stored in a VPS from Contabo in Germany, Bavaria. The bot used to be hosted on a server in my basement,
-      stay that way until I move.
+        but I moved it to a VPS, because my internet connection was not stable enough.
     </p>
   </section>
   <section>

src/styles/components/ImageSection.scss

@@ -1,5 +1,9 @@
 .ImageSection {
   border-radius: 0.5rem;
+  width: 100%;
+  @media (max-width: 1100px) {
+    max-width: 80vw;
+  }
 
   position: relative;
 
@@ -14,40 +18,60 @@
       rgba(0, 0, 0, 0.25) 100%
     );
 
-  margin: 1rem;
-  padding: 1rem;
-
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: space-around;
-
   &.centered {
     grid-column: 1/-1;
     width: 50%;
     justify-self: center;
   }
 
-  .imgDiv {
+  .firstHalf {
-    background-color: rgba(0, 0, 0, 0.4);
-    backdrop-filter: blur(5px);
-
-    padding: 0.5rem;
-    border-radius: 0.5rem;
-
     display: flex;
     flex-direction: column;
     align-items: center;
+    justify-content: space-around;
 
-    img {
+    .imgDiv {
+      background-color: rgba(0, 0, 0, 0.4);
+      backdrop-filter: blur(5px);
+
+      padding: 0.5rem;
+      margin-left: 3rem;
+      margin-right: 3rem;
       border-radius: 0.5rem;
-      max-width: 80%;
+
-      max-height: 280px;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+
+      img {
+        border-radius: 0.5rem;
+        max-width: 80%;
+        max-height: 280px;
+      }
+
+      p {
+        padding-top: 2px;
+        font-size: 0.8rem;
+        text-align: center;
+      }
     }
+  }
+
+  .noteP {
+    line-height: 1.5;
+    vertical-align: middle;
+
+    margin: auto;
+    font-size: 1rem;
+    text-align: center;
+
+    display: flex;
+    justify-content: center;
+    align-items: center;
 
     p {
-      padding-top: 2px;
+      margin: auto;
-      font-size: 0.8rem;
+      padding: 2rem;
     }
   }
 }

src/styles/pages/features.scss

@@ -12,8 +12,12 @@
   .gridlayout {
     display: grid;
     grid-template-columns: 550px;
-    align-content: center;
     padding: 1rem;
+    width: 100vw;
+    justify-content: center;
+    justify-items: center;
+    align-content: center;
+    gap: 1rem;
   }
 
   @media (min-width: 1100px) {