From 9e6ba147f14cbf9e182f849f3515b95b59907250 Mon Sep 17 00:00:00 2001 From: liuyib <1656081615@qq.com> Date: Fri, 9 Aug 2019 17:25:42 +0800 Subject: [PATCH] refactor: Optimize global UI style --- layout/page.pug | 2 +- source/css/_common/footer.styl | 2 +- source/css/_common/main.styl | 4 +- source/css/_common/page.styl | 19 +++--- source/css/_common/responsive.styl | 61 ++++++++++++++----- source/css/_common/sidebar.styl | 2 +- source/css/_components/pagination.styl | 1 - .../css/_components/tag-plugin/friends.styl | 2 +- source/css/_mixins/post-header.styl | 1 + source/css/_mixins/post-sort.styl | 2 +- source/css/var.styl | 7 +-- source/images/algolia.svg | 2 +- source/images/cc-by-nc-nd.svg | 2 +- source/images/cc-by-nc-sa.svg | 2 +- source/images/cc-by-nc.svg | 2 +- source/images/cc-by-sa.svg | 2 +- source/images/icons/logo-stun.svg | 33 +--------- source/images/loading.svg | 54 +--------------- 18 files changed, 73 insertions(+), 127 deletions(-) diff --git a/layout/page.pug b/layout/page.pug index dfdb0a9..a580ce1 100644 --- a/layout/page.pug +++ b/layout/page.pug @@ -11,7 +11,7 @@ block content div.tag-cloud-title= _p("page.tags") + " - " span.tag-cloud-num= site.tags.length - var min_font = theme.tag_cloud ? theme.tag_cloud.min_size : 14 - - var max_font = theme.tag_cloud ? theme.tag_cloud.max_size : 20 + - var max_font = theme.tag_cloud ? theme.tag_cloud.max_size : 24 - var start_color = theme.tag_cloud ? theme.tag_cloud.start_color : "#a4d8fa" - var end_color = theme.tag_cloud ? theme.tag_cloud.end_color : "#1b9ef3" div.tag-cloud-item!= tagcloud({min_font: min_font, max_font: max_font, amount: theme.tag_cloud.max_amount, color: true, start_color, end_color}) diff --git a/source/css/_common/footer.styl b/source/css/_common/footer.styl index 6067c7d..6f1c14d 100644 --- a/source/css/_common/footer.styl +++ b/source/css/_common/footer.styl @@ -1,5 +1,4 @@ #footer - font-size: $font-footer-base background-color: $gray-dark background-attachment: fixed background-position: bottom @@ -17,6 +16,7 @@ .footer-inner padding: 1rem + font-size: $font-footer-base text-align: center color: $footer-text-color diff --git a/source/css/_common/main.styl b/source/css/_common/main.styl index a2a4eec..416d38c 100644 --- a/source/css/_common/main.styl +++ b/source/css/_common/main.styl @@ -15,6 +15,7 @@ setUlStyle(content, hoverColor) color: hoverColor #container + overflow: hidden min-height: 100vh #main @@ -32,7 +33,6 @@ setUlStyle(content, hoverColor) h5, h6 position: relative - margin: 1.5rem 0 1rem font-weight: $font-weight-bolder line-height: $line-height-h color: lighten($h-color, 15%) @@ -139,7 +139,7 @@ setUlStyle(content, hoverColor) &::before content: '--' padding: 0 .2em - + iframe max-width: 100% diff --git a/source/css/_common/page.styl b/source/css/_common/page.styl index 1ed347b..897c39c 100644 --- a/source/css/_common/page.styl +++ b/source/css/_common/page.styl @@ -17,7 +17,6 @@ position: relative margin-bottom: 1.3rem padding-left: 1.4rem - font-size: $font-main-base &::before content: '' @@ -39,8 +38,7 @@ clearAStyle() &-title - padding: 0 0 1.8rem - font-size: $font-post-title + font-size: $font-size-base + 10px text-align: center cursor: default @@ -60,15 +58,18 @@ &:hover color: $categories-link-hover-color - .category-list-item - &::before - color: $categories-list-dot-color + &-list + margin-top: 0 !important - &:hover + &-item &::before - color: $categories-list-dot-hover-color + color: $categories-list-dot-color + + &:hover + &::before + color: $categories-list-dot-hover-color - .category-list-count + &-count padding-left: .3em font-size: $font-size-base color: $categories-post-count-color diff --git a/source/css/_common/responsive.styl b/source/css/_common/responsive.styl index 1d83759..f71cc8c 100644 --- a/source/css/_common/responsive.styl +++ b/source/css/_common/responsive.styl @@ -13,18 +13,17 @@ // $md-width: 992px - 0.02px // ----------------------------------------- @media screen and (min-width: $md-width) - .header-nav-inner - .header-nav-menu - visibility: visible - opacity: 1 + .header-nav-menu + visibility: visible + opacity: 1 @media screen and (max-width: $md-width) - #header, - #footer - background-attachment: local - #header height: 340px + background-attachment: local + + #footer + background-attachment: local #main margin: 1rem 0 @@ -68,6 +67,10 @@ display: block float: left + .friends-plugin + .friends-item + width: calc(50% - 10px) + // sm-width: 768px - 0.02px // ----------------------------------------- @media screen and (max-width: $sm-width) @@ -80,12 +83,29 @@ div.algolia-popup, div.localsearch-popup + top: 0 left: 0 - margin: 0 1rem - width: calc(100% - 2rem) + margin: 0 + border-radius: 0 + width: 100% + height: 100vh + max-height: 100vh + + div.localsearch-result + max-height: calc(100vh - 6rem) // $xs-width: 576px - 0.02px // ----------------------------------------- +@media screen and (min-width: $xs-width) + .content + font-size: $font-size-large + + .sidebar-inner + font-size: $font-size-large + + .footer-inner + font-size: $font-size-large + @media screen and (max-width: $xs-width) #header height: 240px @@ -94,19 +114,22 @@ margin: .8rem 0 .content - padding: 0 .6rem + padding: .8rem .6rem font-size: $font-size-base + .home-content + padding: 0 + #recent-posts article.post margin: 0 0 .8rem - padding: .6rem .8rem + padding: .8rem .header-info-inner .header-info-title - font-size: 2.5rem + font-size: 1.8rem .header-info-subtitle - font-size: .8rem + font-size: $font-size-base .header-nav-search span @@ -119,8 +142,10 @@ margin: 0 .post-header + font-size: $font-size-base + .post-title - font-size: 1.25rem + font-size: 1.2rem .post-meta &-create, @@ -137,7 +162,6 @@ .article-sort-title margin-bottom: .8rem - font-size: 1rem .article-sort-item margin-bottom: .5rem @@ -162,3 +186,8 @@ div.localsearch-result & > ul padding-left: 1rem + + .friends-plugin + .friends-item + padding: .5rem + width: 100% diff --git a/source/css/_common/sidebar.styl b/source/css/_common/sidebar.styl index eb3c1af..94a7cd9 100644 --- a/source/css/_common/sidebar.styl +++ b/source/css/_common/sidebar.styl @@ -3,12 +3,12 @@ $sidebar-width = convert(hexo-config('sidebar.width') || '300px') #sidebar float: convert(hexo-config('sidebar.position') || 'right') width: $sidebar-width - font-size: $font-sidebar-base .sidebar-inner border-radius: 5px padding: 1rem width: $sidebar-width + font-size: $font-sidebar-base background-color: $white &.sticky diff --git a/source/css/_components/pagination.styl b/source/css/_components/pagination.styl index 3b40a39..23cbbc5 100644 --- a/source/css/_components/pagination.styl +++ b/source/css/_components/pagination.styl @@ -2,7 +2,6 @@ overflow: hidden margin-top: 1em width: 100% - font-size: 1.2em .paginator-inner border-radius: 5px diff --git a/source/css/_components/tag-plugin/friends.styl b/source/css/_components/tag-plugin/friends.styl index 812a55c..c13e887 100644 --- a/source/css/_components/tag-plugin/friends.styl +++ b/source/css/_components/tag-plugin/friends.styl @@ -7,7 +7,7 @@ display: block float: left margin: 0 5px - padding: .5rem + padding: .5rem .5rem .5rem 1rem width: calc(33.3% - 10px) height: 100px transition: background-color .3s diff --git a/source/css/_mixins/post-header.styl b/source/css/_mixins/post-header.styl index 20407cf..a681bce 100644 --- a/source/css/_mixins/post-header.styl +++ b/source/css/_mixins/post-header.styl @@ -1,6 +1,7 @@ .post-header position: relative margin: 0 0 1.5rem + font-size: 1em text-align: center .post-title diff --git a/source/css/_mixins/post-sort.styl b/source/css/_mixins/post-sort.styl index 5b65b58..6d507de 100644 --- a/source/css/_mixins/post-sort.styl +++ b/source/css/_mixins/post-sort.styl @@ -49,11 +49,11 @@ &__title display: inline-block max-width: 80% + font-size: 1em vertical-align: middle a clearAStyle() - font-size: $font-main-base text-decoration: none color: $font-color cursor: pointer diff --git a/source/css/var.styl b/source/css/var.styl index bb1cc25..284f1ac 100644 --- a/source/css/var.styl +++ b/source/css/var.styl @@ -157,10 +157,9 @@ $font-size-larger = $font-size-base + 4px; // If you don`t want to bother, comment it and default value will be enable $font-header-base = 20px -$font-footer-base = 20px -$font-main-base = 16px -$font-post-title = 40px // article title -$font-sidebar-base = 16px +$font-footer-base = 14px +$font-main-base = 14px +$font-sidebar-base = 14px // Font family $font-family = PingFang SC, Microsoft YaHei, Lato, sans-serif, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Hiragino Sans GB, Helvetica Neue, Helvetica, Arial diff --git a/source/images/algolia.svg b/source/images/algolia.svg index 861979b..e81bb92 100644 --- a/source/images/algolia.svg +++ b/source/images/algolia.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/source/images/cc-by-nc-nd.svg b/source/images/cc-by-nc-nd.svg index c11dce5..29216ba 100644 --- a/source/images/cc-by-nc-nd.svg +++ b/source/images/cc-by-nc-nd.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/source/images/cc-by-nc-sa.svg b/source/images/cc-by-nc-sa.svg index e6f3cc4..2c7f31e 100644 --- a/source/images/cc-by-nc-sa.svg +++ b/source/images/cc-by-nc-sa.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/source/images/cc-by-nc.svg b/source/images/cc-by-nc.svg index 0e04fe0..8771701 100644 --- a/source/images/cc-by-nc.svg +++ b/source/images/cc-by-nc.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/source/images/cc-by-sa.svg b/source/images/cc-by-sa.svg index 0b38a12..bdb10f9 100644 --- a/source/images/cc-by-sa.svg +++ b/source/images/cc-by-sa.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/source/images/icons/logo-stun.svg b/source/images/icons/logo-stun.svg index 6f38471..249506e 100644 --- a/source/images/icons/logo-stun.svg +++ b/source/images/icons/logo-stun.svg @@ -1,32 +1 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + \ No newline at end of file diff --git a/source/images/loading.svg b/source/images/loading.svg index 4ae992c..7c491f4 100644 --- a/source/images/loading.svg +++ b/source/images/loading.svg @@ -1,53 +1 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file + \ No newline at end of file -- GitLab