Sara/personal-webportal
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: Sara:31c465edda2b1bb1dd94d95fc6cc1acc535267d2
Branches Tags
Sara:main
Sara:experiment/single-navbar
..
compare: Sara:884453527cd3953e790a34779506577d3e01900c
Branches Tags
Sara:main
Sara:experiment/single-navbar

No commits in common. "31c465edda2b1bb1dd94d95fc6cc1acc535267d2" and "884453527cd3953e790a34779506577d3e01900c" have entirely different histories.
31c465edda ... 884453527c

3 changed files with 58 additions and 108 deletions
Show stats Expand all files Collapse all files

8
delete.svg
View file

@ -15,14 +15,14 @@
id="layer1">
<g
id="g9"
transform="matrix(0.90483231,0,0,0.90483233,6.4460046,6.446021)"
style="stroke-width:21.6453;stroke-dasharray:none">
transform="matrix(0.92722798,0,0,0.927228,3.4949718,3.4949885)"
style="stroke-width:21.1225;stroke-dasharray:none">
<path
style="fill:#419a1d;stroke:#419a1d;stroke-width:21.6453;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
style="fill:#419a1d;stroke:#419a1d;stroke-width:21.1225;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.6453;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
style="fill:#419a1d;stroke:#419a1d;stroke-width:21.1225;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>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1,011 B

After

Width:  |  Height:  |  Size: 1,010 B

8
icons/source-files/delete.svg
View file

@ -74,14 +74,14 @@
</g>
<g
id="g9"
transform="matrix(0.90483231,0,0,0.90483233,6.4460046,6.446021)"
style="stroke-width:21.6453;stroke-dasharray:none">
transform="matrix(0.92722798,0,0,0.927228,3.4949718,3.4949885)"
style="stroke-width:21.1225;stroke-dasharray:none">
<path
style="fill:#419a1d;stroke:#419a1d;stroke-width:21.6453;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
style="fill:#419a1d;stroke:#419a1d;stroke-width:21.1225;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.6453;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
style="fill:#419a1d;stroke:#419a1d;stroke-width:21.1225;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>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.9 KiB

After

Width:  |  Height:  |  Size: 2.9 KiB

144
index.html
View file

@ -7,11 +7,9 @@
: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;
@ -22,12 +20,10 @@
@media (prefers-color-scheme: light) {
:root {
--back-color-0: #FFF;
--back-color-1: #DDD;
--back-color-2: #CCC;
--back-color-1: #DDDF;
--front-color-0: #555;
--front-color-1: #555;
--front-color-2: #555;
--links: #22D;
--links: #383;
@ -38,8 +34,8 @@
:root {
--interaction-outline: 2px dotted var(--links);
--sidebar-width: 300px;
--sidebar-padding: 20px;
--sidebar-width: 250px;
--sidebar-padding: 30px;
--border-width: 1px;
--sidebar-true-width: calc(var(--sidebar-width) + var(--sidebar-padding) * 2.0 + var(--border-width));
--border-radius: 1px;
@ -123,57 +119,34 @@ main {
justify-content: center;
}
nav {
display: flex;
flex-flow: column nowrap;
justify-content: stretch;
.sidebar {
background-color: var(--back-color-1);
color: var(--front-color-1);
width: calc(var(--sidebar-width) + var(--sidebar-padding) * 2);
width: var(--sidebar-width);
height: 100%;
max-height: 100%;
max-height: 100vh;
padding: 0;
padding: 10px var(--sidebar-padding);
position: fixed;
top: 0;
float: left;
left: 0;
border-right: var(--border-width) solid var(--front-color-1);
}
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 {
.sidebar > h2 {
display: flex;
width: 100%;
padding: 5px 0px;
margin: 0px;
}
nav > section > div > h2 > a {
.sidebar > h2 > a {
display: inline-block;
width: 100%;
}
nav > section > div > h2 > img {
.sidebar > h2 > div {
display: inline-block;
width: 100%;
}
.sidebar > h2 > img {
display: inline;
height: 1em;
vertical-align: sub;
@ -181,11 +154,24 @@ nav > section > div > h2 > img {
margin: 0px 2px;
}
nav > section > input {
nav {
float: left;
left: 0;
}
#sidebar-right {
margin-left: auto;
margin-right: 0;
text-align: right;
right: 0;
}
.sidebar > input {
--hpadd: 5px;
padding: 5px var(--hpadd);
width: calc(100% - var(--hpadd) * 2);
margin-top: 10px;
font-size: 110%;
}
@ -264,7 +250,6 @@ img.favicon-small {
width: 1em;
height: 1em;
margin-left: 0.5em;
margin-right: 0.5em;
vertical-align: sub;
}
@ -281,63 +266,17 @@ img.favicon-big {
</head>
<!---------------------- HERE BEGINS THE LAYOUT -------------------->
<body>
<nav>
<section id="your-lists">
<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>
<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>
@ -439,5 +378,16 @@ 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>