Added Videos, pictures and changes that make the wesite look uniform across pages

Author: Atharv-B

assets/css/main.css

@@ -2,12 +2,14 @@
 * {
   margin: 0;
   padding: 0;
+  box-sizing: border-box;
 }
 
 /* Body styling */
 body {
   font-family: 'Arial', sans-serif;
   font-size: 20px;
+  line-height: 1.6;
   padding-top: 70px; /* Adjust based on header height */
 }
 
@@ -30,6 +32,7 @@ header .inner {
 /* Navbar styling */
 .navbar {
   display: flex;
+  flex-wrap: wrap; /* Added flex-wrap for overflow handling */
   align-items: center;
   width: 100%;
   justify-content: space-between;
@@ -66,6 +69,7 @@ header .inner {
 
 .nav-list li a:hover {
   color: #b22222; /* Change the color on hover */
+  transition: color 0.2s ease-in-out; /* Added smoother hover transition */
 }
 
 /* External link image styling */
@@ -207,7 +211,6 @@ header .inner {
   transition: background-color 0.3s ease-in-out;
 }
 
-
 .note {
   font-size: 12px;
   color: #555;
@@ -292,6 +295,15 @@ footer p {
   .publication-links a:last-child {
     margin-bottom: 0;
   }
+
+  /* Responsive typography adjustments */
+  body {
+    font-size: 18px;
+  }
+
+  h1, h2, h3 {
+    font-size: 90%;
+  }
 }
 
 /* Additional CSS from your original main.css file */
@@ -351,7 +363,55 @@ li > ol {
 }
 
 h1, h2, h3, h4, h5, h6 {
-  font-weight: 400;
+  font-weight: 400;/* Videos section styling */
+.videos-section {
+  padding: 20px;
+  background-color: #f9f9f9;
+}
+
+.videos-section h1,
+.videos-section h2 {
+  font-family: 'Georgia', serif;
+  margin-bottom: 20px;
+}
+
+.video-item {
+  display: flex;
+  flex-direction: column;
+  margin-bottom: 40px;
+}
+
+.video-item-info {
+  margin-bottom: 20px;
+}
+
+.video-item-info h3 {
+  font-family: 'Georgia', serif;
+  color: #b22222;
+  margin-bottom: 10px;
+}
+
+.video-item-info p {
+  margin-bottom: 10px;
+}
+
+.video-item iframe {
+  width: 100%;
+  height: auto;
+  border-radius: 10px;
+}
+
+.video-item-links a {
+  display: inline-block;
+  margin-right: 10px;
+  color: #b22222;
+  font-size: 20px;
+}
+
+.video-item-links a:hover {
+  color: #111;
+}
+
 }
 
 a {
@@ -598,7 +658,7 @@ table td {
   }
   .footer-col-3 {
     width: -webkit-calc(100% - (30px / 2));
-    width: calc(100% - (30px / 2));
+    width: calc(100% - (30px));
   }
 }
 @media screen and (max-width: 600px) {
@@ -683,6 +743,119 @@ table td {
   }
 }
 
+/* Videos section styling */
+.videos-section {
+  padding: 20px;
+  background-color: #f9f9f9;
+}
+
+.videos-section h1,
+.videos-section h2 {
+  font-family: 'Georgia', serif;
+  margin-bottom: 20px;
+}
+
+.video-item {
+  display: flex;
+  flex-direction: column;
+  margin-bottom: 40px;
+}
+
+.video-item-info {
+  margin-bottom: 20px;
+}
+
+.video-item-info h3 {
+  font-family: 'Georgia', serif;
+  margin-bottom: 10px;
+}
+
+.video-item-info p {
+  margin-bottom: 10px;
+}
+
+.video-item iframe {
+  width: 100%;
+  border-radius: 10px;
+}
+
+.video-item-links a {
+  display: inline-block;
+  margin-right: 10px;
+  color: #b22222;
+  font-size: 20px;
+}
+
+.video-item-links a:hover {
+  color: #111;
+}
+
+/* Home section styling */
+.home-section {
+  padding: 20px;
+  background-color: #ffffff; /* White background for a clean look */
+}
+
+.home-section h1,
+.home-section h2 {
+  font-family: 'Georgia', serif;
+  margin-bottom: 20px;
+}
+
+.home-feature {
+  display: flex;
+  align-items: flex-start;
+  margin-bottom: 40px;
+}
+
+.home-feature-info {
+  flex: 1;
+}
+
+.home-feature-info p {
+  margin-bottom: 10px;
+}
+
+.lab-name {
+  text-align: center;
+  margin-top: 20px;
+  padding: 20px 0;
+  background-color: #f9f9f9; /* Light background to highlight the lab name */
+  border-bottom: 2px solid #b22222; /* Optional underline */
+}
+
+.lab-name h1 {
+  font-family: 'Georgia', serif;
+  font-size: 36px;
+  margin: 0;
+}
+
+/* Adjust the banner to align with overall styling */
+.banner {
+  position: relative;
+  width: 100%;
+  height: auto;
+  max-height: 700px;
+  overflow: hidden;
+}
+
+.banner img {
+  width: 100%;
+  height: auto;
+}
+
+.banner-caption {
+  position: absolute;
+  bottom: 10px;
+  left: 20px;
+  color: white;
+  background-color: rgba(0, 0, 0, 0.5);
+  padding: 10px;
+  font-size: 24px;
+  border-radius: 5px;
+}
+
+
 .highlight {
   background: #fff;
 }

assets/images/PXL_20240914_141904501.jpg

@@ -2,18 +2,34 @@
 layout: default
 title: Home
 ---
-<p><h3> Aligned, Robust and Interactive Autonomy Lab at the University of Utah </h3></p>
+<div class="lab-name">
+  <h1> Aligned, Robust and Interactive Autonomy Lab at the University of Utah</h1>
+</div>
 
 <div class="banner">
-  <img src="{{ '/assets/images/placeholder.jpg' | relative_url }}" alt="Banner">
-  <div class="banner-caption"> Maybe a group picture? </div>
+  <img src="{{ '/assets/images/PXL_20240914_141904501.jpg' | relative_url }}" alt="Banner">
 </div>
-<div class="content">
-    <p>
+
+
+<div class="home-section">
+  <h1>About Us</h1>
+  <div class="home-feature">
+    <div class="home-feature-info">
+      <p>
         Add About here.
         Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna. Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin pharetra nonummy pede. Mauris et orci. Aenean nec lorem. In porttitor. Donec laoreet nonummy augue. Suspendisse dui purus, scelerisque at, vulputate vitae, pretium mattis, nunc. Mauris eget neque at sem venenatis eleifend. Ut nonummy.
-    </p>
+      </p>
+    </div>
+  </div>
 
-<h2>Recent News</h2>
-...
+
+  <h2>Recent News</h2>
+  <div class="home-feature">
+    <div class="home-feature-info">
+      <p>
+        Here you can add recent updates or news. For example, new research findings, publications, events, etc.
+      </p>
+    </div>
+  </div>
 </div>
+

index.md

@@ -67,7 +67,7 @@ title: People
     <img src="{{ '/assets/images/AtharvBelsare.jpg' | relative_url }}" alt="Atharv" class="person-photo">
     <div class="person-info">
       <h3>Atharv Belsare</h3>
-      <p>ALorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Cras semper auctor neque vitae. In nisl nisi scelerisque eu ultrices vitae auctor eu. Nunc pulvinar sapien et ligula ullamcorper. Sociis natoque penatibus et magnis dis parturient montes. Sed lectus vestibulum mattis ullamcorper. Lorem sed risus ultricies tristique nulla aliquet enim tortor at. Scelerisque eu ultrices vitae auctor. Facilisis leo vel fringilla est ullamcorper eget nulla. Lectus nulla at volutpat diam ut venenatis tellus in metus. Ullamcorper velit sed ullamcorper morbi tincidunt ornare massa. Facilisis magna etiam tempor orci. Suscipit adipiscing bibendum est ultricies integer quis.</p>
+      <p>I am a first year Ph.D. student in Computer Science at the Kahlert School of Computing. My research interests include Human-Robot Interaction and Assistive Robotics.</p>
       <div class="person-links">
         <a href="#"><i class="fas fa-home"></i></a>
         <a href="#"><i class="fas fa-graduation-cap"></i></a>

people.md

@@ -3,7 +3,9 @@ layout: default
 title: Research
 ---
 
-# Research
+<div class="publications-section">
+    <h1>Research</h1>
+</div>
 
 Welcome to our research page! Our lab is focused on advancing the fields of human-centered AI and human-robot interaction, with specific emphasis on reward learning, assistive and medical robotics, safety and robustness, and multi-agent systems.
 

research.md

@@ -2,7 +2,25 @@
 layout: default
 title: Videos
 ---
+<div class="videos-section">
+    <h1>Videos</h1>
+    <div class="video-item">
+    <div class="video-item-info">
+      <h5>Latent Spaces and Learned Representation for Better Human Preference Learning, CoRL 2022. Talk by Dr. Daniel Brown.</h5>
+    </div> 
+    <iframe width="500" height="500" src="https://www.youtube.com/embed/eOHWDgqMHq8?si=Vopk_--9kUVfsGsU&amp;start=11280" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
+</div>
+    <div class="video-item">
+    <div class="video-item-info">
+      <h5>Helping Robots Learn from, Predict and Better Assist Humans. Talk by Dr. Daniel Brown.</h5>
+    </div> 
+    <iframe width="500" height="500" src="https://www.youtube.com/embed/zTdBKSwWE4M?si=oi2dNLTMr1oFevQ1&amp;start=1478" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
+</div>
+    <div class="video-item">
+    <div class="video-item-info">
+      <h5>Efficient and Robust Learning of Human Intent. Talk by Dr. Daniel Brown.</h5>
+    </div> 
+    <iframe width="500" height="500" src="https://www.youtube.com/embed/sPIpms0sTBQ?si=Rkp_eeYCcimzyzJu&amp;start=73" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
+</div>
+</div>
 
-# Videos
-
-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque nisl eros, pulvinar facilisis justo mollis, auctor consequat urna.