From 5d12017b0ca7d291cb7f25e0172249cc21e15a82 Mon Sep 17 00:00:00 2001
From: moonleay <contact@moonleay.net>
Date: Thu, 16 Nov 2023 09:12:57 +0100
Subject: [PATCH] WIP: continued work on the feature page

---
 src/components/ImageSection.astro       | 11 ++--
 src/pages/acknowledgements.astro        | 17 +++++
 src/pages/features.astro                | 87 +++++++++++++++----------
 src/styles/components/ImageSection.scss | 64 ++++++++++++------
 src/styles/pages/features.scss          | 33 ++++++++++
 5 files changed, 151 insertions(+), 61 deletions(-)
 create mode 100644 src/styles/pages/features.scss

diff --git a/src/components/ImageSection.astro b/src/components/ImageSection.astro
index b2c18db..2e1a2fe 100644
--- a/src/components/ImageSection.astro
+++ b/src/components/ImageSection.astro
@@ -11,11 +11,14 @@ import '../styles/components/ImageSection.scss'
 ---
 
 <section class="ImageSection">
-  <div class="backgroundImage"></div>
   <div class="content">
     <h1>{title}</h1>
-    <img src={imgUrl} alt={imgAlt} />
-    <p>{description}</p>
-    <p>{note}</p>
+    <div class="imgDiv">
+      <img src={imgUrl} alt={imgAlt} />
+      <p>{description}</p>
+    </div>
+    <div>
+      <p>{note}</p>
+    </div>
   </div>
 </section>
diff --git a/src/pages/acknowledgements.astro b/src/pages/acknowledgements.astro
index 6cf646a..cbbf5d0 100644
--- a/src/pages/acknowledgements.astro
+++ b/src/pages/acknowledgements.astro
@@ -140,6 +140,23 @@ import Layout from "@layouts/Layout.astro";
             >
           </td>
         </tr>
+      <tr>
+        <td>
+          <p>Splatoon3.ink</p>
+        </td>
+        <td>
+          <a
+          href="https://github.com/misenhower/splatoon3.ink/blob/main/license.md"
+          target="_blank"
+          >MIT License</a>
+        </td>
+        <td>
+          <a
+          href="https://splatoon3.ink/"
+          target="_blank"
+          >website</a>
+        </td>
+      </tr>
       </tbody>
     </table>
   </section>
diff --git a/src/pages/features.astro b/src/pages/features.astro
index 4d3ada3..577f52d 100644
--- a/src/pages/features.astro
+++ b/src/pages/features.astro
@@ -1,43 +1,58 @@
 ---
 import ImageSection from "@components/ImageSection.astro";
 import Layout from "@layouts/Layout.astro";
+import '../styles/pages/features.scss'
 ---
 
 <Layout>
-  <p>Features</p>
-  <ImageSection
-    imgUrl="https://static.moonleay.net/img/lilJuddWeb/features/timeplanner.png"
-    imgAlt="Screenshot of the time planning feature of li'l Judd"
-    title="Time Planning and Management"
-    description="Helps you to see on which days your fellow team members 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."
-  />
-  <ImageSection
-    imgUrl="https://static.moonleay.net/img/lilJuddWeb/features/notifs.png"
-    imgAlt="Screenshot of the notification feature of li'l Judd"
-    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."
-  />
-  <ImageSection
-    imgUrl="https://static.moonleay.net/img/lilJuddWeb/features/matchplanner.png"
-    imgAlt="Screenshot of the match planning feature of li'l Judd"
-    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."
-  />
-  <ImageSection
-    imgUrl="https://static.moonleay.net/img/lilJuddWeb/features/rotationstatus.png"
-    imgAlt="Screenshot of the current x map rotation in li'l Judd's status"
-    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."
-  />
-  <ImageSection
-    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"
-  />
+  <div class="container">
+    <h1 class="title" >Features</h1>
+    <div class="gridlayout" >
+      <div >
+        <ImageSection
+            imgUrl="https://static.moonleay.net/img/lilJuddWeb/features/timeplanner.png"
+            imgAlt="Screenshot of the time planning feature of li'l Judd"
+            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."
+        />
+      </div>
+      <div >
+        <ImageSection
+            imgUrl="https://static.moonleay.net/img/lilJuddWeb/features/notifs.png"
+            imgAlt="Screenshot of the notification feature of li'l Judd"
+            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."
+        />
+      </div>
+      <div>
+        <ImageSection
+            imgUrl="https://static.moonleay.net/img/lilJuddWeb/features/matchplanner.png"
+            imgAlt="Screenshot of the match planning feature of li'l Judd"
+            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."
+        />
+      </div>
+      <div>
+        <ImageSection
+            imgUrl="https://static.moonleay.net/img/lilJuddWeb/features/rotationstatus.png"
+            imgAlt="Screenshot of the current x map rotation in li'l Judd's status"
+            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."
+        />
+      </div>
+    </div>
+    <div class="centered">
+      <ImageSection
+          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"
+      />
+    </div>
+  </div>
 </Layout>
