joshlaymon/Illustrations
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update web/templates/base.html

Browse Source 
trying to get the gradient working
This commit is contained in:
Joshua Laymon 2025-08-13 13:06:18 +00:00
parent 0b895dd4d0
commit 9299ec5674
1 changed files with 22 additions and 71 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

93
web/templates/base.html
View File

@ -5,82 +5,38 @@
<meta charset="utf-8">
<title>{% block title %}Illustrations{% endblock %}</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!-- Your global stylesheet (keep if you already have one) -->
<link rel="stylesheet" href="{% static 'app.css' %}">
{% block extra_head %}{% endblock %}
<style>
/* Scoped navbar polish only — leaves your existing look intact */
:root{
--nav-bg: #f8fafc;
--nav-border: #e5e7eb;
--nav-ink: #1f2937;
--nav-ink-muted: #6b7280;
--nav-brand: #2f6cab; /* soft blue */
--nav-brand-hover: #1f4c7a;
--btn-bg: #ffffff;
--btn-border: #d1d5db;
--btn-hover: #eef2f7;
}
.topbar-wrap{
border-bottom:1px solid var(--nav-border);
background:var(--nav-bg);
}
.topbar{
max-width:1100px; margin:0 auto; padding:14px 16px; /* thicker bar */
display:flex; align-items:center; gap:14px; justify-content:space-between;
font-size:17px; /* slightly larger */
}
.brand{
display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--nav-ink);
font-weight:600; letter-spacing:.2px;
--nav-bg:#f8fafc; --nav-border:#e5e7eb; --nav-ink:#1f2937; --nav-ink-muted:#6b7280;
--nav-brand:#2f6cab; --nav-brand-hover:#1f4c7a; --btn-bg:#fff; --btn-border:#d1d5db; --btn-hover:#eef2f7;
}
.topbar-wrap{border-bottom:1px solid var(--nav-border); background:var(--nav-bg);}
.topbar{max-width:1100px; margin:0 auto; padding:14px 16px; display:flex; align-items:center; gap:14px; justify-content:space-between; font-size:17px;}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--nav-ink); font-weight:600; letter-spacing:.2px;}
.brand .tagline{color:var(--nav-ink-muted); font-weight:500; font-size:15px}
.nav-right{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
/* Rectangular buttons with subtle separation + hover */
.nav-btn{
display:inline-flex; align-items:center; justify-content:center;
padding:8px 12px; border-radius:10px;
background:var(--btn-bg); border:1px solid var(--btn-border); color:var(--nav-ink);
text-decoration:none; cursor:pointer; line-height:1;
transition:background .12s ease, border-color .12s ease, box-shadow .12s ease;
white-space:nowrap;
}
.nav-btn:hover{ background:var(--btn-hover); }
.nav-btn.primary{ background:var(--nav-brand); border-color:var(--nav-brand); color:#fff; }
.nav-btn.primary:hover{ background:var(--nav-brand-hover); border-color:var(--nav-brand-hover); }
.nav-btn.danger{ background:#b91c1c; border-color:#b91c1c; color:#fff; }
.nav-btn.danger:hover{ filter:brightness(.95); }
.user-chip{
padding:6px 10px; border-radius:999px; border:1px solid var(--nav-border); background:#fff;
color:var(--nav-ink-muted); font-size:14px;
}
/* Page frame */
.page{
max-width:1100px; margin:18px auto; padding:0 16px;
}
/* Messages (Django messages framework) */
.nav-btn{display:inline-flex; align-items:center; justify-content:center; padding:8px 12px; border-radius:10px; background:var(--btn-bg); border:1px solid var(--btn-border); color:var(--nav-ink); text-decoration:none; cursor:pointer; line-height:1; transition:background .12s, border-color .12s, box-shadow .12s;}
.nav-btn:hover{background:var(--btn-hover)}
.nav-btn.primary{background:var(--nav-brand); border-color:var(--nav-brand); color:#fff}
.nav-btn.primary:hover{background:var(--nav-brand-hover); border-color:var(--nav-brand-hover)}
.nav-btn.danger{background:#b91c1c; border-color:#b91c1c; color:#fff}
.nav-btn.danger:hover{filter:brightness(.95)}
.user-chip{padding:6px 10px; border-radius:999px; border:1px solid var(--nav-border); background:#fff; color:var(--nav-ink-muted); font-size:14px}
.page{max-width:1100px; margin:18px auto; padding:0 16px}
.messages{margin:12px 0; display:grid; gap:8px}
.msg{padding:10px 12px; border-radius:10px; border:1px solid #e5e7eb; background:#fff;}
.msg.info{border-color:#dbeafe; background:#eff6ff;}
.msg.success{border-color:#bbf7d0; background:#ecfdf5;}
.msg.warning{border-color:#fde68a; background:#fffbeb;}
.msg.error{border-color:#fecaca; background:#fef2f2;}
@media (max-width:780px){
.topbar{gap:10px; padding:12px 12px}
.nav-right{gap:8px}
.nav-btn{padding:8px 10px}
}
.msg{padding:10px 12px; border-radius:10px; border:1px solid #e5e7eb; background:#fff}
.msg.info{border-color:#dbeafe; background:#eff6ff}
.msg.success{border-color:#bbf7d0; background:#ecfdf5}
.msg.warning{border-color:#fde68a; background:#fffbeb}
.msg.error{border-color:#fecaca; background:#fef2f2}
@media (max-width:780px){ .topbar{gap:10px; padding:12px 12px} .nav-right{gap:8px} .nav-btn{padding:8px 10px} }
</style>
</head>
<body>
<!-- in <body> tag -->
<!-- ✅ single body tag with block for page-specific classes -->
<body class="{% block body_class %}{% endblock %}">
<!-- Top navigation -->
<div class="topbar-wrap">
<div class="topbar">
<a href="{% url 'search' %}" class="brand">
@ -89,7 +45,6 @@
</a>
<div class="nav-right">
<!-- Left group: main pages -->
<a class="nav-btn" href="{% url 'search' %}">Search</a>
<a class="nav-btn" href="{% url 'stats' %}">Statistics</a>
@ -98,11 +53,9 @@
<a class="nav-btn" href="{% url 'export_csv' %}">Backup (CSV)</a>
{% endif %}
<!-- Right group: user -->
{% if user.is_authenticated %}
<span class="user-chip">Signed in: {{ user.username }}</span>
<form method="post" action="{% url 'logout' %}" style="display:inline;">
{% csrf_token %}
<form method="post" action="{% url 'logout' %}" style="display:inline;">{% csrf_token %}
<button class="nav-btn">Logout</button>
</form>
{% else %}
@ -112,7 +65,6 @@
</div>
</div>
<!-- Messages -->
<div class="page">
{% if messages %}
<div class="messages">
@ -123,7 +75,6 @@
{% endif %}
</div>
<!-- Main content -->
<main class="page">
{% block content %}{% endblock %}
</main>