Merge pull request #132 from purna135/fix_layout_for_large_screen

Fix large screen styling issues

Author: canyon289

layouts/index.html

@@ -188,7 +188,7 @@ <h2>Hamiltonian Monte Carlo</h2>
                         </a>
                         <h2>Hamiltonian Monte Carlo</h2>
                     </div>
-                    
+
                     <div class="sponsor_logo">
                         <a href="https://numfocus.org/" target="_blank">
                             <img src="/images/sponsors_logos/num_focus_logo.jpg" alt="NumFOCUS logo">
@@ -212,6 +212,13 @@ <h2>Hamiltonian Monte Carlo</h2>
                         <h2>Hamiltonian Monte Carlo</h2>
                     </div>
 
+                    <div class="sponsor_logo">
+                        <a href="https://www.adialab.ae/" target="_blank">
+                            <img src="/images/sponsors_logos/adia_lab_logo.jpg" alt="Adia Lab logo">
+                        </a>
+                        <h2>Hamiltonian Monte Carlo</h2>
+                    </div>
+
                     <div class="sponsor_logo">
                         <a href="https://numfocus.org/" target="_blank">
                             <img src="/images/sponsors_logos/num_focus_logo.jpg" alt="NumFOCUS logo">

static/css/home.css

@@ -524,7 +524,7 @@
 
 .logos__container {
     display: flex;
-    width: calc(16.2rem * 6);
+    width: calc(16.2rem * 8);
     animation: scrollLogos 10s linear infinite;
 }
 
@@ -533,7 +533,7 @@
         transform: translateX(0);
     }
     100% {
-        transform: translateX(calc(-16.2rem * 3));
+        transform: translateX(calc(-16.2rem * 4));
     }
 }
 
@@ -691,6 +691,23 @@
     outline-offset: 3px;
 }
 
+@media screen and (min-width: 1800px) {
+    .header {
+        height: 50vh;
+    }
+}
+
+@media screen and (min-width: 1400px) and (max-width: 1800px) {
+    .header {
+        height: 60vh;
+    }
+}
+
+@media screen and (max-width: 1400px) {
+    .header {
+        height: 80vh;
+    }
+}
 
 
 /* =================== MEDIA QUERIES (TABLETS) ========================= */

static/css/main.css

@@ -48,6 +48,7 @@ body {
 
 .container {
     width: var(--container-width-lg);
+    max-width: 1200px;
     margin: 0 auto;
 }