Add footer and advert.

src/index.html

@@ -200,35 +200,124 @@
 					<i class="fas fa-hand-point-right"></i>
 				</div>
 			</section>
-			<section id="sports">
+			<section id="current">
-				<header>
+				<section id="left-current">
-					<h3>Sports</h3>
+					<article>
-				</header>
+						<main>
-				<article>
+							<header>We won versus some other team.</header>
-					<figure>
+							<p>Senator Mitch McConnell, the majority leader, has earned the nickname “the grim reaper”
-						<img src="../img/thumbnails/sports01.jpg" alt="Free kick">
+								for his iron-fisted grip on the chamber.
-						<figcaption>Free kick at second half.</figcaption>
+								<br>
-					</figure>
+
-					<h4>We won versus some other team.</h4>
+								Now his latest test will be making short work of President Trump’s impeachment trial
-				</article>
+								while keeping his own party unified.
+							</p>
+						</main>
+						<figure>
+							<img src="../img/thumbnails/sports01.jpg" alt="Free kick">
+							<figcaption>Free kick at second half.
+								<div class="author">
+									Eric Shaff/THE TAJMS
+								</div>
+							</figcaption>
+						</figure>
+					</article>
+					<article>
+						<main>
+							<header>The time has come.</header>
+							<p>
+								Lorem ipsum dolor sit amet, consectetur adipisicing elit
+								. Amet aperiam beatae consequatur consequuntur, doloribus exercitationem
+								illo itaque magnam nam optio perspiciatis possimus praesentium quia sequi
+								tempora? Dolorem eius porro sequi?
+								<br>
+								Aspernatur consequatur eligendi iure modi, provident quae soluta unde.
+								Aliquam blanditiis ea eveniet explicabo in libero, nemo nihil numquam odio
+								omnis, perferendis provident quaerat qui quo reiciendis rerum, sed
+								voluptatum.
+							</p>
+						</main>
+						<figure>
+							<img src="../img/thumbnails/religion.jpg" alt="Free kick">
+							<figcaption>Free kick at second half.
+								<div class="author">
+									Eric Shaff/THE TAJMS
+								</div>
+							</figcaption>
+						</figure>
+					</article>
+					<article>
+						<main>
+							<header>Crops ripe!</header>
+							<p>
+								Lorem ipsum dolor sit amet, consectetur adipisicing elit
+								. Amet aperiam beatae consequatur consequuntur, doloribus exercitationem
+								illo itaque magnam nam optio perspiciatis possimus praesentium quia sequi
+								tempora? Dolorem eius porro sequi?
+								<br>
+								Aspernatur consequatur eligendi iure modi, provident quae soluta unde.
+								Aliquam blanditiis ea eveniet explicabo in libero, nemo nihil numquam odio
+								omnis, perferendis provident quaerat qui quo reiciendis rerum, sed
+								voluptatum.
+							</p>
+						</main>
+						<figure>
+							<img src="../img/thumbnails/agriculture.jpg" alt="Free kick">
+							<figcaption>Crops ripe this year.
+								<div class="author">
+									Mr. Photographer/THE TAJMS
+								</div>
+							</figcaption>
+						</figure>
+					</article>
+				</section>
+				<section id="right-current">
+					<section>
+						<header>
+							Editor's Picks
+						</header>
+						<article>
+							<header>
+								Lorem ipsum
+							</header>
+							<img
+									src="../img/thumbnails/alpaca.jpg">
+						</article>
+						<article>
+							<header>
+								Dolor sit amet
+							</header>
+							<img
+									src="../img/thumbnails/cat.webp">
+						</article>
+					</section>
+				</section>
 			</section>
 
-			<section>
+			<section id="not-an-ad">
 				<header>
-					<h3>Stuff</h3>
+					Help us pay our bills.
 				</header>
-				<article>
+				<main>
-
+					<article>
-				</article>
+						<img
+								src="../img/thumbnails/ad.gif"
+								alt="This meme was made by the counter-clockwise gang."
+						>
+					</article>
+					<article>
+						<video
+								autoplay
+								loop
+								src="../img/thumbnails/dont2.gif"
+						></video>
+					</article>
+				</main>
 			</section>
 		</main>
-		<aside>
-			Advertisement
-		</aside>
 		<footer>
 			Made by Jakub Koralewski.
 		</footer>
-
 	</body>
 	<script src="index.ts" type="text/javascript"></script>
 </html>

