lianglianglee
/
hexo-theme-keep
mirror of https://github.com/liangliangle/hexo-theme-keep.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

style: optimize mobile adaptation css

This commit is contained in:
XPoet 2020-06-04 22:11:27 +08:00
parent 3280b545c3
commit 5ac82b6196
12 changed files with 154 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
source/css/layout/_partial/archive-list.styl
View File

@ -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;

19
source/css/layout/_partial/header.styl
View File

@ -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;
}
}

20
source/css/layout/_partial/local-search.styl
View File

@ -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%;
}
}

8
source/css/layout/about.styl
View File

@ -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;
}
}
}

4
source/css/layout/archive-content.styl
View File

@ -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);
}
}

15
source/css/layout/article-content.styl
View File

@ -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 {

13
source/css/layout/category-content.styl
View File

@ -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;

35
source/css/layout/common/variables.styl
View File

@ -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;

15
source/css/layout/home-content.styl
View File

@ -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;

8
source/css/layout/links.styl
View File

@ -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;
}
}
}

31
source/css/layout/page.styl
View File

@ -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;
}
}

13
source/css/layout/tag-content.styl
View File

@ -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;