iotcat
/
hexo-theme-volantis
mirror of https://github.com/IoTcat/hexo-theme-volantis.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

navbar

Browse Source
master
xaoxuu 4 years ago
parent 0a9c09d709
commit 8f74437d20
8 changed files with 187 additions and 218 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      _config.yml
  2. 2
      layout/_cover/index.ejs
  3. 60
      layout/_partial/header.ejs
  4. 9
      source/css/_base/index.styl
  5. 294
      source/css/_layout/navbar.styl
  6. 4
      source/css/_layout/search.styl
  7. 2
      source/css/_third-party/alert.styl
  8. 32
      source/js/app.js

2
_config.yml
Unescape View File

@ -1,7 +1,7 @@
############################### Basic Information ###############################
info:
name: Volantis
version: '2.3.2'
version: '2.4-beta'
docs: https://volantis.js.org/
cdn: # To use CDN, write 'use_cdn: true' in 'blog/_config.yml'.
# css: https://cdn.jsdelivr.net/gh/xaoxuu/cdn-volantis@2.3.1.2/css/style.css

2
layout/_cover/index.ejs
Unescape View File

@ -20,7 +20,7 @@
</div>
<% } %>
<div class='menu navigation'>
<ul class='h-list'>
<ul class='list-h'>
<% if (theme.cover.features) { %>
<% (theme.cover.features || []).forEach(function(value){ %>
<li>

60
layout/_partial/header.ejs
Unescape View File

@ -5,18 +5,18 @@
<div class='wrapper'>
<div class='nav-sub'>
<a class="logo flat-box"></a>
<ul class='switcher h-list'>
<li><a class="s-comment flat-btn fas fa-comments fa-fw" target="_self" href='javascript:void(0)'></a></li>
<p class="title"></p>
<ul class='switcher list-h'>
<li><a class="s-comment fas fa-comments fa-fw" target="_self" href='javascript:void(0)'></a></li>
<% if (page.sidebar == undefined || page.sidebar != false) { %>
<li><a class="s-toc flat-btn fas fa-list fa-fw" target="_self" href='javascript:void(0)'></a></li>
<li><a class="s-toc fas fa-list fa-fw" target="_self" href='javascript:void(0)'></a></li>
<% } %>
</ul>
</div>
<div class="nav-main">
<% if (theme.navbar.logo) { %>
<% let logo = theme.navbar.logo %>
<a class="logo flat-box" target="_self" href='<%- url_for("/") %>'>
<a class="title flat-box" target="_self" href='<%- url_for("/") %>'>
<% if (logo.img) { %>
<img class='logo' src='<%- logo.img %>'/>
<% } %>
@ -42,7 +42,7 @@
<% } %>
<div class='menu navigation'>
<ul class='h-list'>
<ul class='list-h'>
<%
let menu_desktop;
if (site.data && site.data.menu && site.data.menu.on_desktop) {
@ -61,7 +61,7 @@
<i class='<%= value.icon %> fa-fw music'></i>
<%- value.name %>
</a>
<ul class="submenu">
<ul class="list-v">
<li class='header'>
<div class="aplayer-container">
<%- partial('../_third-party/aplayer', {post: null, where: 'footer'}) %>
@ -94,7 +94,7 @@
<%- value.name %>
</a>
<% if (value.rows) { %>
<ul class="submenu">
<ul class="list-v">
<% value.rows.forEach(function(value){ %>
<% menu(value) %>
<%})%>
@ -118,43 +118,21 @@
</div>
<% } %>
<ul class='switcher h-list'>
<ul class='switcher list-h'>
<% if (theme.search.enable === true) { %>
<li><a class="s-search flat-btn fas fa-search fa-fw" target="_self" href='javascript:void(0)'></a></li>
<li><a class="s-search fas fa-search fa-fw" target="_self" href='javascript:void(0)'></a></li>
<% } %>
<li><a class="s-menu flat-btn fas fa-bars fa-fw" target="_self" href='javascript:void(0)'></a></li>
<li>
<a class="s-menu fas fa-bars fa-fw" target="_self" href='javascript:void(0)'></a>
<ul class="menu-phone list-v navigation white-box">
<% menu_desktop.forEach(function(value){ %>
<% menu(value) %>
<%})%>
</ul>
</li>
</ul>
</div>
</div>
</header>
<ul class="menu-phone navigation white-box">
<%
let menu_mobile;
if (site.data && site.data.menu && site.data.menu.on_mobile) {
menu_mobile = site.data.menu.on_mobile;
} else {
menu_mobile = theme.navbar.menu.on_mobile;
}
menu_mobile = menu_mobile || [];
%>
<% menu_mobile.forEach(function(value){ %>
<li>
<a class="flat-box" <%= value.url ? 'href='+ url_for(value.url)+'' : ''%>
<% if (value.rel) { %>
rel="<%- value.rel %>"
<% } %>
<% if (value.target) { %>
target="<%- value.target %>"
<% } %>
<% if (value.url) { %>
id="<%= url_for(value.url).replace(/\/|%|\./g, "")?url_for(value.url).replace(/\/|%|\./g, ""):"home" %>"
<% } %>>
<% if (value.icon) { %>
<i class='<%= value.icon %> fa-fw'></i>
<% } %>
<%- value.name %>
</a>
</li>
<%})%>
</ul>
<script>setLoadingBarProgress(40);</script>

9
source/css/_base/index.styl
Unescape View File

@ -127,15 +127,6 @@ li
list-style: none
ul.h-list
display: flex
align-items: center
height: 100%
&>li
height: 100%
justify-content: center
article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary

294
source/css/_layout/navbar.styl
Unescape View File

@ -1,11 +1,10 @@
#loading-bar-wrapper
position: fixed
top: 0
left: 0
height: 2px
width: 100%
z-index: 99999
z-index: 9999
#loading-bar
position: fixed
@ -19,7 +18,7 @@
$iconW = 32px
$iconMargin = 4px
position: fixed
z-index: 9999
z-index: 99
top: 0
width: 100%
line-height: $navbar-height
@ -40,7 +39,7 @@
a
&:not([href])
cursor: default
a.logo
.title
color: $color-text
&.no_sidebar
.wrapper
@ -52,7 +51,7 @@
max-width: 112px
.wrapper.sub
.logo
.title
@media screen and (max-width: $device-mobile)
trans()
padding-left: $gap
@ -80,128 +79,38 @@
height: $navbar-height
line-height: $navbar-height
.nav-main
.title
txt-ellipsis()
flex-shrink: 0
padding: 0 $gap*1.5
font-size: $fontsize-h3
font-family: $fontfamily-logo
.logo
txt-ellipsis()
padding: 0 $gap*1.5
font-size: $fontsize-h3
font-family: $fontfamily-logo
flex-shrink: 0
@media screen and (max-width: $device-mobile)
padding: 0 $gap
&.img
padding: 0 $gap 0 0
img
height: 100%
letter-spacing: 0
img.logo
padding: 4px 0
@media screen and (max-width: $device-mobile)
padding: 0 $gap
img
height: 100%
padding: 4px 0
.nav-sub
max-width: $layout-width
margin: auto
@media screen and (min-width: 2000px)
max-width: 55vw
.logo
.title
font-size: $fontsize-body
font-family: $fontfamily
line-height: 1.2
max-height: $navbar-height
white-space: normal
flex-shrink: 1
@media screen and (max-width: $device-mobile)
padding: 0 $gap
letter-spacing: -0.5px
padding-top: 1px
overflow-y: scroll
margin-top: 2px
padding: 8px $gap
.menu
position: relative
height: $navbar-height
trans()
li
position: relative
ul.submenu
z-index: 1
display: none
position: absolute
background: $color-card
box-shadow: $boxshadow-float
margin-top: -2px - $border-card * 0.5
border-radius: $border-card * 0.5
border: 1px solid darken($color-codeblock, 6)
padding: $gap * 0.5 0
>hr
margin-top: $gap * 0.5
margin-bottom: $gap * 0.5
>li
// margin: -1px
white-space: nowrap
word-break: keep-all
&.header
font-size: $fontsize-footnote
font-weight: bold
line-height: 2em
color: $color-meta
margin: $gap * 0.5 $gap $gap * 0.25
ul
margin-left: 0
display: none
margin-top: 0 - 32px - $gap * 0.5
>li>a
font-size: $fontsize-meta
font-weight: bold
line-height: 33px
padding: 0 $gap
height: 32px
border-left: $border-line solid transparent
&:hover,&.active,&:active
color: $color-theme
border-left: $border-line solid $color-theme
border-bottom: none
>i
margin-right: 4px
&:hover
>ul.submenu
display: block
ul>li>a
trans()
display: block
padding: 0 8px
color: alpha($color-text, 85%)
i.music
animation: rotate-effect 1.5s linear infinite
@keyframes rotate-effect
0%
transform: rotate(0)
25%
transform: rotate(90deg)
50%
transform: rotate(180deg)
75%
transform: rotate(27 0deg)
100%
transform: rotate(360deg)
&.current
border-bottom: $border-line solid alpha($color-theme, 80%)
&:hover
color: $color-theme
border-bottom: $border-line solid $color-theme
background: bgcolor($color-theme)
&:active,&.active
color: $color-theme
border-bottom: $border-line solid $color-theme
@media screen and (max-width: $device-mobile)
display:none
.switcher
display: none
@ -212,7 +121,7 @@
@media screen and (max-width: $device-tablet)
.s-toc
display: flex
&>li
>li
height: $navbar-height - $gap
trans()
margin: 2px
@ -220,8 +129,7 @@
@media screen and (max-width: $device-mobile)
margin: 0 1px
height: $height
a
>a
display: flex
justify-content: center
align-items: center
@ -229,9 +137,13 @@
height: $height
padding: .85em 1.1em
border-radius: 100px
border: none
trans()
color: $color-theme
&:hover
border: none
&.active,&:active
border: none
background: bgcolor($color-theme)
@media screen and (max-width: $device-mobile)
width: $iconW
@ -309,6 +221,112 @@
$offset = 3 * $gap + 2 * $iconW
width: "calc(100% - %s)" % $offset
ul.list-h,ul.list-v
li:hover
>ul.list-v
display: block
ul.list-h
display: flex
align-items: center
height: 100%
&>li
height: 100%
position: relative
justify-content: center
>a
// border-top: $border-line solid transparent
border-bottom: $border-line solid transparent
ul.list-v
z-index: 1
display: none
position: absolute
background: $color-card
box-shadow: $boxshadow-float
margin-top: -2px - $border-card * 0.5
border-radius: $border-card * 0.5
border: 1px solid darken($color-codeblock, 6)
padding: $gap * 0.5 0
>hr
margin-top: $gap * 0.5
margin-bottom: $gap * 0.5
>li
white-space: nowrap
word-break: keep-all
&.header
font-size: $fontsize-footnote
font-weight: bold
line-height: 2em
color: $color-meta
margin: $gap * 0.5 $gap $gap * 0.25
ul
margin-left: 0
display: none
margin-top: 0 - 32px - $gap * 0.5
>li>a
font-size: $fontsize-meta
font-weight: bold
line-height: 33px
padding: 0 $gap
height: 32px
border-left: $border-line solid transparent
border-right: $border-line solid transparent
&:hover,&.active,&:active
color: $color-theme
border-left: $border-line solid $color-theme
border-bottom: none
>i
margin-right: 4px
.menu,.menu-phone
position: relative
trans()
li
position: relative
@media screen and (max-width: $device-mobile)
display:none
ul>li>a
trans()
display: block
padding: 0 8px
color: alpha($color-text, 85%)
i.music
animation: rotate-effect 1.5s linear infinite
@keyframes rotate-effect
0%
transform: rotate(0)
25%
transform: rotate(90deg)
50%
transform: rotate(180deg)
75%
transform: rotate(27 0deg)
100%
transform: rotate(360deg)
&.current
border-left-color: alpha($color-theme, 80%)
border-bottom-color: alpha($color-theme, 80%)
&:hover
color: $color-theme
border-left-color: $color-theme
border-bottom-color: $color-theme
background: bgcolor($color-theme)
&:active,&.active
color: $color-theme
border-left-color: $color-theme
border-bottom-color: $color-theme
.menu-phone li ul.list-v
right: "calc(100% - 0.5 * %s)" % $gap
ul
right: "calc(100% - 0.5 * %s)" % $gap
.l_header .wrapper
if hexo-config('style.navbar.width') == 'auto'
max-width: $layout-width
@ -318,50 +336,32 @@
.menu
flex: 1 1 auto
margin: 0 $gap 0 0
.submenu ul
.list-v ul
left: "calc(100% - 0.5 * %s)" % $gap
else
a.logo
.title
margin-right: auto
.m_search
margin-right: $gap
.menu li ul.submenu
.menu li ul.list-v
right: 0
ul
right: "calc(100% - 0.5 * %s)" % $gap
ul.menu-phone
.menu-phone
display: none
margin-top: $gap
right: 0
ul
right: "calc(100% - 0.5 * %s)" % $gap
@media screen and (max-width: $device-mobile)
display: block
position: fixed
padding: $gap * 0.5 0
top: $navbar-height + $gap
right: $gap
z-index: 9999 + 1
box-shadow: $boxshadow-card-float
border-radius: $border-card * 0.5
trans()
transform: scale(0,0) rotate(12deg)
transform-origin: right top
&.show
transform: scale(1,1) rotate(0)
>li>a
display: block
font-size: $fontsize-body
color: $color-text
line-height: 33px
height: 32px
padding: 0 $gap
border-left: $border-line solid transparent
i
margin-right: 4px
&.active
border-left: $border-line solid $color-theme
color: $color-theme
// transform: scale(0,0) rotate(12deg)
// transform-origin: right top
// &.show
// transform: scale(1,1) rotate(0)
.cover-wrapper

4
source/css/_layout/search.styl
Unescape View File

@ -7,7 +7,7 @@
width: 100%
height: 100%
padding: 60px 20px
z-index: 999999
z-index: 99
@media screen and (max-width: $modal-threshold)
padding: 0px
.modal
@ -51,7 +51,7 @@
border-top-right-radius: $border-card
font-size: $fontsize
box-shadow: $boxshadow-card
background: darken($color-card, 5)
background: lighten($color-card, 5)
@media screen and (max-width: $modal-threshold)
border-radius: 0
padding: 0px

2
source/css/_third-party/alert.styl vendored
Unescape View File

@ -6,7 +6,7 @@
top: 50%
left: 50%
transform: translate(-50%,-50%)
z-index: 99999
z-index: 999
text-align: center
padding: 30px 36px 29px 36px
border-radius: $border-card

32
source/js/app.js
Unescape View File

@ -80,7 +80,7 @@ var customSearch;
const $comment = $('.s-comment', $wrapper);
const $toc = $('.s-toc', $wrapper);
$wrapper.find('.nav-sub .logo').text(window.subData.title);
$wrapper.find('.nav-sub .title').text(window.subData.title);
let pos = document.body.scrollTop;
$(document, window).scroll(() => {
const scrollTop = $(window).scrollTop();
@ -160,21 +160,21 @@ var customSearch;
}
function setHeaderMenuPhone() {
var $switcher = $('.l_header .switcher .s-menu');
var $menu = $('body ul.menu-phone');
$switcher.click(function (e) {
e.stopPropagation();
$menu.toggleClass('show');
$switcher.toggleClass('active');
});
$(document).click(function (e) {
$menu.removeClass('show');
$switcher.removeClass('active');
});
$(document, window).scroll(() => {
$menu.removeClass('show');
$switcher.removeClass('active');
});
// var $switcher = $('.l_header .switcher .s-menu');
// var $menu = $('body .menu-phone');
// $switcher.click(function (e) {
// e.stopPropagation();
// $menu.toggleClass('show');
// $switcher.toggleClass('active');
// });
// $(document).click(function (e) {
// // $menu.removeClass('show');
// $switcher.removeClass('active');
// });
// $(document, window).scroll(() => {
// $menu.removeClass('show');
// $switcher.removeClass('active');
// });
}
function setHeaderSearch() {

Write Preview
Loading…
Cancel
Save