482 lines
34 KiB
HTML
482 lines
34 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>Mockup for personal webportal</title>
|
|
<style>
|
|
@media (prefers-color-scheme: dark) {
|
|
:root {
|
|
--back-color-0: #222;
|
|
--back-color-1: #333;
|
|
--back-color-2: #444;
|
|
|
|
--front-color-0: darkgray;
|
|
--front-color-1: darkgray;
|
|
--front-color-2: darkgray;
|
|
|
|
--links: #4A4F;
|
|
--input-back-color: #111;
|
|
--input-front-color: white;
|
|
}
|
|
}
|
|
|
|
@media (prefers-color-scheme: light) {
|
|
:root {
|
|
--back-color-0: #FFF;
|
|
--back-color-1: #DDD;
|
|
--back-color-2: #CCC;
|
|
|
|
--front-color-0: #555;
|
|
--front-color-1: #555;
|
|
--front-color-2: #555;
|
|
|
|
--links: #22D;
|
|
--links: #383;
|
|
--input-back-color: white;
|
|
--input-front-color: black;
|
|
}
|
|
}
|
|
|
|
:root {
|
|
--interaction-outline: 2px dotted var(--links);
|
|
--sidebar-width: 300px;
|
|
--sidebar-padding: 20px;
|
|
--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(--back-color-0);
|
|
color: var(--front-color-0);
|
|
font-family: Adwaita Sans, sans-serif;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
h1 {
|
|
color: inherit;
|
|
margin-block: 0.67em;
|
|
font-size: 250%;
|
|
}
|
|
|
|
h2 {
|
|
font-size: 120%;
|
|
}
|
|
|
|
h3 {
|
|
font-size: 110%;
|
|
}
|
|
|
|
h4 {
|
|
font-size: 100%;
|
|
}
|
|
|
|
a {
|
|
color: var(--links);
|
|
}
|
|
|
|
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: none;
|
|
border-radius: var(--border-radius);
|
|
padding: 3px var(--input-padding);
|
|
font-size: 110%;
|
|
}
|
|
|
|
input:hover {
|
|
outline: var(--interaction-outline);
|
|
}
|
|
|
|
button {
|
|
background: var(--input-back-color);
|
|
color: var(--links);
|
|
border: none;
|
|
border-radius: var(--border-radius);
|
|
margin-top: 0.5em;
|
|
padding: 1px 0.5em;
|
|
font-size: 100%;
|
|
}
|
|
|
|
button:hover {
|
|
outline: var(--interaction-outline);
|
|
}
|
|
|
|
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;
|
|
}
|
|
|
|
nav {
|
|
display: flex;
|
|
flex-flow: column nowrap;
|
|
justify-content: space-between;
|
|
background-color: var(--back-color-1);
|
|
color: var(--front-color-1);
|
|
width: calc(var(--sidebar-width) + var(--sidebar-padding) * 2);
|
|
height: 100%;
|
|
max-height: 100%;
|
|
max-height: 100vh;
|
|
padding: 0;
|
|
position: fixed;
|
|
top: 0;
|
|
}
|
|
|
|
nav.left {
|
|
float: left;
|
|
left: 0;
|
|
border-right: var(--border-width) solid var(--front-color-1);
|
|
}
|
|
|
|
nav.right {
|
|
margin-left: auto;
|
|
margin-right: 0;
|
|
right: 0;
|
|
float: right;
|
|
border-left: var(--border-width) solid var(--front-color-1);
|
|
}
|
|
|
|
nav > section {
|
|
display: flex;
|
|
flex: 1 1 0;
|
|
flex-flow: column nowrap;
|
|
flex-grow: 1;
|
|
max-height: auto;
|
|
overflow-y: hidden;
|
|
padding: 0px var(--sidebar-padding);
|
|
border-bottom: var(--border-width) solid var(--front-color-1);
|
|
padding-bottom: 2em;
|
|
}
|
|
|
|
nav > #rule-editor > form {
|
|
display: flex;
|
|
flex: 1 1 0;
|
|
flex-flow: row nowrap;
|
|
width: 100%;
|
|
}
|
|
|
|
nav > #rule-editor > form > :first-child {
|
|
margin-right: 0.5em;
|
|
}
|
|
|
|
nav > section > div {
|
|
overflow-y: scroll;
|
|
border: var(--border-width) solid var(--front-color-1);
|
|
height: 100%;
|
|
margin-top: 10px;
|
|
padding-left: 10px;
|
|
padding-right: 10px;
|
|
}
|
|
|
|
nav > section > div > h2 {
|
|
display: flex;
|
|
width: 100%;
|
|
padding: 5px 0px;
|
|
margin: 0px;
|
|
}
|
|
|
|
nav > section > div > h2 > a {
|
|
display: inline-block;
|
|
width: 100%;
|
|
}
|
|
|
|
nav > section > div > h2 > img {
|
|
display: inline;
|
|
height: 1em;
|
|
object-position: right;
|
|
margin: 0px 2px;
|
|
align-self: center;
|
|
justify-self: flex-end;
|
|
}
|
|
|
|
nav > section > input {
|
|
--hpadd: 5px;
|
|
|
|
padding: 5px var(--hpadd);
|
|
width: calc(100% - var(--hpadd) * 2);
|
|
}
|
|
|
|
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: calc(100% - var(--input-padding) * 2);
|
|
}
|
|
|
|
section#articles {
|
|
color: var(--front-color-0);
|
|
display: flex;
|
|
flex-flow: row wrap;
|
|
height: min-content;
|
|
width: 95%;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
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 {
|
|
display: flex;
|
|
flex-flow: column nowrap;
|
|
background-color: var(--back-color-1);
|
|
text-align: left;
|
|
height: 390px;
|
|
width: auto;
|
|
padding: 50px;
|
|
overflow-y: hidden;
|
|
justify-content: center;
|
|
border-radius: var(--border-radius);
|
|
}
|
|
|
|
article > p {
|
|
overflow-y: hidden;
|
|
height: 100%;
|
|
}
|
|
|
|
article > hgroup {
|
|
display: flex;
|
|
margin-bottom: 30px;
|
|
justify-self: left;
|
|
}
|
|
|
|
article > hgroup > h2 {
|
|
margin-top: 10px;
|
|
}
|
|
|
|
img.favicon-small {
|
|
background-color: transparent;
|
|
width: 1em;
|
|
height: 1em;
|
|
margin-left: 0.5em;
|
|
margin-right: 0.5em;
|
|
vertical-align: sub;
|
|
}
|
|
|
|
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;
|
|
}
|
|
|
|
</style>
|
|
</head>
|
|
<!---------------------- HERE BEGINS THE LAYOUT -------------------->
|
|
<body>
|
|
<nav class="left">
|
|
<section id="your-lists">
|
|
<h1>Your Lists</h1>
|
|
<input placeholder="Add (List name or URL)" inputmode="verbatim" class="add-element">
|
|
<button>Add list</button>
|
|
<div>
|
|
<h2><a>Home</a><img src="edit.svg"><img src="delete.svg"></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>
|
|
<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>
|
|
<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>
|
|
</div>
|
|
</section>
|
|
</nav>
|
|
<main>
|
|
<search>
|
|
<input inputmode="verbatim" placeholder="Search...">
|
|
<br>
|
|
<button>Search Here</button><button>Search All Lists</button>
|
|
</search>
|
|
<section id="articles">
|
|
<h1>Home Feed</h1>
|
|
<a href="index.html"><article>
|
|
<hgroup>
|
|
<img class="favicon-big" src="favicon-placeholder.svg">
|
|
<h2>This is a headline</h2>
|
|
</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>
|
|
<hgroup>
|
|
<img class="favicon-big" src="favicon-placeholder.svg">
|
|
<h2>This is a slightly somewhat notably longer headline</h2>
|
|
</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>
|
|
<hgroup>
|
|
<img class="favicon-big" src="favicon-placeholder.svg">
|
|
<h2>What if the internet wasn't shit, wouldn't that be cool</h2>
|
|
</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>
|
|
<hgroup>
|
|
<img class="favicon-big" src="favicon-placeholder.svg">
|
|
<h2>Did you know: Genderfuckery can !</h2>
|
|
</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>
|
|
<hgroup>
|
|
<img class="favicon-big" src="favicon-placeholder.svg">
|
|
<h2>This is a headline!!</h2>
|
|
</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>
|
|
</main>
|
|
<nav class="right">
|
|
<section id="rule-editor">
|
|
<h1>'Home' Rules</h1>
|
|
<form>
|
|
<input id="points-input" placeholder="+1" inputmode="numeric" style="width:3em">
|
|
<input placeholder="Rules" inputmode="verbatim" style="flex-grow:1;width:100%">
|
|
</form>
|
|
<button>Add</button>
|
|
<div>
|
|
<h2><a>+10 contains:rpg</a><img src="edit.svg"><img src="delete.svg"></h2>
|
|
<h2><a>-10 tag:sponsored</a><img src="edit.svg"><img src="delete.svg"></h2>
|
|
</div>
|
|
</section>
|
|
<section>
|
|
<h1>'Home' List</h1>
|
|
<input placeholder="Add (Feed or page URL)" inputmode="verbatim">
|
|
<button>Subscribe</button>
|
|
<div>
|
|
<h2><a href="index.html"><img class="favicon-small" src="favicon-placeholder.svg">Newspaper A</a><img src="edit.svg"><img src="delete.svg"></h2>
|
|
<h2><a href="index.html"><img class="favicon-small" src="favicon-placeholder.svg">Blog Z</a><img src="edit.svg"><img src="delete.svg"></h2>
|
|
<h2><a href="index.html"><img class="favicon-small" src="favicon-placeholder.svg">Podcast Y</a><img src="edit.svg"><img src="delete.svg"></h2>
|
|
<h2><a href="index.html"><img class="favicon-small" src="favicon-placeholder.svg">Reviewer N</a><img src="edit.svg"><img src="delete.svg"></h2>
|
|
<h2><a href="index.html"><img class="favicon-small" src="favicon-placeholder.svg">Chef V</a><img src="edit.svg"><img src="delete.svg"></h2>
|
|
<h2><a href="index.html"><img class="favicon-small" src="favicon-placeholder.svg">Artist P</a><img src="edit.svg"><img src="delete.svg"></h2>
|
|
<h2><a href="index.html"><img class="favicon-small" src="favicon-placeholder.svg">Newspaper A</a><img src="edit.svg"><img src="delete.svg"></h2>
|
|
<h2><a href="index.html"><img class="favicon-small" src="favicon-placeholder.svg">Blog Z</a><img src="edit.svg"><img src="delete.svg"></h2>
|
|
<h2><a href="index.html"><img class="favicon-small" src="favicon-placeholder.svg">Podcast Y</a><img src="edit.svg"><img src="delete.svg"></h2>
|
|
<h2><a href="index.html"><img class="favicon-small" src="favicon-placeholder.svg">Reviewer N</a><img src="edit.svg"><img src="delete.svg"></h2>
|
|
<h2><a href="index.html"><img class="favicon-small" src="favicon-placeholder.svg">Chef V</a><img src="edit.svg"><img src="delete.svg"></h2>
|
|
<h2><a href="index.html"><img class="favicon-small" src="favicon-placeholder.svg">Artist P</a><img src="edit.svg"><img src="delete.svg"></h2>
|
|
<h2><a href="index.html"><img class="favicon-small" src="favicon-placeholder.svg">Newspaper A</a><img src="edit.svg"><img src="delete.svg"></h2>
|
|
<h2><a href="index.html"><img class="favicon-small" src="favicon-placeholder.svg">Blog Z</a><img src="edit.svg"><img src="delete.svg"></h2>
|
|
<h2><a href="index.html"><img class="favicon-small" src="favicon-placeholder.svg">Podcast Y</a><img src="edit.svg"><img src="delete.svg"></h2>
|
|
<h2><a href="index.html"><img class="favicon-small" src="favicon-placeholder.svg">Reviewer N</a><img src="edit.svg"><img src="delete.svg"></h2>
|
|
<h2><a href="index.html"><img class="favicon-small" src="favicon-placeholder.svg">Chef V</a><img src="edit.svg"><img src="delete.svg"></h2>
|
|
<h2><a href="index.html"><img class="favicon-small" src="favicon-placeholder.svg">Artist P</a><img src="edit.svg"><img src="delete.svg"></h2>
|
|
<h2><a href="index.html"><img class="favicon-small" src="favicon-placeholder.svg">Newspaper A</a><img src="edit.svg"><img src="delete.svg"></h2>
|
|
<h2><a href="index.html"><img class="favicon-small" src="favicon-placeholder.svg">Blog Z</a><img src="edit.svg"><img src="delete.svg"></h2>
|
|
<h2><a href="index.html"><img class="favicon-small" src="favicon-placeholder.svg">Podcast Y</a><img src="edit.svg"><img src="delete.svg"></h2>
|
|
<h2><a href="index.html"><img class="favicon-small" src="favicon-placeholder.svg">Reviewer N</a><img src="edit.svg"><img src="delete.svg"></h2>
|
|
<h2><a href="index.html"><img class="favicon-small" src="favicon-placeholder.svg">Chef V</a><img src="edit.svg"><img src="delete.svg"></h2>
|
|
<h2><a href="index.html"><img class="favicon-small" src="favicon-placeholder.svg">Artist P</a><img src="edit.svg"><img src="delete.svg"></h2>
|
|
</div>
|
|
</section>
|
|
</nav>
|
|
</body>
|
|
</html>
|