src/components/Home/Meme/Meme.astro

@@ -1,5 +1,5 @@
 ---
-import mulletMeme from "/src/assets/centralized-mullet-meme.png";
+import mulletMeme from "/src/assets/mullet-meme.jpg";
 ---
 
 <section id="meme" class="tilted-bg">

src/components/Home/Message/Message.astro

@@ -1,7 +1,8 @@
 ---
+// import './Message.scss';
 ---
 
-<section id="message" class="bg-primary py-16 px-40 space-y-4">
+<section id="message" class="bg-primary py-16 px-28 space-y-4">
   <h2 class="text-3xl font-bold text-black font-display">
     A message from Derrick
   </h2>

src/components/Home/Message/Message.scss

@@ -0,0 +1,27 @@
+@import "/src/styles/mixins.scss";
+@import "/src/styles/vars.scss";
+
+#message {
+  padding: 5em 7.5%;
+  background: $color-aquamarine;
+  color: $color-blue-charcoal-2;
+
+  @media screen and (max-width: 47.99999rem) {
+    text-align: center;
+  }
+
+  h2 {
+    margin-bottom: 0.25em;
+    @include fluid-font-size(2rem);
+    font-weight: 700;
+    line-height: 153%;
+    text-transform: none;
+    color: inherit;
+  }
+
+  p {
+    font-family: $font-family-jaldi;
+    @include fluid-font-size(1.5rem);
+    line-height: 137%;
+  }
+}

src/components/Layout/Footer/Footer.astro

@@ -1,79 +1,63 @@
 ---
+import "./Footer.scss";
 import logo from "/src/assets/lume-logo.png";
 ---
 
-<footer class="flex flex-row py-24 font-body mb-3 mx-40">
+<footer>
-  <div class="flex-1">
+  <div>
-    <a href="/">
+    <div class="footer-logo">
-      <img src={logo.src} class="w-36 mb-2" alt="Lume" />
+      <a href="/">
-    </a>
+        <img src={logo.src} alt="Lume">
-    <a
+      </a>
-      href="mailto:contact@lumeweb.com"
-      class="flex flex-row items-center text-body text-xl"
-    >
-      <svg
-        fill="none"
-        viewBox="0 0 24 24"
-        stroke-width="1.5"
-        stroke="currentColor"
-        class="w-4 h-4 mr-2"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          stroke-linecap="round"
-          stroke-linejoin="round"
-          d="M21.75 6.75v10.5a2.25 2.25 0 01-2.25 2.25h-15a2.25 2.25 0 01-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25m19.5 0v.243a2.25 2.25 0 01-1.07 1.916l-7.5 4.615a2.25 2.25 0 01-2.36 0L3.32 8.91a2.25 2.25 0 01-1.07-1.916V6.75"
-        >
-        </path>
-      </svg>
-      contact@lumeweb.com
-    </a>
-    <div class="text-lg text-primary font-bold font-display mt-10">
-      Freedom. Privacy. <br />Ownership.
     </div>
+    <div class="footer-contact">
+      <a href="mailto:contact@lumeweb.com">
+        <svg fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" xmlns="http://www.w3.org/2000/svg">
+          <path stroke-linecap="round" stroke-linejoin="round" d="M21.75 6.75v10.5a2.25 2.25 0 01-2.25 2.25h-15a2.25 2.25 0 01-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25m19.5 0v.243a2.25 2.25 0 01-1.07 1.916l-7.5 4.615a2.25 2.25 0 01-2.36 0L3.32 8.91a2.25 2.25 0 01-1.07-1.916V6.75">
+        </svg>
+        contact@lumeweb.com
+      </a>
+    </div>
+    <div class="footer-phrase">Freedom. Privacy. Ownership.</div>
   </div>
-  <div class="flex-1">
+  <div>
-    <h5 class="text-3xl mb-3">General</h5>
+    <h5>General</h5>
-    <ul class="text-body font-body text-xl">
+    <ul>
       <li>
-        <a href="/" class="hover:underline">Home</a>
+        <a href="/">Home</a>
+      </li>
+        <li>
+            <a href="https://git.lumeweb.com">Git</a>
+        </li>
+    </ul>
+  </div>
+  <div>
+    <h5>Community</h5>
+    <ul>
+      <li>
+        <a href="https://github.com/LumeWeb">GitHub</a>
       </li>
       <li>
