Subheader added.

src/index.html

@@ -26,6 +26,60 @@
 			<h1>THE TAJMS</h1>
 			<div id="date"></div>
 		</header>
+		<div id="sub-header">
+			<div id="grid">
+				<figure>
+					<img src="../img/thumbnails/podcast.png"
+						 alt="Podcast">
+
+					<figcaption>
+						<h3>Listen to our podcast.</h3>
+						<p>Everyone has a podcast.</p>
+					</figcaption>
+				</figure>
+				<figure>
+					<img alt="Worm." src="../img/thumbnails/worm.jpg">
+
+					<figcaption>
+						<h3>Top Songs of 2049.</h3>
+						<p>Crazy year huh.</p>
+					</figcaption>
+				</figure>
+				<figure>
+					<img alt="Worm." src="../img/thumbnails/common.png">
+
+					<figcaption>
+						<h3>He has arrived.</h3>
+						<p>Indeed.</p>
+					</figcaption>
+				</figure>
+				<figure>
+					<img alt="Do not." src="../img/thumbnails/dont.png">
+
+					<figcaption>
+						<h3>Don't even consider running.</h3>
+						<p>You can hide but you can't hide.</p>
+					</figcaption>
+				</figure>
+				<figure id="stocks">
+					<img alt="Stocks." src="../img/thumbnails/stonks.jpg">
+					<div id="stocks">
+						<div class="stock">
+							<header>XD</header>
+							<p class="p">+10%</p>
+						</div>
+						<div class="stock">
+							<header>UAM</header>
+							<p class="p">+100%</p>
+						</div>
+						<div class="stock">
+							<header>PP</header>
+							<p class="m">-100%</p>
+						</div>
+					</div>
+				</figure>
+			</div>
+		</div>
 		<nav>
 			<ul>
 				<li>Home Page</li>
@@ -36,8 +90,8 @@
 				<li>Business</li>
 				<li>Opinion</li>
 				<li>Tech</li>
-				<li>Best Student of The Year</li>
+				<li id="?">Best Student of The Year</li>
-				<li>Best Teacher of The Decade</li>
+				<li id="xd">Best Teacher of The Decade</li>
 				<li>Health</li>
 			</ul>
 		</nav>

src/index.scss

@@ -7,7 +7,7 @@ $secondary: green;
 
 body {
 	font-family: 'Lato', sans-serif;
-	padding: 2rem 2rem 2rem 2rem;
+	padding: 2rem 4rem 2rem 4rem;
 
 	#click-catcher {
 		display: none;
@@ -30,162 +30,6 @@ body {
 	}
 }
 
