Mobile screen refinement

This commit is contained in:
Sodbileg Gansukh 2022-05-16 21:12:58 +08:00
parent 838120323a
commit 68c6224a92
3 changed files with 27 additions and 20 deletions

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -75,7 +75,7 @@ production stylesheet in assets/built/screen.css
/* Full width page blocks */ /* Full width page blocks */
.outer { .outer {
position: relative; position: relative;
padding: 0 4vmin; padding: 0 24px;
} }
/* Centered content container blocks */ /* Centered content container blocks */
@ -183,10 +183,24 @@ body:not(.has-cover-image) .site-header-content:not(.vertical) {
margin-top: 16px; margin-top: 16px;
} }
@media (max-width: 600px) { @media (max-width: 767px) {
.site-header-content {
padding-bottom: 36px;
min-height: 280px;
}
.site-header-inner {
gap: 16px;
}
.site-logo {
width: 80px;
height: 80px;
}
.site-title {
font-size: 3.2rem;
}
.site-description { .site-description {
max-width: 80vmin; margin-top: 6px;
font-size: 1.8rem; font-size: 1.6rem;
} }
} }
@ -339,6 +353,10 @@ body:not(.has-cover-image) .site-header-content:not(.vertical) {
height: 33px; height: 33px;
} }
.has-cover-image .gh-burger-box {
color: #fff;
}
.gh-burger-inner { .gh-burger-inner {
width: 100%; width: 100%;
height: 100%; height: 100%;
@ -410,12 +428,11 @@ body:not(.gh-head-open) .gh-burger:hover .gh-burger-inner::after {
/* ---------------------------------------------------------- */ /* ---------------------------------------------------------- */
/* IDs needed to ensure sufficient specificity */ /* IDs needed to ensure sufficient specificity */
@media (max-width: 900px) { @media (max-width: 991px) {
.gh-burger { .gh-burger {
display: inline-block; display: inline-block;
} }
#gh-head { #gh-head {
transition: all 0.4s ease-out;
overflow: hidden; overflow: hidden;
} }
#gh-head .gh-head-inner { #gh-head .gh-head-inner {
@ -432,7 +449,7 @@ body:not(.gh-head-open) .gh-burger:hover .gh-burger-inner::after {
justify-content: space-between; justify-content: space-between;
user-select: none; user-select: none;
} }
.home-template #gh-head.has-cover .gh-head-brand { .no-logo .gh-head-brand {
justify-content: flex-end; justify-content: flex-end;
} }
#gh-head .gh-head-menu { #gh-head .gh-head-menu {
@ -624,6 +641,7 @@ body:not(.gh-head-open) .gh-burger:hover .gh-burger-inner::after {
overflow-y: hidden; overflow-y: hidden;
margin-top: 12px; margin-top: 12px;
max-width: 720px; max-width: 720px;
font-size: 1.6rem;
line-height: 1.5; line-height: 1.5;
-webkit-line-clamp: 3; -webkit-line-clamp: 3;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
@ -798,17 +816,6 @@ make sure this only happens on large viewports / desktop-ish devices.
} }
@media (max-width: 500px) {
.post-card-title {
font-size: 1.9rem;
}
.post-card-excerpt {
font-size: 1.6rem;
}
}
/* 7. Single Post /* 7. Single Post
/* ---------------------------------------------------------- */ /* ---------------------------------------------------------- */