-        <a href="https://git.lumeweb.com" class="hover:underline">Git</a>
+        <a href="https://discord.gg/qpC8ADp3rS">Discord</a>
+      </li>
+      <li>
+        <a href="https://twitter.com/lumeweb3">Twitter</a>
       </li>
     </ul>
   </div>
-  <div class="flex-1">
+  <div>
-    <h5 class="text-3xl mb-3">Community</h5>
+    <h5>Ecosystem</h5>
-    <ul class="text-body font-body text-xl">
+    <ul>
       <li>
-        <a href="https://github.com/LumeWeb" class="hover:underline">GitHub</a>
+        <a href="https://web3extension.io">Extension</a>
-      </li>
-      <li>
-        <a href="https://discord.gg/qpC8ADp3rS" class="hover:underline"
-          >Discord</a
-        >
-      </li>
-      <li>
-        <a href="https://twitter.com/lumeweb3" class="hover:underline"
-          >Twitter</a
-        >
       </li>
     </ul>
   </div>
-  <div class="flex-1">
+  <div>
-    <h5 class="text-3xl mb-3">Ecosystem</h5>
+    <h5>Support Us</h5>
-    <ul class="text-body font-body text-xl">
+    <ul>
       <li>
-        <a href="https://web3extension.io" class="hover:underline">Extension</a>
+        <a href="/donate">Donate</a>
-      </li>
-    </ul>
-  </div>
-  <div class="flex-1">
-    <h5 class="text-3xl mb-3">Support Us</h5>
-    <ul class="text-body font-body text-xl">
-      <li>
-        <a href="/donate" class="hover:underline">Donate</a>
       </li>
     </ul>
   </div>

src/components/Layout/Footer/Footer.scss

@@ -0,0 +1,132 @@
+@import "/src/styles/mixins.scss";
+@import "/src/styles/vars.scss";
+
+footer {
+  display: flex;
+  gap: 2%;
+  padding: 7em 7.5% 8em;
+  font-family: $font-family-jaldi;
+  @include fluid-font-size(0.625rem);
+  background: $color-blue-charcoal;
+
+  > div {
+    flex-basis: 0;
+    flex-grow: 1;
+    @include fluid-font-size(1.375rem);
+
+    &:first-child {
+      flex-grow: 1.5 !important;
+      display: flex;
+      flex-direction: column;
+    }
+  }
+
+  img {
+    @include fluid-width(8.4375rem);
+  }
+
+  a:hover {
+    color: $color-white;
+  }
+
+  h5 {
+    @include fluid-font-size(1.75rem);
+    line-height: 100%;
+    white-space: nowrap;
+    margin: 0.3em 0;
+  }
+
+  li {
+    line-height: 138%;
+    color: $color-cloud;
+    list-style-type: none;
+    white-space: nowrap;
+  }
+}
+
+.footer-logo {
+  a {
+    display: inline-block;
+  }
+}
+
+.footer-contact {
+  margin: auto 0;
+  color: $color-cloud;
+
+  a {
+    display: inline-flex;
+    align-items: center;
+  }
+
+  svg {
+    @include fluid-width-height(1.375rem, 1.375rem);
+    margin-right: 0.5em;
+  }
+}
+
+.footer-phrase {
+  margin: auto 0 0;
+  font-family: $font-family-jetbrains-mono;
+  font-weight: 700;
+  line-height: 133%;
+  color: $color-aquamarine;
+}
+
+@media screen and (min-width: 48rem) and (max-width: 64rem) {
+  footer {
+    flex-wrap: wrap;
+
+    > div:first-child {
+      order: 1;
+      flex: 0 0 100%;
+      margin-top: 3%;
+      flex-direction: row;
+      justify-content: space-between;
+      align-items: center;
+    }
+  }
+
+  .footer-contact {
+    margin: 0;
+  }
+
+  .footer-phrase {
+    margin: 0;
+  }
+}
+
+@media screen and (max-width: 47.99999rem) {
+  footer {
+    flex-direction: column;
+    padding-top: 1.5rem;
+    padding-bottom: 5rem;
+    text-align: center;
+
+    > div {
+      margin-top: 2rem;
+      font-size: 1.25rem;
+    }
+
+    > div:first-child {
+      margin-top: 4rem;
+      order: 2;
+    }
+
+    img {
+      width: 8.4375rem;
+    }
+
+    h5 {
+      font-size: 1.625rem;
+    }
+  }
+
+  .footer-contact {
+    margin: 1.25rem 0;
+
+    a {
+      justify-content: center;
+    }
+  }
+}