feat: unified navbars
This commit is contained in:
Sara
parent
884453527c
commit
bf0336b9b1
136
index.html
136
index.html
|
|
@ -7,9 +7,11 @@
|
||||||
:root {
|
:root {
|
||||||
--back-color-0: #222;
|
--back-color-0: #222;
|
||||||
--back-color-1: #333;
|
--back-color-1: #333;
|
||||||
|
--back-color-2: #444;
|
||||||
|
|
||||||
--front-color-0: darkgray;
|
--front-color-0: darkgray;
|
||||||
--front-color-1: darkgray;
|
--front-color-1: darkgray;
|
||||||
|
--front-color-2: darkgray;
|
||||||
|
|
||||||
--links: #4A4F;
|
--links: #4A4F;
|
||||||
--input-back-color: #111;
|
--input-back-color: #111;
|
||||||
|
|
@ -20,10 +22,12 @@
|
||||||
@media (prefers-color-scheme: light) {
|
@media (prefers-color-scheme: light) {
|
||||||
:root {
|
:root {
|
||||||
--back-color-0: #FFF;
|
--back-color-0: #FFF;
|
||||||
--back-color-1: #DDDF;
|
--back-color-1: #DDD;
|
||||||
|
--back-color-2: #CCC;
|
||||||
|
|
||||||
--front-color-0: #555;
|
--front-color-0: #555;
|
||||||
--front-color-1: #555;
|
--front-color-1: #555;
|
||||||
|
--front-color-2: #555;
|
||||||
|
|
||||||
--links: #22D;
|
--links: #22D;
|
||||||
--links: #383;
|
--links: #383;
|
||||||
|
|
@ -34,8 +38,8 @@
|
||||||
|
|
||||||
:root {
|
:root {
|
||||||
--interaction-outline: 2px dotted var(--links);
|
--interaction-outline: 2px dotted var(--links);
|
||||||
--sidebar-width: 250px;
|
--sidebar-width: 300px;
|
||||||
--sidebar-padding: 30px;
|
--sidebar-padding: 20px;
|
||||||
--border-width: 1px;
|
--border-width: 1px;
|
||||||
--sidebar-true-width: calc(var(--sidebar-width) + var(--sidebar-padding) * 2.0 + var(--border-width));
|
--sidebar-true-width: calc(var(--sidebar-width) + var(--sidebar-padding) * 2.0 + var(--border-width));
|
||||||
--border-radius: 1px;
|
--border-radius: 1px;
|
||||||
|
|
@ -119,34 +123,57 @@ main {
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.sidebar {
|
nav {
|
||||||
|
display: flex;
|
||||||
|
flex-flow: column nowrap;
|
||||||
|
justify-content: stretch;
|
||||||
background-color: var(--back-color-1);
|
background-color: var(--back-color-1);
|
||||||
color: var(--front-color-1);
|
color: var(--front-color-1);
|
||||||
width: var(--sidebar-width);
|
width: calc(var(--sidebar-width) + var(--sidebar-padding) * 2);
|
||||||
height: 100%;
|
height: 100%;
|
||||||
padding: 10px var(--sidebar-padding);
|
max-height: 100%;
|
||||||
|
max-height: 100vh;
|
||||||
|
padding: 0;
|
||||||
position: fixed;
|
position: fixed;
|
||||||
top: 0;
|
top: 0;
|
||||||
|
float: left;
|
||||||
|
left: 0;
|
||||||
|
border-right: var(--border-width) solid var(--front-color-1);
|
||||||
}
|
}
|
||||||
|
|
||||||
.sidebar > h2 {
|
nav > section {
|
||||||
|
display: flex;
|
||||||
|
flex-flow: column nowrap;
|
||||||
|
height: 50%;
|
||||||
|
max-height: 50%;
|
||||||
|
overflow-y: hidden;
|
||||||
|
padding: 0px var(--sidebar-padding);
|
||||||
|
border-bottom: var(--border-width) solid var(--front-color-1);
|
||||||
|
padding-bottom: 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;
|
display: flex;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
padding: 5px 0px;
|
padding: 5px 0px;
|
||||||
margin: 0px;
|
margin: 0px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.sidebar > h2 > a {
|
nav > section > div > h2 > a {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.sidebar > h2 > div {
|
nav > section > div > h2 > img {
|
||||||
display: inline-block;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sidebar > h2 > img {
|
|
||||||
display: inline;
|
display: inline;
|
||||||
height: 1em;
|
height: 1em;
|
||||||
vertical-align: sub;
|
vertical-align: sub;
|
||||||
|
|
@ -154,24 +181,11 @@ main {
|
||||||
margin: 0px 2px;
|
margin: 0px 2px;
|
||||||
}
|
}
|
||||||
|
|
||||||
nav {
|
nav > section > input {
|
||||||
float: left;
|
|
||||||
left: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
#sidebar-right {
|
|
||||||
margin-left: auto;
|
|
||||||
margin-right: 0;
|
|
||||||
text-align: right;
|
|
||||||
right: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sidebar > input {
|
|
||||||
--hpadd: 5px;
|
--hpadd: 5px;
|
||||||
|
|
||||||
padding: 5px var(--hpadd);
|
padding: 5px var(--hpadd);
|
||||||
width: calc(100% - var(--hpadd) * 2);
|
width: calc(100% - var(--hpadd) * 2);
|
||||||
margin-top: 10px;
|
|
||||||
font-size: 110%;
|
font-size: 110%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -250,6 +264,7 @@ img.favicon-small {
|
||||||
width: 1em;
|
width: 1em;
|
||||||
height: 1em;
|
height: 1em;
|
||||||
margin-left: 0.5em;
|
margin-left: 0.5em;
|
||||||
|
margin-right: 0.5em;
|
||||||
vertical-align: sub;
|
vertical-align: sub;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -266,17 +281,63 @@ img.favicon-big {
|
||||||
</head>
|
</head>
|
||||||
<!---------------------- HERE BEGINS THE LAYOUT -------------------->
|
<!---------------------- HERE BEGINS THE LAYOUT -------------------->
|
||||||
<body>
|
<body>
|
||||||
<nav id="sidebar-left" class="sidebar">
|
<nav>
|
||||||
|
<section id="your-lists">
|
||||||
<h1>Your Lists</h1>
|
<h1>Your Lists</h1>
|
||||||
<h2><div>Home</div><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>
|
||||||
|
<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">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">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">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">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">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">Makers</a><img src="edit.svg"><img src="delete.svg"></h2>
|
||||||
<input placeholder="Add (List name or URL)" inputmode="verbatim" class="add-element">
|
<h2><a href="index.html">Social</a><img src="edit.svg"><img src="delete.svg"></h2>
|
||||||
<button>Add list</button>
|
<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>
|
||||||
|
<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>
|
</nav>
|
||||||
<main>
|
<main>
|
||||||
<search>
|
<search>
|
||||||
|
|
@ -378,16 +439,5 @@ img.favicon-big {
|
||||||
</article></a>
|
</article></a>
|
||||||
</section>
|
</section>
|
||||||
</main>
|
</main>
|
||||||
<section id="sidebar-right" class="sidebar">
|
|
||||||
<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>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue