Skip to content

Commit 3fbcb3e

Browse files
squidfunksquidfunk
committed
Fixed blog sidebar navigation
1 parent 521f727 commit 3fbcb3e

File tree

9 files changed

+139
-125
lines changed

9 files changed

+139
-125
lines changed

‎material/templates/assets/stylesheets/main.7e9791b1.min.css‎

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎material/templates/assets/stylesheets/main.7e9791b1.min.css.map‎

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎material/templates/assets/stylesheets/main.82baac91.min.css‎

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎material/templates/assets/stylesheets/main.82baac91.min.css.map‎

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎material/templates/base.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,7 @@
4444
{% endif %}
4545
{% endblock %}
4646
{% block styles %}
47-
<link rel="stylesheet" href="{{ 'assets/stylesheets/main.82baac91.min.css' | url }}">
47+
<link rel="stylesheet" href="{{ 'assets/stylesheets/main.7e9791b1.min.css' | url }}">
4848
{% if config.theme.palette %}
4949
{% set palette = config.theme.palette %}
5050
<link rel="stylesheet" href="{{ 'assets/stylesheets/palette.a5377069.min.css' | url }}">

‎material/templates/blog-post.html‎

Lines changed: 56 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
<div class="md-sidebar md-sidebar--post" data-md-component="sidebar" data-md-type="navigation">
99
<div class="md-sidebar__scrollwrap">
1010
<div class="md-sidebar__inner md-post">
11-
<nav class="md-nav">
11+
<nav class="md-nav md-nav--primary">
1212
<div class="md-post__back">
1313
<div class="md-nav__title md-nav__container">
1414
<a href="{{ page.parent.url | url }}" class="md-nav__link">
@@ -35,62 +35,66 @@
3535
</div>
3636
{% endif %}
3737
<ul class="md-post__meta md-nav__list">
38-
<li class="md-nav__item md-nav__title">
39-
<div class="md-nav__link">
38+
<li class="md-nav__item md-nav__item--section">
39+
<div class="md-post__title">
4040
<span class="md-ellipsis">
4141
{{ lang.t("blog.meta") }}
4242
</span>
4343
</div>
44+
<nav class="md-nav">
45+
<ul class="md-nav__list">
46+
<li class="md-nav__item">
47+
<div class="md-nav__link">
48+
{% include ".icons/material/calendar.svg" %}
49+
<time datetime="{{ page.config.date.created }}" class="md-ellipsis">
50+
{{- page.config.date.created | date -}}
51+
</time>
52+
</div>
53+
</li>
54+
{% if page.config.date.updated %}
55+
<li class="md-nav__item">
56+
<div class="md-nav__link">
57+
{% include ".icons/material/calendar-clock.svg" %}
58+
<time datetime="{{ page.config.date.updated }}" class="md-ellipsis">
59+
{{- page.config.date.updated | date -}}
60+
</time>
61+
</div>
62+
</li>
63+
{% endif %}
64+
{% if page.categories %}
65+
<li class="md-nav__item">
66+
<div class="md-nav__link">
67+
{% include ".icons/material/bookshelf.svg" %}
68+
<span class="md-ellipsis">
69+
{{ lang.t("blog.categories.in") }}
70+
{% for category in page.categories %}
71+
<a href="{{ category.url | url }}">
72+
{{- category.title -}}
73+
</a>
74+
{%- if loop.revindex > 1 %}, {% endif -%}
75+
{% endfor -%}
76+
</span>
77+
</div>
78+
</li>
79+
{% endif %}
80+
{% if page.config.readtime %}
81+
{% set time = page.config.readtime %}
82+
<li class="md-nav__item">
83+
<div class="md-nav__link">
84+
{% include ".icons/material/clock-outline.svg" %}
85+
<span class="md-ellipsis">
86+
{% if time == 1 %}
87+
{{ lang.t("readtime.one") }}
88+
{% else %}
89+
{{ lang.t("readtime.other") | replace("#", time) }}
90+
{% endif %}
91+
</span>
92+
</div>
93+
</li>
94+
{% endif %}
95+
</ul>
96+
</nav>
4497
</li>
45-
<li class="md-nav__item">
46-
<div class="md-nav__link">
47-
{% include ".icons/material/calendar.svg" %}
48-
<time datetime="{{ page.config.date.created }}" class="md-ellipsis">
49-
{{- page.config.date.created | date -}}
50-
</time>
51-
</div>
52-
</li>
53-
{% if page.config.date.updated %}
54-
<li class="md-nav__item">
55-
<div class="md-nav__link">
56-
{% include ".icons/material/calendar-clock.svg" %}
57-
<time datetime="{{ page.config.date.updated }}" class="md-ellipsis">
58-
{{- page.config.date.updated | date -}}
59-
</time>
60-
</div>
61-
</li>
62-
{% endif %}
63-
{% if page.categories %}
64-
<li class="md-nav__item">
65-
<div class="md-nav__link">
66-
{% include ".icons/material/bookshelf.svg" %}
67-
<span class="md-ellipsis">
68-
{{ lang.t("blog.categories.in") }}
69-
{% for category in page.categories %}
70-
<a href="{{ category.url | url }}">
71-
{{- category.title -}}
72-
</a>
73-
{%- if loop.revindex > 1 %}, {% endif -%}
74-
{% endfor -%}
75-
</span>
76-
</div>
77-
</li>
78-
{% endif %}
79-
{% if page.config.readtime %}
80-
{% set time = page.config.readtime %}
81-
<li class="md-nav__item">
82-
<div class="md-nav__link">
83-
{% include ".icons/material/clock-outline.svg" %}
84-
<span class="md-ellipsis">
85-
{% if time == 1 %}
86-
{{ lang.t("readtime.one") }}
87-
{% else %}
88-
{{ lang.t("readtime.other") | replace("#", time) }}
89-
{% endif %}
90-
</span>
91-
</div>
92-
</li>
93-
{% endif %}
9498
</ul>
9599
</nav>
96100
{% if "toc.integrate" in features %}

