src/components/Footer.astro

@@ -27,23 +27,23 @@ import '../styles/components/Footer.scss'
       <h3>The Software</h3>
       <div class="footerLinks">
         <a href="https://git.moonleay.net/DiscordBots/lilJudd" target="_blank"
-          >The code of the bot</a
+          >The code of the bot <img src="https://static.moonleay.net/img/lilJuddWeb/logos/external.svg" alt="external link"/></a
         >
         <a
           href="https://git.moonleay.net/Websites/liljudd-website"
-          target="_blank">The code of the website</a
+          target="_blank">The code of the website <img src="https://static.moonleay.net/img/lilJuddWeb/logos/external.svg" alt="external link"/></a
         >
-        <a href="https://todo.moonleay.net/share/OmisuzgPDdsrCAXKjGrTfYzWwqNDNclOMGJWeMsi/auth?view=kanban" target="_blank">The todo list</a>
+        <a href="https://todo.moonleay.net/share/OmisuzgPDdsrCAXKjGrTfYzWwqNDNclOMGJWeMsi/auth?view=kanban" target="_blank">The todo list <img src="https://static.moonleay.net/img/lilJuddWeb/logos/external.svg" alt="external link"/></a>
         <a href="/acknowledgements" target="_self">Acknowledgements</a>
       </div>
     </div>
     <div>
       <h3>More</h3>
       <div class="footerLinks">
-        <a href="https://moonleay.net/" target="_self">My homepage</a>
+        <a href="https://moonleay.net/" target="_self">My homepage <img src="https://static.moonleay.net/img/lilJuddWeb/logos/external.svg" alt="external link"/></a>
-        <a href="https://moonleay.net/blog/" target="_blank">My blog</a>
+        <a href="https://moonleay.net/blog/" target="_blank">My blog <img src="https://static.moonleay.net/img/lilJuddWeb/logos/external.svg" alt="external link"/></a>
         <a href="/contact" target="_self">Contact me</a>
-        <a href="https://status.moonleay.net/" target="_blank">Server Status</a>
+        <a href="https://status.moonleay.net/" target="_blank">Server Status <img src="https://static.moonleay.net/img/lilJuddWeb/logos/external.svg" alt="external link"/></a>
       </div>
     </div>
     <div>
@@ -54,7 +54,7 @@ import '../styles/components/Footer.scss'
         <a href="/terms-of-service" target="_self">Terms of Service</a>
         <a
           href="https://git.moonleay.net/DiscordBots/lilJudd/src/branch/master/LICENSE"
-          target="_blank">The license</a
+          target="_blank">The license <img src="https://static.moonleay.net/img/lilJuddWeb/logos/external.svg" alt="external link"/></a
         >
       </div>
     </div>

src/components/ImageSection.astro

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

src/pages/about.astro

@@ -1,13 +1,17 @@
 ---
 import Layout from "@layouts/Layout.astro";
+import "../styles/pages/about.scss";
 ---
 
 <Layout>
+  <h1>About</h1>
+  <div class="aboutdiv">
     <section>
-    <h1>Why does this bot exist?</h1>
+      <h2>Why does this bot exist?</h2>
       <p>
         We had a person in our team, who sent <a
           href="https://static.moonleay.net/img/lilJuddWeb/about/oldplanningmsg.png"
+          target="_blank"
       >these planning messages</a
       > and I thought that this should be automated. Some time later the first
         version of li'l Judd was born. Today the bot has more features and keeps getting more of them! It is
@@ -17,16 +21,16 @@ import Layout from "@layouts/Layout.astro";
       </p>
     </section>
     <section>
-    <h1>Who is behind this?</h1>
+      <h2>Who is behind this?</h2>
       <p>
         The bot is currently being developed by <a
-        href="https://discord.com/users/372703841151614976"
+          href="/contact"
-        target="_blank">moonleay</a
+          target="_self">moonleay</a
       > (hey that&apos;s me!) with occasional help from his friends!
       </p>
     </section>
     <section>
-    <h1>How can I trust you, that you will not abuse your access?</h1>
+      <h2>How can I trust you </h2>
       <p>
         The bot only requests permissions, which are needed for it to work. Additionally,
         if you want to check how the bot works under the hood, you can
@@ -36,27 +40,28 @@ import Layout from "@layouts/Layout.astro";
       </p>
     </section>
     <section>
-    <h1>Where is my data stored?</h1>
+      <h2>Where is my data stored?</h2>
       <p>
-      Your data is stored in a VPS from Contabo in Germany, Bavaria. The bot used to be hosted on a server in my basement,
+        Your data is stored in a VPS from Contabo in Germany. The bot used to be hosted on a server in my basement,
         but I moved it to a VPS, because my internet connection was not stable enough.
       </p>
     </section>
     <section>