-nav {
+@import './styles/nav.scss';
-	$bg-color: white;
+@import './styles/header.scss';
-	position: fixed;
-	top: 0;
-	left: 0;
-	transform: translateX(-100%);
-	transition: transform 500ms ease-in-out;
-	background-color: $bg-color;
-	min-height: 100vh;
-	padding: 1rem;
-	z-index: 10;
 
-	ul {
-		overflow-y: auto;
-		li {
-			list-style-type: none;
-			padding: 5px;
-			margin-top: 0.2rem;
-			font-weight: 500;
-			border-radius: 0.5rem;
-			&.active {
-				font-weight: 600;
-			}
-			&:hover {
-				cursor: pointer;
-				background-color: mix($secondary, darken($bg-color, 10%), 10%);
-			}
-		}
-	}
-
-	&.active {
-		transform: translateX(0);
-	}
-}
-
-header#main-header {
-	display: flex;
-	width: 100%;
-	flex-direction: row;
-	align-items: center;
-	border-bottom: 2px solid mix(black, $secondary, 50%);
-	padding-bottom: 1rem;
-	margin-bottom: 1rem;
-
-	$input-width: 10rem;
-
-	#date {
-		align-self: end;
-		small {
-			font-style: italic;
-			color: $secondary;
-		}
-	}
-
-	h1 {
-		$font-size: 4rem;
-		font-weight: 100;
-		font-size: $font-size;
-		font-family: 'Bungee Inline', serif;
-		transform: translateX(-#{$input-width/2});
-		margin-left: auto;
-		user-select: none;
-		width: 100%;
-		//text-align: center;
-		height: $font-size;
-		display: flex;
-		//align-items: ;
-justify-content: center;
-		align-items: center;
-
-		span {
-			&:hover {
-				transform: translateY(5px);
-				transition-duration: 0.2s;
-			}
-			&.empty {
-				width: $font-size/4;
-			}
-			//height: $font-size;
-			display: inline-block;
-			//height: $font-size;
-			transform: translateY(0px);
-			transition: 0.3s transform ease-in-out;
-		}
-	}
-
-	div#search {
-		color: $secondary;
-		display: inline-flex;
-		flex-direction: row;
-
-		&.active {
-			input.hidden-input {
-				transform: scaleX(1) translateX(-2px) !important;
-				transition-duration: 0.2s;
-				border: 2px solid black !important;
-			}
-		}
-
-		input.hidden-input {
-			margin-left: 1rem;
-			transform: scaleX(0);
-			transform-origin: left;
-			width: $input-width;
-			height: 1rem;
-			padding: 10px 12px;
-			border-width: 0;
-			transition-property: transform, border-width;
-			transition-duration: 1s;
-			transition-timing-function: ease-in-out;
-		}
-
-		i {
-			margin-left: 1rem;
-		}
-	}
-
-	#hamburger {
-		$gap: 4px;
-		$size: 4px;
-		$width: 2rem;
-
-		width: $width;
-		display: flex;
-		flex-direction: column;
-
-		&:hover {
-			#top {
-				transform: translateX(-3px);
-			}
-
-			#bottom {
-				transform: translateX(3px);
-			}
-		}
-
-
-		& > div {
-			width: 100%;
-			background-color: black;
-			height: $size;
-			border-radius: 3px;
-		}
-
-		#top {
-			transition: transform 1s cubic-bezier(0.2, -2, 0.2, 2);
-			margin-bottom: $gap;
-		}
-
-		#bottom {
-			transition: transform 1s cubic-bezier(0.2, -2, 0.2, 2);
-			margin-top: $gap;
-		}
-	}
-}
-
-article {
-	background-color: blue;
-}

src/index.ts

