keb/kesper
1
0
Fork 0
mirror of https://github.com/ZetaKebab/kesper.git synced 2026-10-18 05:21:15 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Mobile screen refinement

Browse Source
This commit is contained in:
Sodbileg Gansukh
2022-05-20 21:49:12 +08:00
parent 838120323a
commit 68c6224a92
3 changed files with 27 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/built/screen.css
+1 -1
View File
File diff suppressed because one or more lines are too long
assets/built/screen.css.map
+1 -1
View File
File diff suppressed because one or more lines are too long
assets/css/screen.css
+25 -18
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
/* ---------------------------------------------------------- */ /* ---------------------------------------------------------- */