sizes images on about page and addresses figma comments (#52)

Makes site background gradient red cover entire page to remove obvious signs of repeating background image.
marinecoders · Apr 25, 2024 · 5a28bcc · 5a28bcc
1 parent 8478c19
commit 5a28bcc
Show file tree

Hide file tree

Showing 7 changed files with 17 additions and 18 deletions.
diff --git a/src/components/elements/Countdown.svelte b/src/components/elements/Countdown.svelte
@@ -3,17 +3,16 @@
   import Timer from './Timer.svelte'
   import Hero from './Hero.svelte'
 
-  export let title
-  export let content
   export let link
 </script>
 
 <div class="max-w-[85rem] mx-auto px-4 sm:px-6 lg:px-8 md:pt-24 pt-12 pb-10">
   <Hero
     padding="pt-24"
     desktopFontSize="[21px]"
-    title="COHORT 8 APPLICATION DEADLINE"
-    content="Applications for Cohort 8 are due on March 15, 2024. Marines who are accepted to the program will PCS to Austin, TX during the summer of 2024 and begin the Technical Accelerator in August 2024." />
+    title="COHORT 9 APPLICATION DEADLINE"
+    content="Applications for Cohort 9 are due on August 1st, 2024. Marines who are accepted to the program will PCS to Austin, TX during the summer of 2024 and begin the
+    Technical Accelerator in August 2024." />
 
   <Timer />
 

diff --git a/src/components/sections/ContentImageFull.svelte b/src/components/sections/ContentImageFull.svelte
@@ -5,13 +5,10 @@
   export let content = null
   export let link = null
   export let linkText = null
-  export let padding = null
   export let flipped = false
   export let image = 'https://dummyimage.com/550/fff/aaa'
   export let imageAltText = ''
   export let imageClasses = null
-
-  //console.log("link - ", link);
 </script>
 
 <section class="">
@@ -53,7 +50,8 @@
         {/if}
       </div>
       {#if link}
-        <div class="grid w-full gap-3 mt-8 sm:inline-flex sm:justify-center">
+        <div
+          class="grid w-full gap-3 mt-8 sm:inline-flex sm:justify-center justify-items-center">
           <ButtonCustom color="white" size="xl" customClasses="w-64" {link}>
             {linkText}
           </ButtonCustom>

diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
@@ -31,7 +31,8 @@ const { title = null } = Astro.props
     />
     <title>MCSWF {title && '-'} {title}</title>
   </head>
-  <body class="font-expressway bg-opacity-40 text-white bg-custom-gradient-red">
+  <body
+    class="font-expressway bg-opacity-40 text-white bg-custom-gradient-red bg-cover bg-center">
     <header class="w-full sticky top-0 z-30">
       <Banner />
       <Navigation client:only />

diff --git a/src/pages/about.astro b/src/pages/about.astro
@@ -15,8 +15,7 @@ const metrics = await getCollection('aboutMetrics')
 
 <Layout title="About">
   <div
-    class="fixed left-0 z-10 flex justify-center w-full align-middle top-24 h-5/6"
-  >
+    class="fixed left-0 z-10 flex justify-center w-full align-middle top-24 h-5/6">
     <img src="/ega.svg" />
   </div>
   <div

diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -19,8 +19,7 @@ products.sort((a, b) => a.data.order - b.data.order)
 
 <Layout title="">
   <div
-    class="fixed left-0 z-10 flex justify-center w-full align-middle top-24 h-5/6"
-  >
+    class="fixed left-0 z-10 flex justify-center w-full align-middle top-24 h-5/6">
     <img src="/ega.svg" />
   </div>
   <div
@@ -47,6 +46,7 @@ products.sort((a, b) => a.data.order - b.data.order)
           linkText="LEARN MORE"
           title="WHAT WE DO"
           content="Marines are taught to develop mission-specific software for operational units to use in weeks or months, not years. Marines at the Marine Corps Software Factory (MCSWF) are trained by working with industry experts to build the software Marines need."
+          imageClasses="lg:w-550"
         />
       </div>
       <div class="h-fit py-20">
@@ -57,6 +57,7 @@ products.sort((a, b) => a.data.order - b.data.order)
           linkText="LEARN MORE"
           title="THE IMPACT"
           content="By combining traditional military training and modern technology skills, it enables tactical advantage for Marines across the service. The MCSWF pilot will evaluate the demand signal from Fleet Marine Forces, develop a way forward on career paths for technical experts, and evaluate the proper blend of civilian-Marine teaming."
+          imageClasses="lg:w-550"
         />
       </div>
       <div class="h-fit pt-20">

diff --git a/src/pages/roles/[...role].astro b/src/pages/roles/[...role].astro
@@ -26,13 +26,11 @@ const entries = await getCollection('cohorts')
 
 <Layout title={frontmatter.role}>
   <div
-    class="fixed left-0 z-10 flex justify-center w-full align-middle top-24 h-5/6"
-  >
+    class="fixed left-0 z-10 flex justify-center w-full align-middle top-24 h-5/6">
     <img src="/ega.svg" />
   </div>
   <div
-    class="max-h-screen overflow-y-scroll font-expressway red-radial-gradient scrollbar-hide"
-  >
+    class="max-h-screen overflow-y-scroll font-expressway red-radial-gradient scrollbar-hide">
     <div
       class="relative z-20 h-fit pt-20 pb-20 lg:pt-20 bg-cover bg-no-repeat"
       style={{

diff --git a/tailwind.config.mjs b/tailwind.config.mjs
@@ -36,14 +36,17 @@ export default {
         'custom-gradient-banner':
           'radial-gradient(73.99% 331.82% at 15.43% 50%, #6F1319 0%, #89181D 38.02%, #9F1C1F 65.1%, #711319 100%)', // Dictated by wireframes for banner
         'custom-gradient-red':
-          'radial-gradient(96.94% 109.71% at 0% 56.8%, #6F1319 0%, #89181D 53.13%, #9F1C1F 100%)',
+          'radial-gradient(circle, rgba(137,24,29,1) 0%, rgba(137,24,29,1) 76%, rgba(102,41,31,1) 100%);',
       }),
       scale: {
         200: '2',
         240: '2.4',
         220: '2.2',
         230: '2.3',
       },
+      width: {
+        550: '550px',
+      },
     },
   },
   plugins: [require('@tailwindcss/typography'), require('flowbite/plugin')],