github/datasette
1
0
Fork 0
mirror of https://github.com/simonw/datasette.git synced 2025-12-10 16:51:24 +01:00
Code Issues Projects Releases Packages Wiki Activity

header.hd and footer.ft, refs #2420

Browse source
This commit is contained in:
Simon Willison 2024-09-05 19:57:27 -07:00
commit 6da8d09a14
3 changed files with 32 additions and 34 deletions
Download patch file Download diff file Expand all files Collapse all files

60
datasette/static/app.css
View file

@ -265,8 +265,8 @@ a.not-underlined {
/* Page Furniture ========================================================= */ /* Page Furniture ========================================================= */
/* Header */ /* Header */
header, header.hd,
footer { footer.ft {
padding: 0.6rem 1rem 0.5rem 1rem; padding: 0.6rem 1rem 0.5rem 1rem;
background-color: #276890; background-color: #276890;
background: linear-gradient(180deg, rgba(96,144,173,1) 0%, rgba(39,104,144,1) 50%); background: linear-gradient(180deg, rgba(96,144,173,1) 0%, rgba(39,104,144,1) 50%);
@ -275,15 +275,18 @@ footer {
box-sizing: border-box; box-sizing: border-box;
min-height: 2.6rem; min-height: 2.6rem;
} }
header p, footer.ft {
footer p { margin-top: 1rem;
}
header.hd p,
footer.ft p {
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
header .crumbs { header.hd .crumbs {
float: left; float: left;
} }
header .actor { header.hd .actor {
float: right; float: right;
text-align: right; text-align: right;
padding-left: 1rem; padding-left: 1rem;
@ -292,32 +295,32 @@ header .actor {
top: -3px; top: -3px;
} }
footer a:link, footer.ft a:link,
footer a:visited, footer.ft a:visited,
footer a:hover, footer.ft a:hover,
footer a:focus, footer.ft a:focus,
footer a:active, footer.ft a:active,
footer button.button-as-link { footer.ft button.button-as-link {
color: rgba(255,255,244,0.8); color: rgba(255,255,244,0.8);
} }
header a:link, header.hd a:link,
header a:visited, header.hd a:visited,
header a:hover, header.hd a:hover,
header a:focus, header.hd a:focus,
header a:active, header.hd a:active,
header button.button-as-link { header.hd button.button-as-link {
color: rgba(255,255,244,0.8); color: rgba(255,255,244,0.8);
text-decoration: none; text-decoration: none;
} }
footer a:hover, footer.ft a:hover,
footer a:focus, footer.ft a:focus,
footer a:active, footer.ft a:active,
footer.button-as-link:hover, footer.ft .button-as-link:hover,
footer.button-as-link:focus, footer.ft .button-as-link:focus,
header a:hover, header.hd a:hover,
header a:focus, header.hd a:focus,
header a:active, header.hd a:active,
button.button-as-link:hover, button.button-as-link:hover,
button.button-as-link:focus { button.button-as-link:focus {
color: rgba(255,255,244,1); color: rgba(255,255,244,1);
@ -329,11 +332,6 @@ section.content {
margin: 0 1rem; margin: 0 1rem;
} }
/* Footer */
footer {
margin-top: 1rem;
}
/* Navigation menu */ /* Navigation menu */
details.nav-menu > summary { details.nav-menu > summary {
list-style: none; list-style: none;

2
datasette/templates/base.html
View file

@ -19,7 +19,7 @@
</head> </head>
<body class="{% block body_class %}{% endblock %}"> <body class="{% block body_class %}{% endblock %}">
<div class="not-footer"> <div class="not-footer">
<header><nav>{% block nav %}{% block crumbs %}{{ crumbs.nav(request=request) }}{% endblock %} <header class="hd"><nav>{% block nav %}{% block crumbs %}{{ crumbs.nav(request=request) }}{% endblock %}
{% set links = menu_links() %}{% if links or show_logout %} {% set links = menu_links() %}{% if links or show_logout %}
<details class="nav-menu details-menu"> <details class="nav-menu details-menu">
<summary><svg aria-labelledby="nav-menu-svg-title" role="img" <summary><svg aria-labelledby="nav-menu-svg-title" role="img"

4
datasette/templates/patterns.html
View file

@ -9,7 +9,7 @@
</head> </head>
<body> <body>
<header><nav> <header class="hd"><nav>
<p class="crumbs"> <p class="crumbs">
<a href="/">home</a> <a href="/">home</a>
</p> </p>
@ -45,7 +45,7 @@
<h2 class="pattern-heading">Header for /database/table/row and Messages</h2> <h2 class="pattern-heading">Header for /database/table/row and Messages</h2>
<header> <header class="hd">
<nav> <nav>
<p class="crumbs"> <p class="crumbs">
<a href="/">home</a> / <a href="/">home</a> /