From 4a6b33f58252fd8c2b9b5f14e69950f4487a13b0 Mon Sep 17 00:00:00 2001 From: xaoxuu Date: Tue, 10 Mar 2020 18:34:16 +0800 Subject: [PATCH] css --- layout/_partial/header.ejs | 8 +-- source/css/_layout/main.styl | 105 +++++++++++++---------------- source/css/_layout/navbar.styl | 16 ++--- source/css/_layout/pagination.styl | 3 +- source/css/_layout/sidebar.styl | 2 +- source/js/app.js | 2 + 6 files changed, 64 insertions(+), 72 deletions(-) diff --git a/layout/_partial/header.ejs b/layout/_partial/header.ejs index c2b544b..7181818 100755 --- a/layout/_partial/header.ejs +++ b/layout/_partial/header.ejs @@ -7,9 +7,9 @@
@@ -97,9 +97,9 @@ diff --git a/source/css/_layout/main.styl b/source/css/_layout/main.styl index 71278c8..d74b14e 100644 --- a/source/css/_layout/main.styl +++ b/source/css/_layout/main.styl @@ -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 diff --git a/source/css/_layout/navbar.styl b/source/css/_layout/navbar.styl index 4aeca62..0cd0cd5 100644 --- a/source/css/_layout/navbar.styl +++ b/source/css/_layout/navbar.styl @@ -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 diff --git a/source/css/_layout/pagination.styl b/source/css/_layout/pagination.styl index f5ce62f..8fe024c 100644 --- a/source/css/_layout/pagination.styl +++ b/source/css/_layout/pagination.styl @@ -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 diff --git a/source/css/_layout/sidebar.styl b/source/css/_layout/sidebar.styl index d8b90bd..a94e74a 100644 --- a/source/css/_layout/sidebar.styl +++ b/source/css/_layout/sidebar.styl @@ -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 diff --git a/source/js/app.js b/source/js/app.js index 153db7b..a17683c 100755 --- a/source/js/app.js +++ b/source/js/app.js @@ -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();