From 5a0c43bdad6e53e51172c2a4ae2422aca96ea945 Mon Sep 17 00:00:00 2001
From: Sara <sara@saragerretsen.nl>
Date: Wed, 9 Jul 2025 20:16:52 +0200
Subject: [PATCH] feat: further updates to index.html and added icons

---
 delete.svg                                 |  30 ++
 edit.svg                                   |  27 ++
 favicon-placeholder.svg                    |  25 ++
 icons/source-files/delete.svg              |  89 +++++
 icons/source-files/edit.svg                |  44 +++
 icons/source-files/favicon-placeholder.svg |  53 +++
 index.html                                 | 365 ++++++++++++++-------
 7 files changed, 511 insertions(+), 122 deletions(-)
 create mode 100644 delete.svg
 create mode 100644 edit.svg
 create mode 100644 favicon-placeholder.svg
 create mode 100644 icons/source-files/delete.svg
 create mode 100644 icons/source-files/edit.svg
 create mode 100644 icons/source-files/favicon-placeholder.svg

diff --git a/delete.svg b/delete.svg
new file mode 100644
index 0000000..9a5f912
--- /dev/null
+++ b/delete.svg
@@ -0,0 +1,30 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="135.46666mm"
+   height="135.46666mm"
+   viewBox="0 0 135.46666 135.46666"
+   version="1.1"
+   id="svg1"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs1" />
+  <g
+     id="layer1">
+    <g
+       id="g9"
+       transform="matrix(0.90483182,0,0,0.90483182,6.4460431,6.4460594)"
+       style="stroke-width:21.6454;stroke-dasharray:none">
+      <path
+         style="fill:#419a1d;stroke:#419a1d;stroke-width:21.6454;stroke-linecap:round;stroke-dasharray:none;stroke-opacity:1"
+         d="M 3.6986761,3.6986637 131.768,131.76798"
+         id="path7" />
+      <path
+         style="fill:#419a1d;stroke:#419a1d;stroke-width:21.6454;stroke-linecap:round;stroke-dasharray:none;stroke-opacity:1"
+         d="M 3.698678,131.76798 131.768,3.6986619"
+         id="path8" />
+    </g>
+  </g>
+</svg>
diff --git a/edit.svg b/edit.svg
new file mode 100644
index 0000000..27779c5
--- /dev/null
+++ b/edit.svg
@@ -0,0 +1,27 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="135.46666mm"
+   height="135.46666mm"
+   viewBox="0 0 135.46666 135.46666"
+   version="1.1"
+   id="svg1"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs1" />
+  <g
+     id="layer1"
+     transform="translate(-145.46666)">
+    <g
+       id="g6"
+       transform="matrix(0.57817245,0.39306618,-0.39306618,0.57817245,196.48475,-45.935656)"
+       style="stroke-width:29.4217;stroke-dasharray:none">
+      <path
+         id="rect9"
+         style="fill:none;stroke:#419a1d;stroke-width:30.2758;stroke-linecap:round;stroke-linejoin:round"
+         d="m 81.5053,42.343214 55.53716,-4.182831 7.98453,111.071247 -23.35426,63.49851 -32.182914,-59.31567 z" />
+    </g>
+  </g>
+</svg>
diff --git a/favicon-placeholder.svg b/favicon-placeholder.svg
new file mode 100644
index 0000000..e8d9e2e
--- /dev/null
+++ b/favicon-placeholder.svg
@@ -0,0 +1,25 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="135.46666mm"
+   height="135.46666mm"
+   viewBox="0 0 135.46666 135.46666"
+   version="1.1"
+   id="svg1"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs1" />
+  <g
+     id="layer1">
+    <rect
+       style="fill:#419a1d;fill-opacity:1;stroke:none;stroke-width:2"
+       id="rect1"
+       width="135.46666"
+       height="135.46666"
+       x="0"
+       y="0"
+       ry="6.4950299" />
+  </g>
+</svg>
diff --git a/icons/source-files/delete.svg b/icons/source-files/delete.svg
new file mode 100644
index 0000000..6160343
--- /dev/null
+++ b/icons/source-files/delete.svg
@@ -0,0 +1,89 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="135.46666mm"
+   height="135.46666mm"
+   viewBox="0 0 135.46666 135.46666"
+   version="1.1"
+   id="svg1"
+   inkscape:version="1.4.2 (ebf0e940d0, 2025-05-08)"
+   sodipodi:docname="delete.svg"
+   inkscape:export-filename="../../icon"
+   inkscape:export-xdpi="96"
+   inkscape:export-ydpi="96"
+   inkscape:export-batch-path="../../personal-webportal"
+   inkscape:export-batch-name=""
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview1"
+     pagecolor="#ffffff"
+     bordercolor="#999999"
+     borderopacity="1"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:document-units="mm"
+     inkscape:zoom="0.40087893"
+     inkscape:cx="279.3861"
+     inkscape:cy="236.97928"
+     inkscape:window-width="2540"
+     inkscape:window-height="1367"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="0"
+     inkscape:current-layer="g6">
+    <inkscape:page
+       x="0"
+       y="0"
+       width="135.46666"
+       height="135.46666"
+       id="page3"
+       margin="0"
+       bleed="0"
+       inkscape:label="delete" />
+    <inkscape:page
+       x="145.46666"
+       y="0"
+       width="135.46666"
+       height="135.46666"
+       id="page4"
+       margin="0"
+       bleed="0"
+       inkscape:label="edit" />
+  </sodipodi:namedview>
+  <defs
+     id="defs1" />
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1">
+    <g
+       id="g6"
+       transform="matrix(0.57817245,0.39306618,-0.39306618,0.57817245,196.48475,-45.935656)"
+       style="stroke-width:29.4217;stroke-dasharray:none">
+      <path
+         id="rect9"
+         style="fill:none;stroke:#419a1d;stroke-width:30.2758;stroke-linecap:round;stroke-linejoin:round"
+         d="m 81.5053,42.343214 55.53716,-4.182831 7.98453,111.071247 -23.35426,63.49851 -32.182914,-59.31567 z"
+         sodipodi:nodetypes="cccccc" />
+    </g>
+    <g
+       id="g9"
+       transform="matrix(0.90483182,0,0,0.90483182,6.4460431,6.4460594)"
+       style="stroke-width:21.6454;stroke-dasharray:none">
+      <path
+         style="fill:#419a1d;stroke:#419a1d;stroke-width:21.6454;stroke-linecap:round;stroke-dasharray:none;stroke-opacity:1"
+         d="M 3.6986761,3.6986637 131.768,131.76798"
+         id="path7" />
+      <path
+         style="fill:#419a1d;stroke:#419a1d;stroke-width:21.6454;stroke-linecap:round;stroke-dasharray:none;stroke-opacity:1"
+         d="M 3.698678,131.76798 131.768,3.6986619"
+         id="path8" />
+    </g>
+  </g>
+</svg>
diff --git a/icons/source-files/edit.svg b/icons/source-files/edit.svg
new file mode 100644
index 0000000..56713cc
--- /dev/null
+++ b/icons/source-files/edit.svg
@@ -0,0 +1,44 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="135.46666mm"
+   height="135.46666mm"
+   viewBox="0 0 135.46666 135.46666"
+   version="1.1"
+   id="svg1"
+   inkscape:version="1.4.2 (ebf0e940d0, 2025-05-08)"
+   sodipodi:docname="edit.svg"
+   inkscape:export-filename="../../edit.svg"
+   inkscape:export-xdpi="96"
+   inkscape:export-ydpi="96"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview1"
+     pagecolor="#ffffff"
+     bordercolor="#999999"
+     borderopacity="1"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:document-units="mm"
+     inkscape:zoom="0.89619809"
+     inkscape:cx="104.32961"
+     inkscape:cy="190.80603"
+     inkscape:window-width="2540"
+     inkscape:window-height="1367"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="0"
+     inkscape:current-layer="layer1" />
+  <defs
+     id="defs1" />
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1" />
+</svg>
diff --git a/icons/source-files/favicon-placeholder.svg b/icons/source-files/favicon-placeholder.svg
new file mode 100644
index 0000000..b6a3bcd
--- /dev/null
+++ b/icons/source-files/favicon-placeholder.svg
@@ -0,0 +1,53 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="135.46666mm"
+   height="135.46666mm"
+   viewBox="0 0 135.46666 135.46666"
+   version="1.1"
+   id="svg1"
+   inkscape:version="1.4.2 (ebf0e940d0, 2025-05-08)"
+   sodipodi:docname="favicon-placeholder.svg"
+   inkscape:export-filename="../../favicon-placeholder.svg"
+   inkscape:export-xdpi="96"
+   inkscape:export-ydpi="96"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview1"
+     pagecolor="#ffffff"
+     bordercolor="#999999"
+     borderopacity="1"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:document-units="mm"
+     inkscape:zoom="1.7923962"
+     inkscape:cx="203.0801"
+     inkscape:cy="286.20905"
+     inkscape:window-width="2540"
+     inkscape:window-height="1367"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="0"
+     inkscape:current-layer="layer1" />
+  <defs
+     id="defs1" />
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1">
+    <rect
+       style="fill:#419a1d;stroke:none;stroke-width:2;fill-opacity:1"
+       id="rect1"
+       width="135.46666"
+       height="135.46666"
+       x="0"
+       y="0"
+       ry="6.4950299" />
+  </g>
+</svg>
diff --git a/index.html b/index.html
index 228c187..4edf3a0 100644
--- a/index.html
+++ b/index.html
@@ -4,50 +4,69 @@
 <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;
