refactor: home page is fully tailwind

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,25 +1,41 @@
 ---
-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>
+  <div class="flex flex-row items-center justify-center gap-8 mt-10">
+    <a
+      href="https://git.lumeweb.com"
+      title="Git"
+      class="w-10 h-10 -mt-1 text-gray-300 hover:text-primary transition-all ease-in"
+    >
       <Fragment set:html={svgGit} />
     </a>
-        <a href="https://github.com/LumeWeb" title="GitHub" class="github-logo">
+    <a
+      href="https://github.com/LumeWeb"
+      title="GitHub"
+      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="discord-logo">
+    <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="twitter-logo">
+    <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>

src/components/Home/Socials/Socials.scss

@@ -1,50 +0,0 @@
-@import "/src/styles/mixins.scss";
-@import "/src/styles/vars.scss";
-
-#socials {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    gap: 3em;
-    margin: 12em 7.5% 8em;
-
-    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;
-    }
-
-    a {
-        padding: 0.5em;
-        color: $color-alto;
-
-        &:hover {
-            color: $color-white;
-        }
-    }
-
-    .github-logo svg {
-        @include fluid-width(3.5rem);
-    }
-
-    .git-logo svg {
-        @include fluid-width(3.5rem);
-    }
-
-    .discord-logo svg {
-        @include fluid-width(3.5rem);
-    }
-
-    .twitter-logo svg {
-        @include fluid-width(3.5rem);
-    }
-}

src/styles/global.scss

@@ -25,14 +25,6 @@
   src: url("/fonts/JetBrainsMono-Bold.woff2") format('woff2');
 }
 
-@font-face {
-  font-family: 'IBM Plex Sans Devanagari';
-  font-style: normal;
-  font-weight: 400;
-  font-display: swap;
-  src: url("/fonts/ibm-plex-sans-devanagari.woff2") format('woff2');
-}
-
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
@@ -66,15 +58,6 @@ body {
   }
 }
 
-main {
-  @include fluid-font-size(0.625rem);
-  flex-grow: 1;
-}
-
-a, button {
-  transition: color $transition-duration;
-}
-
 .tilted-bg {
   position: relative;
 

src/styles/vars.scss

@@ -6,7 +6,6 @@ $color-aquamarine: #7afcbb;
 $color-cloud: #c7c7c7;
 $color-alto: #d9d9d9;
 
-$font-family-ibm-plex-sans-devanagari: "IBM Plex Sans Devanagari", sans-serif;
 $font-family-jaldi: "Jaldi", sans-serif;
 $font-family-jetbrains-mono: "JetBrains Mono", monospace;