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;
  }