From 5ac82b61967bc256c5a702b1c35f45789a38fa03 Mon Sep 17 00:00:00 2001 From: XPoet Date: Thu, 4 Jun 2020 22:11:27 +0800 Subject: [PATCH] style: optimize mobile adaptation css --- source/css/layout/_partial/archive-list.styl | 5 +++ source/css/layout/_partial/header.styl | 19 +++++++++-- source/css/layout/_partial/local-search.styl | 20 +++++------ source/css/layout/about.styl | 8 +++++ source/css/layout/archive-content.styl | 4 +++ source/css/layout/article-content.styl | 15 +++++++-- source/css/layout/category-content.styl | 13 ++++++++ source/css/layout/common/variables.styl | 35 ++++++++++++-------- source/css/layout/home-content.styl | 15 +++++++++ source/css/layout/links.styl | 8 +++++ source/css/layout/page.styl | 31 ++++++++++++++--- source/css/layout/tag-content.styl | 13 ++++++++ 12 files changed, 154 insertions(+), 32 deletions(-) diff --git a/source/css/layout/_partial/archive-list.styl b/source/css/layout/_partial/archive-list.styl index 7434ff7..7661f59 100644 --- a/source/css/layout/_partial/archive-list.styl +++ b/source/css/layout/_partial/archive-list.styl @@ -15,6 +15,11 @@ $article-date-font-size = 0.8em; .archive-item-header { .archive-year { font-size: $archive-year-font-size; + + +ils-tablet() { + font-size: $archive-year-font-size - 0.2em; + } + color: var(--second-text-color); font-weight: 600; margin-right: 20px; diff --git a/source/css/layout/_partial/header.styl b/source/css/layout/_partial/header.styl index 2a0db53..9f99514 100644 --- a/source/css/layout/_partial/header.styl +++ b/source/css/layout/_partial/header.styl @@ -30,6 +30,15 @@ .logo-title { font-size: 2.2em; font-weight: bold; + + +ils-tablet() { + font-size: 2.0em; + } + + +ils-mobile() { + font-size: 1.8em; + } + letter-spacing: 1px; color: var(--first-text-color); transition(); @@ -242,7 +251,6 @@ } .menu-list { - .menu-item { a:hover { &::after { @@ -277,7 +285,14 @@ } .header-content { - width: $main-content-width * 1.2 !important; + width: 80% !important; + } + +} + +@media screen and (max-width: $media-max-width-mobile) { + .header-content { + width: 90% !important; } } \ No newline at end of file diff --git a/source/css/layout/_partial/local-search.styl b/source/css/layout/_partial/local-search.styl index 68e655f..646391e 100644 --- a/source/css/layout/_partial/local-search.styl +++ b/source/css/layout/_partial/local-search.styl @@ -23,8 +23,16 @@ $icon-size = 1.2em; position: fixed; top: 10%; width: 70%; - z-index: $z-index-6; + +ils-tablet() { + width: 80%; + } + + +ils-mobile() { + width: 90%; + } + + z-index: $z-index-6; .search-icon, .popup-btn-close { color: var(--normal-text-color); @@ -94,9 +102,6 @@ input.search-input { p.search-result { margin 0 padding 0 - // border-bottom: 1px solid var(--border-color); - // padding-bottom: 10px; - // margin-bottom: 20px; } a.search-result-title { @@ -120,11 +125,4 @@ input.search-input { color: var(--third-text-color); margin: auto; } -} - -@media screen and (max-width: $media-max-width) { - .search-popup { - width: 80%; - } - } \ No newline at end of file diff --git a/source/css/layout/about.styl b/source/css/layout/about.styl index a0f28b8..6e4466d 100644 --- a/source/css/layout/about.styl +++ b/source/css/layout/about.styl @@ -6,6 +6,10 @@ magic-container(1.005, 1.01, 30px); + +ils-tablet() { + magic-container(1.001, 1.005, 20px); + } + .about-content { h1, h2, h3, h4, h5, h6 { @@ -17,5 +21,9 @@ } margin-bottom: 30px; + + +ils-tablet() { + margin-bottom: 20px; + } } } \ No newline at end of file diff --git a/source/css/layout/archive-content.styl b/source/css/layout/archive-content.styl index 9863c3e..4bfac77 100644 --- a/source/css/layout/archive-content.styl +++ b/source/css/layout/archive-content.styl @@ -3,6 +3,10 @@ .archive-container { background: var(--background-color); magic-container(1.005, 1.01, 30px); + + +ils-tablet() { + magic-container(1.001, 1.005, 20px); + } } diff --git a/source/css/layout/article-content.styl b/source/css/layout/article-content.styl index be29d29..2b75ea6 100644 --- a/source/css/layout/article-content.styl +++ b/source/css/layout/article-content.styl @@ -15,6 +15,15 @@ h3 { font-weight: 600; font-size: 1.8em; + + +ils-tablet() { + font-size: 1.5em; + } + + +ils-mobile() { + font-size: 1.2em; + } + margin: 0; } @@ -24,12 +33,10 @@ } - .meta-info { margin: 10px 0 30px 0; } - .article-content { text-align: justify; padding-bottom: 30px; @@ -59,6 +66,10 @@ if ((hexo-config('magic.enable') && !hexo-config('magic.sidebar.enable') && hexo position: fixed; top: $header-height + $component-interspace; + +ils-tablet() { + display: none; + } + if (hexo-config('side_tools.position') == left) { right: 30px; } else { diff --git a/source/css/layout/category-content.styl b/source/css/layout/category-content.styl index b19f47b..c8fcde3 100644 --- a/source/css/layout/category-content.styl +++ b/source/css/layout/category-content.styl @@ -6,11 +6,24 @@ if (hexo-config('magic.enable')) { magic-container(1.02, 1.02, 30px); + + +ils-tablet() { + magic-container(1.01, 1.01, 20px); + } } .category-name { color: var(--second-text-color); font-size: 1.6em; + + +ils-tablet() { + font-size: 1.5em; + } + + +ils-mobile() { + font-size: 1.4em; + } + font-weight: 600; padding-bottom: 20px; margin-bottom: $component-interspace; diff --git a/source/css/layout/common/variables.styl b/source/css/layout/common/variables.styl index e8dd6ee..c2ce43e 100644 --- a/source/css/layout/common/variables.styl +++ b/source/css/layout/common/variables.styl @@ -13,19 +13,28 @@ if (hexo-config('magic.enable')) { if (hexo-config('magic.enable') && hexo-config('magic.sidebar.enable')) { $main-content-width = 80%; - $sidebar-width = 280px; // 侧边栏宽度 + $sidebar-width = 280px; // 侧边栏宽度 } else { $main-content-width = 60%; } $header-shrink-height = 60px; // 头部收缩高度 -$tool-button-width = 36px; // 方形工具按钮宽度 -$component-interspace = 30px; // 组件/模块的间隔值（px） +$tool-button-width = 36px; // 方形工具按钮宽度 +$component-interspace = 30px; // 组件/模块的间隔值（px） // =================================== // 媒体查询 // =================================== -$media-max-width = 760px; // 媒体查询最大宽度 +$media-max-width = 760px; // 媒体查询最大宽度 +$media-max-width-mobile = 480px; // 媒体查询最大宽度 + +ils-tablet() + @media (max-width: $media-max-width) + {block} + +ils-mobile() + @media (max-width: $media-max-width-mobile) + {block} // =================================== @@ -43,16 +52,16 @@ $z-index-6 = 1006; // color // =================================== // normal mode color -$primary-color = #225eea; // 主题颜色 -$background-color = #fff; // 背景颜色 +$primary-color = #225eea; // 主题颜色 +$background-color = #fff; // 背景颜色 $magic-background-color = #f5f5f5; // MAGIC 主题背景颜色 -$normal-text-color = #43404d; // 通用文本颜色（默认字体颜色） -$first-text-color = darken($normal-text-color, 8%); // 第一文本颜色 -$second-text-color = darken($normal-text-color, 4%); // 第二文本颜色 -$third-text-color = lighten($normal-text-color, 40%); // 第三文本颜色 -$fourth-text-color = #eee; // 第四文本颜色 -$border-color = darken($background-color, 30%); // 边框颜色 -$selection-color = lighten($primary-color, 20%); // 文字选中的颜色 +$normal-text-color = #43404d; // 通用文本颜色（默认字体颜色） +$first-text-color = darken($normal-text-color, 8%); // 第一文本颜色 +$second-text-color = darken($normal-text-color, 4%); // 第二文本颜色 +$third-text-color = lighten($normal-text-color, 40%); // 第三文本颜色 +$fourth-text-color = #eee; // 第四文本颜色 +$border-color = darken($background-color, 30%); // 边框颜色 +$selection-color = lighten($primary-color, 20%); // 文字选中的颜色 // dark mode color $dark-primary-color = $primary-color; diff --git a/source/css/layout/home-content.styl b/source/css/layout/home-content.styl index 398175a..21d2495 100644 --- a/source/css/layout/home-content.styl +++ b/source/css/layout/home-content.styl @@ -14,6 +14,11 @@ magic-container(1.02, 1.02, 30px); margin-bottom: $component-interspace; + +ils-tablet() { + magic-container(1.01, 1.01, 20px); + margin-bottom: $component-interspace - 10px; + } + } else { margin-bottom: 70px; } @@ -23,6 +28,15 @@ font-weight: 600; color: var(--second-text-color); font-size: 1.5em; + + +ils-tablet() { + font-size: 1.3em; + } + + +ils-mobile() { + font-size: 1.2em; + } + margin: 0; if (hexo-config('magic.enable') == true) { @@ -48,6 +62,7 @@ line-height: 2em; } + .home-article-meta-info { display: flex; justify-content: space-between; diff --git a/source/css/layout/links.styl b/source/css/layout/links.styl index fcd6c24..ad7b69f 100644 --- a/source/css/layout/links.styl +++ b/source/css/layout/links.styl @@ -6,6 +6,10 @@ magic-container(1.005, 1.01, 30px); + +ils-tablet() { + magic-container(1.001, 1.005, 20px); + } + .links-content { h1, h2, h3, h4, h5, h6 { @@ -17,5 +21,9 @@ } margin-bottom: 30px; + + +ils-tablet() { + margin-bottom: 20px; + } } } \ No newline at end of file diff --git a/source/css/layout/page.styl b/source/css/layout/page.styl index efb1a89..8e7b6cc 100644 --- a/source/css/layout/page.styl +++ b/source/css/layout/page.styl @@ -120,6 +120,7 @@ } } + .page-top-shrink { transition(); padding-top: $header-shrink-height; @@ -134,9 +135,19 @@ } + @media screen and (max-width: $media-max-width) { + + .page-template { + padding-top: $header-height - 10px !important; + } + + .page-top { + height: $header-height - 10px !important; + } + .main-content { - width: $main-content-width * 1.2 !important; + width: 80% !important; } .sidebar-tools { @@ -150,9 +161,6 @@ transform: scale(0.8); } - //.sidebar-toc { - // right: 2% !important; - //} .scroll-to-top { if (hexo-config('back2top.position') == left) { left: 2% !important; @@ -164,4 +172,19 @@ transform: scale(0.8); } +} + + +@media screen and (max-width: $media-max-width-mobile) { + .page-template { + padding-top: $header-height - 20px !important; + } + + .page-top { + height: $header-height - 20px !important; + } + + .main-content { + width: 90% !important; + } } \ No newline at end of file diff --git a/source/css/layout/tag-content.styl b/source/css/layout/tag-content.styl index 3e2a2f1..abfd46f 100644 --- a/source/css/layout/tag-content.styl +++ b/source/css/layout/tag-content.styl @@ -7,11 +7,24 @@ if (hexo-config('magic.enable')) { magic-container(1.02, 1.02, 30px); + + +ils-tablet() { + magic-container(1.01, 1.01, 20px); + } } .tag-name { color: var(--second-text-color); font-size: 1.6em; + + +ils-tablet() { + font-size: 1.5em; + } + + +ils-mobile() { + font-size: 1.4em; + } + font-weight: 600; padding-bottom: 20px; margin-bottom: $component-interspace;