From 9c963fd7c042e25815f7636425663d126111cded Mon Sep 17 00:00:00 2001 From: xaoxuu Date: Fri, 6 Mar 2020 16:16:00 +0800 Subject: [PATCH] css --- source/css/_layout/main.styl | 50 ++++----------------------------- source/css/_layout/navbar.styl | 31 +++++++++----------- source/css/_layout/search.styl | 9 +----- source/css/_layout/sidebar.styl | 2 +- 4 files changed, 20 insertions(+), 72 deletions(-) diff --git a/source/css/_layout/main.styl b/source/css/_layout/main.styl index 131e232..efaa42b 100644 --- a/source/css/_layout/main.styl +++ b/source/css/_layout/main.styl @@ -45,30 +45,8 @@ margin-bottom: $gap .title font-size: $font-size-h3 - .full-width - margin-left: 0 - $gap - margin-right: 0 - $gap - padding-left: $gap - padding-right: $gap - width:"calc(100% + 2 * %s)" % $gap - .auto-padding - padding-left: $gap - padding-right: $gap - border-bottom-left-radius: $border-radius - border-bottom-right-radius: $border-radius - overflow: auto - .highlight - margin-left: 0*$gap - margin-right: 0*$gap - width: 100% - @media(max-width:@on_phone) - padding: 1.5*$gap $gap - .highlight - margin-left: 0*$gap - margin-right: 0*$gap - .auto-padding - border-bottom-left-radius: 0 - border-bottom-right-radius: 0 + @media screen and (max-width: $device-mobile) + padding: 1.5 * $gap $gap .post-wrapper margin-bottom: $gap @@ -79,26 +57,7 @@ font-size: $font-size-h2 a font-size: $font-size-h2 - - .full-width - margin-left: -1.5*$gap - margin-right: -1.5*$gap - width: "calc(100% + 3 * %s)" % $gap - - .auto-padding - padding-left: 1.5*$gap - padding-right: 1.5*$gap - border-bottom-left-radius: $border-radius - border-bottom-right-radius: $border-radius - overflow: auto - - - .tags - margin-bottom: -2*$gap - - @media(max-width:@on_phone) - .tags - margin-bottom: -1.5*$gap + @media screen and (max-width: $device-mobile) mobile-post() .widget @@ -139,7 +98,6 @@ border-radius: 25% transform: scale(1.1) box-shadow: $box-shadow-card-float - @media screen and (max-width: $device-mobile) &:hover border-radius: 100% @@ -332,6 +290,8 @@ details @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) diff --git a/source/css/_layout/navbar.styl b/source/css/_layout/navbar.styl index a35246b..0c1feee 100644 --- a/source/css/_layout/navbar.styl +++ b/source/css/_layout/navbar.styl @@ -189,11 +189,12 @@ width: $iconW left: $iconMargin + 1px color: alpha($color-text, 70%) - + @media screen and (max-width: $device-mobile) + display: none .input display: block - padding-top: 8px - padding-bottom: 8px + padding-top: $gap * 0.5 + padding-bottom: $gap * 0.5 width: 100% color: $color-text background: alpha(darken($color-card, 5), .75) @@ -201,28 +202,21 @@ box-sizing: border-box padding-left: $iconW + $iconMargin font-size: $font-size-meta - @media screen and (max-width: $device-mobile) - padding-left: $iconW + $iconMargin - border-radius: $border-radius-searchbar border: 1px dashed transparent - // .set-placeholder( - // color: alpha($color-text, 50%) - // ) + @media screen and (max-width: $device-mobile) + padding-left: $gap + line-height: "calc(%s - 32px)" % $navbar-height + border: none + &:hover,&:focus + border: none &:hover - color: $color-inner ~.icon color: alpha($color-theme, 80%) - border: 1px solid alpha($color-theme, 60%) - &:focus ~.icon color: $color-theme - color: $color-text - background: bgcolor($color-theme) - border: 1px solid $color-theme - @media (max-width: $device-mobile) @@ -232,13 +226,14 @@ overflow: hidden position: absolute trans() - margin: 0 $gap * 0.5 + margin-left: $gap * 0.5 &.z_search-open .logo opacity:0 .m_search - width: "calc(100vw - %s)" % (2 * $gap + 2 * $iconW) + $offset = 2 * ($gap + $iconW) + width: "calc(100vw - %s)" % $offset .menu-phone diff --git a/source/css/_layout/search.styl b/source/css/_layout/search.styl index 25e3da4..702b9e7 100644 --- a/source/css/_layout/search.styl +++ b/source/css/_layout/search.styl @@ -216,17 +216,10 @@ -webkit-overflow-scrolling: touch background: $color-card border-radius: $border-radius - @media screen and (max-width: $modal-threshold) - padding: 60px 20px 80px 20px .modal-results list-style: none - // li - // border-bottom: 1px solid #e6e8ea - // &:last-child - // border-bottom: none - - + .result position: relative display: block diff --git a/source/css/_layout/sidebar.styl b/source/css/_layout/sidebar.styl index a7c4552..1e5cc20 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: @on_phone) + @media screen and (max-width: $device-mobile) width: "calc(100% - 2 * %s)" % $gap margin: $gap $gap 0 $gap display: none !important