From cd9b46ba46463bc7d86204c1810fe9b6d34a91c8 Mon Sep 17 00:00:00 2001
From: Halid <imhalid@icloud.com>
Date: Wed, 5 Jun 2024 15:11:59 +0300
Subject: [PATCH] fix: small design issue for "get started" card and "headline
 diagram"

---
 .../src/templates/pages/css/index.scss        | 20 ++++++++++---------
 1 file changed, 11 insertions(+), 9 deletions(-)

diff --git a/packages/typescriptlang-org/src/templates/pages/css/index.scss b/packages/typescriptlang-org/src/templates/pages/css/index.scss
index 6a7785a03504..78b0634460c9 100644
--- a/packages/typescriptlang-org/src/templates/pages/css/index.scss
+++ b/packages/typescriptlang-org/src/templates/pages/css/index.scss
@@ -484,6 +484,7 @@ $headline-foreground-bg: white;
           overflow-x: auto;
           position: relative;
           background-color: #235a97;
+          border-radius: 0px 0px calc(8px - 2px) calc(8px - 2px);
 
           pre {
             margin: 0;
@@ -557,7 +558,7 @@ $headline-foreground-bg: white;
       background: $ts-main-blue-color;
       background-position-y: bottom -180px;
       height: 260px;
-      border: 1px solid white;
+      outline: 1px solid white;
       color: white;
       &.handbook {
         background-image: url(/images/index/get-started-handbook-blue.svg);
@@ -578,26 +579,28 @@ $headline-foreground-bg: white;
         background-color: #156fb4;
       }
       &:hover {
-        border-width: 2px;
+        outline-width: 2px;
         box-shadow: 0px 4px 20px -2px rgba(0, 0, 0, 0.25);
-        max-width: 246px;
       }
     }
 
     &.tall {
       background: #ffffff;
-      border: 1px solid #000000;
+      outline: 1px solid #000000;
       color: black;
       height: 342px;
       margin-bottom: 2px;
 
       &:hover {
-        border-color: $ts-main-blue-color;
-        border-width: 2px;
+        outline-color: $ts-main-blue-color;
+        outline-width: 2px;
+        color: $ts-main-blue-color;
         box-shadow: 0px 4px 20px -2px rgba(0, 0, 0, 0.25);
-        max-width: 246px;
-        height: 344px;
         margin-bottom: 0px;
+
+        svg path {
+          stroke: $ts-main-blue-color;
+        }
       }
       &:active {
         background-color: #eeeeee;
@@ -617,7 +620,6 @@ $headline-foreground-bg: white;
     }
 
     &:active {
-      margin-top: 1px;
       box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.25);
     }