Compare commits
2 commits
884453527c
...
31c465edda
| Author | SHA1 | Date | |
|---|---|---|---|
|
31c465edda | ||
|
|
bf0336b9b1 |
|
|
@ -15,14 +15,14 @@
|
|||
id="layer1">
|
||||
<g
|
||||
id="g9"
|
||||
transform="matrix(0.92722798,0,0,0.927228,3.4949718,3.4949885)"
|
||||
style="stroke-width:21.1225;stroke-dasharray:none">
|
||||
transform="matrix(0.90483231,0,0,0.90483233,6.4460046,6.446021)"
|
||||
style="stroke-width:21.6453;stroke-dasharray:none">
|
||||
<path
|
||||
style="fill:#419a1d;stroke:#419a1d;stroke-width:21.1225;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
|
||||
style="fill:#419a1d;stroke:#419a1d;stroke-width:21.6453;stroke-linecap:round;stroke-linejoin: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.1225;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
|
||||
style="fill:#419a1d;stroke:#419a1d;stroke-width:21.6453;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
|
||||
d="M 3.698678,131.76798 131.768,3.6986619"
|
||||
id="path8" />
|
||||
</g>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 1,010 B After Width: | Height: | Size: 1,011 B |
|
|
@ -74,14 +74,14 @@
|
|||
</g>
|
||||
<g
|
||||
id="g9"
|
||||
transform="matrix(0.92722798,0,0,0.927228,3.4949718,3.4949885)"
|
||||
style="stroke-width:21.1225;stroke-dasharray:none">
|
||||
transform="matrix(0.90483231,0,0,0.90483233,6.4460046,6.446021)"
|
||||
style="stroke-width:21.6453;stroke-dasharray:none">
|
||||
<path
|
||||
style="fill:#419a1d;stroke:#419a1d;stroke-width:21.1225;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
|
||||
style="fill:#419a1d;stroke:#419a1d;stroke-width:21.6453;stroke-linecap:round;stroke-linejoin: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.1225;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
|
||||
style="fill:#419a1d;stroke:#419a1d;stroke-width:21.6453;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
|
||||
d="M 3.698678,131.76798 131.768,3.6986619"
|
||||
id="path8" />
|
||||
</g>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 2.9 KiB After Width: | Height: | Size: 2.9 KiB |
150
index.html
150
index.html
|
|
@ -7,9 +7,11 @@
|
|||
: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;
|
||||
|
|
@ -20,10 +22,12 @@
|
|||
@media (prefers-color-scheme: light) {
|
||||
:root {
|
||||
--back-color-0: #FFF;
|
||||
--back-color-1: #DDDF;
|
||||
--back-color-1: #DDD;
|
||||
--back-color-2: #CCC;
|
||||
|
||||
--front-color-0: #555;
|
||||
--front-color-1: #555;
|
||||
--front-color-2: #555;
|
||||
|
||||
--links: #22D;
|
||||
--links: #383;
|
||||
|
|
@ -34,8 +38,8 @@
|
|||
|
||||
:root {
|
||||
--interaction-outline: 2px dotted var(--links);
|
||||
--sidebar-width: 250px;
|
||||
--sidebar-padding: 30px;
|
||||
--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;
|
||||
|
|
@ -119,34 +123,57 @@ main {
|
|||
justify-content: center;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
nav {
|
||||
display: flex;
|
||||
flex-flow: column nowrap;
|
||||
justify-content: stretch;
|
||||
background-color: var(--back-color-1);
|
||||
color: var(--front-color-1);
|
||||
width: var(--sidebar-width);
|
||||
width: calc(var(--sidebar-width) + var(--sidebar-padding) * 2);
|
||||
height: 100%;
|
||||
padding: 10px var(--sidebar-padding);
|
||||
max-height: 100%;
|
||||
max-height: 100vh;
|
||||
padding: 0;
|
||||
position: fixed;
|
||||
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;
|
||||
width: 100%;
|
||||
padding: 5px 0px;
|
||||
margin: 0px;
|
||||
}
|
||||
|
||||
.sidebar > h2 > a {
|
||||
nav > section > div > h2 > a {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.sidebar > h2 > div {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.sidebar > h2 > img {
|
||||
nav > section > div > h2 > img {
|
||||
display: inline;
|
||||
height: 1em;
|
||||
vertical-align: sub;
|
||||
|
|
@ -154,24 +181,11 @@ main {
|
|||
margin: 0px 2px;
|
||||
}
|
||||
|
||||
nav {
|
||||
float: left;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
#sidebar-right {
|
||||
margin-left: auto;
|
||||
margin-right: 0;
|
||||
text-align: right;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.sidebar > input {
|
||||
nav > section > input {
|
||||
--hpadd: 5px;
|
||||
|
||||
padding: 5px var(--hpadd);
|
||||
width: calc(100% - var(--hpadd) * 2);
|
||||
margin-top: 10px;
|
||||
font-size: 110%;
|
||||
}
|
||||
|
||||
|
|
@ -250,6 +264,7 @@ img.favicon-small {
|
|||
width: 1em;
|
||||
height: 1em;
|
||||
margin-left: 0.5em;
|
||||
margin-right: 0.5em;
|
||||
vertical-align: sub;
|
||||
}
|
||||
|
||||
|
|
@ -266,17 +281,63 @@ img.favicon-big {
|
|||
</head>
|
||||
<!---------------------- HERE BEGINS THE LAYOUT -------------------->
|
||||
<body>
|
||||
<nav id="sidebar-left" class="sidebar">
|
||||
<h1>Your Lists</h1>
|
||||
<h2><div>Home</div><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>
|
||||
<input placeholder="Add (List name or URL)" inputmode="verbatim" class="add-element">
|
||||
<button>Add list</button>
|
||||
<nav>
|
||||
<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>
|
||||
<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>
|
||||
<main>
|
||||
<search>
|
||||
|
|
@ -378,16 +439,5 @@ img.favicon-big {
|
|||
</article></a>
|
||||
</section>
|
||||
</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>
|
||||
</html>
|
||||
|
|
|
|||
Loading…
Reference in a new issue