Added poster and video to website | Fixed scaling bug

sstepput · Nov 30, 2023 · 0bd987a · 0bd987a
1 parent 343c8a6
commit 0bd987a
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 1 deletion.
diff --git a/docs/index.html b/docs/index.html
@@ -163,6 +163,27 @@ <h2 class="title is-4">Role Prediction</h2>
                 </div>
             </div>
 
+            <div class="columns is-centered">
+                <div class="column">
+                    <div class="content">
+                        <h2 class="title is-4">Poster</h2>
+                        <img class="posterimg" src="static/assets/Poster_EMNLP_4648.png" alt="EMNLP Poster">
+                        <p>
+                           A high-resolution  <a href="static/assets/Poster_EMNLP_4648.pdf">PDF</a>.
+                        </p>
+                    </div>
+                </div> 
+               <div class="column">
+                    <div class="content">
+                        <h2 class="title is-4">Video</h2>
+                        <iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/4G1-dUSRioM?si=35HrUqwLedvnbcEd" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
+                        <p>
+                            6-minute video presentation of our work.
+                        </p>
+                    </div>
+                </div>    
+            </div>  
+
             <div class="columns is-centered ">
                 <div class="column is-full-width">
                     <h2 class="title is-3"><span class="dcliport">Dataset Overview</span></h2>
@@ -199,6 +220,7 @@ <h3 class="title is-4"><span class="dcliport">Interactive Example</span></h3>
 
                 </div>
             </div>
+        </div>
     </section>
 
     <section class="section" id="BibTeX">

diff --git a/docs/static/assets/Poster_EMNLP_4648.pdf b/docs/static/assets/Poster_EMNLP_4648.pdf
diff --git a/docs/static/assets/Poster_EMNLP_4648.png b/docs/static/assets/Poster_EMNLP_4648.png
diff --git a/docs/static/css/custom.css b/docs/static/css/custom.css
@@ -2,7 +2,7 @@
 
 .div-only-mobile {}
 
-@media screen and (max-width: 1920px) {
+@media screen and (max-width: 5920px) {
     .div-only-mobile {
         display: none;
     }
@@ -34,4 +34,13 @@ ul li {
     color: white;
     padding: 20px;
     margin: 10px;
+}
+
+.posterimg {
+    width: 100%; 
+    height: 315px; 
+    object-fit: cover; 
+    object-position: 100% 0;
+    -webkit-mask-image:-webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));
+    mask-image: linear-gradient(to bottom, rgba(0,0,0,1), rgba(0,0,0,0));
 }