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:40:42 +08:00
parent 7b52af5d32
commit 33aaf369cf
28 changed files with 70 additions and 63 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
theme/src/client/components/BackToTop.vue
View File

@ -137,7 +137,7 @@ function handleClick() {
r: 16;
}
@media (width >= 768px) {
@media (min-width: 768px) {
.back-to-top-button {
width: 48px;
height: 48px;

2
theme/src/client/components/Backdrop.vue
View File

@ -35,7 +35,7 @@ defineProps<{
transition-duration: 0.25s;
}
@media (width >= 1280px) {
@media (min-width: 1280px) {
.backdrop {
display: none;
}

4
theme/src/client/components/Blog.vue
View File

@ -30,14 +30,14 @@ const page = usePageData<PlumeThemePageData>()
margin: 0 auto;
}
@media (width >= 960px) {
@media (min-width: 960px) {
.blog-wrapper {
max-width: 784px;
padding-top: 0;
}
}
@media (width >= 1440px) {
@media (min-width: 1440px) {
.blog-wrapper {
max-width: 1104px;
}

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

@ -60,7 +60,7 @@ const { hasBlogExtract, tags, archives } = useBlogExtract()
font-weight: 600;
}
@media (width >= 768px) {
@media (min-width: 768px) {
.blog-aside-wrapper {
display: block;
}

2
theme/src/client/components/BlogExtract.vue
View File

@ -105,7 +105,7 @@ const showBlogExtract = computed(() => {
color: var(--vp-c-text-2);
}
@media (width >= 768px) {
@media (min-width: 768px) {
.blog-extract {
display: none;
}

6
theme/src/client/components/Friends.vue
View File

@ -71,7 +71,7 @@ const list = computed(() => matter.value.list || [])
margin-top: 64px;
}
@media (width >= 640px) {
@media (min-width: 640px) {
.friends-wrapper .title,
.friends-wrapper .description,
.edit-link {
@ -84,7 +84,7 @@ const list = computed(() => matter.value.list || [])
}
}
@media (width >= 960px) {
@media (min-width: 960px) {
.friends-wrapper {
max-width: 784px;
padding-top: 0;
@ -95,7 +95,7 @@ const list = computed(() => matter.value.list || [])
}
}
@media (width >= 1440px) {
@media (min-width: 1440px) {
.friends-wrapper {
max-width: 1104px;
}

4
theme/src/client/components/Home.vue
View File

@ -136,7 +136,7 @@ const actions = computed(() => {
/* background-color: rgba(0, 0, 0, 0.25); */
}
@media (width >= 960px) {
@media (min-width: 960px) {
.plume-home .container {
max-width: 768px;
padding-top: 8rem;
@ -147,7 +147,7 @@ const actions = computed(() => {
}
}
@media (width >= 1440px) {
@media (min-width: 1440px) {
.plume-home .container {
max-width: 1104px;
padding-top: 8rem;

4
theme/src/client/components/LayoutContent.vue
View File

@ -35,7 +35,7 @@ const { hasSidebar } = useSidebar()
margin: 0;
}
@media (width >= 960px) {
@media (min-width: 960px) {
.layout-content {
padding-top: var(--vp-nav-height);
}
@ -46,7 +46,7 @@ const { hasSidebar } = useSidebar()
}
}
@media (width >= 1440px) {
@media (min-width: 1440px) {
.layout-content.has-sidebar {
padding-right: calc((100vw - var(--vp-layout-max-width)) / 2);
padding-left:

6
theme/src/client/components/LocalNav.vue
View File

@ -96,7 +96,7 @@ const showLocalNav = computed(() => {
border-top-color: transparent;
}
@media (width >= 960px) {
@media (min-width: 960px) {
.local-nav {
display: none;
}
@ -128,7 +128,7 @@ const showLocalNav = computed(() => {
transition: color 0.25s;
}
@media (width >= 768px) {
@media (min-width: 768px) {
.menu {
padding: 0 32px;
}
@ -156,7 +156,7 @@ const showLocalNav = computed(() => {
transition: color 0.25s;
}
@media (width >= 768px) {
@media (min-width: 768px) {
.top-link {
padding: 12px 32px 11px;
}

22
theme/src/client/components/Nav/NavBar.vue
View File

@ -68,13 +68,13 @@ watchPostEffect(() => {
border-bottom: 1px solid transparent;
}
@media (width >= 768px) {
@media (min-width: 768px) {
.navbar-wrapper {
padding: 0 32px;
}
}
@media (width >= 960px) {
@media (min-width: 960px) {
.navbar-wrapper.has-sidebar {
padding: 0;
}
@ -98,7 +98,7 @@ watchPostEffect(() => {
pointer-events: auto;
}
@media (width >= 960px) {
@media (min-width: 960px) {
.navbar-wrapper.has-sidebar .container {
max-width: 100%;
}
@ -110,7 +110,7 @@ watchPostEffect(() => {
transition: background-color 0.5s;
}
@media (width >= 960px) {
@media (min-width: 960px) {
.navbar-wrapper.has-sidebar .title {
position: absolute;
top: 0;
@ -123,7 +123,7 @@ watchPostEffect(() => {
}
}
@media (width >= 1440px) {
@media (min-width: 1440px) {
.navbar-wrapper.has-sidebar .title {
width:
calc(
@ -142,7 +142,7 @@ watchPostEffect(() => {
flex-grow: 1;
}
@media (width >= 960px) {
@media (min-width: 960px) {
.navbar-wrapper.has-sidebar .content {
position: relative;
z-index: 1;
@ -151,7 +151,7 @@ watchPostEffect(() => {
}
}
@media (width >= 1440px) {
@media (min-width: 1440px) {
.navbar-wrapper.has-sidebar .content {
padding-right: calc((100vw - var(--vp-layout-max-width)) / 2 + 32px);
padding-left:
@ -169,14 +169,14 @@ watchPostEffect(() => {
transition: background-color 0.5s;
}
@media (width >= 960px) {
@media (min-width: 960px) {
.navbar-wrapper:not(.top) .content-body {
position: relative;
background-color: var(--vp-nav-bg-color);
}
}
@media (width <= 767px) {
@media (max-width: 767px) {
.content-body {
column-gap: 0.5rem;
}
@ -208,7 +208,7 @@ watchPostEffect(() => {
margin-right: -8px;
}
@media (width >= 960px) {
@media (min-width: 960px) {
.navbar-wrapper.has-sidebar .curtain {
position: absolute;
right: 0;
@ -226,7 +226,7 @@ watchPostEffect(() => {
}
}
@media (width >= 1440px) {
@media (min-width: 1440px) {
.navbar-wrapper.has-sidebar .curtain {
width:
calc(

2
theme/src/client/components/Nav/NavBarAppearance.vue
View File

@ -16,7 +16,7 @@ const theme = useThemeLocaleData()
display: none;
}
@media (width >= 1280px) {
@media (min-width: 1280px) {
.navbar-appearance {
display: flex;
align-items: center;

4
theme/src/client/components/Nav/NavBarExtra.vue
View File

@ -55,13 +55,13 @@ const hasExtraContent = computed(
margin-right: -12px;
}
@media (width >= 768px) {
@media (min-width: 768px) {
.navbar-extra {
display: block;
}
}
@media (width >= 1280px) {
@media (min-width: 1280px) {
.navbar-extra {
display: none;
}

2
theme/src/client/components/Nav/NavBarHamburger.vue
View File

@ -33,7 +33,7 @@ defineEmits<(e: 'click') => void>()
height: var(--vp-nav-height);
}
@media (width >= 768px) {
@media (min-width: 768px) {
.navbar-hamburger {
display: none;
}

2
theme/src/client/components/Nav/NavBarMenu.vue
View File

@ -25,7 +25,7 @@ const theme = useThemeLocaleData()
display: none;
}
@media (width >= 768px) {
@media (min-width: 768px) {
.navbar-menu {
display: flex;
}

12
theme/src/client/components/Nav/NavBarSearch.vue
View File

@ -177,14 +177,14 @@
/* plugin-search */
/* stylelint-disable-next-line order/order */
@media (width >= 768px) {
@media (min-width: 768px) {
.navbar-search {
flex-grow: 1;
padding-left: 24px;
}
}
@media (width >= 960px) {
@media (min-width: 960px) {
.navbar-search {
padding-left: 32px;
}
@ -196,7 +196,7 @@
}
}
@media (width >= 768px) {
@media (min-width: 768px) {
.navbar-search .DocSearch-Button {
justify-content: flex-start;
width: 100%;
@ -213,7 +213,7 @@
}
}
@media (width >= 768px) {
@media (min-width: 768px) {
.DocSearch-Button .DocSearch-Search-Icon {
top: 1px;
width: 14px;
@ -223,13 +223,13 @@
}
}
@media (width >= 768px) {
@media (min-width: 768px) {
.DocSearch-Button .DocSearch-Button-Placeholder {
display: inline-block;
}
}
@media (width >= 768px) {
@media (min-width: 768px) {
.DocSearch-Button .DocSearch-Button-Keys {
display: flex;
align-items: center;

2
theme/src/client/components/Nav/NavBarSocialLinks.vue
View File

@ -18,7 +18,7 @@ const theme = useThemeLocaleData()
display: none;
}
@media (width >= 1280px) {
@media (min-width: 1280px) {
.navbar-social-links {
display: flex;
align-items: center;

2
theme/src/client/components/Nav/NavBarTitle.vue
View File

@ -40,7 +40,7 @@ const { hasSidebar } = useSidebar()
opacity: 0.6;
}
@media (width >= 960px) {
@media (min-width: 960px) {
.title {
flex-shrink: 0;
}

2
theme/src/client/components/Nav/NavBarTranslations.vue
View File

@ -33,7 +33,7 @@ const { currentLang, localeLinks } = useLangs()
display: none;
}
@media (width >= 1280px) {
@media (min-width: 1280px) {
.navbar-translations {
display: flex;
align-items: center;

2
theme/src/client/components/Nav/NavScreen.vue
View File

@ -67,7 +67,7 @@ const isLocked = useScrollLock(inBrowser ? document.body : null)
transform: translateY(-8px);
}
@media (width >= 768px) {
@media (min-width: 768px) {
.nav-screen {
display: none;
}

2
theme/src/client/components/Nav/index.vue
View File

@ -48,7 +48,7 @@ provide('close-screen', closeScreen)
border-bottom-color: var(--vp-c-gutter);
}
@media (width >= 960px) {
@media (min-width: 960px) {
.nav-wrapper {
position: fixed;
}

12
theme/src/client/components/Page.vue
View File

@ -59,13 +59,13 @@ onContentUpdated(() => zoom?.refresh())
padding-top: calc(var(--vp-nav-height) + 32px);
} */
@media (width >= 768px) {
@media (min-width: 768px) {
.plume-page {
padding: 48px 32px 128px;
}
}
@media (width >= 960px) {
@media (min-width: 960px) {
.plume-page,
.plume-page.is-blog {
padding: 32px 32px 0;
@ -82,7 +82,7 @@ onContentUpdated(() => zoom?.refresh())
}
}
@media (width >= 1280px) {
@media (min-width: 1280px) {
.plume-page .container {
display: flex;
justify-content: center;
@ -93,7 +93,7 @@ onContentUpdated(() => zoom?.refresh())
}
}
@media (width >= 1440px) {
@media (min-width: 1440px) {
.plume-page:not(.has-sidebar) .content {
max-width: 784px;
}
@ -103,13 +103,13 @@ onContentUpdated(() => zoom?.refresh())
}
}
@media (width >= 960px) {
@media (min-width: 960px) {
.content {
padding: 0 32px 128px;
}
}
@media (width >= 1280px) {
@media (min-width: 1280px) {
.content {
order: 1;
min-width: 640px;

8
theme/src/client/components/PageFooter.vue
View File

@ -76,7 +76,7 @@ const showFooter = computed(() => {
margin-top: 96px;
}
@media (width >= 640px) {
@media (min-width: 640px) {
.edit-info {
display: flex;
align-items: center;
@ -120,7 +120,7 @@ const showFooter = computed(() => {
color: var(--vp-c-text-2);
}
@media (width >= 640px) {
@media (min-width: 640px) {
.last-updated-text {
font-size: 14px;
font-weight: 500;
@ -136,7 +136,7 @@ const showFooter = computed(() => {
text-align: left;
}
@media (width >= 640px) {
@media (min-width: 640px) {
.contributors {
text-align: right;
}
@ -164,7 +164,7 @@ const showFooter = computed(() => {
border-top: 1px solid var(--vp-c-divider);
}
@media (width >= 640px) {
@media (min-width: 640px) {
.prev-next {
grid-template-columns: repeat(2, 1fr);
grid-column-gap: 16px;

2
theme/src/client/components/PostItem.vue
View File

@ -66,7 +66,7 @@ const createTime = computed(() => {
padding-top: 1rem;
margin: 0 1.75rem 2rem;
@media (width >= 960px) {
@media (min-width: 960px) {
h3 {
font-size: 20px;
}

8
theme/src/client/components/Sidebar.vue
View File

@ -88,7 +88,7 @@ watch(
box-shadow: var(--vp-shadow-1);
}
@media (width >= 960px) {
@media (min-width: 960px) {
.sidebar-wrapper {
z-index: 1;
width: var(--vp-sidebar-width);
@ -102,7 +102,7 @@ watch(
}
}
@media (width >= 1440px) {
@media (min-width: 1440px) {
.sidebar-wrapper {
width:
calc(
@ -117,7 +117,7 @@ watch(
}
}
@media (width >= 960px) {
@media (min-width: 960px) {
.curtain {
position: sticky;
top: -64px;
@ -140,7 +140,7 @@ watch(
border-top: 1px solid var(--vp-c-divider);
}
@media (width >= 960px) {
@media (min-width: 960px) {
.group {
width: calc(var(--vp-sidebar-width) - 64px);
padding-top: 10px;

2
theme/src/client/components/SkipLink.vue
View File

@ -62,7 +62,7 @@ function focusOnTargetAnchor({ target }: Event) {
clip-path: none;
}
@media (width >= 1280px) {
@media (min-width: 1280px) {
.skip-link {
top: 14px;
left: 16px;

2
theme/src/client/components/VFooter.vue
View File

@ -54,7 +54,7 @@ const { hasSidebar } = useSidebar()
text-underline-offset: 4px;
}
@media (width >= 768px) {
@media (min-width: 768px) {
.plume-footer {
padding: 32px;
}

2
theme/src/client/layouts/NotFound.vue
View File

@ -46,7 +46,7 @@ const themeData = useThemeLocaleData()
text-align: center;
}
@media (width >= 768px) {
@media (min-width: 768px) {
.not-found {
padding: 96px 32px 168px;
}

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

@ -127,7 +127,7 @@
overflow: hidden;
border: solid 1px var(--vp-c-divider);
@media (width <= 419px) {
@media (max-width: 419px) {
.vp-code-demo-codes div[class*="language-"] {
margin: 0;
border-radius: 0;
@ -239,6 +239,13 @@
border: 1px solid var(--vp-c-divider);
}
/* stylelint-disable-next-line order/order */
@media (min-width: 419px) {
.vp-tabs {
margin: 1.5rem 0;
}
}
.hint-container .vp-tabs {
margin: 1rem -0.45rem 1rem -0.75rem;
@ -263,7 +270,7 @@
font-size: 14px;
border-left: 4px solid var(--vp-c-default-soft);
@media (width >= 419px) {
@media (max-width: 419px) {
& {
margin-left: 0;
}