feat: optimize styles (#7)

Author: tolking

src/components/VPCover.vue

@@ -106,21 +106,21 @@ const coverStyle = computed(() => {
   max-width: 80%;
   font-size: clamp(2rem, 1.636rem + 1.82vw, 3rem);
   color: var(--vp-c-text-1);
+  mix-blend-mode: difference;
   line-height: 2;
   font-weight: 800;
   white-space: nowrap;
   text-overflow: ellipsis;
   overflow: hidden;
-  filter: drop-shadow(0px 4px 6px var(--vp-c-text-1));
 }
 .cover .cover-title .description {
   max-width: 80%;
   font-size: 1.2rem;
   color: var(--vp-c-text-2);
+  mix-blend-mode: difference;
   white-space: nowrap;
   text-overflow: ellipsis;
   overflow: hidden;
-  filter: drop-shadow(0px 2px 3px var(--vp-c-text-2));
 }
 
 .cover.with-cover {

src/layouts/Article.vue

@@ -113,8 +113,11 @@ const lastUpdated = computed(() => {
 </template>
 
 <style scoped>
+.article {
+  flex-grow: 1;
+}
 .article .article-tags {
-  filter: drop-shadow(0px 2px 3px var(--vp-c-text-2));
+  mix-blend-mode: difference;
 }
 .article .vp-doc {
   padding-top: calc(var(--vp-size-space) * 2);

src/layouts/Page.vue

@@ -36,3 +36,9 @@ const { list } = usePagination()
     <slot name="page-bottom" />
   </section>
 </template>
+
+<style scoped>
+.page {
+  flex-grow: 1;
+}
+</style>

src/layouts/Tag.vue

@@ -54,3 +54,9 @@ const title = computed(() => {
     <slot name="tag-bottom" />
   </section>
 </template>
+
+<style scoped>
+.tag {
+  flex-grow: 1;
+}
+</style>

src/styles/public.css

@@ -1,3 +1,9 @@
+#app {
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+}
+
 .main {
   margin-left: auto;
   margin-right: auto;