commit fa3f598e60650e698f26164ea9f51b0b2082e132
parent 3c996227763eaf024263230cc506aa9be51c2736
Author: breadcat <breadcat@users.noreply.github.com>
Date: Tue, 11 Nov 2025 15:40:44 +0000
Add SVG icons to header and rearrange items
Diffstat:
2 files changed, 16 insertions(+), 11 deletions(-)
diff --git a/static/style.css b/static/style.css
@@ -4,11 +4,14 @@ a{color:#add8e6;text-decoration:none}
/* nav menu */
nav ul{flex:1 1 auto;list-style:none}
-nav {display:flex; border-bottom:1px solid gray;height:50px;margin:0;padding:0}
+nav {display:flex; border-bottom:0.1rem solid gray;margin:0;padding:0}
nav ul {margin: 0; padding: 0}
nav ul li{border-right:1px solid gray}
-nav ul li a,nav ul li strong{padding:15px;display:block}
+nav ul li a,nav ul li strong{padding:1rem;display:inline-block}
+nav ul li a span {vertical-align: middle; padding-left: 0.3rem}
nav ul li a:hover{background-color:#2a2a2a}
+nav ul li a svg{width:1.4rem; vertical-align:middle}
+nav ul li a svg path{fill:#cfcfcf}
nav ul li ul li a,nav>ul>li>a{display:block}
nav ul li ul li ul li a{white-space:nowrap}
nav ul li ul li ul{top:0;left:100%;display:none}
@@ -27,6 +30,10 @@ div#search-container form {border-left:1px solid gray}
div#search-container form input{border:1px solid gray;margin: 8px;padding:8px;outline: none; box-sizing: border-box}
div#search-container form input:focus{border:1px solid white;background-color:#3a3a3a}
+/* fix whitespace in nav */
+nav ul { font-size: 0; }
+nav ul li { font-size: 1rem; }
+
/* gallery styling */
div.gallery-item a{overflow:hidden;text-overflow:ellipsis}
div.gallery-item a svg{filter: invert(100%);}
diff --git a/templates/_header.html b/templates/_header.html
@@ -10,10 +10,9 @@
<nav>
<ul>
<li><strong>#Taggart</strong></li>
-<li><a href="/add">Add files</a></li>
-<li><a href="/">Files</a></li>
-<li>
- <a href="/tags">Tags</a>
+<li><a href="/"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path fill="#000000" d="M4.5 3A2.5 2.5 0 0 0 2 5.5v9A2.5 2.5 0 0 0 4.5 17h11a2.5 2.5 0 0 0 2.5-2.5v-7A2.5 2.5 0 0 0 15.5 5H9.707L8.22 3.513A1.75 1.75 0 0 0 6.982 3H4.5ZM3 5.5A1.5 1.5 0 0 1 4.5 4h2.482a.75.75 0 0 1 .53.22l1.28 1.28L7.44 6.854A.5.5 0 0 1 7.086 7H3V5.5ZM3 8h4.086a1.5 1.5 0 0 0 1.06-.44L9.707 6H15.5A1.5 1.5 0 0 1 17 7.5v7a1.5 1.5 0 0 1-1.5 1.5h-11A1.5 1.5 0 0 1 3 14.5V8Z"/></svg><span>Browse</span></a></li>
+<li><a href="/add"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path fill="#000000" d="M6 10a.5.5 0 0 1 .5-.5h3v-3a.5.5 0 0 1 1 0v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3A.5.5 0 0 1 6 10Zm4 8a8 8 0 1 0 0-16a8 8 0 0 0 0 16Zm0-1a7 7 0 1 1 0-14a7 7 0 0 1 0 14Z"/></svg><span>Add files</span></a></li>
+<li><a href="/tags"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path fill="#000000" d="M13.5 6.5a1 1 0 1 0 0-2a1 1 0 0 0 0 2ZM9.207 2.586A2 2 0 0 1 10.621 2h4.452a2 2 0 0 1 2 2v4.374a2 2 0 0 1-.593 1.422l-5.818 5.76a2 2 0 0 1-2.82-.008l-4.385-4.384a2 2 0 0 1 0-2.828l5.75-5.75ZM10.621 3a1 1 0 0 0-.707.293l-5.75 5.75a1 1 0 0 0 0 1.414l4.384 4.384a1 1 0 0 0 1.41.004l5.819-5.76a1 1 0 0 0 .296-.71V4a1 1 0 0 0-1-1h-4.452Zm-7.624 8.8a2 2 0 0 0 .46 2.114l2.977 2.977a4 4 0 0 0 5.642.014l4.404-4.36a2 2 0 0 0 .593-1.42v-.573l-4.997 4.953a4.086 4.086 0 0 1-.147.14l-.556.55a3 3 0 0 1-4.232-.01l-.499-.5a4.047 4.047 0 0 1-.208-.194l-2.977-2.977a1.992 1.992 0 0 1-.46-.714Z"/></svg><span>Tags</span></a>
<ul class="sub-menu">
{{range $cat, $tags := .Tags}}
<li>
@@ -26,11 +25,10 @@
</ul>
</li>
{{end}}
- <li><a href="/bulk-tag">Bulk Editor</a></li>
- <li><a href="/untagged">Untagged</a></li>
- </ul>
-</li>
-<li><a href="/settings">Settings</a></li>
+<li><a href="/bulk-tag">Bulk Editor</a></li>
+<li><a href="/untagged">Untagged</a></li>
+</ul></li>
+<li><a href="/settings"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path fill="#000000" d="M9 6.5a4.5 4.5 0 0 1 6.352-4.102a.5.5 0 0 1 .148.809L13.207 5.5L14.5 6.793L16.793 4.5a.5.5 0 0 1 .809.147a4.5 4.5 0 0 1-5.207 6.216L6.03 17.311a2.357 2.357 0 0 1-3.374-3.293L9.082 7.36A4.52 4.52 0 0 1 9 6.5ZM13.5 3a3.5 3.5 0 0 0-3.387 4.386a.5.5 0 0 1-.125.473l-6.612 6.854a1.357 1.357 0 0 0 1.942 1.896l6.574-6.66a.5.5 0 0 1 .512-.124a3.5 3.5 0 0 0 4.521-4.044l-2.072 2.073a.5.5 0 0 1-.707 0l-2-2a.5.5 0 0 1 0-.708l2.073-2.072a3.518 3.518 0 0 0-.72-.074Z"/></svg><span>Settings</span></a></li>
</ul>
<div id="search-container">
