src/components/ImageSection.astro

@@ -5,28 +5,17 @@ interface Props {
   title: string;
   description: string;
   note: string;
-  idnr: number;
+  span?: boolean;
-  centered?: boolean;
 }
-const {
+const { imgUrl, imgAlt, title, description, note, span = false } = Astro.props;
-  imgUrl,
-  imgAlt,
-  title,
-  description,
-  note,
-  idnr,
-  centered = false,
-} = Astro.props;
 import "../styles/components/ImageSection.scss";
 ---
 
-<section style={{"--id":idnr}} class:list={["ImageSection", { centered }]}>
+<section class:list={["ImageSection", { span }]}>
-</section>
+  <h1>{title}</h1>
-<h1 style={{"--id":idnr}}>{title}</h1>
+  <div class="imgDiv">
-<div style={{"--id":idnr}} class="imgDiv">
     <img src={imgUrl} alt={imgAlt} />
     <p>{description}</p>
-</div>
+  </div>
-<div style={{"--id":idnr}} class="noteP">
+  <p class="noteP">{note}</p>
-  <p>{note}</p>
+</section>
-</div>

src/pages/features.astro

@@ -14,7 +14,6 @@ import "../styles/pages/features.scss";
         title="Time Planning and Management"
         description="Helps you to see on which days your fellow team mates are available."
         note="The bot can send these planning messages every monday at 3AM. Members can click the buttons on each message to communicate, if they have time on that day."
-        idnr={1}
       />
       <ImageSection
         imgUrl="https://static.moonleay.net/img/lilJuddWeb/features/matchplanner.png"
@@ -22,7 +21,6 @@ import "../styles/pages/features.scss";
         title="Match Planner"
         description="Make sure that you know when your next match is and who will participate."
         note="The bot can send these planning messages, when the command /match is used. Members can click the buttons on each message to communicate, if they will participate in the match. Participating members will get a role until the match has started."
-        idnr={2}
       />
       <ImageSection
         imgUrl="https://static.moonleay.net/img/lilJuddWeb/features/notifs.png"
@@ -30,7 +28,6 @@ import "../styles/pages/features.scss";
         title="Notifications"
         description="Make sure that you and your team members remember to vote in the Time Planner."
         note="The bot can add roles. The first one gets pinged, when the time planner sends the messages, the other one gets assigned to the available members of the day, so that it is possible to ping all available people."
-        idnr={3}
       />
       <ImageSection
         imgUrl="https://static.moonleay.net/img/lilJuddWeb/features/rotationstatus.png"
@@ -38,16 +35,14 @@ import "../styles/pages/features.scss";
         title="Rotation Status"
         description="Li'l Judd can show you the current map rotation in his status."
         note="The bot cycles through the current map and mode rotation. It updates every few seconds."
-        idnr={4}
       />
       <ImageSection
-        centered
+        span
         imgUrl="https://static.moonleay.net/img/lilJuddWeb/features/unknown.png"
         imgAlt="A Question Mark"
         title="More to come.."
         description="The bot is still in development. More features will be added."
         note="If you have a specific feature request, you can contact me on Discord: @moonleay or email: contact at moonleay dot net"
-        idnr={5}
       />
     </div>
   </div>

src/styles/components/ImageSection.scss

@@ -1,38 +1,25 @@
 .ImageSection {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-around;
+  padding: 2rem 1rem;
+  gap: 1rem;
   border-radius: 0.5rem;
   width: 100%;
-  grid-row: var(--id)/calc(var(--id) + 2);
-  grid-row: var(--id)/calc(var(--id) + 2);
-  grid-column: mod(var(--id), 2)/calc(mod(var(--id), 2) + 1);
-
-  @media (max-width: 1100px) {
-    max-width: 80vw;
-  }
-
-  position: relative;
-
-  background-size: contain;
   background-color: rgba(0, 0, 0, 0.5);
 
-  &.centered {
+  @media (min-width: 1150px) {
+    max-width: 80vw;
+
+    &.span {
       grid-column: 1/-1;
       width: 50%;
       justify-self: center;
     }
+  }
 
-}
+  .imgDiv {
-h1 {
-  z-index: 1;
-  grid-row: var(--id)/calc(var(--id) + 1);
-  grid-column: mod(var(--id), 2)/calc(mod(var(--id), 2) + 1);
-}
-.imgDiv {
-  z-index: 1;
-  grid-row: calc(var(--id) + 1)/calc(var(--id) + 2);
-  grid-column: mod(var(--id), 2)/calc(mod(var(--id), 2) + 1);
-  padding: 0.5rem;
-  margin-left: 3rem;
-  margin-right: 3rem;
     border-radius: 0.5rem;
 
     display: flex;
@@ -46,30 +33,22 @@ h1 {
     }
 
     p {
-    padding-top: 2px;
+      padding-top: 0.25rem;
       font-size: 0.8rem;
       text-align: center;
     }
-}
+  }
-
-.noteP {
-  z-index: 1;
-  grid-row: calc(var(--id) + 2)/calc(var(--id) + 3);
-  grid-column: mod(var(--id), 2)/calc(mod(var(--id), 2) + 1);
 
+  .noteP {
     line-height: 1.5;
     vertical-align: middle;
 
-  margin: auto;
+    margin: 0 3rem;
     font-size: 1rem;
     text-align: center;
 
     display: flex;
     justify-content: center;
     align-items: center;
-
-  p {
-    margin: auto;
-    padding: 2rem;
   }
 }

src/styles/pages/features.scss

@@ -20,7 +20,7 @@
     gap: 1rem;
   }
 
-  @media (min-width: 1100px) {
+  @media (min-width: 1150px) {
     .gridlayout {
       grid-template-columns: repeat(2, 550px);
     }