header.hd and footer.ft, refs #2420

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

View file

@ -265,8 +265,8 @@ a.not-underlined {
/* Page Furniture ========================================================= */
/* Header */
header,
footer {
header.hd,
footer.ft {
padding: 0.6rem 1rem 0.5rem 1rem;
background-color: #276890;
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;
min-height: 2.6rem;
}
header p,
footer p {
footer.ft {
margin-top: 1rem;
}
header.hd p,
footer.ft p {
margin: 0;
padding: 0;
}
header .crumbs {
header.hd .crumbs {
float: left;
}
header .actor {
header.hd .actor {
float: right;
text-align: right;
padding-left: 1rem;
@ -292,32 +295,32 @@ header .actor {
top: -3px;
}
footer a:link,
footer a:visited,
footer a:hover,
footer a:focus,
footer a:active,
footer button.button-as-link {
footer.ft a:link,
footer.ft a:visited,
footer.ft a:hover,
footer.ft a:focus,
footer.ft a:active,
footer.ft button.button-as-link {
color: rgba(255,255,244,0.8);
}
header a:link,
header a:visited,
header a:hover,
header a:focus,
header a:active,
header button.button-as-link {
header.hd a:link,
header.hd a:visited,
header.hd a:hover,
header.hd a:focus,
header.hd a:active,
header.hd button.button-as-link {
color: rgba(255,255,244,0.8);
text-decoration: none;
}
footer a:hover,
footer a:focus,
footer a:active,
footer.button-as-link:hover,
footer.button-as-link:focus,
header a:hover,
header a:focus,
header a:active,
footer.ft a:hover,
footer.ft a:focus,
footer.ft a:active,
footer.ft .button-as-link:hover,
footer.ft .button-as-link:focus,
header.hd a:hover,
header.hd a:focus,
header.hd a:active,
button.button-as-link:hover,
button.button-as-link:focus {
color: rgba(255,255,244,1);
@ -329,11 +332,6 @@ section.content {
margin: 0 1rem;
}
/* Footer */
footer {
margin-top: 1rem;
}
/* Navigation menu */
details.nav-menu > summary {
list-style: none;

View file

@ -19,7 +19,7 @@
</head>
<body class="{% block body_class %}{% endblock %}">
<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 %}
<details class="nav-menu details-menu">
<summary><svg aria-labelledby="nav-menu-svg-title" role="img"

View file

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