Refactor Footer component to adjust width and sizing

src/components/Footer.vue

@@ -17,7 +17,7 @@ const toggleThemeIcon = computed(() => {
 
 <template>
 	<div
-		class="w-96 h-14 glass-thick bg-gray-300/50 rounded-full relative -top-6 shadow-xl flex-row items-center justify-start p-4 flex xl:ml-[30%]">
+		class="w-64 lg:w-96 h-14 glass-thick bg-gray-300/50 rounded-full relative -top-6 shadow-xl flex-row items-center justify-start p-4 flex xl:ml-[30%]">
 		<!-- Lightswitch for light and dark mode -->
 
 		<button

src/components/Hero.vue

@@ -6,9 +6,9 @@ import Sidebar from './sidebar/Sidebar.vue';
 	<!-- The main hero element/page for the website. This holds all the main content.
    On desktop: There appears a side window ("floating in 3d space") next to the hero
    window, and on mobile, there appears a hamburger in the hero so the user can select it-->
-	<div class="flex items-center justify-center rounded-[40px] sm:h-[80%] min-h-full w-full no-scrollbar">
+	<div class="flex items-center justify-center rounded-[40px] sm:h-[80%] min-h-full w-full no-scrollbar gap-5 2xl:gap-10">
 		<!-- The desktop only sidebar element. -->
-		<div class="hidden xl:flex h-full mr-5 basis-0 xl:basis-1/4">
+		<div class="hidden xl:flex h-full basis-0 md:basis-[%15] xl:basis-1/4">
 			<Sidebar />
 		</div>
 

src/components/PageLayoutSpacer.vue

@@ -1,10 +1,8 @@
 <script setup lang="ts">
-import SlamTransition from "./SlamTransition.vue";
-
 export interface PageLayoutSpacerProps {
-    tag: string;
-    opacityDuration: string;
-    transformDuration: string;
+    tag?: string;
+    opacityDuration?: string;
+    transformDuration?: string;
 }
 
 const props = defineProps<PageLayoutSpacerProps>();

src/components/sidebar/Sidebar.vue

@@ -15,7 +15,7 @@ function toggleHamburger() {
 </script>
 
 <template>
-  <div>
+  <div class="w-full">
     <!-- Represents the desktop sidebar. This sidebar is always visible on desktop-->
     <div
       class="hidden xl:flex h-full w-full transform-gpu outline outline-1 outline-gray-300 dark:outline-gray-500 rounded-[40px]"

src/index.css

@@ -50,12 +50,6 @@
   .card-body {
     @apply text-xs md:text-sm text-gray-100 font-light text-pretty;
   }
-
-  /* Globally apply that no paragraph should be more than 6xl */
-  p,
-  li {
-    @apply max-w-xl sm:max-w-5xl m-0;
-  }
 }
 
 @layer components {

src/pages/chai/Chai.vue

@@ -18,7 +18,7 @@ const chaiInviteLink = "https://discord.com/oauth2/authorize?client_id=728115804
         <!-- The introduction-->
         <h1 class="title text-center mb-3 text-pretty max-w-[80%]">
           Meet <span class="text-chai-200">Chai</span> <span
-            class="inline-block w-4 md:w-5 lg:w-7 h-4 md:h-5 lg:h-7 align-baseline"><img :src="chaiIcon" /></span>,
+            class="inline-block w-4 md:w-5 lg:w-7 2xl:w-10 h-4 md:h-5 lg:h-7 2xl:h-10 align-baseline"><img :src="chaiIcon" /></span>,
           the
           Fortnite authentication Discord Bot.
         </h1>

src/pages/chai/DeepDive.vue

@@ -26,7 +26,7 @@ const highlightedTool = "font-semibold text-chai-200";
         </div>
 
         <!-- Holds all the information about the deep dive into each section.-->
-        <div class="grid grid-cols-3 gap-3">
+        <div class="grid grid-cols-2 xl:grid-cols-3 gap-3 items-start justify-evenly">
             <!-- The Discord bot element of this section -->
             <div class="text-center max-w-md">
                 <h3 class="title-3">Discord Front End</h3>

src/pages/chai/Preview.vue

@@ -32,8 +32,8 @@ const actionDescription = [
 <template>
     <!-- Denotes what Chai can do, so some exposition on how the Client works.-->
     <!-- The centered image (preview) of Chai should be right below the "Chai in action" or call to info-->
-    <div class="flex flex-row items-center justify-center w-full px-10">
-        <img src="/ChaiPreview.png" alt="Chai Preview" class="rounded-xl w-full object-cover" />
+    <div class="flex flex-row items-center justify-center w-full md:px-5 lg:px-10">
+        <img src="/ChaiPreview.png" alt="Chai Preview" class="rounded-lg xl:rounded-[40px] w-full object-cover" />
     </div>
 
     <div class="flex flex-row items-baseline justify-center w-full gap-2">

src/pages/docuflow/Docuflow.vue

@@ -25,8 +25,8 @@ const docuflowInfoCards = [
 <template>
     <PageLayoutSpacer>
         <!-- The standard-type intro to the page. -->
-        <div class="py-5 px-2 bg-gray-950/30 dark:bg-gray-200/5 shadow-md rounded-[40px]">
-            <p class="title text-center">
+        <div class="py-5 px-2 bg-gray-950/30 dark:bg-gray-200/5 shadow-md rounded-[40px] w-full">
+            <p class="title text-center w-full">
                 Build <span class="text-docuflow-light dark:text-docuflow-dark">quick</span>, lightweight <span
                     class="text-docuflow-light dark:text-docuflow-dark">documentation</span>, don't get bogged down
                 by the process.
@@ -59,10 +59,10 @@ const docuflowInfoCards = [
 
         <!-- Below it we see some previews of docuflow. This has two images: (1) the documentation
          part of it in the back, and the home page stacked on the front of it. -->
-        <div class="w-full h-fit space-y-5 px-10 relative xl:!mb-16">
-            <img src="/docuflow-home.png" class="xl:w-[85%] z-10 rounded-[40px]" />
+        <div class="w-full h-fit space-y-5 md:px-5 lg:px-10 relative xl:!mb-16">
+            <img src="/docuflow-home.png" class="xl:w-[85%] z-10 rounded-xl xl:rounded-[40px]" />
             <img src="/docuflow-docs.png"
-                class="xl:absolute xl:w-[65%] z-20 rounded-[40px] xl:-bottom-[15%] xl:right-[5%] xl:shadow-md" />
+                class="xl:absolute xl:w-[65%] z-20 rounded-xl xl:rounded-[40px] xl:-bottom-[15%] xl:right-[5%] xl:shadow-md" />
         </div>
 
         <!-- Kind of a disclaimer noting that this project is still in early development -->

src/pages/profile/Intro.vue

@@ -10,7 +10,7 @@ import InfoCard from '@/components/InfoCard.vue';
 			<!-- Holds the Hi and my name-->
 			<div class="inner self-end">
 				<p class="subtitle mb-0 animate-fade-down duration-700 animate-delay-0">Hi, I'm</p>
-				<h1 class="hero-title mb-1 xl:mb-2 animate-fade-right">Trevor Flahardy</h1>
+				<h1 class="hero-title mb-1 lg:mb-5 animate-fade-right">Trevor Flahardy</h1>
 				<p class="subtitle mb-3 sm:mb-5 text-right animate-fade-up animate-delay-[800ms]">
 					A full stack developer working to change lives.
 				</p>

src/pages/profile/Projects.vue

@@ -15,7 +15,7 @@ import Button from "@/components/Button.vue";
         </h2>
 
         <div
-            class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-2 grid-rows-auto gap-5 items-start justify-between place-items-center">
+            class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 grid-rows-auto gap-5 items-start justify-between place-items-center">
             <InfoCard class="max-w-sm min-w-64" image-position="top">
                 <template #image>
                     <img src="/tixte.png" class="rounded-xl" />