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

Compare commits

base: Sara:main
Branches Tags
Sara:main
Sara:experiment/single-navbar
..
compare: Sara:experiment/single-navbar
Branches Tags
Sara:main
Sara:experiment/single-navbar

No commits in common. "main" and "experiment/single-navbar" have entirely different histories.
main ... experiment

1 changed files with 38 additions and 76 deletions
Show stats Expand all files Collapse all files

114
index.html
View file

@ -92,7 +92,6 @@ input {
border: none; border: none;
border-radius: var(--border-radius); border-radius: var(--border-radius);
padding: 3px var(--input-padding); padding: 3px var(--input-padding);
font-size: 110%;
} }
input:hover { input:hover {
@ -127,7 +126,7 @@ main {
nav { nav {
display: flex; display: flex;
flex-flow: column nowrap; flex-flow: column nowrap;
justify-content: space-between; 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: calc(var(--sidebar-width) + var(--sidebar-padding) * 2); width: calc(var(--sidebar-width) + var(--sidebar-padding) * 2);
@ -137,43 +136,20 @@ nav {
padding: 0; padding: 0;
position: fixed; position: fixed;
top: 0; top: 0;
}
nav.left {
float: left; float: left;
left: 0; left: 0;
border-right: var(--border-width) solid var(--front-color-1); 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 { nav > section {
display: flex; display: flex;
flex: 1 1 0;
flex-flow: column nowrap; flex-flow: column nowrap;
flex-grow: 1; height: 50%;
max-height: auto; max-height: 50%;
overflow-y: hidden; overflow-y: hidden;
padding: 0px var(--sidebar-padding); padding: 0px var(--sidebar-padding);
border-bottom: var(--border-width) solid var(--front-color-1); border-bottom: var(--border-width) solid var(--front-color-1);
padding-bottom: 2em; padding-bottom: 0.5em;
}
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 { nav > section > div {
@ -200,10 +176,9 @@ nav > section > div > h2 > a {
nav > section > div > h2 > img { nav > section > div > h2 > img {
display: inline; display: inline;
height: 1em; height: 1em;
vertical-align: sub;
object-position: right; object-position: right;
margin: 0px 2px; margin: 0px 2px;
align-self: center;
justify-self: flex-end;
} }
nav > section > input { nav > section > input {
@ -211,6 +186,7 @@ nav > section > input {
padding: 5px var(--hpadd); padding: 5px var(--hpadd);
width: calc(100% - var(--hpadd) * 2); width: calc(100% - var(--hpadd) * 2);
font-size: 110%;
} }
search { search {
@ -305,7 +281,7 @@ img.favicon-big {
</head> </head>
<!---------------------- HERE BEGINS THE LAYOUT --------------------> <!---------------------- HERE BEGINS THE LAYOUT -------------------->
<body> <body>
<nav class="left"> <nav>
<section id="your-lists"> <section id="your-lists">
<h1>Your Lists</h1> <h1>Your Lists</h1>
<input placeholder="Add (List name or URL)" inputmode="verbatim" class="add-element"> <input placeholder="Add (List name or URL)" inputmode="verbatim" class="add-element">
@ -331,6 +307,37 @@ img.favicon-big {
<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>
</div> </div>
</section> </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>
@ -432,50 +439,5 @@ img.favicon-big {
</article></a> </article></a>
</section> </section>
</main> </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> </body>
</html> </html>