Add slideshow.

src/index.html

@@ -58,10 +58,10 @@
 
 					<figcaption>
 						<h3>Don't even consider running.</h3>
-						<p>You can hide but you can't hide.</p>
+						<p>You can run but you can't hide.</p>
 					</figcaption>
 				</figure>
-				<figure id="stocks">
+				<figure id="stonks">
 					<img alt="Stocks." src="../img/thumbnails/stonks.jpg">
 					<div id="stocks">
 						<div class="stock">
@@ -97,6 +97,62 @@
 		</nav>
 		<div id="click-catcher"></div>
 		<main>
+			<section id="slideshow">
+				<div id="left" class="controls">
+					<i class="fas fa-hand-point-left"></i>
+				</div>
+				<div id="slideshow-container">
+					<div id="inner-slideshow">
+						<figure style="--color: red">
+							<img src="../img/thumbnails/stuffhappens.jpg"
+								 alt="Stuff happens">
+							<figcaption>
+								<header>
+									Stuff happens.
+								</header>
+								<p>
+									A honda has glued ducks to its front bumper. Deadly car accidents drop to 0.
+									"If this were our owners, we'd probably probably give them a good huff about this,"
+									Skloot said.
+
+									Honda released an interview with a weather reporter who commented on some of the
+									characteristics of the Accord Clarity. Specifically, he compared the combination to
+									the
+									Honda Accord Hybrid and said:
+
+									"We are riding a totally new bike in a completely new environment."
+
+									In order to become the successful world-beating hybrid and electric motorcycle
+									manufacturers that they are, I believe that at the end of the day, it's all about
+									image.
+								</p>
+							</figcaption>
+						</figure>
+						<figure style="--color: blue;">
+							<img src="../img/thumbnails/monalisa.jpg"
+								 alt="Mona lisa">
+							<figcaption>
+								<header>
+									Spotted: Mona Lisa subway.
+								</header>
+								<p>
+									F32 spotted at subway Poznań. Was a healthy male please
+									contact me for further details. Sjało 085-2654 9/17/2017 Hana:
+									Dr. Tomasz Stunek said that he studied the man, identified by
+									the German news agency DPA, for three years in Germany before it
+									turned out that he is not a German, but a Pole. He told journalists
+									that he did not understand why the city government felt forced to
+									disclose the man's identity on public media. The man, who is
+									currently based in Warsaw and part of.
+								</p>
+							</figcaption>
+						</figure>
+					</div>
+				</div>
+				<div id="right" class="controls">
+					<i class="fas fa-hand-point-right"></i>
+				</div>
+			</section>
 			<section id="sports">
 				<header>
 					<h3>Sports</h3>

src/index.scss

@@ -1,9 +1,10 @@
+@import './styles/_vars.scss';
+
 * {
 	margin: 0;
 	padding: 0;
 	box-sizing: border-box;
 }
