my redesign, second try (#26)

* added 2 banners

* redesign with minimal css changes only

* logo is smaller now

Author: ofirpress

css/components.css

@@ -487,7 +487,7 @@ button:focus,
   background-color: var(--color-accent-light);
   border: 1.5px solid var(--color-accent);
   padding: 1rem;
-  margin-bottom: 1.5rem;
+  margin-bottom: 0.4rem;
   border-radius: 0.25rem;
   display: flex;
   align-items: center;
@@ -858,4 +858,4 @@ button:focus,
 
 .dark-mode .sidebar-family-icon {
   filter: brightness(1.2);
-}
+}

css/layout.css

@@ -102,12 +102,15 @@
 /* Header */
 .page-header {
   background-color: var(--color-header);
-  padding: 2rem 0;
+  padding-top: 0.7rem;
+  padding-bottom: 0.7rem;
+  padding-left: 0;
+  padding-right: 0;
   margin: 0;
   width: 100%;
   position: relative;
   color: #FFF7EC;
-  margin-bottom: 2rem;
+  margin-bottom: 0.4rem;
 }
 
 .page-header .container {
@@ -385,7 +388,7 @@
 
 .content-section {
   margin-bottom: 2.5rem;
-  padding: 1.5rem;
+  padding: 0.3rem;
   background-color: var(--color-background);
   border-radius: var(--radius-lg);
   box-shadow: var(--shadow-sm);
@@ -545,7 +548,7 @@
   }
 
   .content-section {
-    padding: 1.25rem;
+    padding: 0.3rem;
   }
 
   .title-wrapper h1 {
@@ -564,7 +567,7 @@
   }
 
   .content-section {
-    padding: 1rem;
+    padding: 0.3rem;
     margin-bottom: 1.5rem;
   }
 
@@ -575,4 +578,4 @@
   .title-wrapper h1 {
     font-size: 1.5rem;
   }
-} 
+}

css/leaderboard-filters.css

@@ -2,7 +2,7 @@
 .filter-buttons {
     display: flex;
     flex-wrap: wrap;
-    gap: 8px;
+    gap: 4px;
 }
 
 .filter-toggle {
@@ -28,7 +28,7 @@
     display: flex;
     align-items: center;
     gap: 0.5em;
-    padding: 0.375rem 0.75rem;
+    padding: 0.25rem 0.5rem;
     border: 1px solid #ced4da;
     border-radius: 0.25rem;
     background-color: #f8f9fa;
@@ -277,4 +277,4 @@
         width: 100%;
         justify-content: flex-start !important;
     }
-}
+}

css/pages.css

@@ -11,7 +11,15 @@
   width: 300px;
   max-width: 100%;
   height: auto;
-  margin-bottom: 1.25rem;
+  margin-bottom: 0.3rem;
+}
+
+.header-logo-small {
+  width: 75px;
+  height: 75px;
+  margin-right: 0.5rem;
+  vertical-align: middle;
+  display: inline-block;
 }
 
 .paper-link {
@@ -88,7 +96,7 @@
   white-space: nowrap;
   scrollbar-width: none;
   -ms-overflow-style: none;
-  margin-bottom: 1.5rem;
+  margin-bottom: 0.5rem;
 }
 
 .leaderboard-tabs::-webkit-scrollbar {
@@ -702,4 +710,4 @@ code {
 
 .contact-container a:hover {
     text-decoration: underline;
-} 
+}

templates/pages/index.html

@@ -1,6 +1,6 @@
 {% extends 'base.html' %}
 
-{% block title %}SWE-bench Leaderboard{% endblock %}
+{% block title %}SWE-bench Leaderboards{% endblock %}
 
 {% block head_extra %}
     <link rel="icon" href="favicon.ico" type="image/x-icon">
@@ -15,7 +15,10 @@
     <header class="page-header">
         <div class="container">
             <div class="header-logo-container">
-                <img src="img/swe-bench-banner.svg" alt="SWE-bench Logo" class="header-logo">
+                <h1>
+                    <img src="img/swe-llama.svg" alt="SWE-bench Logo" class="header-logo-small">
+                    Leaderboards
+                </h1>
             </div>
         </div>
     </header>