mirror of
https://github.com/squidfunk/mkdocs-material.git
synced 2024-06-14 11:52:32 +03:00
Fixed blog sidebar navigation
This commit is contained in:
squidfunk
parent
521f7272ee
commit
3fbcb3ed83
1
material/templates/assets/stylesheets/main.7e9791b1.min.css
vendored
Normal file
1
material/templates/assets/stylesheets/main.7e9791b1.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -44,7 +44,7 @@
|
||||
{% endif %}
|
||||
{% endblock %}
|
||||
{% block styles %}
|
||||
<link rel="stylesheet" href="{{ 'assets/stylesheets/main.82baac91.min.css' | url }}">
|
||||
<link rel="stylesheet" href="{{ 'assets/stylesheets/main.7e9791b1.min.css' | url }}">
|
||||
{% if config.theme.palette %}
|
||||
{% set palette = config.theme.palette %}
|
||||
<link rel="stylesheet" href="{{ 'assets/stylesheets/palette.a5377069.min.css' | url }}">
|
||||
|
||||
@ -8,7 +8,7 @@
|
||||
<div class="md-sidebar md-sidebar--post" data-md-component="sidebar" data-md-type="navigation">
|
||||
<div class="md-sidebar__scrollwrap">
|
||||
<div class="md-sidebar__inner md-post">
|
||||
<nav class="md-nav">
|
||||
<nav class="md-nav md-nav--primary">
|
||||
<div class="md-post__back">
|
||||
<div class="md-nav__title md-nav__container">
|
||||
<a href="{{ page.parent.url | url }}" class="md-nav__link">
|
||||
@ -35,62 +35,66 @@
|
||||
</div>
|
||||
{% endif %}
|
||||
<ul class="md-post__meta md-nav__list">
|
||||
<li class="md-nav__item md-nav__title">
|
||||
<div class="md-nav__link">
|
||||
<li class="md-nav__item md-nav__item--section">
|
||||
<div class="md-post__title">
|
||||
<span class="md-ellipsis">
|
||||
{{ lang.t("blog.meta") }}
|
||||
</span>
|
||||
</div>
|
||||
<nav class="md-nav">
|
||||
<ul class="md-nav__list">
|
||||
<li class="md-nav__item">
|
||||
<div class="md-nav__link">
|
||||
{% include ".icons/material/calendar.svg" %}
|
||||
<time datetime="{{ page.config.date.created }}" class="md-ellipsis">
|
||||
{{- page.config.date.created | date -}}
|
||||
</time>
|
||||
</div>
|
||||
</li>
|
||||
{% if page.config.date.updated %}
|
||||
<li class="md-nav__item">
|
||||
<div class="md-nav__link">
|
||||
{% include ".icons/material/calendar-clock.svg" %}
|
||||
<time datetime="{{ page.config.date.updated }}" class="md-ellipsis">
|
||||
{{- page.config.date.updated | date -}}
|
||||
</time>
|
||||
</div>
|
||||
</li>
|
||||
{% endif %}
|
||||
{% if page.categories %}
|
||||
<li class="md-nav__item">
|
||||
<div class="md-nav__link">
|
||||
{% include ".icons/material/bookshelf.svg" %}
|
||||
<span class="md-ellipsis">
|
||||
{{ lang.t("blog.categories.in") }}
|
||||
{% for category in page.categories %}
|
||||
<a href="{{ category.url | url }}">
|
||||
{{- category.title -}}
|
||||
</a>
|
||||
{%- if loop.revindex > 1 %}, {% endif -%}
|
||||
{% endfor -%}
|
||||
</span>
|
||||
</div>
|
||||
</li>
|
||||
{% endif %}
|
||||
{% if page.config.readtime %}
|
||||
{% set time = page.config.readtime %}
|
||||
<li class="md-nav__item">
|
||||
<div class="md-nav__link">
|
||||
{% include ".icons/material/clock-outline.svg" %}
|
||||
<span class="md-ellipsis">
|
||||
{% if time == 1 %}
|
||||
{{ lang.t("readtime.one") }}
|
||||
{% else %}
|
||||
{{ lang.t("readtime.other") | replace("#", time) }}
|
||||
{% endif %}
|
||||
</span>
|
||||
</div>
|
||||
</li>
|
||||
{% endif %}
|
||||
</ul>
|
||||
</nav>
|
||||
</li>
|
||||
<li class="md-nav__item">
|
||||
<div class="md-nav__link">
|
||||
{% include ".icons/material/calendar.svg" %}
|
||||
<time datetime="{{ page.config.date.created }}" class="md-ellipsis">
|
||||
{{- page.config.date.created | date -}}
|
||||
</time>
|
||||
</div>
|
||||
</li>
|
||||
{% if page.config.date.updated %}
|
||||
<li class="md-nav__item">
|
||||
<div class="md-nav__link">
|
||||
{% include ".icons/material/calendar-clock.svg" %}
|
||||
<time datetime="{{ page.config.date.updated }}" class="md-ellipsis">
|
||||
{{- page.config.date.updated | date -}}
|
||||
</time>
|
||||
</div>
|
||||
</li>
|
||||
{% endif %}
|
||||
{% if page.categories %}
|
||||
<li class="md-nav__item">
|
||||
<div class="md-nav__link">
|
||||
{% include ".icons/material/bookshelf.svg" %}
|
||||
<span class="md-ellipsis">
|
||||
{{ lang.t("blog.categories.in") }}
|
||||
{% for category in page.categories %}
|
||||
<a href="{{ category.url | url }}">
|
||||
{{- category.title -}}
|
||||
</a>
|
||||
{%- if loop.revindex > 1 %}, {% endif -%}
|
||||
{% endfor -%}
|
||||
</span>
|
||||
</div>
|
||||
</li>
|
||||
{% endif %}
|
||||
{% if page.config.readtime %}
|
||||
{% set time = page.config.readtime %}
|
||||
<li class="md-nav__item">
|
||||
<div class="md-nav__link">
|
||||
{% include ".icons/material/clock-outline.svg" %}
|
||||
<span class="md-ellipsis">
|
||||
{% if time == 1 %}
|
||||
{{ lang.t("readtime.one") }}
|
||||
{% else %}
|
||||
{{ lang.t("readtime.other") | replace("#", time) }}
|
||||
{% endif %}
|
||||
</span>
|
||||
</div>
|
||||
</li>
|
||||
{% endif %}
|
||||
</ul>
|
||||
</nav>
|
||||
{% if "toc.integrate" in features %}
|
||||
|
||||
@ -125,7 +125,7 @@
|
||||
}
|
||||
|
||||
// Navigation link on focus/hover
|
||||
&:not(.md-nav__container):is(:focus, :hover) {
|
||||
@at-root :is(a#{&}, label#{&}):is(:focus, :hover) {
|
||||
color: var(--md-accent-fg-color);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
@ -53,7 +53,7 @@
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: px2rem(12px);
|
||||
margin: 0 px2rem(12px);
|
||||
margin: 0 px2rem(12px) px2rem(24px);
|
||||
}
|
||||
|
||||
// Post metadata
|
||||
@ -70,6 +70,12 @@
|
||||
}
|
||||
}
|
||||
|
||||
// Post navigation title @todo - generalize
|
||||
&__title {
|
||||
font-weight: 700;
|
||||
color: var(--md-default-fg-color--light);
|
||||
}
|
||||
|
||||
// Post excerpt
|
||||
&--excerpt {
|
||||
margin-bottom: px2rem(64px);
|
||||
@ -104,12 +110,6 @@
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Adjust spacing for navigation
|
||||
> .md-nav:first-child > .md-nav__list,
|
||||
> .md-nav--secondary {
|
||||
margin: 1em 0;
|
||||
}
|
||||
}
|
||||
|
||||
// ----------------------------------------------------------------------------
|
||||
|
||||
@ -36,7 +36,7 @@
|
||||
>
|
||||
<div class="md-sidebar__scrollwrap">
|
||||
<div class="md-sidebar__inner md-post">
|
||||
<nav class="md-nav">
|
||||
<nav class="md-nav md-nav--primary">
|
||||
|
||||
<!-- Back to overview link -->
|
||||
<div class="md-post__back">
|
||||
@ -50,7 +50,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Page authors -->
|
||||
<!-- Post authors -->
|
||||
{% if page.authors %}
|
||||
<div class="md-post__authors md-typeset">
|
||||
{% for author in page.authors %}
|
||||
@ -67,72 +67,82 @@
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<!-- Page metadata -->
|
||||
<!-- Post metadata -->
|
||||
<ul class="md-post__meta md-nav__list">
|
||||
<li class="md-nav__item md-nav__title">
|
||||
<div class="md-nav__link">
|
||||
<li class="md-nav__item md-nav__item--section">
|
||||
<div class="md-post__title">
|
||||
<span class="md-ellipsis">
|
||||
{{ lang.t("blog.meta") }}
|
||||
</span>
|
||||
</div>
|
||||
<nav class="md-nav">
|
||||
<ul class="md-nav__list">
|
||||
|
||||
<!-- Post date -->
|
||||
<li class="md-nav__item">
|
||||
<div class="md-nav__link">
|
||||
{% include ".icons/material/calendar.svg" %}
|
||||
<time
|
||||
datetime="{{ page.config.date.created }}"
|
||||
class="md-ellipsis"
|
||||
>
|
||||
{{- page.config.date.created | date -}}
|
||||
</time>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<!-- Post date updated -->
|
||||
{% if page.config.date.updated %}
|
||||
<li class="md-nav__item">
|
||||
<div class="md-nav__link">
|
||||
{% include ".icons/material/calendar-clock.svg" %}
|
||||
<time
|
||||
datetime="{{ page.config.date.updated }}"
|
||||
class="md-ellipsis"
|
||||
>
|
||||
{{- page.config.date.updated | date -}}
|
||||
</time>
|
||||
</div>
|
||||
</li>
|
||||
{% endif %}
|
||||
|
||||
<!-- Post categories -->
|
||||
{% if page.categories %}
|
||||
<li class="md-nav__item">
|
||||
<div class="md-nav__link">
|
||||
{% include ".icons/material/bookshelf.svg" %}
|
||||
<span class="md-ellipsis">
|
||||
{{ lang.t("blog.categories.in") }}
|
||||
{% for category in page.categories %}
|
||||
<a href="{{ category.url | url }}">
|
||||
{{- category.title -}}
|
||||
</a>
|
||||
{%- if loop.revindex > 1 %}, {% endif -%}
|
||||
{% endfor -%}
|
||||
</span>
|
||||
</div>
|
||||
</li>
|
||||
{% endif %}
|
||||
|
||||
<!-- Post readtime -->
|
||||
{% if page.config.readtime %}
|
||||
{% set time = page.config.readtime %}
|
||||
<li class="md-nav__item">
|
||||
<div class="md-nav__link">
|
||||
{% include ".icons/material/clock-outline.svg" %}
|
||||
<span class="md-ellipsis">
|
||||
{% if time == 1 %}
|
||||
{{ lang.t("readtime.one") }}
|
||||
{% else %}
|
||||
{{ lang.t("readtime.other") | replace("#", time) }}
|
||||
{% endif %}
|
||||
</span>
|
||||
</div>
|
||||
</li>
|
||||
{% endif %}
|
||||
</ul>
|
||||
</nav>
|
||||
</li>
|
||||
|
||||
<!-- Page date -->
|
||||
<li class="md-nav__item">
|
||||
<div class="md-nav__link">
|
||||
{% include ".icons/material/calendar.svg" %}
|
||||
<time datetime="{{ page.config.date.created }}" class="md-ellipsis">
|
||||
{{- page.config.date.created | date -}}
|
||||
</time>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<!-- Page date updated -->
|
||||
{% if page.config.date.updated %}
|
||||
<li class="md-nav__item">
|
||||
<div class="md-nav__link">
|
||||
{% include ".icons/material/calendar-clock.svg" %}
|
||||
<time datetime="{{ page.config.date.updated }}" class="md-ellipsis">
|
||||
{{- page.config.date.updated | date -}}
|
||||
</time>
|
||||
</div>
|
||||
</li>
|
||||
{% endif %}
|
||||
|
||||
<!-- Page categories -->
|
||||
{% if page.categories %}
|
||||
<li class="md-nav__item">
|
||||
<div class="md-nav__link">
|
||||
{% include ".icons/material/bookshelf.svg" %}
|
||||
<span class="md-ellipsis">
|
||||
{{ lang.t("blog.categories.in") }}
|
||||
{% for category in page.categories %}
|
||||
<a href="{{ category.url | url }}">
|
||||
{{- category.title -}}
|
||||
</a>
|
||||
{%- if loop.revindex > 1 %}, {% endif -%}
|
||||
{% endfor -%}
|
||||
</span>
|
||||
</div>
|
||||
</li>
|
||||
{% endif %}
|
||||
|
||||
<!-- Page readtime -->
|
||||
{% if page.config.readtime %}
|
||||
{% set time = page.config.readtime %}
|
||||
<li class="md-nav__item">
|
||||
<div class="md-nav__link">
|
||||
{% include ".icons/material/clock-outline.svg" %}
|
||||
<span class="md-ellipsis">
|
||||
{% if time == 1 %}
|
||||
{{ lang.t("readtime.one") }}
|
||||
{% else %}
|
||||
{{ lang.t("readtime.other") | replace("#", time) }}
|
||||
{% endif %}
|
||||
</span>
|
||||
</div>
|
||||
</li>
|
||||
{% endif %}
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user