Shift backgroundPosition of cover photos (#57)

waterloo-rocketry · Dec 26, 2023 · 2765598 · 2765598
1 parent da0e3eb
commit 2765598
Show file tree

Hide file tree

Showing 8 changed files with 9 additions and 8 deletions.
diff --git a/src/components/CoverPhoto/CoverPhoto.module.css b/src/components/CoverPhoto/CoverPhoto.module.css
@@ -2,5 +2,5 @@
   background-repeat: no-repeat;
   background-position: 50% 90%;
   background-size: cover;
-  height: 15rem;
-}
+  height: 20rem;
+}
diff --git a/src/routes/Awards.jsx b/src/routes/Awards.jsx
@@ -15,7 +15,7 @@ import TechnicalExcellenceImage from '../img/awards/technical_excellence.png';
 const Awards = () => {
   return (
     <>
-      <CoverPhoto image={awardsCoverImage} style={{ backgroundPosition: '50% 40%' }} />
+      <CoverPhoto image={awardsCoverImage} style={{ backgroundPosition: '50% 52.5%' }} />
       <Container fluid>
         <Row className="my-4 mx-2 gx-5 justify-content-right">
           <AwardYear Year={2023} />

diff --git a/src/routes/Contact.jsx b/src/routes/Contact.jsx
@@ -16,7 +16,7 @@ const Contact = () => {
     <>
       <CoverPhoto
         image={contactCoverPhoto}
-        style={{ backgroundPosition: '50% 100%' }}
+        style={{ backgroundPosition: '50% 85%' }}
       />
       <Container fluid>
         <Row lg={2} md={2} sm={1} xs={1}>

diff --git a/src/routes/Home.jsx b/src/routes/Home.jsx
@@ -15,7 +15,7 @@ import galleryCoverImage from '../img/home/link_to_gallery.jpg';
 const Home = () => {
   return (
     <>
-      <CoverPhoto image={coverPhotoImage} style={{ backgroundPosition: '50% 60%' }} />
+      <CoverPhoto image={coverPhotoImage} style={{ backgroundPosition: '50% 70%' }} />
       <Container fluid>
         <Row className="my-4 mx-2 gx-5 justify-content-center">
           <Col lg={{ span: 4 }}>

diff --git a/src/routes/Join.jsx b/src/routes/Join.jsx
@@ -14,7 +14,7 @@ import joinCoverPhoto from '../img/join/cover_join.jpg';
 const Join = () => {
   return (
     <>
-      <CoverPhoto image={joinCoverPhoto} style={{ backgroundPosition: 'center bottom' }} />
+      <CoverPhoto image={joinCoverPhoto} style={{ backgroundPosition: '50% 65%' }} />
       <Container fluid>
         <Row className="my-4 mx-2 gx-5 justify-content-center">
           <Content title="WHY JOIN US?">

diff --git a/src/routes/Outreach.jsx b/src/routes/Outreach.jsx
@@ -19,7 +19,7 @@ import edPhoto from '../img/outreach/ed_session.jpg';
 const Outreach = () => {
   return (
     <>
-      <CoverPhoto image={outreachCoverPhoto} style={{ backgroundPosition: '50% 40%' }} />
+      <CoverPhoto image={outreachCoverPhoto} style={{ backgroundPosition: '50% 50%' }} />
       <Container fluid>
         <Row className="my-4 mx-2 gx-5 justify-content-center">
           <Content title="OUTREACH">

diff --git a/src/routes/Team.jsx b/src/routes/Team.jsx
@@ -94,7 +94,7 @@ import styles from './css/Team.module.css';
 const Team = () => {
   return (
     <>
-      <CoverPhoto image={teamCoverImage} style={{ position: 'center bottom' }} />
+      <CoverPhoto image={teamCoverImage} style={{ backgroundPosition: '50% 75%' }} />
       <Container fluid>
         <Row className="my-4 mx-2 gx-4 justify-content-center">
           <Col>

diff --git a/src/routes/css/Join.module.css b/src/routes/css/Join.module.css
@@ -2,5 +2,6 @@
   line-height: 135%;
   font-weight: 400;
   font-size: 0.9rem;
+  margin-top: 1rem;
   margin-bottom: 3%;
 }