src/index.scss

@@ -31,7 +31,7 @@ body {
 	}
 }
 
-@import './styles/nav.scss';
+@import './styles/nav';
-@import './styles/header.scss';
+@import './styles/header';
-@import './styles/main.scss';
+@import './styles/main/main';
-
+@import './styles/footer';

src/index.ts

@@ -28,11 +28,11 @@ let nav = {
 		if (nav.isActive) {
 			[nav.nav, nav.clickCatcher]
 				.forEach(
-					(x) => x.classList.remove("active"));
+					(x) => x.classList.add("active"));
 		} else {
 			[nav.nav, nav.clickCatcher]
 				.forEach(
-					(x) => x.classList.add("active"));
+					(x) => x.classList.remove("active"));
 		}
 	},
 	onClickCatcherClick: (e: Event) => {

src/styles/footer.scss

@@ -0,0 +1,3 @@
+footer {
+	padding: 2rem 0;
+}

src/styles/main/current.scss

@@ -0,0 +1,131 @@
+section#current {
+	display: flex;
+	flex-direction: row;
+	height: 100%;
+	$lightblack: transparentize(black, 0.9);
+	padding: 3rem 0 4rem 0;
+	border-bottom: 2px solid black;
+
+	img {
+		max-width: 100%;
+	}
+
+	section#left-current {
+		flex-basis: 70%;
+		display: grid;
+		grid-template-columns: repeat(3, 1fr);
+		//grid-template-rows: auto 1fr 1fr;
+		grid-gap: 1rem;
+
+		article {
+			cursor: pointer;
+			display: flex;
+			flex-direction: row;
+			height: 100%;
+			padding: 0.5rem;
+			flex-wrap: wrap;
+
+			&:nth-child(2n - 1) {
+				grid-column: span 2;
+				border-bottom: 1px solid $lightblack;
+
+				main {
+					flex-basis: 50%;
+				}
+			}
+
+			&:nth-child(2n) {
+				border-left: 1px solid $lightblack;
+				border-right: 4px double $lightblack;
+				grid-row: span 2;
+			}
+
+			main {
+				display: flex;
+				flex-direction: column;
+
+				figure {
+
+				}
+
+				header {
+					$size: 2rem;
+					font-size: 2rem;
+					line-height: $size;
+					font-family: "Bungee Inline", serif;
+					margin-bottom: 0.5rem;
+
+					&:hover {
+						opacity: 70%;
+					}
+				}
+
+				p {
+
+				}
+			}
+
+			figure {
+				position: relative;
+				height: min-content;
+				flex-basis: 40%;
+				flex-grow: 1;
+				margin: 1rem;
+
+				img {
+					max-height: 300px;
+				}
+
+				figcaption {
+					font-style: italic;
+					position: absolute;
+					bottom: 1rem;
+					left: 1rem;
+					background-color: rgba(255, 255, 255, 0.3);
+
+					.author {
+						font-size: 0.7rem;
+					}
+				}
+			}
+		}
+	}
+
+	section#right-current {
+		flex-basis: 30%;
+		padding: 0 1rem;
+
+		section {
+			& > header {
+				font-family: 'Bungee Inline', serif;
+			}
+			article {
+				margin-bottom: 1rem;
+			}
+		}
+	}
+}
+
+section#not-an-ad {
+	padding-bottom: 1rem;
+	header {
+		font-family: 'Comic Sans MS', 'Bungee Inline', serif;
+		font-weight: 800;
+		font-size: 1.5rem;
+		margin: 1rem 0;
+	}
+
+	main {
+
+		display: flex;
+
+		article {
+			padding: 1rem;
+			height: 50vh;
+
+			img, video {
+				height: 100%;
+			}
+		}
+	}
+}

src/styles/main/main.scss

@@ -1,17 +1,22 @@
-@import './_vars.scss';
+@import '../vars';
 
 body > main {
+	@import './current';
 	margin-top: 2rem;
 	display: flex;
 	flex-direction: column;
 	justify-content: center;
 	align-items: center;
+	border-bottom: 3px double black;
 
 	section#slideshow {
 		width: 100%;
 		display: flex;
 		justify-content: space-between;
 		align-items: center;
+		padding-bottom: 2rem;
+		border-bottom: 3px double black;
+		margin-bottom: 1rem;
 
 		.controls {
 			font-size: 5rem;