reorder videos

fudan-generative-vision · Mar 23, 2024 · 17daec0 · 17daec0
1 parent c717a44
commit 17daec0
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 28 deletions.
diff --git 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;
+}
diff --git 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
@@ -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,22 +212,22 @@ section {
   }
 
   video {
-    max-width: 768px;
+    max-width: 960px;
     @apply mt-4 block w-full;
   }
 }
 
 .framework {
   * {
-    max-width: 768px;
+    max-width: 960px;
     @apply w-full;
   }
 
 }
 
 .abstract {
   div {
-    max-width: 768px;
+    max-width: 960px;
     @apply w-full mt-2;
   }