Add substack, reduce padding

pages/index.js

@@ -19,6 +19,10 @@ export default function Home() {
         </p>
 
         <div className={styles.grid}>
+          <a href="https://blockchaingandalf.substack.com/" className={`${styles.card} ${styles.fullWidth}`}>
+            <h3>On Substack &rarr;</h3>
+            <p>My main social media presence for now.</p>
+          </a>
           <a href="https://bsky.app/profile/blockchaingandalf.com" className={styles.card}>
             <h3>On Bluesky &rarr;</h3>
             <p>Short comments about maths, books, computer programming, and games.</p>
@@ -57,7 +61,7 @@ export default function Home() {
 
       <style jsx>{`
         main {
-          padding: 5rem 0;
+          padding: 6px 0 5rem 0;
           flex: 1;
           display: flex;
           flex-direction: column;

styles/Home.module.css

@@ -36,6 +36,7 @@
 .description {
   line-height: 1.5;
   font-size: 1.5rem;
+  margin-bottom: 1rem;
 }
 
 .grid {
@@ -45,7 +46,7 @@
   flex-wrap: wrap;
 
   max-width: 800px;
-  margin-top: 3rem;
+  margin-top: 0;
 }
 
 .card {
@@ -57,6 +58,11 @@
   text-decoration: none;
   border: 1px solid #eaeaea;
   border-radius: 10px;
+  background-color: #d4e6f1 !important;
+  height: 200px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
   transition:
     color 0.15s ease,
     border-color 0.15s ease;
@@ -80,6 +86,12 @@
   line-height: 1.5;
 }
 
+.fullWidth {
+  flex-basis: 100% !important;
+  text-align: center;
+  height: 120px !important;
+}
+
 .logo {
   height: 1em;
 }