-    <h1>So whats in the future?</h1>
+      <h2>So whats in the future?</h2>
       <p>
         I plan on adding features, which are aimed to improve your and your teams
         competitive experience! You can check out my public todo list <a href="https://todo.moonleay.net/share/OmisuzgPDdsrCAXKjGrTfYzWwqNDNclOMGJWeMsi/auth?view=kanban" target="_blank">here</a>.
       </p>
     </section>
     <section>
-    <h1>Hey, there is this really cool idea I have! Can you add it?</h1>
+      <h2>Hey, there is this really cool idea I have! Can you add it?</h2>
       <p>
         Just message me! I can't promise anything, but I am always open to new
         ideas and improvements! You can find ways to contact me <a
           href="/contact"
-        target="_blank">here</a
+          target="_self">here</a
       >.
       </p>
     </section>
+  </div>
 </Layout>

src/pages/contact.astro

@@ -1,15 +1,20 @@
 ---
 import Layout from "@layouts/Layout.astro";
+import "../styles/pages/contact.scss";
 ---
 
 <Layout>
-  <section>
+  <div class="wrapper">
     <h1>Contact</h1>
-    <p>
+    <section class="contact">
-      EMail: <a href="mailto:contact@moonleay.net">contact@moonleay.net</a>
+      <a href="mailto:contact@moonleay.net" target="_blank">
-    </p>
+        <img src="https://static.moonleay.net/img/lilJuddWeb/logos/email.svg" alt="Email"/>
-    <p>
+        contact@moonleay.net
-      Discord: <a>@moonleay</a>
+      </a>
-    </p>
+      <a href="https://discord.com/users/372703841151614976" target="_blank">
+        <img src="https://static.moonleay.net/img/lilJuddWeb/logos/discord.svg" alt="Discord"/>
+        @moonleay
+      </a>
     </section>
+  </div>
 </Layout>

src/pages/features.astro

@@ -37,7 +37,7 @@ import "../styles/pages/features.scss";
         note="The bot cycles through the current map and mode rotation. It updates every few seconds."
       />
       <ImageSection
-        centered
+        span
         imgUrl="https://static.moonleay.net/img/lilJuddWeb/features/unknown.png"
         imgAlt="A Question Mark"
         title="More to come.."

src/pages/how-do-i.astro

@@ -33,6 +33,6 @@ import "../styles/pages/how-do-i.scss";
     </div>
   </section>
   <section class="footernotesection">
-    <p>Is something missing here? Please contact me!</p>
+    <p>Is something missing here? Please <a href="/contact" target="_self">contact me</a>!</p>
   </section>
 </Layout>

src/pages/stack.astro

@@ -6,51 +6,42 @@ import "../styles/pages/stack.scss"
 <Layout>
   <h1 class="title">The Stack</h1>
   <section class="stacksection">
-    <div class="stackgrid_1 stackitm">
     <img
         src="https://static.moonleay.net/img/lilJuddWeb/logos/kotlin.svg"
         alt="Kotlin 'K' logo"
     />
-    </div>
     <div class="stackgrid_3 stackitm">
       <h1>The Kotlin programming language</h1>
       <p>
-        I chose this programming language because it is my main one. There is
+        A programming language, which runs in the JVM. Also my main language.
-        nothing more to that.
       </p>
     </div>
   </section>
   <section class="stacksection">
-    <div class="stackgrid_1 stackitm">
     <img
         src="https://static.moonleay.net/img/lilJuddWeb/logos/kord.png"
         alt="The Kord logo"
     />
-    </div>
     <div class="stackgrid_3 stackitm">
       <h1>The Kord library</h1>
       <p>A Kotlin library for creating Discord bots. Pretty bare bones.</p>
     </div>
   </section>
   <section class="stacksection">
-    <div class="stackgrid_1 stackitm">
     <img
         src="https://static.moonleay.net/img/lilJuddWeb/logos/kordextensions.png"
         alt="The Kord-Extensions logo"
     />
-    </div>
     <div class="stackgrid_3 stackitm">
       <h1>The Kord Extensions library</h1>
       <p>A Kotlin library to improve the Kord experience.</p>
     </div>
   </section>
   <section class="stacksection">
-    <div class="stackgrid_1 stackitm">
     <img
         src="https://static.moonleay.net/img/lilJuddWeb/logos/pgelephant.png"
         alt="The PostgreSQL elephant"
     />
-    </div>
     <div class="stackgrid_3 stackitm">
       <h1>The PostgreSQL database</h1>
       <p>
@@ -61,7 +52,7 @@ import "../styles/pages/stack.scss"
   </section>
   <section class="stacknote">
     <p>
-      To see all used libraries and their licenses, check the <a href="/acknowledgements">Acknowledgements</a>.
+      To view all used libraries and their licenses, check the <a href="/acknowledgements">Acknowledgements</a>.
     </p>
   </section>
 </Layout>

src/styles/components/Footer.scss

