Skip to content

Commit ccd7299

Browse files
ryanhodge240ryanhodge240
committed
Finished up styling
1 parent db761de commit ccd7299

25 files changed

+590
-415
lines changed

‎.eslintrc.json‎

Lines changed: 0 additions & 48 deletions
This file was deleted.

‎app/globals.css‎

Lines changed: 16 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,7 @@
4141
body {
4242
color: var(--foreground);
4343
background: var(--background);
44+
font-size: max(10px, 1.4vw);
4445

4546
& * {
4647
font-family: 'Futura', 'Helvetica', 'Arial', 'sans-serif';
@@ -88,19 +89,28 @@ body {
8889
align-content: center;
8990
}
9091

92+
.page-title,
93+
.section-header-text,
94+
.sub-section-title,
9195
.sub-section-header-text {
9296
font-family: 'Arca', 'Catamaran', 'Helvetica', 'Arial', 'sans-serif';
9397
font-weight: 200;
94-
font-size: 34px;
98+
font-size: max(12px, 1.8vw);
9599
letter-spacing: 1px;
96-
line-height: 1;
100+
}
101+
102+
.page-title {
103+
font-size: max(24px, 5vw);
97104
}
98105

99106
.section-header-text {
100-
font-family: 'Arca', 'Catamaran', 'Helvetica', 'Arial', 'sans-serif';
101-
font-weight: 200;
102-
font-size: 100px;
103-
letter-spacing: 1px;
107+
font-size: max(16px, 2vw);
104108
}
105109

110+
.sub-section-title {
111+
font-size: max(16px, 4vw);
112+
}
106113

114+
.sub-section-text {
115+
font-size: max(10px, 1.4vw);
116+
}

‎app/layout.tsx‎

Lines changed: 25 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,36 @@
1-
import "./globals.css";
1+
import './globals.css';
2+
import React from 'react'
23

3-
import type { Metadata } from "next";
4-
import { Roboto } from 'next/font/google';
5-
import NavBar from "@components/navigation/NavBar";
6-
import { ThemeProvider } from '@mui/material/styles';
7-
import theme from '@styles/theme';
4+
import type { Metadata } from 'next'
5+
import { Roboto } from 'next/font/google'
6+
import NavBar from '@components/navigation/NavBar'
7+
import { ThemeProvider } from '@mui/material/styles'
8+
import theme from '@utils/theme'
89

910
const roboto = Roboto({
10-
weight: ['300', '400', '500', '700'],
11-
subsets: ['latin'],
12-
display: 'swap',
13-
variable: '--font-roboto',
11+
weight: ['300', '400', '500', '700'],
12+
subsets: ['latin'],
13+
display: 'swap',
14+
variable: '--font-roboto'
1415
});
1516

1617
export const metadata: Metadata = {
17-
title: "Temple Robotics Website",
18-
description: "Learn about the club and our next events!",
18+
title: "Temple Robotics Website",
19+
description: "Learn about the club and our next events!",
1920
};
2021

2122
export default function RootLayout({
22-
children
23+
children
2324
}: Readonly<{ children: React.ReactNode }>) {
24-
return (
25-
<html lang="en">
26-
<body className={`${roboto.variable} antialiased`} >
27-
<ThemeProvider theme={theme}>
28-
<NavBar/>
29-
<div style={{height: '3rem'}}/>
30-
{children}
31-
</ThemeProvider>
32-
</body>
33-
</html>
34-
);
25+
return (
26+
<html lang="en">
27+
<body className={`${roboto.variable} antialiased`} >
28+
<ThemeProvider theme={theme}>
29+
<NavBar/>
30+
<div style={{height: '3rem'}}/>
31+
{children}
32+
</ThemeProvider>
33+
</body>
34+
</html>
35+
)
3536
}

‎components/ballooning/BallooningPage.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ import TextPictureSection from '@components/shared/TextPictureSection'
99
const BallooningPage = (): React.ReactElement => {
1010
return (
1111
<div className={styles.container}>
12-
<div className='flex-horizontal section-header-text'>NASA Ballooning</div>
12+
<div className='flex-horizontal page-title'>NASA Ballooning</div>
1313
<TextPictureSection props={ballooningTextPictureData} />
1414
<ContactUs/>
1515
</div>

‎components/events/EventsPage.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import EventsSection from './EventsSection'
88
const EventsPage = (): React.ReactElement => {
99
return (
1010
<div className={styles.container}>
11-
<div className='flex-horizontal section-header-text'>Upcoming Events</div>
11+
<div className='flex-horizontal page-title'>Upcoming Events</div>
1212
<EventsSection />
1313
<ContactUs/>
1414
</div>

‎components/events/EventsSection.module.css‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -8,15 +8,15 @@
88
.eventRow {
99
justify-self: center;
1010
width: 100%;
11-
height: 12vw;
1211

1312
display: grid;
1413
grid-template-columns: 20% 80%;
1514
}
1615

1716
.eventRowLeft {
18-
border-top-left-radius: 2vw;
19-
border-bottom-left-radius: 2vw;
17+
text-align: center;
18+
border-top-left-radius: 6vw;
19+
border-bottom-left-radius: 6vw;
2020
overflow: hidden;
2121
background-color: #801c29;
2222
}
@@ -27,8 +27,8 @@
2727
gap: 2rem;
2828
padding: 1rem;
2929
background-color: var(--primary);
30-
border-top-right-radius: 2vw;
31-
border-bottom-right-radius: 2vw;
30+
border-top-right-radius: 6vw;
31+
border-bottom-right-radius: 6vw;
3232
}
3333

3434
.textContainer {

‎components/robotics/OutreachAndEvents.module.css‎

Lines changed: 17 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
.container {
22
height: 100%;
3-
gap: 2rem;
3+
gap: 0;
4+
justify-content: space-around;
45

56
& * {
67
text-align: center;
@@ -18,12 +19,21 @@
1819
}
1920

2021
.row {
21-
width: 100%;
22-
min-height: 25%;
23-
justify-content: space-between;
22+
justify-content: space-around;
23+
display: grid;
24+
grid-template-columns: 45% 45%;
25+
justify-items: center;
26+
gap: 0;
27+
min-height: 15%
2428
}
2529

2630
.textContainer {
27-
padding: 0 4rem;
28-
width: 50%;
29-
}
31+
height: 100%;
32+
display: flex;
33+
flex-direction: column;
34+
justify-content: space-around;
35+
36+
& > .sub-section-text {
37+
overflow: auto;
38+
}
39+
}

‎components/robotics/OutreachAndEvents.tsx‎

Lines changed: 41 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -8,50 +8,50 @@ import img3 from '@assets/images/outreach/interview.gif'
88
import Image from 'next/image'
99

1010
const OutreachAndEvents = (): React.ReactElement => {
11-
return (
12-
<div className={`flex-vertical ${styles.container}`}>
13-
<div className='flex-horizontal sub-section-header-text'>Outreach and Events</div>
14-
<div className={`flex-horizontal ${styles.row}`}>
15-
<div className={styles.textContainer}>
16-
<div className='sub-section-header-text'>Vex State Sectionals</div>
17-
<div className='sub-section-text'>
18-
Our team members volunteered at the competition to help judge notebooks
19-
ref the playing the field and interview teams for award selection.
20-
</div>
21-
</div>
11+
return (
12+
<div className={`flex-vertical ${styles.container}`}>
13+
<div className='flex-horizontal sub-section-title'>Outreach and Events</div>
14+
<div className={`flex-horizontal ${styles.row}`}>
15+
<div className={styles.textContainer}>
16+
<div className='sub-section-header-text'>Vex State Sectionals</div>
17+
<div className='sub-section-text'>
18+
Our team members volunteered at the competition to help judge notebooks
19+
ref the playing the field and interview teams for award selection.
20+
</div>
21+
</div>
2222

23-
<div className={styles.imageContainer}>
24-
<Image fill src={img1} alt='Vex State Sectionals' />
25-
</div>
26-
</div>
27-
<div className={`flex-horizontal ${styles.row}`}>
28-
<div className={styles.imageContainer}>
29-
<Image fill src={img2} alt='Philadelphia Robotics Expo' />
30-
</div>
23+
<div className={styles.imageContainer}>
24+
<Image fill src={img1} alt='Vex State Sectionals' />
25+
</div>
26+
</div>
27+
<div className={`flex-horizontal ${styles.row}`}>
28+
<div className={styles.imageContainer}>
29+
<Image fill src={img2} alt='Philadelphia Robotics Expo' />
30+
</div>
3131

32-
<div className={styles.textContainer}>
33-
<div className='sub-section-header-text'>Philadelphia Robotics Expo</div>
34-
<div className='sub-section-text'>
35-
Our tabling event at the Philadelphia Robotics Expo where about 300 high school
36-
students came to see what philadelphia had to offer in robotics.
37-
</div>
38-
</div>
39-
</div>
40-
<div className={`flex-horizontal ${styles.row}`}>
41-
<div className={styles.textContainer}>
42-
<div className='sub-section-header-text'>Temple University TV</div>
43-
<div className='sub-section-text'>
44-
Our faculty advisor Dr. Helferty, a former NASA employee, talks about how starting
45-
Temple Robotics and what it has become today.
46-
</div>
47-
</div>
32+
<div className={styles.textContainer}>
33+
<div className='sub-section-header-text'>Philadelphia Robotics Expo</div>
34+
<div className='sub-section-text'>
35+
Our tabling event at the Philadelphia Robotics Expo where about 300 high school
36+
students came to see what philadelphia had to offer in robotics.
37+
</div>
38+
</div>
39+
</div>
40+
<div className={`flex-horizontal ${styles.row}`}>
41+
<div className={styles.textContainer}>
42+
<div className='sub-section-header-text'>Temple University TV</div>
43+
<div className='sub-section-text'>
44+
Our faculty advisor Dr. Helferty, a former NASA employee, talks about how starting
45+
Temple Robotics and what it has become today.
46+
</div>
47+
</div>
4848

49-
<div className={styles.imageContainer}>
50-
<Image fill src={img3} alt='Temple University TV' />
51-
</div>
52-
</div>
53-
</div>
54-
)
49+
<div className={styles.imageContainer}>
50+
<Image fill src={img3} alt='Temple University TV' />
51+
</div>
52+
</div>
53+
</div>
54+
)
5555
}
5656

5757
export default OutreachAndEvents

‎components/robotics/RoboticsPage.module.css‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
.container {
22
display: grid;
33
grid-template-rows:
4-
30vw
5-
25vw
6-
170vw
7-
15vw;
4+
max(250px, 30vw)
5+
max(200px, 25vw)
6+
max(250px, 170vw)
7+
max(200px, 15vw);
88
}
99

1010
.spaceBackground {
@@ -20,6 +20,6 @@
2020
display: grid;
2121
grid-template-rows:
2222
20%
23-
60%
24-
20%;
23+
55%
24+
25%;
2525
}

‎components/rocksat/RocksatPage.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ import TextPictureSection from '@components/shared/TextPictureSection'
1010
const RocksatPage = (): React.ReactElement => {
1111
return (
1212
<div className={styles.container}>
13-
<div className='flex-horizontal section-header-text'>Temple RockSat-C</div>
13+
<div className='flex-horizontal page-title'>Temple RockSat-C</div>
1414
<TextPictureSection props={rocksatTextPictureData} />
1515
<PhotoGallery photos={rocksatPhotoGallery} title='Photo Gallery'/>
1616
<ContactUs/>

0 commit comments

Comments
 (0)