From 8c5de4053c2ce3f31a5d600cfbf07ff66cffc28d Mon Sep 17 00:00:00 2001
From: Sara <sara@saragerretsen.nl>
Date: Tue, 8 Jul 2025 00:03:53 +0200
Subject: [PATCH] index.html mockup

---
 index.html | 273 +++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 273 insertions(+)
 create mode 100644 index.html
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..228c187
--- /dev/null
+++ b/index.html
@@ -0,0 +1,273 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>Mockup for personal webportal</title>
+<style>
+@media (prefers-color-scheme: dark) {
+	:root {
+		--base-back-color: #252525FF;
+		--base-front-color: white;
+		--back-color-1: #333F;
+		--front-color-1: white;
+		--links: #4A4F;
+		--input-back-color: #222;
+		--input-front-color: white;
+	}
+}
+
+@media (prefers-color-scheme: light) {
+	:root {
+		--base-back-color: #F0F0F0FF;
+		--base-front-color: black;
+		--back-color-1: #DDDF;
+		--front-color-1: black;
+		--links: #22DF;
+		--input-back-color: white;
+		--input-front-color: black;
+	}
+}
+
+:root {
+	--interaction-outline: 2px dotted var(--links);
+	--sidebar-width: 370px;
+	--sidebar-padding: 30px;
+	--sidebar-border-width: 1px;
+	--sidebar-true-width: calc(var(--sidebar-width) + var(--sidebar-padding) * 2.0 + var(--sidebar-border-width));
+	--article-panel-width: 400px;
+}
+
+body {
+	background: var(--base-back-color);
+	color: var(--base-front-color);
+	font-family: Adwaita Sans, sans-serif;
+	margin: 0;
+	padding: 0;
+}
+
+
+h1 {
+  margin-block: 0.67em;
+  font-size: 2em;
+}
+
+a {
+	color: var(--links);
+}
+
+a:hover {
+	outline: var(--interaction-outline);
+}
+
+input {
+	background: var(--input-back-color);
+	color: var(--input-front-color);
+}
+
+input:hover {
+	outline: var(--interaction-outline);
+}
+
+button {
+	background: var(--input-back-color);
+	color: var(--links);
+}
+
+button:hover {
+	outline: var(--interaction-outline);
+}
+
+#center-page {
+	max-width: calc(0.9 * (100% - (var(--sidebar-true-width) * 2.0)));
+	height: fit-content;
+	margin: 0 auto;
+	align-content: center;
+	text-align: center;
+	justify-content: center;
+}
+
+.sidebar {
+	background-color: var(--back-color-1);
+	color: var(--front-color-1);
+	width: var(--sidebar-width);
+	height: 100%;
+	padding: 10px var(--sidebar-padding);
+	position: fixed;
+	top: 0;
+}
+
+.sidebar > * > h2 {
+	width: 100%;
+	padding: 5px 0px;
+	margin: 0px;
+	border-top: 1px solid black;
+}
+
+#sidebar-left {
+	float: left;
+	left: 0;
+	border-right: var(--sidebar-border-width) solid black;
+}
+
+#sidebar-right {
+	margin-left: auto;
+	margin-right: 0;
+	text-align: right;
+	right: 0;
+	border-left: var(--sidebar-border-width) solid black;
+}
+
+#search {
+	margin: 200px auto 100px auto;
+	width: 100%;
+	text-align: left;
+}
+
+#search > * {
+	margin: 3px 5px;
+}
+
+#search > button {
+	font-size: 110%;
+}
+
+#search > input {
+	margin: 0 0 3px 0;
+	font-size: 220%;
+	width: 99%;
+}
+
+#articles {
+	display: flex;
+	flex-flow: row wrap;
+	height: min-content;
+	width: 80%;
+	margin: 0 auto;
+}
+
+#articles > * {
+	margin: 10px;
+}
+
+.article {
+	background-color: var(--back-color-1);
+	text-align: left;
+	height: 390px;
+	min-width: var(--article-panel-width);
+	width: auto;
+	padding: 50px;
+	overflow-y: hidden;
+	border: 1px solid black;
+	justify-content: center;
+}
+
+.article-header {
+	display: flex;
+	margin-bottom: 30px;
+	justify-self: left;
+}
+
+.article-header > h2 {
+	margin-top: 10px;
+}
+
+.fake-favicon-small {
+	display: inline-block;
+	background-color: aliceblue;
+	width: 1.2em;
+	height: 1.2em;
+	margin-left: 10px;
+}
+
+.fake-favicon-big {
+	display: inline-block;
+	background-color: aliceblue;
+	width: 100px;
+	min-width: 100px;
+	height: 100px;
+	min-height: 100px;
+	margin-right: 10px;
+}
+
+</style>
+</head>
+<!---------------------- HERE BEGINS THE LAYOUT -------------------->
+<body>
+<nav id="sidebar-left" class="sidebar">
+	<section id="your-lists">
+		<h1>Your Lists</h1>
+		<h2>Home</h2>
+		<h2><a href="index.html">Social</a></h2>
+		<h2><a href="index.html">Tech</a></h2>
+		<h2><a href="index.html">News</a></h2>
+		<h2><a href="index.html">Gaming</a></h2>
+		<h2><a href="index.html">Recipes</a></h2>
+		<h2><a href="index.html">Makers</a></h2>
+	</section>
+</nav>
+<div id="center-page">
+	<section id="search">
+		<input id="searchinput" inputmode="verbatim" placeholder="Search...">
+		<br/>
+		<button>Search Here</button><button>Search all</button>
+	</section>
+	<section id="articles">
+		<a href="index.html"><article class="article">
+			<span class="article-header">
+				<span class="fake-favicon-big"></span>
+				<h2>This is a headline</h2>
+			</span>
+			<span>
+				Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+			</span>
+		</article></a>
+		<a href="index.html"><article class="article">
+			<span class="article-header">
+				<span class="fake-favicon-big"></span>
+				<h2>This is a slightly somewhat notably longer headline</h2>
+			</span>
+			<span>
+				Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+			</span>
+		</article></a>
+		<a href="index.html"><article class="article">
+			<span class="article-header">
+				<span class="fake-favicon-big"></span>
+				<h2>What if the internet wasn't shit, wouldn't that be cool</h2>
+			</span>
+			<span>
+				Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+			</span>
+		</article></a>
+		<a href="index.html"><article class="article">
+			<span class="article-header">
+				<span class="fake-favicon-big"></span>
+				<h2>Did you know: Genderfuckery can !</h2>
+			</span>
+			<span>
+				Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+			</span>
+		</article></a>
+		<a href="index.html"><article class="article">
+			<span class="article-header">
+				<span class="fake-favicon-big"></span>
+				<h2>This is a headline!!</h2>
+			</span>
+			<span>
+				Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+			</span>
+		</article></a>
+	</section>
+</div>
+<section id="sidebar-right" class="sidebar">
+	<section id="current-list">
+		<h1>'Home' List</h1>
+		<h2><a href="index.html">Newspaper A</a></h2>
+		<h2><a href="index.html">Blog Z</a></h2>
+		<h2><a href="index.html">Podcast Y</a></h2>
+		<h2><a href="index.html">Reviewer N</a></h2>
+		<h2><a href="index.html">Chef V</a></h2>
+		<h2><a href="index.html">Artist P</a></h2>
+	</section>
+</section>
+</body>
+</html>
