feat: Support me

OskarKlintrot · Jul 27, 2024 · 30771fe · 30771fe
1 parent 56ff4d5
commit 30771fe
Showing 1 changed file with 20 additions and 8 deletions.
diff --git a/src/index.html b/src/index.html
@@ -83,7 +83,13 @@
           <a href="https://github.com/OskarKlintrot/MyThrow.xyz">github.com</a>.
         </p>
       </article>
-      <button type="button" autofocus>close</button>
+      <hr />
+      <p>
+        If you like this little app, consider supporting it on
+        <a href="https://www.patreon.com/mythrow">patreon</a> or
+        <a href="https://buymeacoffee.com/oskarklintrot">buy me a coffee</a>.
+      </p>
+      <button type="button" autofocus>Close</button>
     </dialog>
     <div id="app">
       <header>
@@ -138,25 +144,31 @@ <h1>MyThrow.xyz</h1>
       }
 
       #about-dialog {
+        margin-left: 0.8rem;
+        margin-right: 0.8rem;
         padding: 10px 10px;
+        text-wrap: pretty;
       }
 
-      #about-dialog > article {
-        padding: 0 10px 0 10px;
-        margin-bottom: 10px;
-        max-height: 60vh;
-        overflow: auto;
+      #about-dialog > header:first-child {
+        margin: -10px -10px 10px; /* Must change together with #about-dialog padding */
       }
 
-      #about-dialog p {
-        font-size: 1rem;
+      #about-dialog > article {
+        padding: 0 10px;
+        max-height: 55vh;
+        overflow: auto;
       }
 
       #about-dialog > button {
         margin: auto 6px 6px auto;
         display: block;
       }
 
+      #about-dialog > p:has(~button) {
+        margin-bottom: 0;
+      }
+
       #app {
         height: 100dvh;