yuany3721/vuepress-theme-plume
1
0
Fork 0
forked from gitea-yuany3721/vuepress-theme-plume
Code Pull Requests Activity

refactor(theme): 调整主题风格样式

Browse Source
This commit is contained in:
pengzhanbo 2022-08-15 10:22:49 +08:00
parent f7da863f9d
commit c55f60a8b9
9 changed files with 38 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/theme/src/client/components/Archive.vue
View File

@ -112,7 +112,7 @@ const headers = computed(() => {
position: relative;
margin-left: 4rem;
border-left: solid 4px var(--c-border);
padding: 1.25rem;
padding: 0.75rem 1.25rem;
&::before {
content: '';

15
packages/theme/src/client/components/NavbarDropdown.vue
View File

@ -146,7 +146,7 @@ const onGrandChildFocusout = (grandchild, child): void => {
.navbar-dropdown-title {
display: block;
font-size: 0.9rem;
font-size: 1rem;
font-family: inherit;
cursor: inherit;
padding: inherit;
@ -183,12 +183,14 @@ const onGrandChildFocusout = (grandchild, child): void => {
.navbar-dropdown-item {
color: inherit;
line-height: 1.7rem;
cursor: default;
.navbar-dropdown-subtitle {
margin: 0.45rem 0 0;
border-top: 1px solid var(--c-border);
padding: 1rem 0 0.45rem 0;
font-size: 0.9rem;
font-size: 1rem;
color: var(--c-text-light);
& > span {
padding: 0 1.5rem;
@ -210,7 +212,7 @@ const onGrandChildFocusout = (grandchild, child): void => {
list-style: none;
.navbar-dropdown-subitem {
font-size: 0.9em;
font-size: 1em;
}
}
@ -280,12 +282,12 @@ const onGrandChildFocusout = (grandchild, child): void => {
.navbar-dropdown-subtitle,
& > a {
font-size: 15px;
font-size: 1rem;
line-height: 2rem;
}
.navbar-dropdown-subitem {
font-size: 14px;
font-size: 1rem;
padding-left: 1rem;
}
}
@ -314,13 +316,14 @@ const onGrandChildFocusout = (grandchild, child): void => {
right: 0;
box-sizing: border-box;
background-color: var(--c-bg-container);
padding: 0.6rem 0;
padding: 1.5rem 0.75rem;
border: 1px solid var(--c-border);
border-bottom-color: var(--c-border-dark);
text-align: left;
border-radius: 0.25rem;
white-space: nowrap;
margin: 0;
box-shadow: var(--shadow);
}
}
}

8
packages/theme/src/client/components/PostItem.vue
View File

@ -27,9 +27,9 @@ const handlePost = (path: string): void => {
<template>
<DropdownTransition :delay="index * 0.04">
<section :key="post.path" class="post-list-item">
<div>
<div :class="{ sticky: post.sticky }">
<TopIcon v-if="post.sticky" />
<div
<!-- <div
v-if="post.banner"
class="post-banner"
@click="handlePost(post.path)"
@ -39,11 +39,11 @@ const handlePost = (path: string): void => {
'background-image': `url(${post.banner})`,
}"
></div>
</div>
</div> -->
<h3>
<AutoLink :item="{ text: post.title, link: post.path }" />
</h3>
<PostMeta :post="post" />
<PostMeta :post="post" :show-author="false" />
<!--eslint-disable vue/no-v-html-->
<div
v-if="post.excerpt"

13
packages/theme/src/client/components/PostList.vue
View File

@ -84,29 +84,28 @@ const togglePage = (currentPage: number): void => {
@import '../styles/_variables';
.post-list-wrapper {
flex: 1;
padding-top: 4rem;
padding-top: 2rem;
.post-list-item {
> div {
position: relative;
padding: 1.25rem 1.5rem;
padding-bottom: 3rem;
background-color: var(--c-bg-container);
border-radius: var(--p-around);
margin-bottom: 1.25rem;
margin-bottom: 2.25rem;
// box-shadow: var(--shadow);
transition: box-shadow var(--t-color);
overflow: hidden;
&.sticky {
background-color: var(--c-bg-sticky);
}
// &:hover {
// box-shadow: var(--shadow-lg);
// }
}
&:last-child > div {
padding-bottom: 1.5rem;
}
.top-icon {
position: absolute;
top: 0;

18
packages/theme/src/client/components/PostMeta.vue
View File

@ -17,6 +17,10 @@ const props = defineProps({
required: false,
default: false,
},
showAuthor: {
type: Boolean,
default: true,
},
})
const route = useRoute()
const router = useRouter()
@ -26,6 +30,12 @@ const tags = computed(() => {
return (props.post.tags || []).filter((_, i) => i < 4)
})
const category = computed(() => {
return (props.post.category || []).filter((cate) =>
Boolean(cate.name?.trim())
)
})
const handleTag = (tag: string): void => {
const tagConfig = themeLocale.value.tag
if (!tagConfig) return
@ -38,15 +48,15 @@ const handleTag = (tag: string): void => {
</script>
<template>
<div class="post-meta" :class="{ border: post.excerpt || border }">
<div v-if="post.author" class="post-meta-author">
<div v-if="post.author && showAuthor" class="post-meta-author">
<UserIcon />
<span>{{ post.author }}</span>
</div>
<div v-if="post.category.length > 0" class="post-meta-category">
<div v-if="category.length > 0" class="post-meta-category">
<FolderIcon />
<template v-for="(cate, i) in post.category" :key="cate.type">
<template v-for="(cate, i) in category" :key="cate.type">
<span>{{ cate.name }}</span>
<span v-if="i < post.category.length - 1"> / </span>
<span v-if="i < category.length - 1"> / </span>
</template>
</div>
<div v-if="tags.length > 0">

2
packages/theme/src/client/components/Sidebar.vue
View File

@ -64,7 +64,7 @@ onMounted(() => {
&::-webkit-scrollbar-thumb {
border-radius: 3.5px;
background-color: var(--c-brand);
background-color: rgba(34, 34, 34, 0.75);
}
> .aside-navbar {

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

@ -142,7 +142,7 @@ pre[class*='language-'] {
}
&::-webkit-scrollbar-thumb {
background-color: var(--c-brand);
background-color: rgba(220, 220, 220, 0.35);
border-radius: 3px;
}

1
packages/theme/src/client/styles/vars-dark.scss
View File

@ -7,6 +7,7 @@ html.dark {
--c-bg-lighter: #262c34;
--c-bg-container: #22272e;
--c-bg-navbar: rgba(34, 39, 46, 0.75);
--c-bg-sticky: var(--c-bg-light);
--c-text: #adbac7;
--c-text-light: #96a7b7;

1
packages/theme/src/client/styles/vars.scss
View File

@ -11,6 +11,7 @@
--c-bg-navbar: rgba(255, 255, 255, 0.7);
--c-bg-sidebar: var(--c-bg-container);
--c-bg-arrow: #ccc;
--c-bg-sticky: #f1f2f3;
// text color-scheme
--c-text: #2c3e50;