Merge branch 'main' into main

MythicApp · Oct 25, 2024 · f778ed3 · f778ed3
2 parents c9b9fb3 + 7480e68
commit f778ed3
Show file tree

Hide file tree

Showing 6 changed files with 134 additions and 211 deletions.
diff --git a/src/components/navigation/Footer.astro b/src/components/navigation/Footer.astro
@@ -1,35 +1,13 @@
 ---
-// const getThemeFromLocalStorage = () => {
-//   return typeof window !== "undefined"
-//     ? localStorage.getItem("theme") || "light"
-//     : "light";
-// };
-
-// let theme = getThemeFromLocalStorage();
+const currentYear = new Date().getFullYear();
 ---
 
 <footer class="footer">
   <div class="copyright">
-    &copy; {new Date().getFullYear()} Mythic. All rights reserved.
+    &copy; {currentYear} Mythic. All rights reserved.
   </div>
-  <!-- <div class="theme-switcher">
-    <button
-      class={`theme-option ${theme === "light" ? "active" : ""}`.trim()}
-      id="lightTheme"
-    >
-      Light
-    </button>
-    <button
-      class={`theme-option ${theme === "dark" ? "active" : ""}`.trim()}
-      id="darkTheme"
-    >
-      Dark
-    </button>
-  </div> -->
 </footer>
 
-<!-- <script src="/theme.js" defer></script> -->
-
 <style>
   .footer {
     margin-top: 50px;
@@ -45,32 +23,6 @@
     justify-content: center;
   }
 
