4d96dfb9ac
The layout was capped at 1200px and listed links in a single column. Drop the cap and lay the cards out in a grid: three per row on wide screens, two from 1000px, one below that. To make the narrower cards work, shorten the edit action to an icon button so the title and URL keep their room, and let the edit form's field and button rows wrap. Also fixes pre-existing horizontal overflow on phone widths by stacking the sidebar above the content and letting the add-link form wrap. Grid tracks use minmax(0, 1fr) so cards can shrink below their content's intrinsic width instead of pushing the page wider. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
93 lines
4.7 KiB
HTML
93 lines
4.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="de">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>{% block title %}LinkVault{% endblock %}</title>
|
|
<script src="https://unpkg.com/htmx.org@2.0.3"></script>
|
|
<style>
|
|
:root {
|
|
--bg: #0f172a; --panel: #1e293b; --panel2: #273449;
|
|
--text: #e2e8f0; --muted: #94a3b8; --accent: #6366f1;
|
|
--accent-hover: #818cf8; --border: #334155; --danger: #ef4444;
|
|
}
|
|
* { box-sizing: border-box; }
|
|
body {
|
|
margin: 0; font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
|
|
background: var(--bg); color: var(--text); line-height: 1.5;
|
|
}
|
|
a { color: var(--accent-hover); text-decoration: none; }
|
|
a:hover { text-decoration: underline; }
|
|
header.topbar {
|
|
display: flex; align-items: center; justify-content: space-between;
|
|
padding: 12px 24px; background: var(--panel); border-bottom: 1px solid var(--border);
|
|
}
|
|
header.topbar .brand { font-weight: 700; font-size: 1.2rem; }
|
|
header.topbar .brand span { color: var(--accent-hover); }
|
|
.user-info { color: var(--muted); font-size: .9rem; display: flex; gap: 12px; align-items: center; }
|
|
button, input[type=submit] {
|
|
background: var(--accent); color: white; border: none; border-radius: 8px;
|
|
padding: 9px 16px; font-size: .95rem; cursor: pointer; font-weight: 500;
|
|
}
|
|
button:hover { background: var(--accent-hover); }
|
|
button.ghost { background: transparent; border: 1px solid var(--border); color: var(--muted); }
|
|
button.ghost:hover { background: var(--panel2); color: var(--text); }
|
|
button.danger { background: transparent; color: var(--muted); padding: 4px 8px; font-size: .8rem; }
|
|
button.danger:hover { color: var(--danger); background: transparent; }
|
|
input[type=text], input[type=email], input[type=password], input[type=url] {
|
|
background: var(--panel2); border: 1px solid var(--border); color: var(--text);
|
|
border-radius: 8px; padding: 10px 12px; font-size: .95rem; width: 100%;
|
|
}
|
|
input:focus, select:focus { outline: none; border-color: var(--accent); }
|
|
select {
|
|
background: var(--panel2); border: 1px solid var(--border); color: var(--text);
|
|
border-radius: 8px; padding: 6px 10px; font-size: .85rem; font-family: inherit;
|
|
cursor: pointer;
|
|
}
|
|
.layout { display: flex; gap: 24px; margin: 24px auto; padding: 0 24px; }
|
|
.sidebar { width: 240px; flex-shrink: 0; }
|
|
.main { flex: 1; min-width: 0; }
|
|
.panel { background: var(--panel); border: 1px solid var(--border); border-radius: 12px; padding: 16px; margin-bottom: 16px; }
|
|
|
|
/* Linkliste: bis zu drei Karten pro Zeile, je nach Fensterbreite. */
|
|
#links { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; }
|
|
#links > .panel { margin-bottom: 0; }
|
|
#links > #empty-state { grid-column: 1 / -1; }
|
|
@media (min-width: 1000px) { #links { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
|
|
@media (min-width: 1500px) { #links { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
|
|
|
|
/* Auf schmalen Geräten die Seitenleiste über den Inhalt stellen. */
|
|
@media (max-width: 800px) {
|
|
.layout { flex-direction: column; gap: 16px; padding: 0 16px; }
|
|
.sidebar { width: auto; }
|
|
}
|
|
.facet-group h3 { font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin: 16px 0 8px; }
|
|
.facet { display: flex; justify-content: space-between; padding: 5px 8px; border-radius: 6px; font-size: .9rem; }
|
|
.facet:hover { background: var(--panel2); text-decoration: none; }
|
|
.facet.active { background: var(--accent); color: white; }
|
|
.facet .count { color: var(--muted); font-size: .8rem; }
|
|
.facet.active .count { color: #e0e7ff; }
|
|
.auth-wrap { max-width: 380px; margin: 8vh auto; }
|
|
.auth-wrap .panel { padding: 28px; }
|
|
.auth-wrap h1 { margin-top: 0; }
|
|
.field { margin-bottom: 14px; }
|
|
.field label { display: block; font-size: .85rem; color: var(--muted); margin-bottom: 5px; }
|
|
.error { background: #7f1d1d; color: #fecaca; padding: 10px 12px; border-radius: 8px; margin-bottom: 14px; font-size: .9rem; }
|
|
.muted { color: var(--muted); }
|
|
.htmx-indicator { opacity: 0; transition: opacity .2s; }
|
|
.htmx-request .htmx-indicator { opacity: 1; }
|
|
.htmx-request.htmx-indicator { opacity: 1; }
|
|
footer.app-footer {
|
|
text-align: center; padding: 16px 24px; margin-top: 24px;
|
|
color: var(--muted); font-size: .8rem; border-top: 1px solid var(--border);
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
{% block body %}{% endblock %}
|
|
<footer class="app-footer">
|
|
© {{ app_author }} · Version {{ app_version }} · {{ app_host }}
|
|
</footer>
|
|
</body>
|
|
</html>
|