github/hexo-theme-next
1
0
Fork 0
mirror of https://github.com/next-theme/hexo-theme-next.git synced 2026-01-20 19:02:33 +00:00
Code Issues Packages Projects Releases Wiki Activity

Refactor sidebar-panel using flex layout

Browse Source
This commit is contained in:
Mimi 2020-09-17 14:08:11 +08:00
parent edefcdae9a
commit d6f344fd9d
9 changed files with 21 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
_config.yml
View File

@ -495,7 +495,7 @@ baidu_push: false
# Server-side plugin: https://github.com/next-theme/hexo-filter-mathjax # Server-side plugin: https://github.com/next-theme/hexo-filter-mathjax
math: math:
# Default (false) will load mathjax / katex script on demand. # Default (false) will load mathjax / katex script on demand.
# That is it only render those page which has `mathjax: true` in Front-matter. # That is it only render those page which has `mathjax: true` in front-matter.
# If you set it to true, it will load mathjax / katex srcipt EVERY PAGE. # If you set it to true, it will load mathjax / katex srcipt EVERY PAGE.
every_page: false every_page: false

12
layout/_partials/sidebar/site-overview.njk
View File

@ -1,4 +1,4 @@
<div class="site-author animated" itemprop="author" itemscope itemtype="http://schema.org/Person"> <div class="site-author site-overview-item animated" itemprop="author" itemscope itemtype="http://schema.org/Person">
{%- if theme.avatar.url %} {%- if theme.avatar.url %}
<img class="site-author-image" itemprop="image" alt="{{ author }}" <img class="site-author-image" itemprop="image" alt="{{ author }}"
src="{{ url_for(theme.avatar.url) }}"> src="{{ url_for(theme.avatar.url) }}">
@ -8,7 +8,7 @@
</div> </div>
{%- if theme.site_state %} {%- if theme.site_state %}
<div class="site-state-wrap animated"> <div class="site-state-wrap site-overview-item animated">
<nav class="site-state"> <nav class="site-state">
{%- if config.archive_dir != '/' and site.posts.length > 0 %} {%- if config.archive_dir != '/' and site.posts.length > 0 %}
<div class="site-state-item site-state-posts"> <div class="site-state-item site-state-posts">
@ -61,7 +61,7 @@
{%- endif %} {%- endif %}
{%- if theme.chat.enable and theme.chat.service !== '' %} {%- if theme.chat.enable and theme.chat.service !== '' %}
<div class="sidebar-button animated"> <div class="sidebar-button site-overview-item animated">
{%- if theme.chat.service == 'chatra' and theme.chatra.enable %} {%- if theme.chat.service == 'chatra' and theme.chatra.enable %}
<a onclick="Chatra('openChat', true);"> <a onclick="Chatra('openChat', true);">
{%- endif %} {%- endif %}
@ -75,7 +75,7 @@
{%- endif %} {%- endif %}
{%- if theme.social %} {%- if theme.social %}
<div class="links-of-author animated"> <div class="links-of-author site-overview-item animated">
{%- for name, link in theme.social %} {%- for name, link in theme.social %}
<span class="links-of-author-item"> <span class="links-of-author-item">
{%- set sidebarURL = link.split('||')[0] | trim %} {%- set sidebarURL = link.split('||')[0] | trim %}
@ -88,7 +88,7 @@
{%- endif %} {%- endif %}
{%- if theme.creative_commons.license and theme.creative_commons.sidebar %} {%- if theme.creative_commons.license and theme.creative_commons.sidebar %}
<div class="cc-license animated" itemprop="license"> <div class="cc-license site-overview-item animated" itemprop="license">
{%- set ccImage = '<img src="' + url_for(theme.images + '/cc-' + theme.creative_commons.license + '.svg') + '" alt="Creative Commons">' %} {%- set ccImage = '<img src="' + url_for(theme.images + '/cc-' + theme.creative_commons.license + '.svg') + '" alt="Creative Commons">' %}
{{ next_url(ccURL, ccImage, {class: 'cc-opacity'}) }} {{ next_url(ccURL, ccImage, {class: 'cc-opacity'}) }}
</div> </div>
@ -96,7 +96,7 @@
{# Blogroll #} {# Blogroll #}
{%- if theme.links %} {%- if theme.links %}
<div class="links-of-blogroll animated"> <div class="links-of-blogroll site-overview-item animated">
<div class="links-of-blogroll-title"> <div class="links-of-blogroll-title">
{%- if theme.links_settings.icon %}<i class="{{ theme.links_settings.icon }} fa-fw"></i>{%- endif %} {%- if theme.links_settings.icon %}<i class="{{ theme.links_settings.icon }} fa-fw"></i>{%- endif %}
{{ theme.links_settings.title }} {{ theme.links_settings.title }}

1
source/css/_common/outline/sidebar/sidebar-blogroll.styl
View File

@ -1,6 +1,5 @@
.links-of-blogroll { .links-of-blogroll {
font-size: $font-size-smaller; font-size: $font-size-smaller;
margin-top: 10px;
} }
.links-of-blogroll-title { .links-of-blogroll-title {

6
source/css/_common/outline/sidebar/sidebar-button.styl
View File

@ -1,5 +1,7 @@
.sidebar-button { .sidebar .sidebar-button {
margin-top: 15px; &:not(:first-child) {
margin-top: 15px;
}
a { a {
border: 1px solid $orange; border: 1px solid $orange;

4
source/css/_common/outline/sidebar/sidebar-nav.styl
View File

@ -43,5 +43,7 @@
} }
.sidebar-toc-active .post-toc-wrap, .sidebar-overview-active .site-overview-wrap { .sidebar-toc-active .post-toc-wrap, .sidebar-overview-active .site-overview-wrap {
display: block; // Flexbox layout makes it possible to reorder the child
// elements of .site-overview-item through the `order` CSS property
flex-column();
} }

4
source/css/_common/outline/sidebar/sidebar.styl
View File

@ -4,9 +4,11 @@
text-align: center; text-align: center;
} }
.cc-license { .site-overview-item:not(:first-child) {
margin-top: 10px; margin-top: 10px;
}
.cc-license {
.cc-opacity { .cc-opacity {
border-bottom: none; border-bottom: none;
opacity: .7; opacity: .7;

1
source/css/_common/outline/sidebar/site-state.styl
View File

@ -1,7 +1,6 @@
.site-state { .site-state {
flex-wrap(); flex-wrap();
line-height: 1.4; line-height: 1.4;
margin-top: 10px;
} }
.site-state-item { .site-state-item {

4
source/css/_schemes/Muse/_sidebar.styl
View File

@ -52,7 +52,9 @@ if (hexo-config('sidebar.position') == 'right') {
} }
.links-of-author { .links-of-author {
margin-top: 15px; &:not(:first-child) {
margin-top: 15px;
}
a, span.exturl { a, span.exturl {
border-bottom-color: $black-light; border-bottom-color: $black-light;

4
source/css/_schemes/Pisces/_sidebar.styl
View File

@ -30,10 +30,9 @@
padding: 0 10px; padding: 0 10px;
} }
.sidebar-button { .sidebar .sidebar-button {
border-bottom: 1px dotted $grey-light; border-bottom: 1px dotted $grey-light;
border-top: 1px dotted $grey-light; border-top: 1px dotted $grey-light;
margin-top: 10px;
a { a {
border: 0; border: 0;
@ -53,7 +52,6 @@
} }
.links-of-author { .links-of-author {
margin-top: 10px;
flex-wrap(); flex-wrap();
} }