Populate the about modal

adamaaronson · Jun 17, 2024 · 0fb5a94 · 0fb5a94
1 parent 41e6044
commit 0fb5a94
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 3 deletions.
diff --git a/src/components/AboutModal.tsx b/src/components/AboutModal.tsx
@@ -0,0 +1,25 @@
+export default function AboutModal() {
+    return (
+        <div>
+            <p>
+                Sidle was designed and developed by{' '}
+                <a href="https://aaronson.org" target="_blank" rel="noopener noreferrer">
+                    Adam Aaronson
+                </a>
+                . It came to him in a dream. Or not quite a dream, but a hypnagogic state.
+            </p>
+
+            <p>
+                To learn more, read{' '}
+                <a href="https://youtu.be/1wnE4vF9CQ4" target="_blank" rel="noopener noreferrer">
+                    the blog post!
+                </a>
+            </p>
+
+            <p className="copyright-message">
+                © {new Date().getFullYear()} Adam Aaronson, all rights reserved. Not affiliated with any other games
+                that might happen to end in the suffix "-dle".
+            </p>
+        </div>
+    );
+}
diff --git a/src/components/App.tsx b/src/components/App.tsx
@@ -5,6 +5,7 @@ import Header from './Header';
 import Modal from './Modal';
 import SettingsModal from './SettingsModal';
 import levels from '../data/levels.json';
+import AboutModal from './AboutModal';
 
 const COPIED_MILLISECONDS = 2 * 1000; // 2 seconds
 const isMobile = 'ontouchstart' in window || navigator.maxTouchPoints > 0;
@@ -78,7 +79,7 @@ function App() {
             />
             {aboutModal && (
                 <Modal title="About" onClose={() => setAboutModal(false)}>
-                    <></>
+                    <AboutModal />
                 </Modal>
             )}
             {settingsModal && (

diff --git a/src/styles/Modal.scss b/src/styles/Modal.scss
@@ -19,10 +19,24 @@
     font-size: 1rem;
     overflow-y: auto;
     max-height: 100%;
+    max-width: min(300px, 95vw);
 
     p {
-        padding-top: 0.5rem;
-        padding-bottom: 1rem;
+        padding-top: 1.5rem;
+        line-height: 1.5em;
+    }
+
+    a {
+        color: $white-color;
+
+        &:hover {
+            opacity: 0.8;
+        }
+    }
+
+    .copyright-message {
+        font-size: 0.8em;
+        opacity: 0.8;
     }
 }