Refactor sidebar-toggle, sidebar-dimmer & back-to-top

This commit is contained in:
Mimi 2022-11-09 20:11:52 +08:00
parent 0c35aeb729
commit c7b92c3af8
7 changed files with 38 additions and 38 deletions

View File

@ -24,8 +24,6 @@
{%- endif %} {%- endif %}
</header> </header>
{{ partial('_partials/widgets.njk', {}, {cache: theme.cache.enable}) }}
<div class="main-inner {% block class %}{% endblock %}"> <div class="main-inner {% block class %}{% endblock %}">
{%- include '_partials/header/sub-menu.njk' -%} {%- include '_partials/header/sub-menu.njk' -%}
{% block content %}{% endblock %} {% block content %}{% endblock %}
@ -40,6 +38,8 @@
</div> </div>
</footer> </footer>
{{ partial('_partials/widgets.njk', {}, {cache: theme.cache.enable}) }}
{{ partial('_scripts/index.njk', {}, {cache: theme.cache.enable}) }} {{ partial('_scripts/index.njk', {}, {cache: theme.cache.enable}) }}
{{ partial('_third-party/index.njk', {}, {cache: theme.cache.enable}) }} {{ partial('_third-party/index.njk', {}, {cache: theme.cache.enable}) }}
{{ partial('_third-party/statistics/index.njk', {}, {cache: theme.cache.enable}) }} {{ partial('_third-party/statistics/index.njk', {}, {cache: theme.cache.enable}) }}

View File

@ -1,10 +1,4 @@
{% macro render(display_toc) %} {% macro render(display_toc) %}
<div class="toggle sidebar-toggle" role="button">
<span class="toggle-line"></span>
<span class="toggle-line"></span>
<span class="toggle-line"></span>
</div>
<aside class="sidebar"> <aside class="sidebar">
{%- set display_toc = page.toc.enable and display_toc %} {%- set display_toc = page.toc.enable and display_toc %}
{%- if display_toc %} {%- if display_toc %}
@ -46,5 +40,4 @@
{%- endif %} {%- endif %}
</div> </div>
</aside> </aside>
<div class="sidebar-dimmer"></div>
{% endmacro %} {% endmacro %}

View File

@ -1,3 +1,14 @@
{# Widgets with fixed position #}
{%- if theme.sidebar.display !== 'remove' and (theme.scheme === 'Muse' or theme.scheme === 'Mist') %}
<div class="toggle sidebar-toggle" role="button">
<span class="toggle-line"></span>
<span class="toggle-line"></span>
<span class="toggle-line"></span>
</div>
<div class="sidebar-dimmer"></div>
{%- endif %}
{%- if theme.back2top.enable and not theme.back2top.sidebar %} {%- if theme.back2top.enable and not theme.back2top.sidebar %}
<div class="back-to-top" role="button" aria-label="{{ __('accessibility.back_to_top') }}"> <div class="back-to-top" role="button" aria-label="{{ __('accessibility.back_to_top') }}">
<i class="fa fa-arrow-up"></i> <i class="fa fa-arrow-up"></i>

View File

@ -31,7 +31,6 @@
@import 'sidebar-author-links'; @import 'sidebar-author-links';
@import 'sidebar-button'; @import 'sidebar-button';
@import 'sidebar-blogroll'; @import 'sidebar-blogroll';
@import 'sidebar-dimmer';
@import 'sidebar-nav'; @import 'sidebar-nav';
@import 'sidebar-toggle'; @import 'sidebar-toggle';
@import 'sidebar-toc'; @import 'sidebar-toc';

View File

@ -1,24 +0,0 @@
.sidebar-dimmer {
display: none;
}
+tablet-mobile() {
.sidebar-dimmer {
background: black;
display: block;
height: 100%;
left: 0;
opacity: 0;
position: fixed;
top: 0;
transition: visibility .4s, opacity .4s;
visibility: hidden;
width: 100%;
z-index: $zindex-1;
.sidebar-active & {
opacity: .7;
visibility: visible;
}
}
}

View File

@ -92,3 +92,28 @@ if (hexo-config('sidebar.position') == 'right') {
white-space: nowrap; white-space: nowrap;
} }
} }
.sidebar-dimmer {
display: none;
}
+tablet-mobile() {
.sidebar-dimmer {
background: black;
display: block;
height: 100%;
left: 0;
opacity: 0;
position: fixed;
top: 0;
transition: visibility .4s, opacity .4s;
visibility: hidden;
width: 100%;
z-index: $zindex-1;
.sidebar-active & {
opacity: .7;
visibility: visible;
}
}
}

View File

@ -15,10 +15,6 @@
} }
} }
.sidebar-toggle {
display: none;
}
.sidebar-inner { .sidebar-inner {
background: var(--content-bg-color); background: var(--content-bg-color);
border-radius: $border-radius; border-radius: $border-radius;