Attemping to add line numbers, failing to add line numbers

web/docusaurus.config.js

@@ -43,8 +43,7 @@ module.exports = {
     },
     prism: {
       defaultLanguage: 'js',
-      // https://github.com/FormidableLabs/prism-react-renderer/tree/master/src/themes
-      // theme: require('prism-react-renderer/themes/vsdark'),
+      plugins: ['line-numbers', 'show-language']
     },
     footer: {
       links: [

web/src/css/custom.css

@@ -189,6 +189,9 @@ body {
   background-color: var(--custom-background-color);
 }
 .button.button--secondary:hover {
+  background-color: var(--custom-background-color-diff);
+}
+:root[data-theme='dark'] .button.button--secondary:hover {
   background-color: var(--custom-background-color-highlight);
 }
 .button.button--secondary.button--outline {
@@ -251,6 +254,7 @@ li + li {
   font-weight: bold;
   text-transform: uppercase;
   font-size: 0.9em;
+  padding: 10px !important;
 }
 
 /* .with-underline::after,

web/src/pages/index.js

@@ -118,9 +118,9 @@ function Home() {
                   single line of code.
                   <br />
                   <br />
-                  Don't waste your time coding relational APIs and websockets. We introspect your
+                  Don't waste time creating relational APIs and websockets. We introspect your
                   database and provide APIs <strong class="has-emphasis">instantly</strong> so you
-                  can focus on what is most important - building your products.
+                  can focus on what's most important - building your products.
                 </p>
                 <div>
                   <Link
@@ -154,7 +154,7 @@ function Home() {
         {features && features.length && (
           <section className={styles.features}>
             <div className="container">
-              <h2 className="with-underline">Use Cases</h2>
+              <h2 className="with-underline">Use Cases.</h2>
               <div className="row">
                 {features.map((props, idx) => (
                   <Feature key={idx} {...props} />
@@ -168,9 +168,10 @@ function Home() {
           <div className="container">
             <div className="row">
               <div className="col col--9">
-                <h2 className="with-underline">For Developers</h2>
+                <h2 className="with-underline">For Developers.</h2>
                 <p className="">
-                  We believe developers want solid, fast, and simple products. So that's what we make.
+                  We believe developers want solid, fast, and simple products. So that's what we
+                  make.
                 </p>
               </div>
             </div>
@@ -221,14 +222,22 @@ function Home() {
           </div>
         </section>
 
-        <section style={{ marginTop: 40, padding: 20 }} className="hero is--dark">
+        <section
+          style={{ marginTop: 100, padding: '50px 0', borderTop: '1px solid var(--custom-border-color)' }}
+          className="hero is--dark"
+        >
           <div className="container text--center">
+            <div>
+              <h2>Get Early Access.</h2>
+            </div>
             <div className="">
               <Link
                 className={classnames(
                   'button hero--button button--outline button--md button--secondary',
-                  styles.button
+                  styles.button,
+                  styles.responsiveButton
                 )}
+                style={{ margin: 5 }}
                 to={useBaseUrl('docs/about')}
               >
                 Learn More
@@ -236,9 +245,11 @@ function Home() {
               <Link
                 className={classnames(
                   'button hero--button button--md button--primary',
-                  styles.button
+                  styles.button,
+                  styles.responsiveButton
                 )}
                 to={'https://app.supabase.io'}
+                style={{ margin: 5 }}
               >
                 Join the list →
               </Link>

web/src/pages/styles.module.css

@@ -68,4 +68,11 @@
 }
 .pricingCard p {
   margin: 0;
-}
+}
+
+
+@media screen and (max-width: 600px) {
+  .responsiveButton {
+    width: 100%;
+  }
+}