-
+
Robotics
-
+
RockSat
-
+
NASA Ballooning
diff --git a/src/pages/general/navigation/NavigationStyles.tsx b/src/pages/general/navigation/NavigationStyles.tsx
index a7984b7..dacb6d2 100644
--- a/src/pages/general/navigation/NavigationStyles.tsx
+++ b/src/pages/general/navigation/NavigationStyles.tsx
@@ -62,6 +62,7 @@ export default class NavigationStyles {
& > a.nav-link.active {
background-color: ${props => props.toggle ? `${COLORS.SELECTED}` : 'transparent'} !important;
}
+
& > a.nav-link:hover {
color: ${COLORS.HOVER_TEXT} !important;
@@ -86,22 +87,26 @@ export default class NavigationStyles {
}
a.dropdown-toggle {
- background-color: ${props => props.toggle ? `${COLORS.SELECTED}` : 'transparent'} !important;
+ background-color: ${props => props.toggle ? `${COLORS.BACKGROUND}` : 'transparent'} !important;
color: ${COLORS.TEXT} !important;
font-size: 17px;
- padding: 6px 8px 8px 8px;
+ padding-left: 5%;
}
+ a.dropdown-item.active {
+ background-color: ${props => props.toggle ? `${COLORS.SELECTED}` : 'transparent'} !important;
+ }
+
.dropdown-menu {
position: absolute;
- background-color: ${COLORS.PRIMARY} !important;
+ background-color: ${props => props.transparency ? 'transparent' : `${COLORS.PRIMARY}`} !important;
+ transition: background-color 0.5s;
padding: 0px 8px 8px 16px;
border: none;
}
.dropdown-item {
color: ${COLORS.TEXT} !important;
- background-color: ${props => props.toggle ? `${COLORS.SELECTED}` : 'transparent'} !important;
font-size: 15px;
border: none;
padding: 0px
diff --git a/src/pages/home/Home.tsx b/src/pages/home/Home.tsx
index 8c851a8..7c811be 100644
--- a/src/pages/home/Home.tsx
+++ b/src/pages/home/Home.tsx
@@ -12,8 +12,8 @@ import Button from '../general/button/Button'
// Images
import nasaLogo from '../../assets/pics/logos/nasa.png'
import HOME_CAROUSEL_INFO from '../../data/HomeCarouselInfo'
-const TEAMS = `https://teams.microsoft.com/l/team/19%3aeaf903fd81cd48eba95d8e769ed78544%40thread.tacv2/conversations?groupId=8f
- 78ecbb-62f3-4b2c-bda7-7488eca908ee&tenantId=716e81ef-b522-4473-8e31-10bd02ccf6e5`
+const TEAMS = `https://teams.microsoft.com/l/team/19%3Aeaf903fd81cd48eba95d8e769ed78544%40thread.tacv2/conversations?groupId=8f78ecbb-62f3
+-4b2c-bda7-7488eca908ee&tenantId=716e81ef-b522-4473-8e31-10bd02ccf6e5`
const Home = (): React.ReactElement => {
return (
diff --git a/src/pages/home/HomeStyles.tsx b/src/pages/home/HomeStyles.tsx
index f8f57e3..67289dd 100644
--- a/src/pages/home/HomeStyles.tsx
+++ b/src/pages/home/HomeStyles.tsx
@@ -16,6 +16,8 @@ export default class HomeStyles {
max(calc(var(--vh) * .3), 100px) /* Sponsors section heading */
max(calc(var(--vh) * .15), 70px); /* Contacts */
justify-content: center;
+ width: 100%;
+ overflow-x: hidden; /* guard against any stray overflow */
`
static readonly TitleContainer = styled.div`
@@ -111,20 +113,30 @@ export default class HomeStyles {
`
static readonly VideoSource = styled.div`
- display: grid;
- grid-template-columns: 50% 50%;
- grid-template-rows: 100%;
- align-items: center;
- margin-bottom: calc(var(--vh) * .02);
-
- & > * {
- margin-left: 5%;
- margin-right: 5%;
- }
-
- & > img {
- height: 100%;
- justify-self: right;
- }
+ display: grid;
+ grid-template-columns: 1fr 1fr;
+ align-items: center;
+ padding: 0 5%; /* replaces child margins */
+ gap: 1rem; /* spacing between grid items */
+ margin-bottom: calc(var(--vh) * .02);
+
+ & > * {
+ margin: 0; /* remove overflow-causing margins */
+ }
+
+ & > img {
+ justify-self: right;
+ max-width: 40%; /* never exceed its column */
+ height: 40%; /* keep aspect ratio on mobile */
+ padding-bottom: 20px; /* remove overflow-causing margins */
+
+ }
+
+ /* Stack on very small screens to avoid squish */
+ @media (max-width: 600px) {
+ grid-template-columns: 1fr;
+ justify-items: center;
+ text-align: center;
+ }
`
}
diff --git a/src/pages/meet-the-leads/MeetTheLeads.tsx b/src/pages/meet-the-leads/MeetTheLeads.tsx
index c4008e8..1c4e851 100644
--- a/src/pages/meet-the-leads/MeetTheLeads.tsx
+++ b/src/pages/meet-the-leads/MeetTheLeads.tsx
@@ -10,13 +10,13 @@ import Contact from '../general/contact/Contact'
import Styles from './MeetTheLeadsStyles'
// Images
-import TanishkasFace from '../../assets/pics/Leads/Tanishkas_face.jpeg'
-import RoccosFace from '../../assets/pics/Leads/roccos_face.jpg'
-import MalinsFace from '../../assets/pics/Leads/Malins_face.jpg'
-import BriansFace from '../../assets/pics/Leads/Brian_face.png'
-import AlessiasFace from '../../assets/pics/Leads/Alessia_headshot.png'
-import JonahsFace from '../../assets/pics/Leads/Jonah_Face.jpg'
-import JadensFace from '../../assets/pics/Leads/Jadens_face.jpg'
+import JadensFace from '../../assets/pics/Leads/Jaden_face.jpeg'
+import GuysFace from '../../assets/pics/Leads/Guy_face.png'
+import MalinsFace from '../../assets/pics/Leads/Malin_face.jpg'
+import PenelopesFace from '../../assets/pics/Leads/Penelope_face.png'
+import AlessiasFace from '../../assets/pics/Leads/Alessia_face.png'
+import DamiensFace from '../../assets/pics/Leads/Damien_face.png'
+import DevinsFace from '../../assets/pics/Leads/Devin_face.png'
import JavisFace from '../../assets/pics/Leads/Javi_face.png'
// a separator is needed for some reason, troubleshoot this or create a very small section div or style this like the robotics page
//use robotics format
@@ -34,29 +34,29 @@ const MeetTheLeads = (): React.ReactElement => {
Meet our President!
- Rocco Guzman + Malin Kussi
- 
+
-
+
Meet our Vice President!
- Malin Kussi + Guy Porter
Meet our Electrical Lead!
- Jaden Howard + Damien Ortiz
-
+
Meet our Programming Lead!
- Brian Ervin + Penelope Fulwood
-
+
-
+
-
Meet our Project Manager!
+Meet our Chief of Marketing & Development!
- Tanishka Shah + Javier Price-Butler
-
Meet our Shop Manager!
+Meet our Secretary!
- Jonah Tesler + Jaden Peiffer
-
+
-
+
-
diff --git a/src/pages/robotic-mining/RoboticMining.tsx b/src/pages/robotic-mining/RoboticMining.tsx
index eed6ce8..aa21846 100644
--- a/src/pages/robotic-mining/RoboticMining.tsx
+++ b/src/pages/robotic-mining/RoboticMining.tsx
@@ -12,9 +12,10 @@ import GALLERY_INFO from '../../data/RoboticsPhotoGalleryInfo'
// Images
// import robot from '../../assets/pics/robot/robot-2019.jpg'
import augerBot from '../../assets/pics/robot/augerbot-promotion.mp4'
-import outreachPhoto1 from '../../assets/pics/outreach/vex.jpeg'
-import outreachPhoto2 from '../../assets/pics/outreach/expo.jpeg'
-import outreachPhoto3 from '../../assets/pics/outreach/interview.jpeg'
+import outreachPhoto1 from '../../assets/pics/photo-gallery/rmc/volunteering-FRC-2025.jpeg'
+import outreachPhoto2 from '../../assets/pics/outreach/vex.jpeg'
+import outreachPhoto3 from '../../assets/pics/outreach/expo.jpeg'
+import outreachPhoto4 from '../../assets/pics/outreach/interview.jpeg'
import title from '../../assets/pics/logos/robotics-red.png'
import RmcDescription from './SectionDescription'
@@ -43,9 +44,18 @@ const RoboticMining = (): React.ReactElement => {
Meet our Chief of Marketing & Development!
+Meet our Treasurer!
- Javier Price-Butler + Devin Huynh
Outreach and Events
+
+
+
+
+
Centennial FIRST Robotics Competition
++ Our team members volunteered at the competition by helping to judge matches, track scores, + and provide support wherever it was needed. +
+Vex State Sectionals
@@ -54,10 +64,10 @@ const RoboticMining = (): React.ReactElement => {
-
+
-
+
Philadelphia Robotics Expo
@@ -74,7 +84,7 @@ const RoboticMining = (): React.ReactElement => {
-
+
-
Current Sponsors
+ {/*
*/}
-
-
-
- 
-
- Previous Sponsors
+
+
-
+ 
- 
+ 
- {/*
- call amtrak image here, make sure it has been transerred into an svg
-
*/}