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

Compare commits

merge into: Sara:experiment/single-navbar
Branches Tags
Sara:main
Sara:experiment/single-navbar
...
pull from: Sara:main
Branches Tags
Sara:main
Sara:experiment/single-navbar

1 commit
experiment ... main

Author SHA1 Message Date
Sara 376e940f34 feat: added rule editor 2025-07-10 15:05:03 +02:00
1 changed files with 76 additions and 38 deletions
Show stats Expand all files Collapse all files

114
index.html
View file

@ -92,6 +92,7 @@ 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 {
@ -126,7 +127,7 @@ main {
nav { nav {
display: flex; display: flex;
flex-flow: column nowrap; flex-flow: column nowrap;
justify-content: stretch; justify-content: space-between;
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);
@ -136,20 +137,43 @@ 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;
height: 50%; flex-grow: 1;
max-height: 50%; max-height: auto;
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: 0.5em; padding-bottom: 2em;
}
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 {
@ -176,9 +200,10 @@ 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 {
@ -186,7 +211,6 @@ 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 {
@ -281,7 +305,7 @@ img.favicon-big {
</head> </head>
<!---------------------- HERE BEGINS THE LAYOUT --------------------> <!---------------------- HERE BEGINS THE LAYOUT -------------------->
<body> <body>
<nav> <nav class="left">
<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">
@ -307,37 +331,6 @@ 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>
@ -439,5 +432,50 @@ 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>