-$secondary: green;
 
 body {
 	font-family: 'Lato', sans-serif;
@@ -32,4 +33,5 @@ body {
 
 @import './styles/nav.scss';
 @import './styles/header.scss';
+@import './styles/main.scss';
 

src/index.ts

@@ -100,3 +100,55 @@ let header = {
 };
 header.makeHeaderAnimatable();
 header.setDate();
+
+let s = {
+	slideshow: document.querySelector("section#slideshow"),
+	innerSlideshow: null as HTMLDivElement,
+	position: 0,
+	num: 0,
+	figures: null as NodeListOf<HTMLElement>
+};
+
+let slideshow = {
+	...s,
+	figures: s.slideshow.querySelectorAll("figure"),
+	innerSlideshow: s.slideshow.querySelector("#inner-slideshow") as HTMLDivElement,
+	innerSlideshowTransform: "",
+	controls: {
+		left: s.slideshow.querySelector("#left") as HTMLDivElement,
+		setPosition: () => {
+			const pos = slideshow.position;
+			console.log(`position: `, pos);
+			if(pos === 0) {
+				slideshow.controls.left.classList.add("inactive");
+			} else {
+				slideshow.controls.left.classList.remove("inactive");
+			}
+			if(pos === slideshow.num - 1) {
+				slideshow.controls.right.classList.add("inactive");
+			} else {
+				slideshow.controls.right.classList.remove("inactive");
+			}
+			slideshow.innerSlideshow.style.transform
+				= `translateX(-${pos * 100 + 50}%)`;
+		},
+		onLeftClick: () => {
+			console.log("left");
+			slideshow.position = Math.max(0, --slideshow.position);
+			slideshow.controls.setPosition();
+		},
+		right: s.slideshow.querySelector("#right") as HTMLDivElement,
+		onRightClick: () => {
+			console.log("right");
+			slideshow.position = Math.min(slideshow.num - 1, ++slideshow.position);
+			slideshow.controls.setPosition();
+		},
+	}
+};
+slideshow.num = slideshow.figures.length;
+slideshow.controls.setPosition();
+
+["left", "right"].forEach(side => {
+	const x = slideshow.controls[side] as HTMLDivElement;
+	x.addEventListener("click", slideshow.controls[`on${side[0].toUpperCase()}${side.slice(1)}Click`]);
+});

src/styles/_vars.scss

@@ -0,0 +1 @@
+$secondary: green;

src/styles/header.scss

@@ -1,3 +1,5 @@
+@import './_vars.scss';
+
 header#main-header {
 	display: flex;
 	width: 100%;
@@ -137,7 +139,7 @@ header#main-header {
 
 		figure {
 
-			&#stocks {
+			&#stonks {
 				border-left: 1px solid black;
 				padding-left: 1rem;
 			}

src/styles/main.scss

@@ -0,0 +1,113 @@
+@import './_vars.scss';
+
+body > main {
+	margin-top: 2rem;
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	align-items: center;
+
+	section#slideshow {
+		width: 100%;
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+
+		.controls {
+			font-size: 5rem;
+			color: $secondary;
+			cursor: pointer;
+			transition: transform 1s ease-out;
+
+			&.inactive {
+				color: gray;
+				cursor: default;
+				transition-duration: 2s;
+				transition-timing-function: ease-in;
+
+				&#left {
+					transform: rotate(0.5turn);
+				}
+
+				&#right {
+					transform: rotate(-0.5turn);
+				}
+			}
+		}
+
+		#slideshow-container {
+			position: relative;
+			width: 80%;
+			height: 100vh;
+			display: flex;
+			justify-content: center;
+			align-items: center;
+			overflow: hidden;
+			#inner-slideshow {
+				width: 100%;
+				height: 100%;
+				display: flex;
+				flex-wrap: nowrap;
+				position: absolute;
+				left: 50%;
+				transform: translateX(-50%);
+				transition: transform 500ms ease-out;
+
+				figure {
+					min-width: 100%;
+					position: relative;
+					$color: var(--color);
+
+					img {
+						min-width: 100%;
+						min-height: 100%;
+						height: auto;
+						width: auto;
+						object-position: center;
+						object-fit: cover;
+					}
+
+					figcaption {
+						position: absolute;
+						top: 0;
+						left: 0;
+						margin: 2rem;
+
+						header {
+							font-weight: 800;
+							font-size: 1.5rem;
+							font-family: 'Bungee Inline', serif;
+							margin-bottom: 2rem;
+							background-color: $color;
+							width: fit-content;
+							color: white;
+							padding: 0.5rem;
+						}
+
+						p {
+							$padding: 1rem;
+							padding: $padding;
+							transform: translateX(-$padding);
+							color: white;
+							z-index: 5;
+							position: relative;
+
+							&:before {
+								content: '';
+								width: 100%;
+								height: 100%;
+								background-color: $color;
+								background-blend-mode: soft-light;
+								opacity: 0.7;
+								position: absolute;
+								top: 0;
+								left: 0;
+								z-index: -1;
+							}
+						}
+					}
+				}
+			}
+		}
+	}
+}

src/styles/nav.scss

@@ -1,3 +1,5 @@
+@import './_vars.scss';
+
 nav {
 	$bg-color: white;
 	position: fixed;