Added recent news, mission, etc

src/App.css

@@ -24,10 +24,6 @@
 	}
 }
 
-img {
-	max-width: 100%;
-}
-
 .space-2 {
 	margin: 1rem;
 	padding: 1rem;
@@ -52,10 +48,19 @@ img {
 
 .row {
 	display: flex;
+	flex-direction: row;
 }
 
 .col {
 	display: flex;
 	flex-direction: column;
-	justify-content: center;
+	align-items: center;
+}
+
+.flex-1 {
+	flex: 1;
+}
+
+.flex-2 {
+	flex: 2;
 }

src/components/ArticleList.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import ArticleRow from './ArticleRow';
 import sanity from '../sanity';
+import '../css/article.css';
 
 export default function ArticleList() {
 	let [articles, setArticles] = React.useState<SGA.ArticleDocument[]>([]);
@@ -40,7 +41,7 @@ export default function ArticleList() {
 	}
 
 	return (
-		<div style={{ display: 'flex', flexDirection: 'column' }}>
+		<div>
 			{articles.map((article) => {
 				return <ArticleRow key={article._id} article={article} />;
 			})}
@@ -48,7 +49,7 @@ export default function ArticleList() {
 			<div className='text-center'>
 				{!reachedEnd ? (
 					<button
-						className='button'
+						className='load-more-button'
 						onClick={() => {
 							let lastArticle = articles[articles.length - 1];
 							addArticles(lastArticle.publish_date, lastArticle.title);

src/components/ArticleRow.tsx

@@ -18,15 +18,15 @@ export default function ArticleRow({
 	};
 
 	return (
-		<div style={{ display: 'flex' }}>
-			<div style={{ flex: 1, padding: '10px' }}>
+		<div className='row'>
+			<div className='article-row-thumbnail'>
 				{thumbUrl ? (
 					<img className='mb-4' src={thumbUrl} alt={article.title} />
 				) : null}
 			</div>
-			<div style={{ flex: 3, padding: '10px' }}>
+			<div className='article-row-content'>
 				<Link to={'/news/' + article._id + '/' + slug(article.title)}>
-					<h3 className='font-bold text-3xl'>{article.title}</h3>
+					<h3>{article.title}</h3>
 				</Link>
 				<i className='text-sm'>
 					{article.publish_date} - {article.author || 'No author'}

src/components/Footer.tsx

@@ -11,7 +11,6 @@ export default function Footer() {
 
 	return (
 		<section className='footer-wrapper'>
-			<hr />
 			<img
 				className='footer-banner'
 				src='/images/footer-banner.png'

src/components/Hero.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import '../css/hero.css';
 
 type HeroProps = {
 	imageURL?: string;
@@ -10,23 +10,8 @@ export default function Hero({
 	heading = 'TJHSST SGA',
 }: HeroProps) {
 	return (
-		<div className='hero relative'>
-			<span
-				style={{
-					display: 'flex',
-					fontSize: '4rem',
-					fontWeight: 'bold',
-					textShadow: '1px 1px rgba(48, 48, 48, 0.5)',
-					color: 'white',
-					position: 'absolute',
-					height: '100%',
-					width: '100%',
-					justifyContent: 'center',
-					alignItems: 'center',
-				}}
-			>
-				{heading}
-			</span>
+		<div className='hero'>
+			<span className='hero-heading'>{heading}</span>
 			<img
 				src={imageURL}
 				alt='Background'

src/components/Layout.tsx

@@ -12,15 +12,16 @@ import Footer from './Footer';
 
 export default function Layout({ children }: { children: React.ReactNode }) {
 	return (
-		<>
-			<div className='bg-light text-dark'>
-				<Navbar></Navbar>
+		<div>
+			<Navbar />
+
+			<main>
+				{children}
 
-				<main id='page'>{children}</main>
 				<hr />
 
 				<Footer />
-			</div>
-		</>
+			</main>
+		</div>
 	);
 }

src/components/Mission.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import '../css/mission.css';
 import useMission from '../hooks/useMission';
 
 export default function Mission() {
@@ -8,15 +8,11 @@ export default function Mission() {
 	}
 
 	return (
-		<section className='text-center bg-secondary text-light'>
-			<div className='container mx-auto px-8 py-8'>
-				<h3 className='text-center font-bold text-3xl text-secondary mb-6'>
-					Mission
-				</h3>
+		<section className='text-center'>
+			<div className='mission-box'>
+				<h3 className='header text-center'>Mission</h3>
 				<p>{mission.mission}</p>
-				<h3 className='text-center font-bold text-3xl text-secondary mb-6'>
-					Vision
-				</h3>
+				<h3 className='header text-center'>Vision</h3>
 				<p>{mission.vision}</p>
 				<blockquote>{mission.quote_text}</blockquote>
 			</div>

src/components/Navbar.tsx

@@ -21,15 +21,7 @@ export default function Navbar() {
 	return (
 		<div className='nav'>
 			<Link to='/'>
-				<img
-					src='/images/banner.png'
-					alt='TJ SGA'
-					style={{
-						height: '2rem',
-						alignSelf: 'center',
-						margin: '1rem',
-					}}
-				/>
+				<img src='/images/banner.png' alt='TJ SGA' className='nav-logo' />
 			</Link>
 			{pages.map((page) => {
 				return (

src/components/NewsAndMission.tsx

@@ -0,0 +1,16 @@
+import Mission from './Mission';
+import RecentNews from './RecentNews';
+
+export default function NewsAndMission() {
+	return (
+		<div className='row'>
+			<div className='col flex-2'>
+				<RecentNews />
+			</div>
+
+			<div className='col flex-1'>
+				<Mission />
+			</div>
+		</div>
+	);
+}

src/components/RecentNews.tsx

@@ -0,0 +1,21 @@
+import useQuery from '../hooks/useInitiatives';
+import ArticleRow from './ArticleRow';
+
+export default function RecentNews() {
+	let news = useQuery<SGA.ArticleDocument[]>(
+		`*[_type == 'article'] | order (publish_date desc, title) [0...3]`
+	);
+
+	if (!news) {
+		return null;
+	}
+
+	return (
+		<div>
+			<h3 className='header'>Recent News</h3>
+			{news.map((article) => {
+				return <ArticleRow article={article} />;
+			})}
+		</div>
+	);
+}

src/css/article.css

@@ -0,0 +1,24 @@
+.load-more-button {
+  font-weight: 300;
+  text-transform: uppercase;
+}
+
+.article-list {
+  display: flex;
+  flex-direction: column;
+}
+
+.article-row-thumbnail {
+  flex: 1;
+  padding: 10px;
+  /*
+		To center the image
+	*/
+  display: flex;
+  align-items: center;
+}
+
+.article-row-content {
+  flex: 3;
+  padding: 10px;
+}

src/css/footer.css

@@ -1,6 +1,5 @@
 .footer-wrapper {
 	width: 100%;
-	padding: 0rem 2rem;
 	margin: 2rem 0rem;
 }
 

src/css/hero.css

@@ -0,0 +1,16 @@
+.hero {
+	position: relative;
+}
+
+.hero-heading {
+	display: flex;
+	font-size: 4rem;
+	font-weight: bold;
+	text-shadow: 1px 1px rgba(48, 48, 48, 0.5);
+	color: white;
+	position: absolute;
+	height: 100%;
+	width: 100%;
+	justify-content: center;
+	align-items: center;
+}

src/css/mission.css

@@ -0,0 +1,3 @@
+.mission-box {
+	padding: 0px 20px;
+}

src/css/navbar.css

@@ -17,3 +17,9 @@
 .nav-link:hover {
 	background-color: #ccc;
 }
+
+.nav-logo {
+	height: 4rem;
+	align-self: center;
+	margin: 1rem;
+}

src/css/segment.css

@@ -17,4 +17,5 @@
 	border-style: solid;
 	border-color: #38A3BD;
 	color: #38A3BD;
+	display: inline-block;
 }

src/index.css

@@ -25,3 +25,12 @@ a:visited {
   color: inherit;
   text-decoration: none;
 }
+
+img {
+  max-width: 100%;
+}
+
+main {
+  width: 1200px;
+  margin: 0px auto;
+}

src/pages/index.tsx

@@ -1,26 +1,23 @@
 import React from 'react';
 import Hero from '../components/Hero';
+import NewsAndMission from '../components/NewsAndMission';
 import SegmentGroup from '../components/SegmentGroup';
 
-import Mission from '../components/Mission';
-
 const IndexPage = () => {
 	return (
 		<>
 			{/* Hero image */}
 			<Hero />
 
+			<hr />
+
 			{/* Info columns */}
 			<SegmentGroup />
 
-			{/* Initiatives section */}
-			{/* <InitiativeList /> */}
+			<hr />
 
 			{/* Mission */}
-			<Mission />
-
-			{/* News articles section */}
-			<section className='container mx-auto px-8 my-8'></section>
+			<NewsAndMission />
 		</>
 	);
 };

src/pages/news.tsx

@@ -5,8 +5,8 @@ import Hero from '../components/Hero';
 export default function News() {
 	return (
 		<>
-			<Hero heading='News'></Hero>
-			<ArticleList></ArticleList>
+			<Hero heading='News' />
+			<ArticleList />
 		</>
 	);
 }