Merge pull request #5 from Barath-Balamurugan/main

Update Design and Alignment for Mobile/Tab View
SINRG-Lab · Jan 7, 2025 · 2d73f6d · 2d73f6d
2 parents 0f3e1fd + d3393c9
commit 2d73f6d
Show file tree

Hide file tree

Showing 22 changed files with 540 additions and 21 deletions.
diff --git a/activities/activities.css b/activities/activities.css
@@ -41,6 +41,10 @@ body {
     text-transform: uppercase;
 }
 
+.lab-name-mobile{
+    display: none;
+}
+
 .lab-name span{
     display: inline-block;
 }
@@ -68,7 +72,7 @@ body {
 .navbar {
     background-color: var(--dark);
     text-align: center;
-    padding: 10px 0px 20px 0px;
+    padding: 10px 0px 10px 0px;
     max-width: 1600px;
     margin: auto;
     align-self: center;
@@ -149,14 +153,29 @@ footer {
     padding: 20px 0;
 }
 
+@media (max-width: 1024px) {
+    .navbar .nav-link {
+        padding: 0px 30px !important;
+    }
+    .activity-section {
+        margin: 40px 40px;
+    }
+}
+
 /* Responsive Design */
 @media (max-width: 768px) {
+    .header {
+        justify-content: space-between;
+    }
     .header img {
         height: 40px;
     }
 
     .navbar .nav-link {
         font-size: 1rem;
+        width: 100%;
+        text-align: start;
+        padding: 15px 50px !important;
     }
 
     .header .lab-name {
@@ -191,4 +210,50 @@ footer {
     .activity-section {
         margin: 20px auto;
     }
+    .activity {
+        margin: 20px;
+    }
+    .page-title{
+        text-align: center;
+        font-size: 28px;
+    }
+    .lab-name{
+        display: none;
+    }
+
+    .lab-name-mobile{
+        display: inline-block;
+        color: var(--primary);
+        font-family: "Poppins", serif;
+        font-weight: 500;
+        font-size: 1.2rem;
+        letter-spacing: 10px;
+        word-spacing: 20px;
+        text-transform: uppercase;
+    }
+    .header a{
+        width: 20%;
+    }
+    footer {
+        font-size: 10px;
+    }
+}
+
+@media (max-width: 430px) {
+
+    .header a{
+        width: 35%;
+    }
+
+    .lab-name-mobile{
+        font-size: 18px;
+    }
+
+    .navbar .nav-link {
+        padding: 15px 50px !important;
+    }
+
+    .activity-section {
+        margin: 30px 10px;
+    }
 }
diff --git a/activities/activities.html b/activities/activities.html
@@ -17,6 +17,7 @@
         <a href="/index.html">
             <img class="lab-logo" src="/logo/SinrgLogoMain.png" alt="Lab Logo">
         </a>
+        <div class="lab-name-mobile">SINRG</div>
         <div class="lab-name"><span>Spatial</span> <span>I<span class="second-letter">n</span>telligence</span> <span>Research</span> <span>Group</span></div>
         <!-- <div class="lab-name">Spatial Intelligence Research Group</div> -->
         <img class="school-logo" src="/images/N-Motto Wordmark_PMSu_186+KO.png" alt="School Logo">

diff --git a/courses/courses.css b/courses/courses.css
@@ -41,6 +41,10 @@ body {
     text-transform: uppercase;
 }
 
+.lab-name-mobile{
+    display: none;
+}
+
 .lab-name span{
     display: inline-block;
 }
@@ -68,7 +72,7 @@ body {
 .navbar {
     background-color: var(--dark);
     text-align: center;
-    padding: 10px 0px 20px 0px;
+    padding: 10px 0px 10px 0px;
     max-width: 1600px;
     margin: auto;
     align-self: center;
@@ -151,14 +155,30 @@ footer {
     padding: 20px 0;
 }
 
+@media (max-width: 1024px) {
+    .navbar .nav-link {
+        padding: 0px 30px !important;
+    }
+    .course-section {
+        max-width: 1200px;
+        margin: 40px 40px;
+    }
+}
+
 /* Responsive Design */
 @media (max-width: 768px) {
+    .header {
+        justify-content: space-between;
+    }
     .header img {
         height: 40px;
     }
 
     .navbar .nav-link {
         font-size: 1rem;
+        width: 100%;
+        text-align: start;
+        padding: 15px 50px !important;
     }
 
     .header .lab-name {
@@ -190,7 +210,52 @@ footer {
         width: 100%; /* Adjust width for smaller screens */
         height: 100px;
     }
+
+    .course{
+        margin: 20px;
+    }
+
+    .course-title {
+        text-align: left;
+        font-size: 22px;
+    }
+    .lab-name{
+        display: none;
+    }
+
+    .lab-name-mobile{
+        display: inline-block;
+        color: var(--primary);
+        font-family: "Poppins", serif;
+        font-weight: 500;
+        font-size: 1.2rem;
+        letter-spacing: 10px;
+        word-spacing: 20px;
+        text-transform: uppercase;
+    }
+    .header a{
+        width: 20%;
+    }
+    footer {
+        font-size: 10px;
+    }
+}
+
+@media (max-width: 430px) {
+
+    .header a{
+        width: 35%;
+    }
+
+    .lab-name-mobile{
+        font-size: 18px;
+    }
+
+    .navbar .nav-link {
+        padding: 15px 50px !important;
+    }
+
     .course-section {
-        margin: 20px auto;
+        margin: 30px 10px;
     }
 }
diff --git a/courses/courses.html b/courses/courses.html
@@ -17,6 +17,7 @@
         <a href="/index.html">
             <img class="lab-logo" src="/logo/SinrgLogoMain.png" alt="Lab Logo">
         </a>
+        <div class="lab-name-mobile">SINRG</div>
         <div class="lab-name"><span>Spatial</span> <span>I<span class="second-letter">n</span>telligence</span> <span>Research</span> <span>Group</span></div>
         <!-- <div class="lab-name">Spatial Intelligence Research Group</div> -->
         <img class="school-logo" src="/images/N-Motto Wordmark_PMSu_186+KO.png" alt="School Logo">

diff --git a/images/Carousel/compression-abr.jpg b/images/Carousel/compression-abr.jpg
diff --git a/images/Carousel/xr-glass-hud-prototype.jpg b/images/Carousel/xr-glass-hud-prototype.jpg
diff --git a/images/Carousel/xr-nasa.jpg b/images/Carousel/xr-nasa.jpg
diff --git a/images/Carousel/xr-netsys.jpg b/images/Carousel/xr-netsys.jpg
diff --git a/images/Carousel/xr-overlays.jpg b/images/Carousel/xr-overlays.jpg
diff --git a/images/Carousel/xr-sports.jpg b/images/Carousel/xr-sports.jpg
diff --git a/images/Carousel/xr-wafer.jpg b/images/Carousel/xr-wafer.jpg
diff --git a/images/People/AidanHanson.png b/images/People/AidanHanson.png
diff --git a/index.css b/index.css
@@ -41,6 +41,10 @@ body {
     text-transform: uppercase;
 }
 
+.lab-name-mobile{
+    display: none;
+}
+
 .lab-name span{
     display: inline-block;
 }
@@ -72,7 +76,7 @@ body {
 .navbar {
     background-color: var(--dark);
     text-align: center;
-    padding: 10px 0px 20px 0px;
+    padding: 10px 0px 10px 0px;
     max-width: 1600px;
     margin: auto;
     align-self: center;
@@ -227,36 +231,69 @@ footer {
     padding: 20px 0;
 }
 
+@media (max-width: 1024px) {
+    .navbar .nav-link {
+        padding: 0px 30px !important;
+    }
+
+    .carousel-item img {
+        height: 350px;
+    }
+
+    .carousel-caption h5{
+        width: 80%;
+        margin: auto;
+    }
+}
+
 /* Responsive Design */
 @media (max-width: 768px) {
+    .header {
+        justify-content: space-between;
+    }
     .header img {
         height: 40px;
     }
 
     .navbar .nav-link {
         font-size: 1rem;
+        width: 100%;
+        text-align: start;
+        padding: 15px 50px !important;
     }
 
     .header .lab-name {
         font-size: 1.2rem;
     }
     .carousel-item img {
         height: 100%;
-        max-height: 150px;
     }
     .highlight-caption {
         font-size: 1.2rem;
     }
     .carousel {
-        height: 100px; /* Adjust height for smaller screens */
+        height: 350px; /* Adjust height for smaller screens */
     }
+
+    .carousel-item img {
+        width: 100%;
+    }
+
+    .carousel-item img {
+        height: 300px !important;
+    }
+
+    .carousel-caption h5{
+        width: 80%;
+        margin: auto;
+        font-size: 1rem !important; /* Reduce heading size */
+        padding: 20px;
+    }
+
     .carousel-caption {
         font-size: 0.5rem; /* Adjust font size for smaller screens */
         padding: 2px;
     }
-    .carousel-caption h5 {
-        font-size: 0.5rem !important; /* Reduce heading size */
-    }
     .research-areas {
         flex-direction: column;
         gap: 20px;
@@ -266,4 +303,58 @@ footer {
         width: 100%; /* Adjust width for smaller screens */
         height: 100px;
     }
+
+    .lab-name{
+        display: none;
+    }
+
+    .lab-name-mobile{
+        display: inline-block;
+        color: var(--primary);
+        font-family: "Poppins", serif;
+        font-weight: 500;
+        font-size: 1.2rem;
+        letter-spacing: 10px;
+        word-spacing: 20px;
+        text-transform: uppercase;
+    }
+
+    .header a{
+        width: 20%;
+    }
+
+    footer {
+        font-size: 10px;
+    }
+}
+
+@media (max-width: 430px) {
+
+    .header a{
+        width: 35%;
+    }
+
+    .lab-name-mobile{
+        font-size: 18px;
+    }
+
+    .navbar .nav-link {
+        padding: 15px 50px !important;
+    }
+
+    .carousel {
+        height: 200px; /* Adjust height for smaller screens */
+    }
+
+    .carousel-item img {
+        height: 150px !important;
+    }
+
+    .carousel-caption h5{
+        width: 95%;
+        margin: auto;
+        font-size: 12px !important; /* Reduce heading size */
+        padding: 20px;
+        /* text-align: justify; */
+    }
 }