-	}
+:root {
+	--back-color-0: #222;
+	--back-color-1: #333;
+
+	--front-color-0: darkgray;
+	--front-color-1: darkgray;
+
+	--links: #4A4F;
+	--input-back-color: #111;
+	--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 {
+	--back-color-0: #FFF;
+	--back-color-1: #DDDF;
+
+	--front-color-0: #555;
+	--front-color-1: #555;
+
+	--links: #22D;
+	--links: #383;
+	--input-back-color: white;
+	--input-front-color: black;
+}
 }
 
 :root {
 	--interaction-outline: 2px dotted var(--links);
-	--sidebar-width: 370px;
+	--sidebar-width: 250px;
 	--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;
+	--border-width: 1px;
+	--sidebar-true-width: calc(var(--sidebar-width) + var(--sidebar-padding) * 2.0 + var(--border-width));
+	--border-radius: 1px;
+	--content-padding: 5%;
+	--article-favicon-size: 5em;
 }
 
 body {
-	background: var(--base-back-color);
-	color: var(--base-front-color);
+	background: var(--back-color-0);
+	color: var(--front-color-0);
 	font-family: Adwaita Sans, sans-serif;
 	margin: 0;
 	padding: 0;
 }
 
-
 h1 {
-  margin-block: 0.67em;
-  font-size: 2em;
+	color: inherit;
+	margin-block: 0.67em;
+	font-size: 250%;
+}
+
+h2 {
+	font-size: 120%;
+}
+
+h3 {
+	font-size: 110%;
+}
+
+h4 {
+	font-size: 100%;
 }
 
 a {
@@ -58,9 +77,18 @@ a:hover {
 	outline: var(--interaction-outline);
 }
 
+*:focus {
+	outline: var(--interaction-outline);
+}
+
 input {
+	--input-padding: 0.5em;
 	background: var(--input-back-color);
 	color: var(--input-front-color);
+	/*border: var(--border-width) solid var(--input-front-color);*/
+	border: none;
+	border-radius: var(--border-radius);
+	padding: 3px var(--input-padding);
 }
 
 input:hover {
@@ -70,16 +98,24 @@ input:hover {
 button {
 	background: var(--input-back-color);
 	color: var(--links);
+	/*border: var(--border-width) solid var(--front-color-0);*/
+	border: none;
+	border-radius: var(--border-radius);
+	margin-top: 0.5em;
+	padding: 1px 0.5em;
+	font-size: 100%;
 }
 
 button:hover {
 	outline: var(--interaction-outline);
 }
 
-#center-page {
-	max-width: calc(0.9 * (100% - (var(--sidebar-true-width) * 2.0)));
-	height: fit-content;
+main {
+	color: var(--front-color-0);
+	padding: 0px var(--content-padding);
+	max-width: calc((100% - ((var(--sidebar-true-width) + var(--content-padding)) * 2.0)));
 	margin: 0 auto;
+	height: fit-content;
 	align-content: center;
 	text-align: center;
 	justify-content: center;
@@ -95,17 +131,31 @@ button:hover {
 	top: 0;
 }
 
-.sidebar > * > h2 {
+.sidebar > h2 {
+	display: flex;
 	width: 100%;
 	padding: 5px 0px;
 	margin: 0px;
-	border-top: 1px solid black;
+	border-bottom: 1px solid var(--front-color-1);
 }
 
-#sidebar-left {
+.sidebar > h2 > a {
+	display: inline-block;
+	width: 100%;
+}
+
+.sidebar > h2 > img {
+	display: inline;
+	height: 1em;
+	vertical-align: sub;
+	object-position: right;
+	margin: 0px 2px;
+}
+
+nav {
 	float: left;
 	left: 0;
-	border-right: var(--sidebar-border-width) solid black;
+	/*border-right: var(--border-width) solid var(--front-color-1);*/
 }
 
 #sidebar-right {
@@ -113,78 +163,103 @@ button:hover {
 	margin-right: 0;
 	text-align: right;
 	right: 0;
-	border-left: var(--sidebar-border-width) solid black;
+	/*border-left: var(--border-width) solid var(--front-color-1);*/
 }
 
-#search {
+.sidebar > input {
+	--hpadd: 5px;
+
+	padding: 5px var(--hpadd);
+	width: calc(100% - var(--hpadd) * 2);
+	margin-top: 10px;
+	font-size: 110%;
+}
+
+search {
 	margin: 200px auto 100px auto;
 	width: 100%;
 	text-align: left;
 }
 
-#search > * {
+search > * {
 	margin: 3px 5px;
 }
 
-#search > button {
+search > button {
 	font-size: 110%;
 }
 
-#search > input {
+search > input {
 	margin: 0 0 3px 0;
 	font-size: 220%;
-	width: 99%;
+	width: calc(100% - var(--input-padding) * 2);
 }
 
-#articles {
+section#articles {
+	color: var(--front-color-0);
 	display: flex;
 	flex-flow: row wrap;
 	height: min-content;
-	width: 80%;
+	width: 95%;
 	margin: 0 auto;
 }
 
-#articles > * {
+section#articles > h1 {
+	display: block;
+	width: 100%;
+	border-top: var(--border-width) solid var(--front-color-0);
+	padding-top: 0.5em;
+	padding-bottom: 0.5em;
+	margin: 0px;
+}
+
+section#articles > * {
 	margin: 10px;
 }
 
-.article {
+article {
+	display: flex;
+	flex-flow: column nowrap;
 	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;
+	/*border: var(--border-width) solid var(--front-color-0);*/
 	justify-content: center;
+	border-radius: var(--border-radius);
 }
 
-.article-header {
+article > p {
+	overflow-y: hidden;
+	height: 100%;
+}
+
+article > hgroup {
 	display: flex;
 	margin-bottom: 30px;
 	justify-self: left;
 }
 
-.article-header > h2 {
+article > hgroup > h2 {
 	margin-top: 10px;
 }
 
-.fake-favicon-small {
-	display: inline-block;
-	background-color: aliceblue;
-	width: 1.2em;
-	height: 1.2em;
-	margin-left: 10px;
+img.favicon-small {
+	background-color: transparent;
+	width: 1em;
+	height: 1em;
+	margin-left: 0.5em;
+	vertical-align: sub;
 }
 
-.fake-favicon-big {
-	display: inline-block;
-	background-color: aliceblue;
-	width: 100px;
-	min-width: 100px;
-	height: 100px;
-	min-height: 100px;
+img.favicon-big {
+	background-color: transparent;
+	width: var(--article-favicon-size);
+	min-width: var(--article-favicon-size);
+	height: var(--article-favicon-size);
+	min-height: var(--article-favicon-size);
 	margin-right: 10px;
 }
 
@@ -193,81 +268,127 @@ button:hover {
 <!---------------------- 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>
+	<h1>Your Lists</h1>
+	<h2>Home</h2>
+	<h2><a href="index.html">Social</a><img src="edit.svg"><img src="delete.svg"></h2>
+	<h2><a href="index.html">Tech</a><img src="edit.svg"><img src="delete.svg"></h2>
+	<h2><a href="index.html">News</a><img src="edit.svg"><img src="delete.svg"></h2>
+	<h2><a href="index.html">Gaming</a><img src="edit.svg"><img src="delete.svg"></h2>
+	<h2><a href="index.html">Recipes</a><img src="edit.svg"><img src="delete.svg"></h2>
+	<h2><a href="index.html">Makers</a><img src="edit.svg"><img src="delete.svg"></h2>
+	<input placeholder="Add (List name or URL)" inputmode="verbatim" class="add-element">
+	<button>Add list</button>
 </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>
+<main>
+	<search>
+		<input inputmode="verbatim" placeholder="Search...">
+		<br>
+		<button>Search Here</button><button>Search All Lists</button>
+	</search>
 	<section id="articles">
-		<a href="index.html"><article class="article">
-			<span class="article-header">
-				<span class="fake-favicon-big"></span>
+		<h1>Home Feed</h1>
+		<a href="index.html"><article>
+			<hgroup>
+				<img class="favicon-big" src="favicon-placeholder.svg">
 				<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>
+			</hgroup>
+			<p>
+			Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.
+			Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.
+			Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.
+			Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.
+			Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.
+			Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.
+			Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.
+			Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.
+			Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.
+			Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.
+			</p>
 		</article></a>
-		<a href="index.html"><article class="article">
-			<span class="article-header">
-				<span class="fake-favicon-big"></span>
+		<a href="index.html"><article>
+			<hgroup>
+				<img class="favicon-big" src="favicon-placeholder.svg">
 				<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>
+			</hgroup>
+			<p>
+			Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.
+			Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.
+			Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.
+			Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.
+			Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.
+			Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.
+			Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.
+			Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.
+			Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.
+			Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.
+			</p>
 		</article></a>
-		<a href="index.html"><article class="article">
-			<span class="article-header">
-				<span class="fake-favicon-big"></span>
+		<a href="index.html"><article>
+			<hgroup>
+				<img class="favicon-big" src="favicon-placeholder.svg">
 				<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>
+			</hgroup>
+			<p>
+			Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.
+			Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.
+			Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.
+			Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.
+			Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.
+			Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.
+			Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.
+			Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.
+			Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.
+			Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.
+			</p>
 		</article></a>
-		<a href="index.html"><article class="article">
-			<span class="article-header">
-				<span class="fake-favicon-big"></span>
+		<a href="index.html"><article>
+			<hgroup>
+				<img class="favicon-big" src="favicon-placeholder.svg">
 				<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>
+			</hgroup>
+			<p>
+			Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.
+			Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.
+			Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.
+			Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.
+			Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.
+			Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.
+			Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.
+			Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.
+			Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.
+			Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.
+			</p>
 		</article></a>
-		<a href="index.html"><article class="article">
-			<span class="article-header">
-				<span class="fake-favicon-big"></span>
+		<a href="index.html"><article>
+			<hgroup>
+				<img class="favicon-big" src="favicon-placeholder.svg">
 				<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>
+			</hgroup>
+			<p>
+			Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.
+			Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.
+			Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.
+			Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.
+			Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.
+			Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.
+			Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.
+			Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.
+			Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.
+			Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.
+			</p>
 		</article></a>
 	</section>
-</div>
+</main>
 <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>
+	<h1>'Home' List</h1>
+	<h2><img src="delete.svg"><img src="edit.svg"><a href="index.html">Newspaper A<img class="favicon-small" src="favicon-placeholder.svg"></a></h2>
+	<h2><img src="delete.svg"><img src="edit.svg"><a href="index.html">Blog Z<img class="favicon-small" src="favicon-placeholder.svg"></a></h2>
+	<h2><img src="delete.svg"><img src="edit.svg"><a href="index.html">Podcast Y<img class="favicon-small" src="favicon-placeholder.svg"></a></h2>
+	<h2><img src="delete.svg"><img src="edit.svg"><a href="index.html">Reviewer N<img class="favicon-small" src="favicon-placeholder.svg"></a></h2>
+	<h2><img src="delete.svg"><img src="edit.svg"><a href="index.html">Chef V<img class="favicon-small" src="favicon-placeholder.svg"></a></h2>
+	<h2><img src="delete.svg"><img src="edit.svg"><a href="index.html">Artist P<img class="favicon-small" src="favicon-placeholder.svg"></a></h2>
+	<input placeholder="Add (Feed or page URL)" inputmode="verbatim">
+	<button>Subscribe</button>
 </section>
 </body>
 </html>