Update home page spacing

dottxt-ai · Nov 27, 2024 · 0350744 · 0350744
1 parent b55d314
commit 0350744
Show file tree

Hide file tree

Showing 2 changed files with 74 additions and 40 deletions.
diff --git a/docs/overrides/home.html b/docs/overrides/home.html
@@ -7,79 +7,112 @@
 {{ super() }}
 
 <style>
-    .md-header {
-        position: initial
-    }
-
-    .md-main__inner {
-        margin: 0
-    }
-
-    .md-content {
-        display: none
-    }
-
     @media screen and (min-width:60em) {
         .md-sidebar--secondary {
-            display: none
+            display: none;
         }
     }
 
     @media screen and (min-width:76.25em) {
         .md-sidebar--primary {
-            display: none
+            display: none;
         }
     }
 
     .mdx-container {
         display: flex;
         justify-content: center;
         align-items: center;
-        min-height: calc(100vh - 300px);
         padding-left: 1rem;
         padding-right: 1rem;
     }
 
     .mdx-hero {
         text-align: center;
+        margin-top: 6rem;
     }
 
     .mdx-hero__image {
         margin-bottom: 1rem;
         margin-top: 1rem;
+        max-width: 80%;
+        margin: 0 auto;
+
+        @media screen and (max-width: 40em) {
+            max-width: 60%;
+        }
     }
 
     .mdx-hero__content {
         max-width: 600px;
         margin: 0 auto;
-    }
+
+        .subtitle {
+            font-size: 1rem;
+            letter-spacing: 0.025rem;
+        }
+
+        h2 {
+            max-width: 460px;
+        }
+
+        @media screen and (max-width: 40em) {
+            .subtitle {
+                font-size: 0.8rem;
+                max-width: 70%;
+                font-weight: 700;
+            }
+        }
 
+        a:hover{
+            color: #A7623A;
+        }
+    }
 
     .md-buttons {
         display: flex;
         justify-content: center;
-        gap: 1rem;
+        gap: 0.5rem;
+        flex-direction: row;
+        margin: 0 auto;
         margin-top: 2rem;
-        flex-direction: row; /* Default to row layout */
+        flex-direction: row;
+        width: max-content;
+        font-weight: 700;
     }
 
     .md-team {
-        margin-top: 2rem;
-        margin-bottom: 1rem;
+        margin-top: 4rem;
     }
 
     /* New media query for smaller screens */
     @media screen and (max-width: 40em) {
         .md-buttons {
-            flex-direction: column; /* Stack buttons vertically */
-            align-items: center; /* Center-align the stacked buttons */
+            flex-direction: column;
+            /* Stack buttons vertically */
+            align-items: center;
+            /* Center-align the stacked buttons */
         }
 
         .md-buttons .md-button {
-            width: 100%; /* Make buttons full-width */
-            max-width: 200px; /* Limit maximum width for better appearance */
+            width: 100%;
+            /* Make buttons full-width */
+            max-width: 200px;
+            /* Limit maximum width for better appearance */
         }
     }
+
+    .md-button {
+        transition: background-color 0.3s ease-in-out; /* Smooth transition */
+        border-radius: 6px !important;
+        padding: 0.4rem 0.8rem !important;
+
+    }
+
+    .md-button:hover {
+        background-color: #A7623A !important; /* Desired hover background color */
+        border-color: #A7623A !important;
+    }
 </style>
 
 <section class="mdx-container">
@@ -89,26 +122,24 @@
                 <img src="assets/images/logo.png" alt="Outlines Logo" width="600" draggable="false">
             </div>
             <div class="mdx-hero__content">
-                <h2 class="subtitle" style="font-weight: 400; padding-top: 1rem;">
+                <h2 class="subtitle" style="font-weight: 500; padding-top: 1rem;">
                     Structured text generation and robust prompting for language models
                 </h2>
-
-                    <!-- <div class="index-pre-code">
-                        <pre><code>pip install outlines</code></pre>
-                    </div> -->
-
-                    <div class="md-buttons">
-                        <a href="{{ 'welcome/' | url }}" title="Get started" class="md-button md-button--primary">
-                            Get started
-                        </a>
-                        <a href="https://discord.gg/ZxBxyWmW5n" title="Join the Community" class="md-button">
-                            Join the Community
-                        </a>
-                        <a href="https://twitter.com/dottxtai" title="Follow us on X" class="md-button">
+                <div class="md-buttons">
+                    <a href="{{ 'welcome/' | url }}" title="Get started" class="md-button md-button--primary">
+                        Get started
+                    </a>
+                    <a href="https://discord.gg/ZxBxyWmW5n" title="Join the Community" class="md-button">
+                        Join the community
+                    </a>
+                </div>
+                <div class="md-buttons">
+                    <p>
+                        <a href="https://twitter.com/dottxtai" title="Follow us on X" target="_blank">
                             Follow us on X
                         </a>
-                    </div>
-
+                    </p>
+                </div>
 
                 <p class="md-team">Made with ❤️ by the team at <a href="https://dottxt.co">.txt</a></p>
             </div>

diff --git a/docs/stylesheets/extra.css b/docs/stylesheets/extra.css
@@ -112,6 +112,9 @@ h1.title {
 
 h2.subtitle {
   margin: 5px 0px 25px;
+  font-size: 1rem;
+  max-width: 540px;
+  margin: 0 auto;
 }
 
 .md-typeset {