Merge remote-tracking branch 'origin/develop' into develop

# Conflicts:
#	CHANGELOG.md
#	npm-shrinkwrap.json
#	package.json

src/components/Home/PoweredBy/PoweredBy.astro

@@ -1,21 +1,38 @@
 ---
-import './PoweredBy.scss';
+import svgSia from "/src/assets/icons/sia.svg?raw";
-
+import svgHns from "/src/assets/icons/hns.svg?raw";
-import svgSia from '/src/assets/icons/sia.svg?raw';
+import svgOsi from "/src/assets/icons/osi.svg?raw";
-import svgHns from '/src/assets/icons/hns.svg?raw';
-import svgOsi from '/src/assets/icons/osi.svg?raw';
 ---
 
-<section id="powered-by">
+<section
-  <h2>Powered By</h2>
+  id="powered-by"
-  <div>
+  class="flex flex-col md:flex-row gap-16 items-center justify-center"
-    <a href="https://sia.tech" title="Sia" class="sia-logo">
+>
+  <h2
+    class="font-display text-xl md:text-3xl text-primary uppercase font-bold mr-5"
+  >
+    Powered By
+  </h2>
+  <div class="flex flex-row items-center gap-x-10">
+    <a
+      href="https://sia.tech"
+      title="Sia"
+      class="w-28 h-28 text-gray-300 hover:text-white transition-all ease-in"
+    >
       <Fragment set:html={svgSia} />
     </a>
-    <a href="https://handshake.org" title="Handshake" class="hns-logo">
+    <a
+      href="https://handshake.org"
+      title="Handshake"
+      class="w-20 h-20 -mt-4 text-gray-300 hover:text-white transition-all ease-in"
+    >
       <Fragment set:html={svgHns} />
     </a>
-    <a href="https://opensource.org/osd/" title="Open Source Initiative" class="osi-logo">
+    <a
+      href="https://opensource.org/osd/"
+      title="Open Source Initiative"
+      class="w-20 h-20 -mt-6 text-gray-300 hover:text-white transition-all ease-in"
+    >
       <Fragment set:html={svgOsi} />
     </a>
   </div>

src/components/Home/PoweredBy/PoweredBy.scss

@@ -1,54 +0,0 @@
-@import "/src/styles/mixins.scss";
-@import "/src/styles/vars.scss";
-
-#powered-by {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 4em;
-  margin: 12em 7.5%;
-
-  @media screen and (max-width: 47.99999rem) {
-    flex-direction: column;
-    gap: 2.5em;
-  }
-
-  div {
-    display: flex;
-    align-items: center;
-    gap: 2.5em;
-  }
-
-  h2 {
-    @include fluid-font-size(1.5625rem);
-    font-weight: 700;
-    line-height: 100%;
-    text-transform: uppercase;
-    color: $color-aquamarine;
-
-    @media screen and (min-width: 48rem) {
-      margin-top: 0.75em;
-    }
-  }
-
-  a {
-    padding: 0.5em;
-    color: $color-alto;
-
-    &:hover {
-      color: $color-white;
-    }
-  }
-
-  .sia-logo svg {
-    @include fluid-width(5.5rem);
-  }
-
-  .hns-logo svg {
-    @include fluid-width(4.5rem);
-  }
-
-  .osi-logo svg {
-    @include fluid-width(4.5rem);
-  }
-}

src/components/Home/Socials/Socials.astro

@@ -1,26 +1,42 @@
 ---
-import './Socials.scss';
+import svgGit from "/src/assets/icons/git.svg?raw";
-
+import svgGithub from "/src/assets/icons/github.svg?raw";
-import svgGit from '/src/assets/icons/git.svg?raw';
+import svgDiscord from "/src/assets/icons/discord.svg?raw";
-import svgGithub from '/src/assets/icons/github.svg?raw';
+import svgTwitter from "/src/assets/icons/twitter.svg?raw";
-import svgDiscord from '/src/assets/icons/discord.svg?raw';
-import svgTwitter from '/src/assets/icons/twitter.svg?raw';
 ---
 
-<section id="socials">
+<section id="socials" class="flex flex-col items-center">
-    <h2>Get in touch</h2>
+  <h2 class="text-xl md:text-3xl font-display text-primary uppercase font-bold">
-    <div>
+    Get in touch
-        <a href="https://git.lumeweb.com" title="Git" class="git-logo">
+  </h2>
-            <Fragment set:html={svgGit} />
+  <div class="flex flex-row items-center justify-center gap-8 mt-10">
-        </a>
+    <a
-        <a href="https://github.com/LumeWeb" title="GitHub" class="github-logo">
+      href="https://git.lumeweb.com"
-            <Fragment set:html={svgGithub} />
+      title="Git"
-        </a>
+      class="w-10 h-10 -mt-1 text-gray-300 hover:text-primary transition-all ease-in"
-        <a href="https://discord.gg/qpC8ADp3rS" title="Discord" class="discord-logo">
+    >
-            <Fragment set:html={svgDiscord} />
+      <Fragment set:html={svgGit} />
-        </a>
+    </a>
-        <a href="https://twitter.com/lumeweb3" title="Twitter" class="twitter-logo">
+    <a
-            <Fragment set:html={svgTwitter} />
+      href="https://github.com/LumeWeb"
-        </a>
+      title="GitHub"
-    </div>
+      class="w-10 h-10 text-gray-300 hover:text-primary transition-all ease-in"
+    >
+      <Fragment set:html={svgGithub} />
+    </a>
+    <a
+      href="https://discord.gg/qpC8ADp3rS"
+      title="Discord"
+      class="w-10 h-10 mt-3 text-gray-300 hover:text-primary transition-all ease-in"
+    >
+      <Fragment set:html={svgDiscord} />
+    </a>
+    <a
+      href="https://twitter.com/lumeweb3"
+      title="Twitter"
+      class="w-10 h-10 text-gray-300 hover:text-primary transition-all ease-in"
+    >
+      <Fragment set:html={svgTwitter} />
+    </a>
+  </div>
 </section>

src/styles/global.scss

@@ -66,15 +66,6 @@ body {
   }
 }
 
-main {
-  @include fluid-font-size(0.625rem);
-  flex-grow: 1;
-}
-
-a, button {
-  transition: color $transition-duration;
-}
-
 .tilted-bg {
   position: relative;