docs: add a temproray start button, improve rwd, close #15

twoslashes · Jan 22, 2024 · 6dcf34c · 6dcf34c
1 parent 39a7fc2
commit 6dcf34c
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 3 deletions.
diff --git a/docs/.vitepress/theme/styles/homepage.scss b/docs/.vitepress/theme/styles/homepage.scss
@@ -6,6 +6,10 @@ main.main-intro {
   justify-content: center;
   align-items: center;
 
+  @media screen and (max-width: 800px) {
+    padding: 0 0;
+  }
+
   .eu {
     font-family: "euclid";
     font-size: 20rem;
@@ -47,7 +51,7 @@ main.main-intro {
   }
 
   article.container {
-    padding: 4.5rem 0;
+    padding: 6rem 0;
     margin-bottom: 6rem;
     display: flex;
     flex-direction: column;
@@ -56,11 +60,26 @@ main.main-intro {
     width: 100%;
     background-color: rgb(251 246 232 / 0.5);
 
+    @media screen and (max-width: 800px) {
+      padding: 3rem 0;
+    }
+
     html.dark & {
       background-color: rgb(30 30 30);
     }
   }
 
+  .action-button {
+    border: 1px solid #e76143;
+    border-left: 4px solid #e76143;
+    padding: 10px 12px 5px 12px;
+    text-decoration: none;
+  }
+  .action-button:hover {
+    background: #e76143;
+    color: white;
+  }
+
   .border-red {
     border-left: 8px solid #e76143bb;
   }

diff --git a/docs/components/home/Homepage.vue b/docs/components/home/Homepage.vue
@@ -18,10 +18,14 @@
           <br>
           the syntax engine of Visual Studio Code
           <br>
-          mixed with the TypeScript compiler’s information
+          mixed with the TypeScript compiler's information
         </p>
 
-        <div my-15>
+        <a href="/guide/" class="action-button" inline-block my-10>
+          Get Started
+        </a>
+
+        <div mb-15 mt-5>
           <img class="dark:invert" style="margin: 0 auto" src="/svgs/squiggle.svg" alt="Decoration" width="70" height="25.5">
         </div>