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

css

Browse Source
master
xaoxuu 4 years ago
parent 226c639120
commit 4a6b33f582
6 changed files with 64 additions and 72 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. 8
      layout/_partial/header.ejs
  2. 105
      source/css/_layout/main.styl
  3. 16
      source/css/_layout/navbar.styl
  4. 3
      source/css/_layout/pagination.styl
  5. 2
      source/css/_layout/sidebar.styl
  6. 2
      source/js/app.js

8
layout/_partial/header.ejs
Unescape View File

@ -7,9 +7,9 @@
<div class='nav-sub container--flex'>
<a class="logo flat-box"></a>
<ul class='switcher h-list'>
<li class='s-comment'><a class="flat-btn fas fa-comments fa-fw" target="_self" href='javascript:void(0)'></a></li>
<li><a class="s-comment flat-btn fas fa-comments fa-fw" target="_self" href='javascript:void(0)'></a></li>
<% if (page.sidebar == undefined || page.sidebar != false) { %>
<li class='s-toc'><a class="flat-btn fas fa-list fa-fw" target="_self" href='javascript:void(0)'></a></li>
<li><a class="s-toc flat-btn fas fa-list fa-fw" target="_self" href='javascript:void(0)'></a></li>
<% } %>
</ul>
</div>
@ -97,9 +97,9 @@
<ul class='switcher h-list'>
<% if (theme.search.enable === true) { %>
<li class='s-search'><a class="fas fa-search fa-fw" target="_self" href='javascript:void(0)'></a></li>
<li><a class="s-search flat-btn fas fa-search fa-fw" target="_self" href='javascript:void(0)'></a></li>
<% } %>
<li class='s-menu'><a class="fas fa-bars 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>
</ul>
</div>
</div>

105
source/css/_layout/main.styl
Unescape View File

@ -1,3 +1,44 @@
.l_body
position: relative
margin: $gap
&.nocover
margin-top: $gap + $navbar-height
@media screen and (max-width: $device-mobile-l)
margin: $navbar-height + $gap 0 $gap
&.nocover
margin-top: $navbar-height - $gap
.s-top
trans(0.6s)
z-index: 9
position: fixed
width: 48px
height: 48px
line-height: 48px
border-radius: 100%
bottom: $gap*2
right: $gap*2
transform: translateY(100px) scale(0)
transform-origin: bottom
color: $color-text
@media screen and (max-width: $device-tablet)
right: $gap
&.show
transform: translateY(0) scale(1)
&.hl
background: $color-theme
color: $color-inner
box-shadow: $boxshadow-card
@media screen and (min-width: $device-tablet)
&:hover
transform: scale(1.2)
border-radius: 25%
background: $color-theme
color: white
box-shadow: $boxshadow-card-float
&.hl
box-shadow: $boxshadow-card-float
.l_main
width: "calc(100% - 1 * %s)" % $sidebar
@media screen and (max-width: $device-desktop)
@ -8,7 +49,7 @@
&.no_sidebar
width: 100%
padding-right: 0
max-width: $device-tablet
max-width: $layout-width - $sidebar
margin: auto
~.l_side
display: none
@ -17,15 +58,12 @@
position: relative
margin: $gap auto
column-gap: $gap
@media screen and (max-width: $device-mobile)
margin: 0
// @media screen and (max-width: $device-mobile)
// margin: 0
&.multiple-columns
columns: 320px // 支持多列
:first-child
// margin-top: 0
ul.popular-posts
h3
@ -35,9 +73,8 @@
.post-wrapper
// for firefox
column-break-inside: avoid
break-inside: avoid-column
column-break-inside: avoid
break-inside: avoid-column
mobile-post()
.post
@ -82,11 +119,11 @@
margin: $gap auto
padding: 1.5 * $gap
border-radius: $borderradius
@media screen and (max-width: $device-mobile-l)
border-radius: 0
h1
font-weight: normal
font-size: $fontsize-h1
@media screen and (max-width: $device-mobile)
border-radius: 0
.meta
color: $color-meta
&#header-meta
@ -300,52 +337,6 @@ details
align-items: center
.l_body
position: relative
margin: $gap
margin-top: $gap
&.nocover
margin-top: $gap + $navbar-height
@media screen and (max-width: $device-mobile)
margin: $navbar-height + $gap 0 $gap
border-radius: 0
&.nocover
margin-top: $navbar-height - $gap
.s-top
trans(0.6s)
z-index: 9
position: fixed
width: 48px
height: 48px
line-height: 48px
border-radius: 100%
bottom: $gap*2
right: $gap*2
transform: translateY(100px) scale(0)
transform-origin: bottom
color: $color-text
@media screen and (max-width: $device-tablet)
right: $gap
&.show
transform: translateY(0) scale(1)
&.hl
background: $color-theme
color: $color-inner
box-shadow: $boxshadow-card
@media screen and (min-width: $device-tablet)
&:hover
transform: scale(1.2)
border-radius: 25%
background: $color-theme
color: white
box-shadow: $boxshadow-card-float
&.hl
box-shadow: $boxshadow-card-float
div.hoverbox
display: flex

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

@ -47,12 +47,9 @@
cursor: default
a.logo
color: $color-text
&.no_sidebar
.wrapper
max-width: $device-tablet
margin: auto
max-width: $layout-width - $sidebar
.wrapper.sub
.logo
@ -195,14 +192,14 @@
@media screen and (max-width: $device-tablet)
.s-toc
display: block
display: flex
&>li
height: $navbar-height - $gap
trans()
margin: 2px
$height = $navbar-height - $gap
@media screen and (max-width: $device-mobile)
margin: 0
margin: 0 1px
height: $height
a
@ -211,10 +208,11 @@
align-items: center
width: $height
height: $height
padding: .85em 1.1em
border-radius: 100px
trans()
color: $color-theme
&:hover
&.active,&:active
background: bgcolor($color-theme)
@media screen and (max-width: $device-mobile)
width: $iconW
@ -291,8 +289,8 @@
.logo
opacity:0
.m_search
$offset = 2 * ($gap + $iconW)
width: "calc(100vw - %s)" % $offset
$offset = 2.5 * $gap + 2 * $iconW
width: "calc(100% - %s)" % $offset
ul.menu-phone

3
source/css/_layout/pagination.styl
Unescape View File

@ -6,6 +6,7 @@
align-items: baseline
color: $color-meta
margin: 0
font-size: $fontsize-body
.prev
text-align: left
border-top-right-radius: 32px
@ -27,7 +28,7 @@
color: $color-hover
@media screen and (max-width: $device-mobile)
@media screen and (max-width: $device-mobile-l)
section
border-radius: 0

2
source/css/_layout/sidebar.styl
Unescape View File

@ -26,7 +26,7 @@
&.mobile
display: block !important
@media screen and (max-width: $device-mobile)
@media screen and (max-width: $device-mobile-l)
width: "calc(100% - 2 * %s)" % $gap
margin: $gap $gap 0 $gap
display: none !important

2
source/js/app.js
Unescape View File

@ -172,9 +172,11 @@ var customSearch;
e.stopPropagation();
$header.toggleClass('z_search-open');
$search.find('input').focus();
$switcher.toggleClass('active');
});
$(document).click(function (e) {
$header.removeClass('z_search-open');
$switcher.removeClass('active');
});
$search.click(function (e) {
e.stopPropagation();

Write Preview
Loading…
Cancel
Save