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

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;

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

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 {
@ -121,10 +126,3 @@ input.search-input {
margin: auto;
}
}
@media screen and (max-width: $media-max-width) {
.search-popup {
width: 80%;
}
}

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

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

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 {

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;

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;

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;

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

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;
@ -165,3 +173,18 @@
}
}
@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;
}
}

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;