From a211f8b28c91e0366215dc17388c0a57506ec717 Mon Sep 17 00:00:00 2001
From: ChenDY <1348323271@qq.com>
Date: Wed, 10 Aug 2022 10:01:53 +0800
Subject: [PATCH 1/4] define color outside

---
 components/Header.vue | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/components/Header.vue b/components/Header.vue
index 9930292..ced22a3 100644
--- a/components/Header.vue
+++ b/components/Header.vue
@@ -7,6 +7,11 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
+  colorVar: {
+    type: String,
+    default: 'white'
+  },
+
 });
 const progress = ref(false);
 let timeout = undefined;
@@ -16,7 +21,7 @@ watch(
     if (timeout !== undefined) {
       try {
         clearTimeout(timeout);
-      } catch (e) {}
+      } catch (e) { }
       timeout = undefined;
     }
     if (now) {
@@ -71,7 +76,7 @@ watch(
   justify-content: space-between;
   align-items: center;
   /* Appearance */
-  background-color: var(--cf);
+  background-color: v-bind('props.colorVar');
   border-bottom: 1px solid var(--cb-gray-light);
   box-shadow: 0 0 5px 0 hsla(0, 0%, 0%, 0.1);
 }
@@ -94,16 +99,20 @@ watch(
   width: 90%;
   opacity: 1;
 }
+
 .prog-enter-from {
   width: 0%;
   opacity: 1;
 }
+
 .prog-enter-active {
   transition: 2s ease-in-out;
 }
+
 .prog-leave-active {
   transition: 0.3s ease-in-out;
 }
+
 .prog-leave-to {
   width: 100%;
   opacity: 0;

From 6d14cca6ec72ade24f62ba2bbb66e3ddd2bc1fa2 Mon Sep 17 00:00:00 2001
From: ChenDY <1348323271@qq.com>
Date: Wed, 10 Aug 2022 14:32:48 +0800
Subject: [PATCH 2/4] v-header: debug

---
 components/Header.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/components/Header.vue b/components/Header.vue
index ced22a3..0a3f078 100644
--- a/components/Header.vue
+++ b/components/Header.vue
@@ -77,6 +77,7 @@ watch(
   align-items: center;
   /* Appearance */
   background-color: v-bind('props.colorVar');
+  /* background-color: var(--cf); */
   border-bottom: 1px solid var(--cb-gray-light);
   box-shadow: 0 0 5px 0 hsla(0, 0%, 0%, 0.1);
 }

From e41dc8c44b06022fda4fa371d7bf0a55142ed899 Mon Sep 17 00:00:00 2001
From: Yuxuan Zhang <yuxuan@yuxuanzhang.net>
Date: Wed, 10 Aug 2022 16:42:09 +0800
Subject: [PATCH 3/4] header: enable background override

---
 components/Header.vue | 179 +++++++++++++++++++++++-------------------
 1 file changed, 100 insertions(+), 79 deletions(-)

diff --git a/components/Header.vue b/components/Header.vue
index 0a3f078..89c932b 100644
--- a/components/Header.vue
+++ b/components/Header.vue
@@ -1,121 +1,142 @@
 <script setup>
 import Nav from "./header/Nav.vue";
-import { ref, watch } from "vue";
+import { computed, ref, watch } from "vue";
 // Loading animation
-const props = defineProps({
-  loading: {
-    type: Boolean,
-    default: false,
-  },
-  colorVar: {
-    type: String,
-    default: 'white'
-  },
-
-});
-const progress = ref(false);
+const
+	props = defineProps({
+		loading: {
+			type: Boolean,
+			default: false,
+		},
+		colorVar: {
+			type: String,
+			default: 'white'
+		},
+		bgColor: {
+			type: String,
+			default: 'var(--cf)'
+		},
+		bgColorLight: {
+			type: String,
+			default: ''
+		},
+		bgColorDark: {
+			type: String,
+			default: ''
+		},
+	}),
+	style = computed(() => ({
+		bgColorLight: props.bgColorLight || props.bgColor,
+		bgColorDark: props.bgColorDark || props.bgColor,
+	})),
+	progress = ref(false);
 let timeout = undefined;
 watch(
-  () => props.loading,
-  (now, old) => {
-    if (timeout !== undefined) {
-      try {
-        clearTimeout(timeout);
-      } catch (e) { }
-      timeout = undefined;
-    }
-    if (now) {
-      if (!progress.value) progress.value = true;
-    } else {
-      // Loading ends
-      timeout = setTimeout(() => {
-        progress.value = false;
-        timeout = undefined;
-      }, 200);
-    }
-  }
+	() => props.loading,
+	(now, old) => {
+		if (timeout !== undefined) {
+			try {
+				clearTimeout(timeout);
+			} catch (e) { }
+			timeout = undefined;
+		}
+		if (now) {
+			if (!progress.value) progress.value = true;
+		} else {
+			// Loading ends
+			timeout = setTimeout(() => {
+				progress.value = false;
+				timeout = undefined;
+			}, 200);
+		}
+	}
 );
 </script>
 
 <template>
-  <div class="header-placeholder"></div>
-  <div class="header">
-    <slot name="title"></slot>
-    <Nav>
-      <template #nav>
-        <slot name="nav"></slot>
-      </template>
-    </Nav>
-    <transition name="prog">
-      <div class="progress" v-if="progress"></div>
-    </transition>
-  </div>
+	<div class="header-placeholder"></div>
+	<div class="header">
+		<slot name="title"></slot>
+		<Nav>
+			<template #nav>
+				<slot name="nav"></slot>
+			</template>
+		</Nav>
+		<transition name="prog">
+			<div class="progress" v-if="progress"></div>
+		</transition>
+	</div>
 </template>
 
 <style>
 :root {
-  --header-height: 3.6rem;
+	--header-height: 3.6rem;
 }
 </style>
 
-<style scoped>
+<style scoped lang="scss">
 .header,
 .header-placeholder {
-  width: 100%;
-  height: var(--header-height);
+	width: 100%;
+	height: var(--header-height);
 }
 
 .header {
-  position: fixed;
-  top: 0;
-  left: 0;
-  z-index: 1000;
-  /* Layout */
-  padding: 0 1.5rem;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  /* Appearance */
-  background-color: v-bind('props.colorVar');
-  /* background-color: var(--cf); */
-  border-bottom: 1px solid var(--cb-gray-light);
-  box-shadow: 0 0 5px 0 hsla(0, 0%, 0%, 0.1);
+	position: fixed;
+	top: 0;
+	left: 0;
+	z-index: 1000;
+	/* Layout */
+	padding: 0 1.5rem;
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	/* Appearance */
+	html.light & {
+		background-color: v-bind("style.bgColorLight");
+	}
+	html.dark & {
+		background-color: v-bind("style.bgColorDark");
+	}
+	/* background-color: var(--cf); */
+	border-bottom: 1px solid var(--cb-gray-light);
+	box-shadow: 0 0 5px 0 hsla(0, 0%, 0%, 0.1);
 }
 
 .header-placeholder {
-  position: relative;
+	position: relative;
 }
 
 /* Loading progress-bar */
 .progress {
-  position: fixed;
-  z-index: 999;
-  box-shadow: 0 3px 10px 0 hsla(217, 100%, 30%, 0.5);
-  left: 0;
-  top: var(--header-height);
-  height: 3px;
-  margin: 0;
-  padding: 0;
-  background-color: var(--c-brand-light);
-  width: 90%;
-  opacity: 1;
+	position: fixed;
+	z-index: 999;
+	box-shadow: 0 3px 10px 0 hsla(217, 100%, 30%, 0.5);
+	left: 0;
+	top: var(--header-height);
+	height: 3px;
+	margin: 0;
+	padding: 0;
+	background-color: var(--c-brand-light);
+	width: 90%;
+	opacity: 1;
 }
 
 .prog-enter-from {
-  width: 0%;
-  opacity: 1;
+	width: 0%;
+	opacity: 1;
 }
 
 .prog-enter-active {
-  transition: 2s ease-in-out;
+	transition: 2s ease-in-out;
 }
 
 .prog-leave-active {
-  transition: 0.3s ease-in-out;
+	transition: 0.3s ease-in-out;
 }
 
 .prog-leave-to {
-  width: 100%;
-  opacity: 0;
+	width: 100%;
+	opacity: 0;
 }
 </style>

From 8394c2a742a24a980e0a3f933f3df6215d2026eb Mon Sep 17 00:00:00 2001
From: Deyao Chen <1348323271@qq.com>
Date: Tue, 20 Sep 2022 18:37:14 +0800
Subject: [PATCH 4/4] add card

---
 components/Card.vue   | 47 +++++++++++++++++++++++++++++++++++++++++++
 components/Header.vue |  4 ----
 2 files changed, 47 insertions(+), 4 deletions(-)
 create mode 100644 components/Card.vue

diff --git a/components/Card.vue b/components/Card.vue
new file mode 100644
index 0000000..191d5ec
--- /dev/null
+++ b/components/Card.vue
@@ -0,0 +1,47 @@
+<script setup>
+import { computed } from 'vue'
+const
+	props = defineProps({
+		bgColor: String,
+		direction: String,
+	}),
+	imgMargin = computed(() => {
+		return props.direction === 'column' ? '0 auto' : 'auto 0'
+	})
+
+</script>
+
+<template>
+	<div class="card-wrapper">
+		<slot></slot>
+	</div>
+</template>
+
+<style scoped lang="scss">
+.card-wrapper {
+	position: relative;
+	display: flex;
+	background-color: v-bind('props.bgColor||"var(--cf-next-level)"');
+	border-radius: 0.5em;
+	flex-direction: v-bind('props.direction');
+
+	:deep(img) {
+		border-radius: 6px;
+		margin: v-bind(imgMargin);
+	}
+
+	&:hover {
+		:deep(img) {
+
+			transform: scale(1.25);
+			transition: all 0.5s ease 0.1s;
+		}
+	}
+
+	:deep(a) {
+		color: var(--cb-blue);
+		text-decoration: none;
+	}
+
+}
+</style>
diff --git a/components/Header.vue b/components/Header.vue
index 89c932b..429260d 100644
--- a/components/Header.vue
+++ b/components/Header.vue
@@ -8,10 +8,6 @@ const
 			type: Boolean,
 			default: false,
 		},
-		colorVar: {
-			type: String,
-			default: 'white'
-		},
 		bgColor: {
 			type: String,
 			default: 'var(--cf)'