@@ -29,6 +29,13 @@ footer {
     grid-template-columns: repeat(4, 1fr);
     gap: 20px;
 
+    div {
+      img {
+        margin: auto;
+        max-width: 0.5rem;
+      }
+    }
+
     h3 {
       margin-bottom: 8px;
     }

src/styles/components/ImageSection.scss

@@ -1,43 +1,25 @@
 .ImageSection {
-  border-radius: 0.5rem;
-  width: 100%;
-  @media (max-width: 1100px) {
-    max-width: 80vw;
-  }
-
-  position: relative;
-
-  background-size: contain;
-  background-color: rgba(0, 0, 0, 0.5);
-  //background-color: rgba(183, 183, 183, 0.5);
-  //backdrop-filter: blur(5px);
-  //background-image: url("https://static.moonleay.net/img/lilJuddWeb/bgs/tapes-bg.png"),
-  //  linear-gradient(
-  //    180deg,
-  //    rgba(2, 0, 36, 0.1) 0%,
-  //    rgba(0, 0, 0, 0) 35%,
-  //    rgba(0, 0, 0, 0.25) 100%
-  //  );
-
-  &.centered {
-    grid-column: 1/-1;
-    width: 50%;
-    justify-self: center;
-  }
-
-  .firstHalf {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: space-around;
+  padding: 2rem 1rem;
+  gap: 1rem;
+  border-radius: 0.5rem;
+  width: 100%;
+  background-color: rgba(0, 0, 0, 0.5);
+
+  @media (min-width: 1150px) {
+    max-width: 80vw;
+
+    &.span {
+      grid-column: 1/-1;
+      width: 50%;
+      justify-self: center;
+    }
+  }
 
   .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;
 
     display: flex;
@@ -51,28 +33,22 @@
     }
 
     p {
-        padding-top: 2px;
+      padding-top: 0.25rem;
       font-size: 0.8rem;
       text-align: center;
     }
   }
-  }
 
   .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/about.scss

@@ -0,0 +1,30 @@
+h1 {
+  font-size: 3rem;
+  text-align: center;
+  margin-bottom: 1.2rem;
+}
+
+.aboutdiv {
+  section {
+    background-color: rgba(0, 0, 0, 0.5);
+    border-radius: 4px;
+    margin: 1rem;
+    padding: 1rem;
+    display: block;
+  }
+
+  h2 {
+    font-size: 1.5rem;
+  }
+
+  a {
+    color: white;
+    text-decoration: underline;
+    font-size: 0.9rem;
+    transition: 0.5s;
+
+    &:hover {
+      color: rgb(96 59 255) !important;
+    }
+  }
+}

src/styles/pages/contact.scss

@@ -0,0 +1,23 @@
+.wrapper {
+  margin: 0;
+
+  h1 {
+    font-size: 3rem;
+    text-align: center;
+    margin-bottom: 1.2rem;
+  }
+  text-align: center;
+
+  .contact {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    a {
+      display: flex;
+      align-items: center;
+      img {
+        margin: 0 5px;
+      }
+    }
+  }
+}

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);
     }

src/styles/pages/how-do-i.scss

@@ -26,7 +26,7 @@
       img {
         display: flex;
         border-radius: 5px;
-        max-width: 90%;
+        max-width: 100%;
       }
 
       p, code {
@@ -36,3 +36,22 @@
   }
 }
 
+.footernotesection {
+  background-color: rgba(0, 0, 0, 0.5);
+  border-radius: 4px;
+  margin: 1rem;
+  padding: 1rem;
+  display: block;
+  text-align: center;
+  a {
+    color: white;
+    text-decoration: underline;
+    font-size: 0.9rem;
+    transition: 0.5s;
+
+    &:hover {
+      color: rgb(96 59 255) !important;
+    }
+  }
+}
+

src/styles/pages/stack.scss

@@ -8,16 +8,19 @@
   background-color: rgba(0, 0, 0, 0.5);
   border-radius: 4px;
   margin: 1rem;
-  padding: 1rem;
+  padding: 1.5rem;
   display: block;
-  @media (min-width: 800px) {
-    display: grid;
-    grid-template-columns: repeat(4, 1fr);
-  }
 
-  .stackgrid_1 {
+  @media (min-width: 950px) {
-    grid-column: span 1;
+    max-width: 900px;
-    text-align: center;
+    margin: 1rem auto;
+    display: flex;
+    width: 100%;
+    justify-content: space-between;
+
+    //display: grid;
+    //grid-template-columns: repeat(4, 1fr);
+  }
 
   img {
     max-width: 80%;
@@ -25,16 +28,11 @@
     width: 200px;
     border-radius: 5px;
   }
-  }
 
   .stackgrid_3 {
-    grid-column: span 3;
+    //grid-column: span 3;
     text-align: center;
     align-self: center;
-    margin: auto
-  }
-
-  .stackitm {
     margin: auto;
   }
 }
@@ -43,6 +41,12 @@
   background-color: rgba(0, 0, 0, 0.5);
   border-radius: 4px;
   margin: 1rem;
+
+  @media (min-width: 950px) {
+    width: 900px;
+    margin: 1rem auto;
+  }
+
   padding: 1rem;
   text-align: center;