-  .theme-switcher {
-    display: flex;
-    align-items: center;
-    border: 1px solid var(--stroke);
-    border-radius: 24px;
-    transition: 0.3s;
-  }
-
-  .theme-option {
-    border: none;
-    background-color: transparent;
-    color: var(--secondary-text);
-    cursor: pointer;
-    padding: 5px;
-    font-size: 14px;
-    font-family: var(--pro-text);
-    transition: 0.3s;
-  }
-
-  .theme-option.active {
-    color: #fff !important;
-    font-weight: bold;
-    background-color: var(--button-color);
-    border-radius: 100px;
-  }
-
   .copyright {
     font-size: 12px;
     color: var(--secondary-text);

diff --git a/src/components/sections/FeatureSection.astro b/src/components/sections/FeatureSection.astro
@@ -11,29 +11,32 @@ import { Image } from "astro:assets";
   <div class="feature-image">
     <Image src={image} loading="lazy" alt="Mythic feature" />
   </div>
-  <div class="feature-footnote">
-    <p>{footnote}</p>
-  </div>
+  {footnote && (
+    <div class="feature-footnote">
+      <p>{footnote}</p>
+    </div>
+  )}
 </div>
 
 <style>
   .feature-card {
     display: flex;
     flex-direction: column;
-    align-items: left;
+    align-items: flex-start;
+    text-align: left;
     background-color: var(--secondary-nav-color);
     padding: 20px;
     border-radius: 16px;
-    text-align: left;
     margin-bottom: 20px;
     height: 100%;
   }
 
   .feature-image {
     width: 100%;
+    scale: 1.08;
     height: auto;
     position: relative;
-    overflow: visible; /* Allow the image to expand beyond its container */
+    overflow: visible;
   }
 
   .feature-image img {
@@ -44,52 +47,44 @@ import { Image } from "astro:assets";
     display: block;
   }
 
-  /* Image hover effect for larger screens */
   @media (hover: hover) and (min-width: 768px) {
     .feature-image img:hover {
-      transform: scale(1.1); /* Scale the image without clipping */
+      transform: scale(1.02);
     }
   }
 
   .feature-text {
     padding-bottom: 24px;
-    max-width: 100%; /* Ensure text does not exceed container width */
+    max-width: 100%;
     overflow-wrap: anywhere;
   }
 
   .feature-text h3 {
     font-size: 19px;
     margin-bottom: 10px;
-    word-wrap: break-word; /* Break long words in headings */
-    overflow-wrap: break-word; /* Ensure long words break */
+    word-wrap: break-word;
+    overflow-wrap: break-word;
   }
 
   .feature-text p {
     font-size: 17px;
-    max-width: 100%; /* Ensure text does not exceed container width */
-    word-wrap: break-word; /* Break long words in paragraphs */
-    overflow-wrap: break-word; /* Ensure long words break */
+    max-width: 100%;
+    word-wrap: break-word;
+    overflow-wrap: break-word;
     color: #1d1d1f;
   }
 
-  .feature-image img {
-    width: 100%;
-    height: auto;
-    object-fit: cover;
-    transition: transform 0.3s ease;
-    display: block;
-  }
-
   .feature-footnote {
     display: flex;
-    justify-content: center; /* Center the footnote horizontally */
-    align-items: center; /* Center vertically if needed */
-    padding-top: 10px; /* Optional padding for spacing */
+    justify-content: center;
+    align-items: center;
+    margin-top: 10px;
+    text-align: center;
+    width: 100%;
   }
 
   .feature-footnote p {
     font-size: 12px;
-    text-align: center;
     color: var(--footnote-color);
   }
 </style>
diff --git a/src/components/ui/SocialCard.astro b/src/components/ui/SocialCard.astro
@@ -50,8 +50,8 @@ const { icon, title, desc, button, href, target } = Astro.props;
   <p>{desc}</p>
   {
     href && button && (
-      <a class="button-md" href={href} target={target}>
-        {button}
+      <a class="learn-more" href={href} target={target}>
+        {button} <svg class="arrow" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" width="8" height="8"><path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0L11.5 8l-6.146 6.354a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"/></svg>
       </a>
     )
   }
@@ -60,11 +60,11 @@ const { icon, title, desc, button, href, target } = Astro.props;
 <style>
   .card {
     display: flex;
-    flex-direction: column; /* Stack content vertically */
-    transition: 0.3s; /* Smooth transition for hover effects */
-    flex: 1 1 calc(33.33% - 20px); /* Take up one-third of available space */
-    height: 300px; /* Fixed height for uniformity */
+    flex-direction: column;
+    transition: 0.3s;
+    height: 100%; /* Ensure the card takes full height */
     width: 100%;
+    justify-content: space-between; /* Distribute space between elements */
 }
   .card h2 {
     margin-bottom: 0;
@@ -74,6 +74,14 @@ const { icon, title, desc, button, href, target } = Astro.props;
     width: fit-content;
   }
 
+  a {
+    color: #06C;
+  }
+
+  a:hover {
+    text-decoration: underline;
+  }
+
   @media (max-width: 768px) {
     .card {
         flex: 1 1 calc(50% - 20px); /* Two cards per row */

diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
@@ -5,7 +5,6 @@ interface Props {
 
 const { title } = Astro.props;
 import meta from "../../astro-seo.config";
-
 import Navbar from "../components/navigation/Navbar.astro";
 ---
 
@@ -33,14 +32,8 @@ import Navbar from "../components/navigation/Navbar.astro";
     <meta name="author" content={meta.author} />
     <meta name="keywords" content={meta.keywords} />
     <meta name="referrer" content={meta.referrer} />
-    <meta
-      http-equiv="content-language"
-      content={meta.httpEquiv["content-language"]}
-    />
-    <meta
-      http-equiv="X-UA-Compatible"
-      content={meta.httpEquiv["X-UA-Compatible"]}
-    />
+    <meta http-equiv="content-language" content={meta.httpEquiv["content-language"]} />
+    <meta http-equiv="X-UA-Compatible" content={meta.httpEquiv["X-UA-Compatible"]} />
     <meta name="generator" content={Astro.generator} />
     <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
     <title>{title}</title>
@@ -56,10 +49,8 @@ import Navbar from "../components/navigation/Navbar.astro";
   @import url("https://fonts.cdnfonts.com/css/helvetica-neue-55");
 
   :root {
-    --pro-display: "SF Pro Display", "SF Pro Icons", "Helvetica Neue",
-      "Helvetica", "Arial", sans-serif;
-    --pro-text: "SF Pro Text", "SF UI Text", "SF Pro Icons", "Helvetica Neue",
-      Helvetica, Arial, sans-serif;
+    --pro-display: "SF Pro Display", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
+    --pro-text: "SF Pro Text", "SF UI Text", "SF Pro Icons", "Helvetica Neue", Helvetica, Arial, sans-serif;
 
     --primary-color: #f5f5f7;
     --secondary-color: #1d1d1f;
@@ -110,12 +101,6 @@ import Navbar from "../components/navigation/Navbar.astro";
     align-items: center;
     flex-direction: column;
   }
-  /*
-  body {
-    background: linear-gradient(#5412F6, transparent 20%);
-    min-height: auto;
-  }
-    */
 
   a {
     font-family: var(--pro-text);
@@ -142,7 +127,7 @@ import Navbar from "../components/navigation/Navbar.astro";
     border-radius: 12px;
   }
 
-  button,
+  button:hover,
   .button:hover {
     background: var(--button-hover-color);
   }

diff --git a/src/pages/404.astro b/src/pages/404.astro
@@ -2,9 +2,10 @@
 import Layout from "../layouts/Layout.astro";
 ---
 
-<Layout title="404 | Page Not Found">
-  <h1>404 | Page Not Found</h1>
-  <a class="button-md" href="/">Go Home</a>
+<Layout title="Page Not Found — Mythic">
+  <h1>The page you're looking for doesn't exist.</h1>
+
+  <a class="button-md" href="/">Go to Home</a>
 </Layout>
 
 <style>