‎src/templates/assets/stylesheets/main/components/_nav.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -125,7 +125,7 @@
125125
}
126126

127127
// Navigation link on focus/hover
128-
&:not(.md-nav__container):is(:focus, :hover) {
128+
@at-root :is(a#{&}, label#{&}):is(:focus, :hover) {
129129
color: var(--md-accent-fg-color);
130130
cursor: pointer;
131131
}

‎src/templates/assets/stylesheets/main/components/_post.scss‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -53,7 +53,7 @@
5353
display: flex;
5454
flex-direction: column;
5555
gap: px2rem(12px);
56-
margin: 0 px2rem(12px);
56+
margin: 0 px2rem(12px) px2rem(24px);
5757
}
5858

5959
// Post metadata
@@ -70,6 +70,12 @@
7070
}
7171
}
7272

73+
// Post navigation title @todo - generalize
74+
&__title {
75+
font-weight: 700;
76+
color: var(--md-default-fg-color--light);
77+
}
78+
7379
// Post excerpt
7480
&--excerpt {
7581
margin-bottom: px2rem(64px);
@@ -104,12 +110,6 @@
104110
margin-top: 0;
105111
}
106112
}
107-
108-
// Adjust spacing for navigation
109-
> .md-nav:first-child > .md-nav__list,
110-
> .md-nav--secondary {
111-
margin: 1em 0;
112-
}
113113
}
114114

115115
// ----------------------------------------------------------------------------

‎src/templates/blog-post.html‎

Lines changed: 72 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@
3636
>
3737
<div class="md-sidebar__scrollwrap">
3838
<div class="md-sidebar__inner md-post">
39-
<nav class="md-nav">
39+
<nav class="md-nav md-nav--primary">
4040

4141
<!-- Back to overview link -->
4242
<div class="md-post__back">
@@ -50,7 +50,7 @@
5050
</div>
5151
</div>
5252

53-
<!-- Page authors -->
53+
<!-- Post authors -->
5454
{% if page.authors %}
5555
<div class="md-post__authors md-typeset">
5656
{% for author in page.authors %}
@@ -67,72 +67,82 @@
6767
</div>
6868
{% endif %}
6969

