gitea-yuany3721/vuepress-theme-plume
1
0
Fork 1
mirror of https://github.com/pengzhanbo/vuepress-theme-plume.git synced 2026-04-23 10:58:13 +08:00
Code Issues Packages Projects Releases Wiki Activity

perf: 优化在移动设备的 UI 表现

Browse Source
This commit is contained in:
pengzhanbo 2024-01-07 03:12:42 +08:00
parent d25b830f34
commit bc4100e4a1
5 changed files with 25 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
stylelint.config.js
View File

@ -15,5 +15,6 @@ export default stylelintConfig({
'declaration-block-no-redundant-longhand-properties': [true, { 'declaration-block-no-redundant-longhand-properties': [true, {
ignoreShorthands: ['inset'], ignoreShorthands: ['inset'],
}], }],
'media-feature-range-notation': null,
}, },
}) })

29
theme/src/client/components/BlogAside.vue
View File

@ -35,10 +35,11 @@ const { hasBlogExtract, tags, archives } = useBlogExtract()
</div> </div>
</template> </template>
<style lang="scss" scoped> <style scoped>
.blog-aside-wrapper { .blog-aside-wrapper {
position: sticky; position: sticky;
top: calc(var(--vp-nav-height) + 2rem); top: calc(var(--vp-nav-height) + 2rem);
display: none;
width: 270px; width: 270px;
padding: 1rem 0; padding: 1rem 0;
margin-top: 2rem; margin-top: 2rem;
@ -46,22 +47,22 @@ const { hasBlogExtract, tags, archives } = useBlogExtract()
margin-left: 2rem; margin-left: 2rem;
text-align: center; text-align: center;
border-left: solid 1px var(--vp-c-divider); border-left: solid 1px var(--vp-c-divider);
img {
width: 50%;
margin: auto;
}
h3 {
margin-top: 1.5rem;
font-size: 16px;
font-weight: 600;
}
} }
@media (width <= 768px) { .blog-aside-wrapper img {
width: 50%;
margin: auto;
}
.blog-aside-wrapper h3 {
margin-top: 1.5rem;
font-size: 16px;
font-weight: 600;
}
@media (width >= 768px) {
.blog-aside-wrapper { .blog-aside-wrapper {
display: none; display: block;
} }
} }

2
theme/src/client/styles/code.scss
View File

@ -208,7 +208,7 @@ div[class*="language-"] {
} }
// narrow mobile // narrow mobile
@media (width <= 419px) { @media (max-width: 419px) {
.plume-content { .plume-content {
div[class*="language-"] { div[class*="language-"] {
margin: 0.85rem -1.5rem; margin: 0.85rem -1.5rem;

2
theme/src/client/styles/content.scss
View File

@ -66,7 +66,7 @@
opacity: 1; opacity: 1;
} }
@media (width >= 768px) { @media (min-width: 768px) {
.plume-content h1 { .plume-content h1 {
font-size: 32px; font-size: 32px;
line-height: 40px; line-height: 40px;

13
theme/src/client/styles/md-enhance.scss
View File

@ -1,10 +1,4 @@
.plume-content { .plume-content {
@media (width <= 419px) {
.vp-code-demo {
margin: 8px -12px;
}
}
.hint-container { .hint-container {
padding: 16px 16px 8px; padding: 16px 16px 8px;
font-size: var(--vp-custom-block-font-size); font-size: var(--vp-custom-block-font-size);
@ -193,6 +187,13 @@
} }
} }
/* stylelint-disable-next-line order/order */
@media (max-width: 419px) {
.vp-code-demo {
margin: 8px -12px;
}
}
.task-list-container { .task-list-container {
padding-left: 0; padding-left: 0;