@@ -5,7 +5,7 @@ let search = {
 	isActive: false,
 	active: (elem: HTMLElement) => {
 		search.isActive = !search.isActive;
-		if(search.isActive) {
+		if (search.isActive) {
 			elem.classList.add("active");
 		} else {
 			search.input.value = "";
@@ -25,7 +25,7 @@ let nav = {
 	activeListItem: null as HTMLLIElement,
 	active: () => {
 		nav.isActive = !nav.isActive;
-		if(nav.isActive) {
+		if (nav.isActive) {
 			[nav.nav, nav.clickCatcher]
 				.forEach(
 					(x) => x.classList.remove("active"));
@@ -53,7 +53,16 @@ let nav = {
 		nav.activeListItem.classList.add("active");
 	},
 	listItemClick: (e: Event) => {
-		nav.setActiveListItem(e.target as HTMLLIElement);
+		const target = e.target as HTMLLIElement;
+		switch (target.id) {
+			case "xd":
+				alert("bap");
+				break;
+			case "?":
+				alert("me");
+				break;
+		}
+		nav.setActiveListItem(target);
 	}
 };
 nav.listItems = nav.nav.querySelectorAll("ul > li");
@@ -73,10 +82,10 @@ let header = {
 	makeHeaderAnimatable: () => {
 		const text = header.h1.innerText.trim();
 		header.h1.innerHTML = "";
-		for(const letter of text) {
+		for (const letter of text) {
 			const span = document.createElement("span");
 			span.innerText = letter;
-			if(letter === " ") {
+			if (letter === " ") {
 				span.classList.add("empty");
 			}
 			header.h1.appendChild(span);

src/styles/header.scss

@@ -0,0 +1,202 @@
+header#main-header {
+	display: flex;
+	width: 100%;
+	flex-direction: row;
+	align-items: center;
+	border-bottom: 2px solid mix(black, $secondary, 50%);
+	padding-bottom: 1rem;
+	margin-bottom: 1rem;
+
+	$input-width: 10rem;
+
+	#date {
+		align-self: end;
+
+		small {
+			font-style: italic;
+			color: $secondary;
+		}
+	}
+
+	h1 {
+		$font-size: 4rem;
+		font-weight: 100;
+		font-size: $font-size;
+		font-family: 'Bungee Inline', serif;
+		transform: translateX(-#{$input-width/2});
+		margin-left: auto;
+		user-select: none;
+		width: 100%;
+		//text-align: center;
+		height: $font-size;
+		display: flex;
+		//align-items: ;
+		justify-content: center;
+		align-items: center;
+
+		span {
+			&:hover {
+				transform: translateY(5px);
+				transition-duration: 0.2s;
+			}
+
+			&.empty {
+				width: $font-size/4;
+			}
+
+			//height: $font-size;
+			display: inline-block;
+			//height: $font-size;
+			transform: translateY(0px);
+			transition: 0.3s transform ease-in-out;
+		}
+	}
+
+	div#search {
+		color: $secondary;
+		display: inline-flex;
+		flex-direction: row;
+
+		&.active {
+			input.hidden-input {
+				transform: scaleX(1) translateX(-2px) !important;
+				transition-duration: 0.2s;
+				border: 2px solid black !important;
+			}
+		}
+
+		input.hidden-input {
+			margin-left: 1rem;
+			transform: scaleX(0);
+			transform-origin: left;
+			width: $input-width;
+			height: 1rem;
+			padding: 10px 12px;
+			border-width: 0;
+			transition-property: transform, border-width;
+			transition-duration: 1s;
+			transition-timing-function: ease-in-out;
+		}
+
+		i {
+			margin-left: 1rem;
+		}
+	}
+
+	#hamburger {
+		$gap: 4px;
+		$size: 4px;
+		$width: 2rem;
+
+		width: $width;
+		display: flex;
+		flex-direction: column;
+
+		&:hover {
+			#top {
+				transform: translateX(-3px);
+			}
+
+			#bottom {
+				transform: translateX(3px);
+			}
+		}
+
+
+		& > div {
+			width: 100%;
+			background-color: black;
+			height: $size;
+			border-radius: 3px;
+		}
+
+		#top {
+			transition: transform 1s cubic-bezier(0.2, -2, 0.2, 2);
+			margin-bottom: $gap;
+		}
+
+		#bottom {
+			transition: transform 1s cubic-bezier(0.2, -2, 0.2, 2);
+			margin-top: $gap;
+		}
+	}
+}
+
+#sub-header {
+	padding-bottom: 1rem;
+	border-width: 0;
+	border-style: double;
+	border-bottom-width: 3px;
+
+
+	#grid {
+		display: flex;
+		flex-direction: row;
+		align-items: center;
+		justify-content: space-evenly;
+
+		figure {
+
+			&#stocks {
+				border-left: 1px solid black;
+				padding-left: 1rem;
+			}
+
+			&:hover {
+				cursor: pointer;
+			}
+
+			img {
+				object-fit: cover;
+				width: 50px;
+				height: 50px;
+				margin-right: 5px;
+			}
+
+			display: flex;
+			flex-direction: row;
+
+			figcaption {
+				p {
+					font-size: 0.8rem;
+				}
+			}
+
+			#stocks {
+				display: flex;
+				flex-direction: column;
+				font-size: 0.7rem;
+
+				.stock {
+					p {
+						&.p {
+							color: green;
+
+							&:after {
+								content: '↜';
+							}
+						}
+
+						&.m {
+							&:after {
+								content: '⇝';
+							}
+
+							color: red;
+						}
+					}
+
+					display: flex;
+					flex-direction: row;
+					justify-content: space-between;
+
+					header {
+						font-weight: 600;
+						margin-right: 5px;
+						margin-left: 5px;
+					}
+				}
+			}
+		}
+	}
+}

src/styles/nav.scss

@@ -0,0 +1,36 @@
+nav {
+	$bg-color: white;
+	position: fixed;
+	top: 0;
+	left: 0;
+	transform: translateX(-100%);
+	transition: transform 500ms ease-in-out;
+	background-color: $bg-color;
+	height: 100vh;
+	padding: 1rem;
+	z-index: 10;
+	overflow-y: auto;
+
+	ul {
+		padding-bottom: 1rem;
+		overflow-y: auto;
+		li {
+			list-style-type: none;
+			padding: 5px;
+			margin-top: 0.2rem;
+			font-weight: 500;
+			border-radius: 0.5rem;
+			&.active {
+				font-weight: 600;
+			}
+			&:hover {
+				cursor: pointer;
+				background-color: mix($secondary, darken($bg-color, 10%), 10%);
+			}
+		}
+	}
+
+	&.active {
+		transform: translateX(0);
+	}
+}