Skip to content

Commit

Permalink
Adjust padding. Left align mobile text. (#71)
Browse files Browse the repository at this point in the history
  • Loading branch information
@dfullaway
dfullaway authored Jun 6, 2024
1 parent 644f526 commit 09344db
Show file tree
Hide file tree
Showing 2 changed files with 35 additions and 67 deletions.
10 changes: 5 additions & 5 deletions src/components/sections/ContentImageFull.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
import ButtonCustom from '../buttons/ButtonCustom.svelte';
export let title;
export let titleClasses = 'text-mcswf-gold text-2xl font-bold md:text-3xl lg:text-4xl';
export let titleClasses = '';
export let content = null;
export let link = null;
export let linkText = null;
Expand All @@ -13,7 +13,7 @@
</script>

<section class="">
<div class="items-center max-w-screen-xl gap-16 px-4 py-8 mx-auto lg:grid lg:grid-cols-2 md:py-8 md:px-6">
<div class="items-center max-w-screen-xl gap-16 px-4 py-8 mx-auto grid grid-cols-1 justify-center lg:grid-cols-2 md:py-8 md:px-6">
{#if flipped}
<div class="flex justify-center">
<img class="w-3/4 rounded-lg aspect-square object-cover {imageClasses}" src={image} alt={imageAltText} />
Expand All @@ -24,8 +24,8 @@
<img class="w-3/4 rounded-lg object-cover aspect-square {imageClasses}" src={image} alt={imageAltText} />
</div>
{/if}
<div class="font-light text-white sm:text-lg">
<h2 class="mb-4 tracking-tight text-center {titleClasses}">
<div class="font-light text-white sm:text-lg w-3/4 lg:w-full place-self-center">
<h2 class="mb-4 mt-6 lg:mt-0 tracking-tight lg:text-center text-mcswf-gold text-2xl font-bold md:text-3xl lg:text-4xl {titleClasses}">
{title}
</h2>
<div class="flex justify-center">
Expand All @@ -36,7 +36,7 @@
{/each}
</ul>
{:else}
<p class="mb-4 text-left lg:text-center w-3/4 lg:w-full whitespace-pre-line text-base md:text-[21px]">
<p class="mb-4 text-left lg:text-center whitespace-pre-line text-base md:text-[21px]">
{content}
</p>
{/if}
Expand Down
92 changes: 30 additions & 62 deletions src/pages/about.astro
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ import { getCollection, type CollectionEntry } from 'astro:content';
import { displaySiteBanner } from '../components/stores.js';
import { externalLinks } from '@content/constants';
import '../styles/global.css';
import { externalLinks } from '@content/constants';
displaySiteBanner.set(true);
const metrics = await getCollection('aboutMetrics');
Expand All @@ -31,68 +31,36 @@ const metrics = await getCollection('aboutMetrics');
</div>
</div>
<div class="relative z-20 scrollbar-hide">
<div class="hidden lg:block">
<div class="relative z-20 pt-6">
<ContentImageFull
link="/roles"
linkText="LEARN MORE"
title="OUR VISION"
content="Upon arrival at the Marine Corps Software Factory, Marines are trained to fill the roles of a product team: product manager, software developer, and UI/UX designer. Over the course of their three-year assignment at MCSWF in Austin, Texas, they develop applications to support warfighters at the tactical edge. After their three-year tour in Austin, the teams are reassigned together to continue supporting MIG commanders throughout the fleet."
image="/images/marine_start_with_why.jpeg"
imageClasses=""
/>
</div>
<div class="relative z-20">
<ContentImageFull
flipped
link="/career"
linkText="LEARN MORE"
title="OUR MISSION"
content="We provide software development, data analytics, and artificial intelligence operations capabilities to MIG commanders to help them close joint, coalition, and naval kill webs. These capabilities enhance Marine commanders' decision advantage across the full spectrum of military operations."
image="/images/marines_marathon.jpeg"
/>
</div>
<div class="relative z-20">
<ContentImageFull
link="/products"
linkText="LEARN MORE"
title="OUR IMPACT"
content="By providing Marines with the skills to develop software and implement artificial intelligence, we are giving commanders the ability to quickly produce software and AI solutions at the tactical edge."
image="/images/marine_flight_sim.jpeg"
/>
</div>
<div class="relative z-20 pt-6">
<ContentImageFull
link="/roles"
linkText="LEARN MORE"
title="OUR VISION"
content="Upon arrival at the Marine Corps Software Factory, Marines are trained to fill the roles of a product team: product manager, software developer, and UI/UX designer. Over the course of their three-year assignment at MCSWF in Austin, Texas, they develop applications to support warfighters at the tactical edge. After their three-year tour in Austin, the teams are reassigned together to continue supporting MIG commanders throughout the fleet."
image="/images/marine_start_with_why.jpeg"
titleClasses="mt-6 text-left lg:mt-0"
/>
</div>
<div class="lg:hidden">
<div class="relative z-20 pt-6">
<ContentImageFull
flipped
link="#"
linkText="LEARN MORE"
title="OUR VISION"
content="Upon arrival at the Marine Corps Software Factory, Marines are trained to fill the roles of a product team: product manager, software developer, and UI/UX designer. Over the course of their three-year assignment at MCSWF in Austin, Texas, they develop applications to support warfighters at the tactical edge. After their three-year tour in Austin, the teams are reassigned together to continue supporting MIG commanders throughout the fleet."
image="/images/marine_start_with_why.jpeg"
/>
</div>
<div class="relative z-20">
<ContentImageFull
flipped
link="#"
linkText="LEARN MORE"
title="OUR MISSION"
content="We provide software development, data analytics, and artificial intelligence operations capabilities to MIG commanders to help them close joint, coalition, and naval kill webs. These capabilities enhance Marine commanders' decision advantage across the full spectrum of military operations."
image="/images/marines_marathon.jpeg"
/>
</div>
<div class="relative z-20">
<ContentImageFull
flipped
link="#"
linkText="LEARN MORE"
title="OUR IMPACT"
content="By providing Marines with the skills to develop software and implement artificial intelligence, we are giving commanders the ability to quickly produce software and AI solutions at the tactical edge."
image="/images/marine_flight_sim.jpeg"
/>
</div>
<div class="relative z-20">
<ContentImageFull
flipped
link="/career"
linkText="LEARN MORE"
title="OUR MISSION"
content="We provide software development, data analytics, and artificial intelligence operations capabilities to MIG commanders to help them close joint, coalition, and naval kill webs. These capabilities enhance Marine commanders' decision advantage across the full spectrum of military operations."
image="/images/marines_marathon.jpeg"
titleClasses="mt-6"
/>
</div>
<div class="relative z-20">
<ContentImageFull
link="/products"
linkText="LEARN MORE"
title="OUR IMPACT"
content="By providing Marines with the skills to develop software and implement artificial intelligence, we are giving commanders the ability to quickly produce software and AI solutions at the tactical edge."
image="/images/marine_flight_sim.jpeg"
titleClasses="mt-6"
/>
</div>
<div class="relative grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 w-fit m-auto z-20">
{
Expand Down

0 comments on commit 09344db

Please sign in to comment.