From 7707d8b7db5faeccc945b7206e8793748e2097c1 Mon Sep 17 00:00:00 2001
From: moonleay <contact@moonleay.net>
Date: Tue, 14 Nov 2023 23:38:56 +0100
Subject: [PATCH] WIP: temp commit in case my laptop explodes

---
 src/components/Footer.astro             |  4 +--
 src/components/ImageSection.astro       | 14 ++++++----
 src/components/NavBar.astro             |  2 +-
 src/pages/index.astro                   |  2 +-
 src/styles/components/Footer.scss       |  3 ++-
 src/styles/components/ImageSection.scss | 34 +++++++++++++++++++++++++
 src/styles/pages/index.scss             |  8 +++++-
 7 files changed, 56 insertions(+), 11 deletions(-)
 create mode 100644 src/styles/components/ImageSection.scss

diff --git a/src/components/Footer.astro b/src/components/Footer.astro
index 9439812..f94cc64 100644
--- a/src/components/Footer.astro
+++ b/src/components/Footer.astro
@@ -27,11 +27,11 @@ import '../styles/components/Footer.scss'
       <h3>The Software</h3>
       <div class="footerLinks">
         <a href="https://git.moonleay.net/DiscordBots/lilJudd" target="_blank"
-          >The Bot Code</a
+          >The bot&apos;s code</a
         >
         <a
           href="https://git.moonleay.net/Websites/liljudd-website"
-          target="_blank">The Website Code</a
+          target="_blank">The websites code</a
         >
         <a href="/acknowledgements" target="_self">Acknowledgements</a>
       </div>
diff --git a/src/components/ImageSection.astro b/src/components/ImageSection.astro
index 9c9b9bf..b2c18db 100644
--- a/src/components/ImageSection.astro
+++ b/src/components/ImageSection.astro
@@ -7,11 +7,15 @@ interface SectionProps {
   note: string;
 }
 const { imgUrl, imgAlt, title, description, note } = Astro.props;
+import '../styles/components/ImageSection.scss'
 ---
 
-<section>
-  <h1>{title}</h1>
-  <img src={imgUrl} alt={imgAlt} />
-  <p>{description}</p>
-  <p>{note}</p>
+<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>
 </section>
diff --git a/src/components/NavBar.astro b/src/components/NavBar.astro
index 9367e73..0953817 100644
--- a/src/components/NavBar.astro
+++ b/src/components/NavBar.astro
@@ -10,7 +10,7 @@ import '../styles/components/NavBar.scss';
           src="https://static.moonleay.net/img/lilJuddWeb/logos/logox256.png"
           alt="The Bots Logo"
         />
-         li'l Judd
+         li&apos;l Judd
       </a>
     </li>
     <li class="navElem">
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 2e0eb4f..1075663 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -5,7 +5,7 @@ import '../styles/pages/index.scss';
 
 <Layout>
   <section class="section">
-    <h1>li'l Judd</h1>
+    <h1>li&apos;l Judd</h1>
     <h5>The competetive Splatoon Bot</h5>
     <div>
       <p class="p1">Improve your competitive Splatoon experience!</p>
diff --git a/src/styles/components/Footer.scss b/src/styles/components/Footer.scss
index f07e90c..76eb27d 100644
--- a/src/styles/components/Footer.scss
+++ b/src/styles/components/Footer.scss
@@ -38,6 +38,7 @@ footer {
     display: flex;
     flex-direction: column;
     align-items: baseline;
+    font-size: 0.75rem;
 
     a {
       position: relative;
@@ -71,7 +72,7 @@ footer {
   .footerNotice {
     margin: 0 auto;
     text-align: center;
-    font-size: 0.75rem;
+    font-size: 0.65rem;
 
     a {
       transition: .5s;
diff --git a/src/styles/components/ImageSection.scss b/src/styles/components/ImageSection.scss
new file mode 100644
index 0000000..c3f6a32
--- /dev/null
+++ b/src/styles/components/ImageSection.scss
@@ -0,0 +1,34 @@
+.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%);
+
+  .backgroundImage{
+    border-radius: 0.5rem;
+    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;
+  }
+
+  .content {
+
+  }
+
+
+  h1 {
+
+  }
+
+  img {
+
+  }
+
+  p {
+
+  }
+}
diff --git a/src/styles/pages/index.scss b/src/styles/pages/index.scss
index a2bfdac..da68edb 100644
--- a/src/styles/pages/index.scss
+++ b/src/styles/pages/index.scss
@@ -7,7 +7,6 @@
 
 .section h1 {
   font-size: 4rem;
-  margin-top: 8rem;
 }
 
 .section h5 {
@@ -29,4 +28,11 @@
 
 .p2 a {
   font-weight: bolder;
+  text-decoration: underline;
+  font-size: 0.9rem;
+  transition: .5s;
+}
+
+.p2 a:hover {
+  color: rgb(96 59 255) !important;
 }