Some more polish

Author: orta

packages/typescriptlang-org/src/components/ShowExamples.scss

@@ -44,7 +44,7 @@
       padding-left: 0;
       margin-top: 0;
       padding-top: 0;
-      margin-right: 1em;
+      // margin-right: 1em;
       border: none;
       background-color: transparent;
       @media (prefers-color-scheme: dark) {

packages/typescriptlang-org/src/components/layout/Sidebar.scss

@@ -1,8 +1,5 @@
 @import "../../style/globals.scss";
 
-$z-index-for-site-nav: 101;
-$z-index-for-handbook-nav: 100;
-
 #small-device-button-sidebar {
   display: none;
 }
@@ -30,7 +27,7 @@ nav#sidebar {
       border-bottom: 1px solid #dfdfdf;
 
       @media (prefers-color-scheme: dark) {
-        border-color: black;
+        border-color: #3e3e3e;
       }
       font-weight: 400;
       font-size: 1rem;
@@ -54,6 +51,13 @@ nav#sidebar {
           color: white;
         }
 
+        @media (prefers-color-scheme: dark) {
+          .open path,
+          .closed path {
+            stroke: white;
+          }
+        }
+
         &:active,
         &:focus {
           color: black;
@@ -178,7 +182,7 @@ nav#sidebar {
     padding-top: 2px;
     padding-left: 9px;
 
-    z-index: $z-index-for-site-nav;
+    z-index: $z-index-for-handbook-nav;
 
     // Reset the button
     -webkit-appearance: none;

packages/typescriptlang-org/src/components/layout/SiteFooter.scss

@@ -169,17 +169,27 @@
   transition: bottom 0.3s ease, opacity 0.2s linear, visibility 0s linear;
   opacity: 1;
   z-index: 123;
+  color: black;
 
   .section-content {
     display: flex;
+
+    .section-list li {
+      margin-top: 4px;
+    }
   }
 
   .arrow-down {
     width: 0;
     height: 0;
     border-left: 10px solid transparent;
     border-right: 10px solid transparent;
-    border-top: 14px solid white;
+    border-top: 14px solid $ts-light-bg-grey-highlight-color;
+
+    @media (prefers-color-scheme: dark) {
+      border-top: 14px solid $ts-dark-bg-for-foreground-color;
+    }
+
     margin: 0 auto;
     margin-bottom: 20px;
     position: relative;
@@ -195,4 +205,9 @@
     border-bottom: 1px solid $ts-main-blue-darker-color;
     border-radius: 0;
   }
+
+  a {
+    color: $ts-main-blue-color;
+    text-decoration: none;
+  }
 }

packages/typescriptlang-org/src/components/layout/TopNav.scss

@@ -45,18 +45,19 @@
 
   #home-page-logo {
     width: 200px;
-    font-size: 1.2rem;
     font-weight: 600;
+    font-size: 1.5rem;
 
     svg {
       margin-right: 0.6rem;
       margin-left: 1rem;
-      margin-top: 0.48rem;
+      margin-top: 0.55rem;
     }
 
     span {
       position: relative;
       top: -0.5rem;
+      margin-right: 0.2rem;
       text-decoration: none;
     }
   }
@@ -113,7 +114,12 @@ form.search {
 
   input {
     -webkit-appearance: none;
-    background-color: $ts-main-blue-darkest-color;
+    background-color: $ts-main-blue-darker-color;
+
+    @media (prefers-color-scheme: dark) {
+      background-color: $ts-main-blue-darkest-color;
+    }
+
     border-color: #152740;
     border-radius: 0;
     border: none;

packages/typescriptlang-org/src/style/globals.scss

@@ -34,3 +34,7 @@ $screen-md-min: $screen-md;
 // So media queries don't overlap when required, provide a maximum
 $screen-xs-max: ($screen-sm-min - 1);
 $screen-sm-max: ($screen-md-min - 1);
+
+$z-index-for-search: 100;
+$z-index-for-site-nav: 101;
+$z-index-for-handbook-nav: 99;