rushilwiz/tj-sga-website-react
1
0
Fork 0
mirror of https://github.com/tjsga/tj-sga-website-react.git synced 2025-04-09 22:50:17 -04:00
Code Issues Actions Packages Projects Releases Wiki Activity

Added navbar dropdown, mission

Browse Source
This commit is contained in:
Michael Fatemi 2020-11-25 21:32:49 -05:00
parent 2fdfaa954a
commit 077b0f9a89
9 changed files with 114 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
public/index.html
View File

@ -23,6 +23,12 @@
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<!-- Fonts -->
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Arapey:ital@0;1&display=swap" rel="stylesheet">
<!-- Title -->
<title>React App</title>
</head>
<body>

11
src/App.css
View File

@ -64,3 +64,14 @@
.flex-2 {
flex: 2;
}
.blue-button {
text-transform: uppercase;
padding: 13px 23px;
border-width: 2px;
border-radius: 0.25rem;
border-style: solid;
border-color: #38A3BD;
color: #38A3BD;
display: inline-block;
}

2
src/App.tsx
View File

@ -6,6 +6,7 @@ import './App.css';
import index from './pages/index';
import initiatives from './pages/initiatives';
import mission from './pages/mission';
import news from './pages/news';
import newsArticle from './pages/newsArticle';
import notFound from './pages/404';
@ -20,6 +21,7 @@ export default function App() {
<Route path='/initiatives' exact component={initiatives} />
<Route path='/news/:articleId' component={newsArticle} />
<Route path='/news' exact component={news} />
<Route path='/mission' exact component={mission} />
<Route path='/officers' exact component={officers} />
<Route path='/committee' exact component={committee} />
<Route path='/:path' component={notFound} />

9
src/components/Navbar.tsx
View File

@ -7,6 +7,15 @@ let pages = [
url: '/',
title: 'Home',
},
{
url: '#',
title: 'About Us',
items: [
{ url: '/officers', title: 'Officers' },
{ url: '/committee', title: 'Executive Committee' },
{ url: '/class-council', title: 'Class Council' },
],
},
{
url: '/news',
title: 'News',

36
src/css/mission.css
View File

@ -1,3 +1,37 @@
.mission-box {
padding: 0px 20px;
}
}
.mission-header {
font-size: 1.25rem;
font-weight: bold;
}
.mission-para {
font-size: 22px;
line-height: 33px;
font-weight: 300;
}
.mission-quote {
display: flex;
flex-direction: column;
margin: 20px 0px;
}
.mission-quote-text {
font-size: 2rem;
font-weight: 600;
font-style: italic;
font-family: 'Arapey';
width: 100%;
text-align: center;
}
.mission-quote-author {
width: 100%;
text-align: right;
font-size: 20px;
display: inline-block;
padding-right: 200px;
}

11
src/css/segment.css
View File

@ -8,14 +8,3 @@
line-height: 33px;
font-weight: 300;
}
.segment-button {
text-transform: uppercase;
padding: 13px 23px;
border-width: 2px;
border-radius: 0.25rem;
border-style: solid;
border-color: #38A3BD;
color: #38A3BD;
display: inline-block;
}

BIN
src/images/gatsby-astronaut.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 163 KiB

BIN
src/images/gatsby-icon.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 21 KiB

51
src/pages/mission.tsx Normal file
View File

@ -0,0 +1,51 @@
import React from 'react';
import Hero from '../components/Hero';
import useMission from '../hooks/useMission';
import '../css/mission.css';
export default function Mission() {
let mission = useMission();
if (!mission) {
return null;
}
return (
<>
<Hero heading='Mission and History' />
<div>
<div className='mission-quote'>
<span className='mission-quote-text'>“{mission.quote_text}”</span>
<br />
<br />
<span className='mission-quote-author'>— {mission.quote_author}</span>
</div>
<div className='row'>
<div className='flex-1'>
<span className='mission-header'>Vision</span>
</div>
<div className='flex-2'>
<p className='mission-para'>{mission.vision}</p>
</div>
</div>
<hr />
<div className='row'>
<div className='flex-1'>
<span className='mission-header'>Mission</span>
</div>
<div className='flex-2'>
<p className='mission-para'>{mission.mission}</p>
</div>
</div>
<div className='text-center'>
<a
href='https://docs.google.com/spreadsheets/d/1a3RYdqrDi1IPG9BKWQ2xhoX3YCPQKUl_FsRLvIVEMPg/edit?usp=drive_open&ouid=0'
className='blue-button'
>
Previous Leadership
</a>
</div>
</div>
</>
);
}