Skip to content

Commit 9beeca2

Browse files
T-miracleT-miracle
committed
Update: 主题样式更新
1 parent 84e910f commit 9beeca2

File tree

25 files changed

+191
-168
lines changed

25 files changed

+191
-168
lines changed

‎package/App.scss‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,10 @@ em, i {
3535

3636
strong, b, h1, h2, h3, h4, h5, h6 {
3737
font-family: "JetBrains Mono Bold", $fontFamily;
38+
39+
> code {
40+
font-family: "JetBrains Mono Bold", $fontFamily !important;
41+
}
3842
}
3943

4044
pre > code {

‎package/App.vue‎

Lines changed: 26 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
:style="{ backgroundImage: `url(${ bgList[0] })` }"
66
>
77
<slot name="homePage">
8-
<div class="w-80vw max-w-800px mb-8vh h-a flex-center flex-col rounded-xl py-10">
8+
<div class="w-80vw max-w-800px mb-12vh h-a flex-center flex-col rounded-xl py-10">
99
<div class="relative w-60 h-60 max-w-80vw max-h-80vw" @click="goPage(aboutMePath)">
1010
<img class="w-full w-full rounded-sm cursor-pointer" :src="logo" alt=""/>
1111
</div>
@@ -49,8 +49,9 @@
4949
<script setup lang="ts">
5050
import NanoContainer from '@NanoUI/NanoContainer/index.vue';
5151
import { useData, useRouter } from 'vitepress';
52-
import { computed, ref, watch } from 'vue';
52+
import { computed, onMounted, onUnmounted, ref, watch } from 'vue';
5353
import { DefaultTheme } from 'vitepress/types/default-theme';
54+
import { controllerStore } from '@store/controller';
5455
5556
const { frontmatter, site } = useData();
5657
@@ -84,6 +85,29 @@
8485
watch(() => frontmatter.value.layout, (value) => {
8586
onlyShowIndex.value = value === 'home';
8687
}, { immediate: true, deep: true });
88+
89+
const ctl = controllerStore();
90+
const resizeObserver = ref<ResizeObserver | null>(null);
91+
92+
onMounted(() => {
93+
const htmlEl = document.documentElement!;
94+
resizeObserver.value = new ResizeObserver((entries: ResizeObserverEntry[]) => {
95+
for (const entry of entries) {
96+
const { target } = entry;
97+
const { clientWidth } = target as HTMLElement;
98+
if (clientWidth < 960) {
99+
ctl.onlyFullscreen = true;
100+
} else {
101+
ctl.onlyFullscreen = false;
102+
}
103+
}
104+
});
105+
resizeObserver.value.observe(htmlEl);
106+
});
107+
108+
onUnmounted(() => {
109+
resizeObserver.value?.disconnect();
110+
});
87111
</script>
88112

89113
<style lang="scss">

‎package/components/NanoBackdrop/index.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<transition name="fade">
33
<div
44
v-if="openStatus"
5-
class="z-99 fixed w-screen h-screen bg-[rgba(0,0,0,.6)]"
5+
class="z-99 absolute left-0 top-0 w-full h-full bg-[rgba(0,0,0,.6)] rounded-6px"
66
un-transition="opacity duration-.2s"
77
@click="close"
88
/>

‎package/components/NanoContainer/index.vue‎

Lines changed: 4 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<template>
22
<div
33
ref="root"
4-
class="absolute top-5vh left-5vw h-90vh w-90vw flex flex-col"
4+
class="nano-theme absolute top-5vh left-5vw h-90vh w-90vw flex flex-col"
55
:class="{ 'top-0! left-0! w-screen! h-screen!': ctl.onlyFullscreen || ctl.fullscreen }"
66
>
77
<template v-if="!loading">
@@ -35,14 +35,12 @@
3535
const loading = ref(true);
3636
3737
onMounted(() => {
38-
const htmlEl = document.documentElement;
38+
const rootEl = root.value!;
3939
resizeObserver.value = new ResizeObserver((entries: ResizeObserverEntry[]) => {
4040
for (const entry of entries) {
4141
const { target } = entry;
4242
const { clientWidth } = target as HTMLElement;
4343
if (clientWidth < 1280) {
44-
htmlEl.style.setProperty('font-size', '13px');
45-
ctl.onlyFullscreen = true;
4644
ctl.allowDrag = false;
4745
ctl.hideLeftSidebar = true;
4846
ctl.hideRightSidebar = true;
@@ -53,15 +51,7 @@
5351
ctl.hidePaths = true;
5452
ctl.hideCopyright = true;
5553
} else {
56-
if (clientWidth >= 2440) {
57-
htmlEl.style.setProperty('font-size', '18px');
58-
} else if (clientWidth >= 1600) {
59-
htmlEl.style.setProperty('font-size', '16px');
60-
} else {
61-
htmlEl.style.setProperty('font-size', '14px');
62-
}
63-
ctl.onlyFullscreen = false;
64-
ctl.allowDrag = false;
54+
ctl.allowDrag = true;
6555
ctl.hideLeftSidebar = false;
6656
ctl.hideRightSidebar = false;
6757
ctl.hideLeftActionBar = false;
@@ -76,7 +66,7 @@
7666
loading.value = false;
7767
}, 1200);
7868
});
79-
resizeObserver.value.observe(htmlEl);
69+
resizeObserver.value.observe(rootEl!);
8070
});
8171
8272
onBeforeUnmount(() => {

‎package/components/NanoCopyright/index.vue‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<template>
2-
<div class="h-full w-a shrink-0 whitespace-nowrap">
2+
<div class="h-full w-a shrink-0 whitespace-nowrap flex-center">
33
<p
4-
class="text-gray-500 text-[calc(var(--footer-size)*.4)] underline"
4+
class="nano-copyright text-gray-500 text-[calc(var(--s)*.4)]! underline"
55
v-html="theme.footer.copyright"
66
/>
77
</div>
@@ -14,5 +14,9 @@
1414
</script>
1515

1616
<style scoped lang="scss">
17-
17+
.nano-copyright {
18+
* {
19+
font-size: inherit;
20+
}
21+
}
1822
</style>

‎package/components/NanoFooter/index.vue‎

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
<template>
22
<footer
3-
class="relative shrink-0 w-full h-[var(--footer-size)] rounded-[0_0_6px_6px]"
3+
class="nano-footer relative shrink-0 w-full h-[var(--s)] rounded-[0_0_6px_6px]"
4+
:class="{ 'rounded-0!': ctl.onlyFullscreen }"
45
un-border="t-solid t-1px t-[var(--footer-border-color)]"
56
un-flex="~ items-center justify-between shrink-0"
6-
style="background: var(--footer-bg);"
77
>
88
<div class="relative h-full min-w-0 grow flex items-center px-4">
99
<NanoFooterDirOpenButton v-if="ctl.showDirModal"/>
@@ -24,5 +24,14 @@
2424
</script>
2525

2626
<style scoped lang="scss">
27+
.nano-footer {
28+
background: var(--footer-bg);
29+
--s: calc(var(--base-size) * 2.2);
30+
}
2731
32+
@media screen and (max-width: 1280px) {
33+
.nano-footer {
34+
--s: calc(var(--base-size) * 2.8) !important;
35+
}
36+
}
2837
</style>

‎package/components/NanoFooterDirOpenButton/index.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
class="relative flex-center h-full cursor-pointer"
55
@click="openDir"
66
>
7-
<p class="text-[calc(var(--footer-size)*.4)] line-height-[calc(var(--footer-size)*.4)]">
7+
<p class="text-[calc(var(--s)*.4)]! line-height-[calc(var(--s)*.4)]">
88
目录
99
</p>
1010
</div>

‎package/components/NanoHeader/index.vue‎

Lines changed: 13 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,12 @@
11
<template>
22
<header
3-
class="relative shrink-0 w-full h-[var(--header-size)] rounded-[6px_6px_0_0]"
3+
class="nano-header relative shrink-0 w-full h-[var(--s)] rounded-[6px_6px_0_0]"
4+
:class="{ 'rounded-0!': ctl.onlyFullscreen }"
5+
un-border="b-solid b-1px b-[var(--footer-border-color)]"
46
un-flex="~ justify-between"
5-
style="--s: var(--header-size); background: var(--header-bg)"
67
>
78
<!--header left-->
8-
<div class="relative h-full flex-center gap-.8">
9+
<div class="relative h-full flex-center">
910
<NanoLogo/>
1011
<NanoHeaderTopNav v-if="!ctl.hideHeaderTopNav"/>
1112
<NanoMiniHeaderTopNav v-else/>
@@ -27,5 +28,14 @@
2728
</script>
2829

2930
<style scoped lang="scss">
31+
.nano-header {
32+
background: var(--header-bg);
33+
--s: calc(var(--base-size) * 2.2);
34+
}
3035
36+
@media screen and (max-width: 1280px) {
37+
.nano-header {
38+
--s: calc(var(--base-size) * 2.8) !important;
39+
}
40+
}
3141
</style>

‎package/components/NanoHeaderTopNav/index.vue‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,35 @@
11
<template>
2-
<div class="relative h-[var(--header-size)] flex items-center gap-4 px-4">
2+
<div class="relative h-[var(--s)] flex items-center gap-4 px-[calc(var(--s)*0.2)]">
33
<template
44
v-for="(nav, index) in navList"
55
:key="nav.link"
66
>
77
<div
88
v-if="!isEmpty(nav.items)"
9-
class="relative w-full h-full flex-center text-[calc(var(--header-size)*.4)]"
9+
class="relative w-full h-full flex-center"
1010
@click.stop="popups[index]?.open()"
1111
@mouseenter="popups[index]?.open()"
1212
@mouseleave="popups[index]?.close()"
1313
>
14-
<nav class="whitespace-nowrap cursor-default">
14+
<nav class="whitespace-nowrap cursor-default text-[calc(var(--s)*.45)]!">
1515
{{ nav.text }}
1616
</nav>
1717
<NanoPopup
1818
:ref="el => popups[index] = el"
19-
class="z-999 py-1 top-[var(--header-size)] left-0"
19+
class="z-999 py-1 top-[var(--s)] left-0"
2020
>
2121
<div
2222
v-for="subNav in nav.items"
2323
:key="subNav.link"
24-
class="px-6 flex items-center"
24+
class="mx-[calc(var(--base-size)*.5)] px-[calc(var(--base-size)*1)] flex items-center"
2525
un-hover="rounded-1.5 bg-[var(--header-nav-popup-hover-bg)]"
2626
@click.stop="popups[index]?.close()"
2727
>
2828
<a
2929
:href="subNav.link"
3030
@click="changeFooterPath(subNav.text)"
3131
>
32-
<p class="text-[calc(var(--header-size)*.4)] line-height-6 whitespace-nowrap">
32+
<p class="text-[calc(var(--s)*.45)]! whitespace-nowrap">
3333
{{ subNav.text }}
3434
</p>
3535
</a>
@@ -39,11 +39,11 @@
3939
<a
4040
v-else
4141
:href="nav.link"
42-
class="text-[var(--header-nav-color)] text-[calc(var(--header-size)*.4)] cursor-default"
42+
class="text-[var(--header-nav-color)] text-[calc(var(--s)*.4)]! cursor-default"
4343
un-hover="underline"
4444
@click="changeFooterPath(nav.text)"
4545
>
46-
<nav class="whitespace-nowrap">{{ nav.text }}</nav>
46+
<nav class="whitespace-nowrap text-[calc(var(--s)*.45)]!">{{ nav.text }}</nav>
4747
</a>
4848
</template>
4949
</div>

‎package/components/NanoLogo/index.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<template>
2-
<div class="relative flex-center px-2 gap-4 whitespace-nowrap pointer-events-none">
2+
<div class="relative flex-center px-[calc(var(--s)*0.25)] whitespace-nowrap pointer-events-none">
33
<img
44
class="w-[calc(var(--s)*0.72)] h-[calc(var(--s)*0.72)] rounded-[calc(var(--s)*.1)]"
55
:src="theme.logo"

0 commit comments

Comments
 (0)