WIP: temp commit in case my laptop explodes

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>

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>

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'l Judd
       </a>
     </li>
     <li class="navElem">

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>

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;

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 {
+
+  }
+}

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