index.html mockup
This commit is contained in:
Sara
commit
8c5de4053c
273
index.html
Normal file
273
index.html
Normal file
|
|
@ -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>
|
||||
Loading…
Reference in a new issue