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