From 17daec0399003b76ace474e0e645505cdaf56114 Mon Sep 17 00:00:00 2001
From: "leeway.zlw" <leeway213@outlook.com>
Date: Sat, 23 Mar 2024 22:46:27 +0800
Subject: [PATCH] reorder videos

---
 src/assets/base.css    |  6 ++++-
 src/assets/main.css    |  6 ++---
 src/views/HomeView.vue | 50 +++++++++++++++++++++++-------------------
 3 files changed, 34 insertions(+), 28 deletions(-)

diff --git a/src/assets/base.css b/src/assets/base.css
index 202ca75..d929a61 100644
--- a/src/assets/base.css
+++ b/src/assets/base.css
@@ -23,7 +23,7 @@
 
 /* semantic color variables for this project */
 :root {
-  --color-background: var(--vt-c-white);
+  --color-background: rgb(243 244 246 / var(--tw-bg-opacity));
   --color-background-soft: var(--vt-c-white-soft);
   --color-background-mute: var(--vt-c-white-mute);
 
@@ -86,3 +86,7 @@ body {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
+
+p {
+  text-align: justify !important;
+}
\ No newline at end of file
diff --git a/src/assets/main.css b/src/assets/main.css
index d66d14e..464d266 100644
--- a/src/assets/main.css
+++ b/src/assets/main.css
@@ -20,21 +20,20 @@ p {
 
 #app {
   margin: 0 auto;
-  padding: 2rem;
   font-weight: normal;
 }
 
 a,
 .green {
+  @apply text-blue-500;
   text-decoration: none;
-  color: hsla(160, 100%, 37%, 1);
   transition: 0.4s;
   padding: 3px;
 }
 
 @media (hover: hover) {
   a:hover {
-    color: hsla(160, 100%, 37%, 0.464);
+    @apply text-blue-600;
   }
 }
 
@@ -49,7 +48,6 @@ a,
     width: 100%;
     height: 100%;
     grid-template-columns: 1fr 1fr;
-    padding: 0 2rem;
   }
 }
 
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index 18bdb76..17a3c4b 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -129,40 +129,39 @@ const bibTex = ref(`@inproceedings{2024champ,
     </section>
 
 
-    <section class="videos">
-      <h3>Animate Human Image</h3>
+    <section class="useen">
+      <h3>Unseen Domain Animation</h3>
       <div class="panel">
-        <AnimateHumanVideos></AnimateHumanVideos>
+        <UnseenVideos></UnseenVideos>
       </div>
     </section>
 
-
-    <section class="comparisions">
-      <h3>Comparisions</h3>
+    <section class="cross-id">
+      <h3>Cross-ID Animation</h3>
       <div class="panel">
-        <ComparisionVideos></ComparisionVideos>
+        <CrossIdVideos></CrossIdVideos>
       </div>
     </section>
 
-    <section class="useen">
-      <h3>Unseen Domain Animation</h3>
+    <section class="t2i">
+      <h3>Combining with T2I</h3>
       <div class="panel">
-        <UnseenVideos></UnseenVideos>
+        <T2IVideos></T2IVideos>
       </div>
     </section>
 
-
-    <section class="t2i">
-      <h3>Combining with T2I</h3>
+    <section class="comparisions">
+      <h3>Comparisions with Existed Approaches</h3>
       <div class="panel">
-        <T2IVideos></T2IVideos>
+        <ComparisionVideos></ComparisionVideos>
       </div>
     </section>
 
-    <section class="cross-id">
-      <h3>Cross-ID Animation</h3>
+
+    <section class="videos">
+      <h3>Animation on TikTok Dataset</h3>
       <div class="panel">
-        <CrossIdVideos></CrossIdVideos>
+        <AnimateHumanVideos></AnimateHumanVideos>
       </div>
     </section>
 
@@ -177,7 +176,12 @@ const bibTex = ref(`@inproceedings{2024champ,
 
 <style scoped lang="scss">
 main {
-  @apply w-full h-full flex flex-col items-center my-5;
+  @apply w-full h-full flex flex-col items-center;
+
+  >:nth-child(2n-1) {
+    @apply bg-white;
+    @apply dark:bg-black/50;
+  }
 
   h1 {
     @apply text-7xl text-center;
@@ -188,12 +192,12 @@ main {
   }
 
   h3 {
-    @apply text-4xl text-center my-5;
+    @apply text-3xl text-center my-5;
   }
 }
 
 section {
-  @apply w-full py-5 md:px-16;
+  @apply w-full py-10 md:px-16;
   @apply flex flex-col justify-center items-center;
 }
 
@@ -208,14 +212,14 @@ section {
   }
 
   video {
-    max-width: 768px;
+    max-width: 960px;
     @apply mt-4 block w-full;
   }
 }
 
 .framework {
   * {
-    max-width: 768px;
+    max-width: 960px;
     @apply w-full;
   }
 
@@ -223,7 +227,7 @@ section {
 
 .abstract {
   div {
-    max-width: 768px;
+    max-width: 960px;
     @apply w-full mt-2;
   }