Adjusted table borders and hero padding. Added subtitle to core concepts doc

packages/website/mdx/algolia_helpers.ts

@@ -46,8 +46,8 @@ function pushObjectsToAlgolia(index: any, content: Content): void {
 }
 
 function getContent(meta: Meta, url: string, formattedTextNodes: FormattedNode[]): any {
-    // META SHAPE TOOLS // const { description, difficulty, isCommunity, tags, title, type } = meta;
-    // META SHAPE GUIDES // const {  description, difficulty, tags, title, topics } = meta;
+    // META SHAPE TOOLS // const { description, difficulty, isCommunity, subtitle, tags, title, type } = meta;
+    // META SHAPE GUIDES // const {  description, difficulty, subtitle, tags, title, topics } = meta;
     const content: Content[] = [];
 
     formattedTextNodes.forEach((node: FormattedNode, index: number) => {
@@ -117,14 +117,15 @@ export async function indexFilesAsync(index: any, dirName: string, settings: Set
 }
 
 interface Meta {
-    title: string;
     description: string;
-    difficulty: 'Beginner' | 'Intermediate' | 'Advanced';
+    title: string;
+    subtitle?: string;
+    difficulty?: 'Beginner' | 'Intermediate' | 'Advanced';
     isCommunity?: boolean;
     isFeatured?: boolean;
-    tags: string[];
-    topics: string[];
-    type: string;
+    tags?: string[];
+    topics?: string[];
+    type?: string;
 }
 
 interface Content extends Meta {

packages/website/mdx/core-concepts/index.mdx

@@ -1,5 +1,6 @@
 export const meta = {
   title: "0x Core Concepts",
+  subtitle: "Learn all the core concepts you'll need to build effectively on 0x",
   description: "0x is a protocol that facilitates the peer-to-peer exchange of Ethereum-based assets. The protocol serves as an open standard and common building block for any developer needing exchange functionality. 0x provides secure smart contracts that are externally audited; developer tools tailored to the 0x ecosystem; and open access to a pool of shared liquidity. Developers can integrate with 0x at the smart contract or application layer."
 }
 

packages/website/ts/components/docs/layout/hero.tsx

@@ -12,22 +12,32 @@ interface IHeroProps {
 }
 
 export const Hero: React.FC<IHeroProps> = ({ isHome = false, subtitle, title }) => (
-    <HeroWrapper isHome={isHome}>
+    <HeroWrapper subtitle={subtitle}>
         <Heading size={isHome ? 'large' : 'medium'} isCentered={true} marginBottom={isHome || subtitle ? '30px' : '0'}>
             {title}
         </Heading>
-        {subtitle && <Paragraph isCentered={true}>{subtitle}</Paragraph>}
+        {subtitle && (
+            <Paragraph marginBottom="0" isCentered={true}>
+                {subtitle}
+            </Paragraph>
+        )}
         {isHome && <SearchInput isHome={true} />}
     </HeroWrapper>
 );
 
-const HeroWrapper = styled.div<{ isHome: boolean }>`
+const HeroWrapper = styled.div<{ subtitle: string }>`
     background-color: ${colors.backgroundLight};
-    padding-top: ${({ isHome }) => isHome && `63px`};
-    padding-bottom: 80px;
-    margin-bottom: 60px;
-    min-height: ${({ isHome }) => (isHome ? '21.875rem' : '13.222rem')};
+
     display: flex;
     flex-direction: column;
     justify-content: center;
+
+    margin-bottom: 60px;
+    padding-top: 36px;
+    padding-bottom: 96px;
+
+    @media (max-width: 768px) {
+        padding-top: 12px;
+        padding-bottom: 72px;
+    }
 `;

packages/website/ts/components/docs/mdx/table.tsx

@@ -31,7 +31,6 @@ export const TableInner = styled.table`
         padding: 14px 20px 13px;
         border-bottom: 1px solid #cfcfcf;
         font-size: 0.777777778rem;
-        opacity: 0.76;
         line-height: 1.428571429;
     }
 

packages/website/ts/pages/docs/page.tsx

@@ -66,6 +66,7 @@ export const DocsPage: React.FC<IDocsPageProps> = ({ match }) => {
                 ...state,
                 Component: component.default,
                 contents: component.tableOfContents(),
+                subtitle: component.meta.subtitle,
                 title: component.meta.title,
             });
         } catch (error) {