diff --git a/src/styles/components/ImageSection.scss b/src/styles/components/ImageSection.scss
index c3f6a32..cd2a200 100644
--- a/src/styles/components/ImageSection.scss
+++ b/src/styles/components/ImageSection.scss
@@ -1,34 +1,56 @@
 .ImageSection {
-  //background-image: url("https://static.moonleay.net/img/lilJuddWeb/bgs/tapes-bg.png"), linear-gradient(180deg,rgba(2,0,36,.1) 0%,rgba(0,0,0,0) 35%,rgba(0,0,0,.25) 100%);
+  border-radius: 0.5rem;
 
-  .backgroundImage{
-    border-radius: 0.5rem;
+  max-width: 100vw;
+  max-height: 550px;
+
+  height: 550px;
+  width: 550px;
+
+  position: relative;
+
+  background-size: contain;
+  background-color: rgba(183, 183, 183, 0.4);
+  backdrop-filter: blur(5px);
+  background-image: url("https://static.moonleay.net/img/lilJuddWeb/bgs/tapes-bg.png"), linear-gradient(180deg,rgba(2,0,36,.1) 0%,rgba(0,0,0,0) 35%,rgba(0,0,0,.25) 100%);
+
+  padding: 1rem;
+
+  .cutout {
+    //background-image: url("https://static.moonleay.net/img/lilJuddWeb/bgs/cutout.png");
     background-size: contain;
-    background-color: rgb(25 215 25);
-    -webkit-mask-image: url("https://static.moonleay.net/img/lilJuddWeb/bgs/card-header.svg");
-    mask-image: url("https://static.moonleay.net/img/lilJuddWeb/bgs/card-header.svg");
-    -webkit-mask-position: top;
-    mask-position: top;
-    -webkit-mask-size: 2000px auto;
-    mask-size: 2000px auto;
-    -webkit-mask-repeat: no-repeat;
-    mask-repeat: no-repeat;
+    background-repeat: no-repeat;
+    //height: 3rem;
+    margin: auto;
   }
 
   .content {
-
+    display: flex;
+    flex-direction: column;
+    align-items: center;
   }
 
+  .imgDiv {
+    background-color: rgba(0, 0, 0, 0.4);
+    backdrop-filter: blur(5px);
 
-  h1 {
+    padding: 0.5rem;
+    border-radius: 0.5rem;
 
+    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;
+    }
   }
 
-  img {
-
-  }
-
-  p {
-
-  }
 }
diff --git a/src/styles/pages/features.scss b/src/styles/pages/features.scss
new file mode 100644
index 0000000..28d7c09
--- /dev/null
+++ b/src/styles/pages/features.scss
@@ -0,0 +1,33 @@
+.container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  .title {
+    font-size: 3rem;
+    text-align: center;
+    margin-bottom: 1.2rem;
+  }
+
+  .centered {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+
+  .gridlayout div {
+    margin: 1rem;
+  }
+}
+
+@media (min-width: 1100px) {
+  .gridlayout {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    align-items: center;
+
+    div {
+      grid-column: span 1;
+    }
+  }
+}