web: css menu changes for small viewports
parent
cfd55d3e4a
commit
3a22ea6887
GPG Key ID:
7729C7707F7E09D0
|
|
@ -1853,6 +1853,7 @@ dependencies = [
|
|||
"dyn-clone",
|
||||
"eyre",
|
||||
"http",
|
||||
"indexmap",
|
||||
"lazy_static",
|
||||
"mailpot",
|
||||
"minijinja",
|
||||
|
|
|
|||
|
|
@ -31,8 +31,8 @@ use chrono::*;
|
|||
///
|
||||
/// # Examples
|
||||
/// ```
|
||||
/// use mailpot_archives::cal::calendarize;
|
||||
/// use chrono::*;
|
||||
/// use mailpot_archives::cal::calendarize;
|
||||
///
|
||||
/// let date = NaiveDate::parse_from_str("2021-01-02", "%Y-%m-%d").unwrap();
|
||||
/// // Week = [Sun, Mon, Tue, Wed, Thu, Fri, Sat]
|
||||
|
|
@ -59,8 +59,8 @@ pub fn calendarize(date: NaiveDate) -> Vec<[u32; 7]> {
|
|||
///
|
||||
/// # Examples
|
||||
/// ```
|
||||
/// use mailpot_archives::cal::calendarize_with_offset;
|
||||
/// use chrono::*;
|
||||
/// use mailpot_archives::cal::calendarize_with_offset;
|
||||
///
|
||||
/// let date = NaiveDate::parse_from_str("2021-01-02", "%Y-%m-%d").unwrap();
|
||||
/// // Week = [Mon, Tue, Wed, Thu, Fri, Sat, Sun]
|
||||
|
|
|
|||
|
|
@ -28,6 +28,7 @@ chrono = { version = "^0.4" }
|
|||
dyn-clone = { version = "^1" }
|
||||
eyre = { version = "0.6" }
|
||||
http = "0.2"
|
||||
indexmap = { version = "1.9" }
|
||||
lazy_static = "^1.4"
|
||||
mailpot = { version = "^0.0", path = "../core" }
|
||||
minijinja = { version = "0.31.0", features = ["source", ] }
|
||||
|
|
|
|||
|
|
@ -17,6 +17,8 @@
|
|||
* along with this program. If not, see <https://www.gnu.org/licenses/>.
|
||||
*/
|
||||
|
||||
use indexmap::IndexMap;
|
||||
|
||||
use super::*;
|
||||
|
||||
/// Mailing list index.
|
||||
|
|
|
|||
|
|
@ -85,7 +85,7 @@
|
|||
}
|
||||
|
||||
a.self-link {
|
||||
--width: 28px;
|
||||
--width: 22px;
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: calc(var(--width) - 3.5rem);
|
||||
|
|
@ -340,11 +340,12 @@
|
|||
margin: 1rem;
|
||||
}
|
||||
|
||||
main.layout>div.header>h2 {
|
||||
margin-inline-start: 1rem;
|
||||
main.layout>div.header>div.page-header {
|
||||
width: 90vw;
|
||||
margin: 0px auto;
|
||||
}
|
||||
|
||||
main.layout>div.header>nav + nav {
|
||||
main.layout>div.header>div.page-header>nav:first-child {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
|
|
@ -364,7 +365,9 @@
|
|||
gap: 1rem;
|
||||
}
|
||||
nav.main-nav>ul>li>a {
|
||||
/* fallback if clamp() isn't supported */
|
||||
padding: 1rem;
|
||||
padding: 1rem clamp(0.6svw,1rem,0.5vmin);
|
||||
}
|
||||
nav.main-nav > ul > li > a:hover {
|
||||
outline: 0.1rem solid;
|
||||
|
|
@ -380,7 +383,6 @@
|
|||
|
||||
nav.breadcrumbs {
|
||||
padding: 10px 14px 10px 0px;
|
||||
margin-inline-start: 1rem;
|
||||
}
|
||||
|
||||
nav.breadcrumbs ol {
|
||||
|
|
@ -388,6 +390,18 @@
|
|||
padding-left: 0;
|
||||
}
|
||||
|
||||
/* If only the root crumb is visible, hide it to avoid unnecessary visual clutter */
|
||||
li.crumb:only-child>span[aria-current="page"] {
|
||||
--secs: 500ms;
|
||||
transition: all var(--secs) linear;
|
||||
color: transparent;
|
||||
}
|
||||
|
||||
li.crumb:only-child>span[aria-current="page"]:hover {
|
||||
transition: all var(--secs) linear;
|
||||
color: revert;
|
||||
}
|
||||
|
||||
.crumb, .crumb>a {
|
||||
display: contents;
|
||||
}
|
||||
|
|
@ -508,20 +522,35 @@
|
|||
div.entries {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
div.entries>p:first-child {
|
||||
margin: 1rem 0rem;
|
||||
}
|
||||
|
||||
div.entries>div.entry {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
border: 1px solid var(--border-secondary);
|
||||
padding: 1rem 1rem;
|
||||
}
|
||||
|
||||
div.posts>div.entry>span.subject {
|
||||
font-size: larger;
|
||||
div.entries>div.entry+div.entry {
|
||||
border-top:none;
|
||||
}
|
||||
|
||||
div.entries>div.entry span.metadata.replies {
|
||||
background: CanvasText;
|
||||
border-radius: .6rem;
|
||||
color: Canvas;
|
||||
padding: 0.1rem 0.4rem;
|
||||
font-size: small;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
div.entries>div.entry>span.metadata {
|
||||
font-size: small;
|
||||
color: GrayText;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
|
@ -578,15 +607,18 @@
|
|||
span.message-id:before{
|
||||
content: '<';
|
||||
display: inline-block;
|
||||
opacity: 0.6;
|
||||
}
|
||||
td.message-id:after,
|
||||
span.message-id:after{
|
||||
content: '>';
|
||||
display: inline-block;
|
||||
opacity: 0.6;
|
||||
}
|
||||
span.message-id + span.message-id:before{
|
||||
content: ', <';
|
||||
display: inline-block;
|
||||
opacity: 0.6;
|
||||
}
|
||||
td.faded,
|
||||
span.faded {
|
||||
|
|
|
|||
|
|
@ -14,13 +14,21 @@
|
|||
<p class="description">{{ description }}</p>
|
||||
{% endif %}
|
||||
{% include "menu.html" %}
|
||||
{% if messages %}
|
||||
<ul class="messagelist">
|
||||
{% for message in messages %}
|
||||
<li class="{{ message.level|lower }}">
|
||||
<span class="label">{{ message.level }}: </span>{{ message.message }}
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
{% endif %}
|
||||
<div class="page-header">
|
||||
{% if page_title %}
|
||||
<h2>{{ page_title }}</h2>
|
||||
{% endif %}
|
||||
<nav aria-label="Breadcrumb" class="breadcrumbs">
|
||||
<ol>{% for crumb in crumbs %}{% if loop.last %}<li class="crumb"><span aria-current="page" title="current page">{{ crumb.label }}</span></li>{% else %}<li class="crumb"><a href="{{ root_url_prefix }}{{ crumb.url }}">{{ crumb.label }}</a></li>{% endif %}{% endfor %}</ol>
|
||||
</nav>
|
||||
{% if messages %}
|
||||
<ul class="messagelist">
|
||||
{% for message in messages %}
|
||||
<li class="{{ message.level|lower }}">
|
||||
<span class="label">{{ message.level }}: </span>{{ message.message }}
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -9,9 +9,3 @@
|
|||
{% endif %}
|
||||
</ul>
|
||||
</nav>
|
||||
{% if page_title %}
|
||||
<h2>{{ page_title }}</h2>
|
||||
{% endif %}
|
||||
<nav aria-label="Breadcrumb" class="breadcrumbs">
|
||||
<ol>{% for crumb in crumbs %}{% if loop.last %}<li class="crumb"><span aria-current="page">{{ crumb.label }}</span></li>{% else %}<li class="crumb"><a href="{{ root_url_prefix }}{{ crumb.url }}">{{ crumb.label }}</a></li>{% endif %}{% endfor %}</ol>
|
||||
</nav>
|
||||
|
|
|
|||
Loading…
Reference in New Issue