Outreach Events Page

src/assets/css/main.css

@@ -4212,4 +4212,82 @@ html, body {
 
 #footer-placeholder {
     flex-shrink: 0;
+}
+
+.event-container {
+	border-radius: 8px;
+	margin-bottom: 2rem;
+	box-shadow: 0 8px 16px 0 #db211e;
+	transition: 0.3s;
+	overflow: hidden;
+}
+
+.event-container:hover {
+	box-shadow: 0 16px 32px 0 #db201e;
+}
+
+.event-header {
+	display: flex;
+	flex-direction: column;
+}
+
+.event-image {
+	width: 100%;
+	height: 300px;
+	overflow: hidden;
+}
+
+.event-image img {
+	width: 100%;
+	height: 100%;
+	object-fit: cover;
+}
+
+.event-info {
+	width: 100%;
+	padding: 2rem;
+}
+
+.event-title {
+	font-size: 1.5rem;
+	font-weight: 600;
+	color: #fff;
+	margin: 0 0 0.5rem 0;
+}
+
+.event-location {
+	font-size: 1rem;
+	margin: 0 0 0 0;
+	display: flex;
+	align-items: center;
+	gap: 0.5rem;
+}
+
+.event-location:before {
+	content: "📍";
+	font-size: 0.9rem;
+}
+
+.event-datetime {
+	font-size: 1rem;
+	margin: 0 0 1rem 0;
+	display: flex;
+	align-items: center;
+	gap: 0.5rem;
+}
+
+.event-datetime:before {
+	content: "📅";
+	font-size: 0.9rem;
+}
+
+.event-description {
+	line-height: 1.6;
+	margin: 0;
+}
+
+@media screen and (max-width: 736px) {
+	.event-image {
+		height: 200px;
+	}
 }

src/calendar/index.html

@@ -80,6 +80,19 @@ <h2>Calendar</h2>
 												});
 											</script>
 										</section>
+										<hr />
+										<section>
+											<div id="sidebar2-placeholder"></div>
+
+											<script>
+												$("#sidebar2-placeholder").load("components/sidebar_content/outreachevents.html", function() {
+													$().dropotron({
+														alignment: 'center',
+														hideDelay: 300
+													});
+												});
+											</script>
+										</section>
 									</section>
 
 							</div>

src/components/nav.html

@@ -21,6 +21,9 @@ <h1 id="logo"><span class="hawkbot1cslogo"><a href=""><img src="assets/images/Ha
         </li>
         <li>
             <a href="outreach">Outreach</a>
+            <ul>
+                <li><a href="outreach/events">Events</a></li>
+            </ul>
         </li>
         <li>
             <a href="nonprofit">Nonprofit</a>

src/components/sidebar_content/outreachevents.html

@@ -0,0 +1,7 @@
+<h3>Previous Outreach</h3>
+<p>See our past outreach events, and how it has made an impact in the community.</p>
+<footer>
+    <ul class="actions">
+        <li><a href="outreach/events" class="button">Browse Events</a></li>
+    </ul>
+</footer>

src/outreach/events/README.md

@@ -0,0 +1,21 @@
+# Outreach Events Page
+
+## Overview
+This page provides a way for visitors to look back and see our impact over the years. It's important to keep it up-to-date, as potential donors may visit this page!
+
+## Usage
+
+### FTC Season Sorting
+Events are sorted into FTC seasons based on their date. For this page's purposes, the next FTC season starts after the final competition of the previous season. This means for events taking place during the off-season, sort them in the upcoming season.
+
+### Adding New Events
+1. In `index.html`, copy the example event, which is commented out.
+2. Paste the code into the section for the correct FTC season.
+3. Upload and optimize a photo from the event and place it in `src/assets/images`.
+4. Replace the placeholder values with the correct details for the event. You'll need to provide:
+   -  Title
+   -  Location
+   -  Date & Time
+   -  Description
+   -  Path to Image
+5. If applicable, in the location field, add a link to the website for the venue. For example, for an outreach event at a school, paste a link to the school's website.