fix: safari footer bug and update footer

lastmover · Jan 12, 2025 · 1ecb788 · 1ecb788
1 parent bd74f0d
commit 1ecb788
Show file tree

Hide file tree

Showing 3 changed files with 51 additions and 22 deletions.
diff --git a/.pre-commit-config.yaml b/.pre-commit-config.yaml
@@ -10,4 +10,4 @@ repos:
         name: Prettier Formatter
         entry: prettier --write
         language: system
-        files: \.(js|ts|jsx|tsx|css|md)$
+        files: \.(js|ts|jsx|tsx|css|md|html)$
diff --git a/assets/styles.css b/assets/styles.css
@@ -5,32 +5,29 @@ html {
   -moz-osx-font-smoothing: auto;
 }
 
+/* Reset base styles */
 body,
 html {
   margin: 0;
   padding: 0;
-  height: 100vh;
+  height: 100%;
   overflow: hidden;
-  font-family: "IBM Plex Mono", monospace;
 }
 
-/* Container Layout */
+/* Container Layout using Grid */
 .container {
-  display: flex;
-  flex-direction: column;
-  height: 100vh;
+  display: grid;
+  grid-template-rows: 1fr auto;
+  height: 100%;
 }
 
 /* Iframe Styles */
 .iframe-wrapper {
-  flex: 1;
-  position: relative;
+  width: 100%;
+  height: 100%;
 }
 
 .flourish-embed-iframe {
-  position: absolute;
-  top: 0;
-  left: 0;
   width: 100%;
   height: 100%;
   border: none;
@@ -40,21 +37,28 @@ html {
 .custom-footer {
   background: #222429;
   color: white;
-  padding: 1rem;
+  padding: 0 1rem 1rem 1rem;
   text-align: center;
-  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 2rem;
 }
 
 .custom-footer a {
   color: white;
   text-decoration: none;
   margin: 0 1rem;
-  font-size: min(max(14px, 1.5vw), 20px);
-  font-family: "IBM Plex Mono", monospace;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 1.5rem;
 }
 
-.custom-footer a:hover {
-  text-decoration: underline;
+.custom-footer a svg {
+  fill: currentColor; /* Inherits color from the parent <a> */
+  width: 1em;
+  height: 1em;
 }
 
 /* Responsive Font Sizes */

diff --git a/index.html b/index.html
@@ -74,11 +74,36 @@
         </iframe>
       </div>
       <footer class="custom-footer">
-        <a href="https://github.com/lastmover/aiomegacycle" target="_blank"
-          >github</a
+        <a
+          href="https://github.com/lastmover/aiomegacycle"
+          target="_blank"
+          aria-label="GitHub"
         >
-        <a href="https://x.com/aiomegacycle" target="_blank">@aiomegacycle</a>
-        <a href="https://x.com/last_mover" target="_blank">@last_mover</a>
+          <!-- GitHub SVG Icon -->
+          <svg
+            role="img"
+            viewBox="0 0 24 24"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <title>GitHub</title>
+            <path
+              d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"
+            />
+          </svg>
+        </a>
+        <a href="https://x.com/aiomegacycle" target="_blank" aria-label="X">
+          <!-- X (Twitter) SVG Icon -->
+          <svg
+            role="img"
+            viewBox="0 0 24 24"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <title>X</title>
+            <path
+              d="M18.901 1.153h3.68l-8.04 9.19L24 22.846h-7.406l-5.8-7.584-6.638 7.584H.474l8.6-9.83L0 1.154h7.594l5.243 6.932ZM17.61 20.644h2.039L6.486 3.24H4.298Z"
+            />
+          </svg>
+        </a>
       </footer>
     </div>
   </body>