Try use white buttons on the index, let the footer be the same max wi…

…dth as the homepage
microsoft · Aug 5, 2020 · 42bc7bf · 42bc7bf
1 parent e9f584f
commit 42bc7bf
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 6 deletions.
diff --git a/packages/typescriptlang-org/src/components/display/GreyButton.tsx b/packages/typescriptlang-org/src/components/display/GreyButton.tsx
@@ -9,6 +9,7 @@ export type Props = {
   badge?: string
   first?: boolean
   last?: boolean
+  customClass?: string
 }
 
 /** A pretty grey button */
@@ -19,6 +20,7 @@ export const GreyButton = (props: Props) => {
   if (props.headline) classes.push("headline")
   if (props.first) classes.push("first")
   if (props.last) classes.push("last")
+  if (props.customClass) classes.push(props.customClass)
 
   return <a key={props.title} href={href} className={classes.join(" ")}>
     <p>{props.blurb}</p>

diff --git a/packages/typescriptlang-org/src/components/layout/SiteFooter.scss b/packages/typescriptlang-org/src/components/layout/SiteFooter.scss
@@ -15,7 +15,7 @@
   }
 
   section {
-    max-width: 920px;
+    max-width: 1040px;
     padding-left: 0.5rem;
     padding-right: 0.5rem;
     margin: 0 auto;

diff --git a/packages/typescriptlang-org/src/templates/pages/css/documentation.scss b/packages/typescriptlang-org/src/templates/pages/css/documentation.scss
@@ -21,9 +21,21 @@
   position: relative;
   text-decoration: none;
 
+  &.white-theme {
+    background-color: white;
+    border: 1px black solid;
+
+    &:hover {
+      background-color: $ts-light-bg-grey;
+    }
+    &:active {
+      background-color: $ts-light-bg-grey-highlight-color;
+      margin-bottom: 19px;
+    }
+  }
 
   @media screen and (-ms-high-contrast: active) {
-    border: 1px solid grey;;
+    border: 1px solid grey;
   }
 
   &.headline {

diff --git a/packages/typescriptlang-org/src/templates/pages/index.tsx b/packages/typescriptlang-org/src/templates/pages/index.tsx
@@ -186,10 +186,10 @@ const Index: React.FC<Props> = (props) => {
         <Section color="white">
           <h3>{i("index_started_title")}</h3>
           <QuarterOrHalfRow key='call to actions'>
-            <GreyButton href="/docs/handbook" title={i("index_started_handbook")} blurb={i("index_started_handbook_blurb")} first />
-            <GreyButton href="/docs/bootstrap" title={i("index_started_docs")} blurb={i("index_started_docs_blurb")} />
-            <GreyButton href="/community" title={i("index_started_community")} blurb={i("index_started_community_blurb")} />
-            <GreyButton href="/tools" title={i("index_started_tooling")} blurb={i("index_started_tooling_blurb")} />
+            <GreyButton href="/docs/handbook" title={i("index_started_handbook")} blurb={i("index_started_handbook_blurb")} first customClass="white-theme" />
+            <GreyButton href="/docs/bootstrap" title={i("index_started_docs")} blurb={i("index_started_docs_blurb")} customClass="white-theme" />
+            <GreyButton href="/community" title={i("index_started_community")} blurb={i("index_started_community_blurb")} customClass="white-theme" />
+            <GreyButton href="/tools" title={i("index_started_tooling")} blurb={i("index_started_tooling_blurb")} customClass="white-theme" />
           </QuarterOrHalfRow>
 
           <div id="installation" />