From 411dad700e1e1e834e54340d968ffd98d541e774 Mon Sep 17 00:00:00 2001
From: Stefan Bohacek <stefan@stefanbohacek.com>
Date: Sun, 19 May 2024 20:10:40 -0400
Subject: [PATCH] Bring more focus to the sharing button on the demo page.

---
 index.html | 28 +++++++++++++++++++++++++---
 1 file changed, 25 insertions(+), 3 deletions(-)
diff --git a/index.html b/index.html
index e61a0fb..0268ef3 100644
--- a/index.html
+++ b/index.html
@@ -12,6 +12,7 @@
   <link rel="stylesheet"
     href="./fediverse-share-button/styles.min.css">
   <style>
+    /* Demo page styles, not needed for the share button. */
     body {
       padding: 20px 24px;
       font-family: sans-serif;
@@ -20,7 +21,10 @@
 
     header {
       margin-bottom: 32px;
+    }
 
+    header, article{
+      color: #4a4a4a;
     }
 
     .note {
@@ -30,11 +34,27 @@
       margin-bottom: 32px;
       font-weight: bold;
     }
+
+    .explainer {
+      font-family: 'Segoe Print', 'Bradley Hand', Chilanka, TSCu_Comic, casual, cursive;
+      font-weight: normal;
+      font-size: 1.4rem;
+      -webkit-transform: rotate(-1deg);
+      -ms-transform: rotate(-1deg);
+      transform: rotate(-1deg);
+      margin-top: 2rem;
+      margin-bottom: 2rem;
+    }
+
+    .fsb-prompt {
+      margin-top: 0 !important;
+    }
   </style>
 </head>
 
 <body>
-  <div class="note">This is a demo of the <a href="https://github.com/stefanbohacek/fediverse-share-button/">Fediverse Share Button</a> project. Try it out at the bottom of
+  <div class="note">This is a demo of the <a href="https://github.com/stefanbohacek/fediverse-share-button/">Fediverse
+      Share Button</a> project. Try it out at the bottom of
     this page.</div>
   <header>
     <h1>The Conquest of Bread</h1>
@@ -70,6 +90,7 @@
       and export; but whole nations grow rich at the cost of those nations which lag behind in their industrial
       development.</p>
   </article>
+  <p class="explainer d-block mt-4 mb-3">Try it here ⤵</p>
   <form class="fsb-prompt">
     <label>Share with the fediverse</label>
     <div class="fsb-input-group mb-3">
@@ -81,7 +102,8 @@
         class="fsb-input fsb-domain"
         aria-label="Server domain">
       <button class="fsb-button"
-        type="submit"><img alt="Fediverse platform logo" src="./fediverse-share-button/icons/mastodon.svg"
+        type="submit"><img alt="Fediverse platform logo"
+          src="./fediverse-share-button/icons/mastodon.svg"
           class="fsb-icon"></span>Share</button>
     </div>
     <p class="fsb-support-note fsb-d-none">This server does not support sharing. Please visit <a
@@ -95,4 +117,4 @@
     </script>
 </body>
 
-</html>
+</html>
\ No newline at end of file
