yee

src/assets/scss/base/_color.scss

@@ -4,14 +4,14 @@
 
 $colors: (
   primary: (
-    100: hsl(276, 100%, 79%),
-    200: hsl(276, 79%, 69%),
-    300: hsl(276, 53%, 49%),
-    400: hsl(276, 64%, 48%),
-    500: hsl(276, 96%, 20%),
+    100: hsl(117, 100%, 79%),
+    200: hwb(117 46% 2%),
+    300: hsl(117, 37%, 51%),
+    400: hsl(115, 49%, 31%),
+    500: hsl(123, 43%, 16%),
   ),
   secondary: (
-    100: hsl(173, 81%, 68%),
+    100: hsl(0, 0%, 100%),
     200: hsl(173, 80%, 63%),
     300: hsl(173, 72%, 57%),
     400: hsl(173, 75%, 47%),

src/components/CallToAction.astro

@@ -1,7 +1,7 @@
 <div class="container">
   <div class="call-to-action mt-24 mb-32 flex flex-col items-center gap-12 rounded-xl p-12 md:p-24">
-    <h2 class="text-center text-3xl md:text-5xl">Get this theme on GitHub</h2>
-    <a href="https://github.com/markteekman/accessible-astro-starter" class="text-center text-lg"> Use this theme</a>
+    <h2 class="text-center text-3xl md:text-5xl">Check out the project on GitHub</h2>
+    <a href="https://github.com/tomdamo/Bando-studio" class="text-center text-lg">Download the project</a>
   </div>
 </div>
 

src/components/Footer.astro

@@ -9,9 +9,7 @@ const currentYear = new Date().getFullYear()
   <section class="py-8">
     <div class="container">
       <p>
-        &copy; {currentYear} - Starter Theme for <a href="https://astro.build/">Astro</a>. Made with ❤️ by <a
-          href="https://github.com/markteekman">Mark Teekman</a
-        >.
+        &copy; {currentYear} - Alien on board! By Bando Studio. GDS Project 2024 Spring Semester.
       </p>
     </div>
   </section>

src/components/Header.astro

@@ -27,9 +27,6 @@ import { Icon } from 'astro-icon/components'
         </li>
       </ul>
     </li>
-    <li class="menu-item">
-      <a href="https://accessible-astro.dev" title="external link" rel="external noopener noreferrer">External Link</a>
-    </li>
     <li class="menu-item type-icon">
       <a href="https://github.com/tomdamo/bando-studio" target="_blank" title="Go to the GitHub page">
         <Icon name="ion:logo-github" />

src/components/Hero.astro

@@ -1,7 +1,7 @@
 ---
 import { Icon } from 'astro-icon/components'
 
-const { src = '/astronaut-hero-img.webp' } = Astro.props
+const { src = 'src/assets/img/logo.png' } = Astro.props
 ---
 
 <section class="hero my-24">
@@ -12,13 +12,13 @@ const { src = '/astronaut-hero-img.webp' } = Astro.props
           <slot><span class="text-gradient">Alien</span> On Board!</slot>
         </h1>
         <div class="flex flex-col gap-3 min-[500px]:flex-row">
-          <a class="button has-icon" href="https://github.com/markteekman/accessible-astro-starter">
+          <a class="button has-icon" href="https://github.com/tomdamo/bando-studio">
             <Icon name="ion:star-outline" />
             Star on GitHub
           </a>
           <a
             class="button has-icon color-secondary"
-            href="https://github.com/markteekman/accessible-astro-starter/blob/main/README.md"
+            href="https://github.com/tomdamo/bando-studio"
           >
             <Icon name="ion:bookmark-outline" />
             Read the Docs

src/components/Navigation.astro

@@ -2,14 +2,14 @@
 import ResponsiveToggle from './ResponsiveToggle.astro'
 import { DarkMode } from 'accessible-astro-components'
 import { Image } from 'astro:assets'
-import logo from '../assets/img/logo.svg'
+import logo from '../assets/img/logo.png'
 ---
 
 <div id="main-navigation" class="is-desktop py-8">
   <div class="container">
     <a href="/" class="flex items-center gap-2 !no-underline">
       <Image src={logo} alt="Your Logo" width="47" height="37" />
-      <span class="font-bold">Accessible Astro</span>
+      <span class="font-bold">Alien On Board!</span>
     </a>
     <div class="wrapper">
       <nav class="desktop-menu" aria-label="Main navigation desktop">

src/pages/index.astro

@@ -12,38 +12,38 @@ import ContentMedia from '../components/ContentMedia.astro'
     <div class="container">
       <h2 class="mb-16 text-6xl">Features</h2>
       <div class="grid grid-cols-1 gap-12 md:grid-cols-2 lg:grid-cols-3">
-        <Feature icon="mdi:tailwind" title="Tailwind CSS">
+        <Feature icon="mdi:tailwind" title="Sneak">
           Use the power of Tailwind to greatly improve your productivity and enhance your developer workflow.
         </Feature>
-        <Feature icon="mdi:wheelchair-accessibility" title="a11y Components">
+        <Feature icon="mdi:wheelchair-accessibility" title="Hide">
           17 components and counting, all tried and tested for the most optimal accessible experience for your visitors.
         </Feature>
-        <Feature icon="mdi:looks" title="Prettier">
+        <Feature icon="mdi:looks" title="Kill">
           Less worry about formatting your code, let the Astro Prettier integration do the heavy lifting.
         </Feature>
-        <Feature icon="mdi:eslint" title="ESLint">
+        <Feature icon="mdi:eslint" title="Take over spaceship">
           Lint your code with strict a11y settings to ensure you stay on track with the WCAG standards.
         </Feature>
-        <Feature icon="mdi:book-open-page-variant" title="Blog">
+        <Feature icon="mdi:book-open-page-variant" title="Take over the system">
           This theme comes with a fully integrated blog, dynamic pages and SEO optimization.
         </Feature>
-        <Feature icon="mdi:language-markdown" title="Markdown & MDX">
+        <Feature icon="mdi:language-markdown" title="Evolve into a stronger alien">
           Easily use .md and .mdx pages to build your websites or use it with Netlify CMS.
         </Feature>
-        <Feature icon="mdi:theme-light-dark" title="Dark mode">
+        <Feature icon="mdi:theme-light-dark" title="Encounter new enemies">
           Fully integrated Dark mode gives your users the choice for their favorite viewing mode.
         </Feature>
-        <Feature icon="mdi:cog" title="Design System">
+        <Feature icon="mdi:cog" title="Save your species from extinction">
           The theme offers some very handy utilities to help you build your website faster.
         </Feature>
-        <Feature icon="mdi:lighthouse" title="Lighthouse Scores">
+        <Feature icon="mdi:lighthouse" title="Speedrun">
           Excellent lighthouse scores means your website will load faster and get better SEO rankings.
         </Feature>
       </div>
     </div>
   </section>
   <ContentMedia imgSrc="/accessible-components.webp">
-    <h2>Accessible Components</h2>
+    <h2>Trappist-1F</h2>
     <p class="text-2xl">
       This theme provides plenty of tried and tested Accessible Astro Components. Some are native to this theme and a
       lot of others are integrated using a <a href="https://github.com/markteekman/accessible-astro-components"
@@ -52,7 +52,7 @@ import ContentMedia from '../components/ContentMedia.astro'
     </p>
   </ContentMedia>
   <ContentMedia imgSrc="/wcag-compliant.webp" reverseImg={true}>
-    <h2>WCAG 2.1 AA Compliant</h2>
+    <h2>Humans are taking over the universe</h2>
     <p class="text-2xl">
       Using semantic HTML, landmarks, skip links, screen reader friendly content, aria-labels, keyboard accessible
       navigation and components, clear outlines and tab indicators and the right color contrast, you're more certain of