small changes to layout & styling. swap positions of some hard videos

roahmlab · Feb 14, 2024 · 3b3934a · 3b3934a
1 parent a4533b9
commit 3b3934a
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 9 deletions.
diff --git a/css/stylesheet.scss b/css/stylesheet.scss
@@ -60,18 +60,28 @@ $data-fonts: ({%- for font in site.data.fonts.fonts -%}{{ font.class }}: {{- fon
     padding: 0;
     margin: 0;
     .video-item {
-        min-width: 240px;
+        min-width: 320px;
         max-width: 100%;
         flex-shrink: 2;
         flex-basis: 30%;
         flex-grow: 1;
+        @include media-query(mobile) {
+            min-width: 100%;
+        }
         video {
             width: 100%;
             height: auto;
+            display: block;
         }
         &.tighter {
             min-width: 120px;
-            flex-basis: 20%;
+            flex-basis: 30%;
+            @include media-query(mobile) {
+                flex-basis: 120px;
+                flex-grow: 1;
+                flex-shrink: 1;
+                min-width: 0;
+            }
         }
         p {
             text-align: center;
@@ -84,3 +94,7 @@ $data-fonts: ({%- for font in site.data.fonts.fonts -%}{{ font.class }}: {{- fon
 h2 {
     margin-top: 0.4em !important;
 }
+
+.content > .wrapper > .authors > .box > .single:last-child {
+
+}
diff --git a/index.markdown b/index.markdown
@@ -69,14 +69,14 @@ links:
       <source src="assets/sparrows_single_arm_demo.mp4" type="video/mp4">
       Your browser does not support the video tag.
     </video>
-    <p> SPARROWS performing single arm planning </p>
+    <p>SPARROWS performing single arm planning </p>
   </div>
   <div class="video-item" style="min-width:0;">
     <video autoplay preload="auto" controls disablepictureinpicture playsinline muted loop style="display:block; width:100%; height:auto;">
       <source src="assets/sparrows_two_arm_demo.mp4" type="video/mp4">
       Your browser does not support the video tag.
     </video>
-    <p> SPARROWS performing two arm planning </p>
+    <p>SPARROWS performing two arm planning </p>
   </div>
 </div> <!-- END OVERVIEW VIDEOS -->
 
@@ -149,21 +149,21 @@ On the other hand, MPOT and TRAJOPT both stop due to colliding with the environm
       <source src="assets/combined_10_obstacles.mp4" type="video/mp4">
       Your browser does not support the video tag.
     </video>
-    <p> 10 obstacles</p>
+    <p>10 obstacles</p>
   </div>
   <div class="video-item">
     <video class="autoplay-in-frame" disableremoteplayback disablepictureinpicture playsinline muted loop onclick="this.paused ? this.play() : this.pause();">
       <source src="assets/combined_20_obstacles.mp4" type="video/mp4">
       Your browser does not support the video tag.
     </video>
-    <p> 20 obstacles</p>
+    <p>20 obstacles</p>
   </div>
   <div class="video-item">
     <video class="autoplay-in-frame" disableremoteplayback disablepictureinpicture playsinline muted loop onclick="this.paused ? this.play() : this.pause();">
       <source src="assets/combined_40_obstacles.mp4" type="video/mp4">
       Your browser does not support the video tag.
     </video>
-    <p> 40 obstacles</p>
+    <p>40 obstacles</p>
   </div>
 </div><!-- END RANDOM VIDEOS -->
 
@@ -188,13 +188,13 @@ SPARROWS' performance on a handful of these scenarios is demonstrated below.
   </div>
   <div class="video-item tighter">
     <video class="autoplay-in-frame" disableremoteplayback disablepictureinpicture playsinline muted loop onclick="this.paused ? this.play() : this.pause();">
-      <source src="assets/sparrows_hard_scenarios_4.mp4" type="video/mp4">
+      <source src="assets/sparrows_hard_scenarios_8.mp4" type="video/mp4">
       Your browser does not support the video tag.
     </video>
   </div>
   <div class="video-item tighter">
     <video class="autoplay-in-frame" disableremoteplayback disablepictureinpicture playsinline muted loop onclick="this.paused ? this.play() : this.pause();">
-      <source src="assets/sparrows_hard_scenarios_8.mp4" type="video/mp4">
+      <source src="assets/sparrows_hard_scenarios_4.mp4" type="video/mp4">
       Your browser does not support the video tag.
     </video>
   </div>