70-
<!-- Page metadata -->
70+
<!-- Post metadata -->
7171
<ul class="md-post__meta md-nav__list">
72-
<li class="md-nav__item md-nav__title">
73-
<div class="md-nav__link">
72+
<li class="md-nav__item md-nav__item--section">
73+
<div class="md-post__title">
7474
<span class="md-ellipsis">
7575
{{ lang.t("blog.meta") }}
7676
</span>
7777
</div>
78+
<nav class="md-nav">
79+
<ul class="md-nav__list">
80+
81+
<!-- Post date -->
82+
<li class="md-nav__item">
83+
<div class="md-nav__link">
84+
{% include ".icons/material/calendar.svg" %}
85+
<time
86+
datetime="{{ page.config.date.created }}"
87+
class="md-ellipsis"
88+
>
89+
{{- page.config.date.created | date -}}
90+
</time>
91+
</div>
92+
</li>
93+
94+
<!-- Post date updated -->
95+
{% if page.config.date.updated %}
96+
<li class="md-nav__item">
97+
<div class="md-nav__link">
98+
{% include ".icons/material/calendar-clock.svg" %}
99+
<time
100+
datetime="{{ page.config.date.updated }}"
101+
class="md-ellipsis"
102+
>
103+
{{- page.config.date.updated | date -}}
104+
</time>
105+
</div>
106+
</li>
107+
{% endif %}
108+
109+
<!-- Post categories -->
110+
{% if page.categories %}
111+
<li class="md-nav__item">
112+
<div class="md-nav__link">
113+
{% include ".icons/material/bookshelf.svg" %}
114+
<span class="md-ellipsis">
115+
{{ lang.t("blog.categories.in") }}
116+
{% for category in page.categories %}
117+
<a href="{{ category.url | url }}">
118+
{{- category.title -}}
119+
</a>
120+
{%- if loop.revindex > 1 %}, {% endif -%}
121+
{% endfor -%}
122+
</span>
123+
</div>
124+
</li>
125+
{% endif %}
126+
127+
<!-- Post readtime -->
128+
{% if page.config.readtime %}
129+
{% set time = page.config.readtime %}
130+
<li class="md-nav__item">
131+
<div class="md-nav__link">
132+
{% include ".icons/material/clock-outline.svg" %}
133+
<span class="md-ellipsis">
134+
{% if time == 1 %}
135+
{{ lang.t("readtime.one") }}
136+
{% else %}
137+
{{ lang.t("readtime.other") | replace("#", time) }}
138+
{% endif %}
139+
</span>
140+
</div>
141+
</li>
142+
{% endif %}
143+
</ul>
144+
</nav>
78145
</li>
79-
80-
<!-- Page date -->
81-
<li class="md-nav__item">
82-
<div class="md-nav__link">
83-
{% include ".icons/material/calendar.svg" %}
84-
<time datetime="{{ page.config.date.created }}" class="md-ellipsis">
85-
{{- page.config.date.created | date -}}
86-
</time>
87-
</div>
88-
</li>
89-
90-
<!-- Page date updated -->
91-
{% if page.config.date.updated %}
92-
<li class="md-nav__item">
93-
<div class="md-nav__link">
94-
{% include ".icons/material/calendar-clock.svg" %}
95-
<time datetime="{{ page.config.date.updated }}" class="md-ellipsis">
96-
{{- page.config.date.updated | date -}}
97-
</time>
98-
</div>
99-
</li>
100-
{% endif %}
101-
102-
<!-- Page categories -->
103-
{% if page.categories %}
104-
<li class="md-nav__item">
105-
<div class="md-nav__link">
106-
{% include ".icons/material/bookshelf.svg" %}
107-
<span class="md-ellipsis">
108-
{{ lang.t("blog.categories.in") }}
109-
{% for category in page.categories %}
110-
<a href="{{ category.url | url }}">
111-
{{- category.title -}}
112-
</a>
113-
{%- if loop.revindex > 1 %}, {% endif -%}
114-
{% endfor -%}
115-
</span>
116-
</div>
117-
</li>
118-
{% endif %}
119-
120-
<!-- Page readtime -->
121-
{% if page.config.readtime %}
122-
{% set time = page.config.readtime %}
123-
<li class="md-nav__item">
124-
<div class="md-nav__link">
125-
{% include ".icons/material/clock-outline.svg" %}
126-
<span class="md-ellipsis">
127-
{% if time == 1 %}
128-
{{ lang.t("readtime.one") }}
129-
{% else %}
130-
{{ lang.t("readtime.other") | replace("#", time) }}
131-
{% endif %}
132-
</span>
133-
</div>
134-
</li>
135-
{% endif %}
136146
</ul>
137147
</nav>
138148

0 commit comments

Comments
 (0)