feat: sass support, mixins for fluid design, refactoring, work on components

package.json

@@ -21,6 +21,7 @@
     "dynamic-react-grid": "^0.2.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "sass": "^1.62.1",
     "tailwindcss": "^3.3.2",
     "typewriter-effect": "^2.19.0"
   },

postcss.config.cjs

@@ -1,6 +1,7 @@
 module.exports = {
-  plugins: {
+  plugins: [
-    "tailwindcss/nesting": {},
+    require('tailwindcss/nesting'),
-    "tailwindcss": {},
+    require('tailwindcss'),
-  },
+    require('autoprefixer')
+  ]
 };

src/components/Footer/Footer.astro

@@ -1,6 +1,6 @@
 ---
-import "./FooterStyles.css";
+import "./Footer.scss";
-import logo from "../../../src/assets/lume-logo.webp";
+import logo from "../../../src/assets/lume-logo.png";
 ---
 
 <footer>
@@ -20,43 +20,77 @@ import logo from "../../../src/assets/lume-logo.webp";
   <div>
     <h5>General</h5>
     <ul>
-      <li>Home</li>
+      <li>
-      <li>Get Started</li>
+        <a href="/">Home</a>
-      <li>Documentation</li>
+      </li>
-      <li>Projects</li>
+      <li>
+        <a href="#">Get Started</a>
+      </li>
+      <li>
+        <a href="#">Documentation</a>
+      </li>
+      <li>
+        <a href="#">Projects</a>
+      </li>
     </ul>
   </div>
   <div>
     <h5>Community</h5>
     <ul>
-      <li>GitHub</li>
+      <li>
-      <li>Discord</li>
+        <a href="#">GitHub</a>
-      <li>Twitter</li>
+      </li>
-      <li>Facebook</li>
+      <li>
+        <a href="#">Discord</a>
+      </li>
+      <li>
+        <a href="#">Twitter</a>
+      </li>
+      <li>
+        <a href="#">Facebook</a>
+      </li>
     </ul>
   </div>
   <div>
     <h5>Ecosystem</h5>
     <ul>
-      <li>Browser</li>
+      <li>
-      <li>Extension</li>
+        <a href="#">Browser</a>
-      <li>Universal Storage</li>
+      </li>
+      <li>
+        <a href="#">Extension</a>
+      </li>
+      <li>
+        <a href="#">Universal Storage</a>
+      </li>
     </ul>
   </div>
   <div>
     <h5>Other</h5>
     <ul>
-      <li>Browser</li>
+      <li>
-      <li>Extension</li>
+        <a href="#">Browser</a>
-      <li>Universal Storage</li>
+      </li>
+      <li>
+        <a href="#">Extension</a>
+      </li>
+      <li>
+        <a href="#">Universal Storage</a>
+      </li>
     </ul>
   </div>
   <div>
     <h5>Support Us</h5>
     <ul>
-      <li>Donate</li>
+      <li>
-      <li>Download App</li>
+        <a href="#">Donate</a>
-      <li>Partnerships</li>
+      </li>
+      <li>
+        <a href="#">Download App</a>
+      </li>
+      <li>
+        <a href="#">Partnerships</a>
+      </li>
     </ul>
   </div>
 </footer>

src/components/Footer/Footer.scss

@@ -0,0 +1,132 @@
+@import "../../styles/mixins.scss";
+
+footer {
+  display: flex;
+  gap: 2%;
+  padding-top: 3.16%;
+  padding-bottom: 4.61%;
+  @include fluid-padding-lr;
+  @include fluid-font-size(1.3125rem);
+  background: var(--blue-charcoal);
+
+  > div {
+    flex-basis: 0;
+    flex-grow: 1;
+
+    &:first-child {
+      flex-grow: 1.5 !important;
+      display: flex;
+      flex-direction: column;
+    }
+  }
+
+  img {
+    @include fluid-width(8.4375rem);
+  }
+
+  a:hover {
+    color: var(--white);
+  }
+
+  h5 {
+    @include fluid-font-size(1.875rem);
+    line-height: 100%;
+    white-space: nowrap;
+    margin: 0.25em 0;
+  }
+
+  li {
+    font-family: var(--font-family-jaldi);
+    line-height: 138%;
+    color: var(--cloud);
+    list-style-type: none;
+    white-space: nowrap;
+  }
+}
+
+.footer-logo {
+  a {
+    display: inline-block;
+  }
+}
+
+.footer-contact {
+  margin: auto 0;
+  font-family: var(--font-family-jaldi);
+  color: var(--cloud);
+
+  a {
+    display: inline-flex;
+    align-items: center;
+  }
+
+  span {
+    display: block;
+    background-image: url('../../assets/email-icon.webp');
+    background-size: cover;
+    margin-right: 0.375em;
+    @include fluid-width(1.0625rem);
+    @include fluid-height(0.875rem);
+  }
+}
+
+.footer-phrase {
+  margin: auto 0 0;
+  color: var(--aquamarine);
+  font-weight: bold;
+  line-height: 133%;
+}
+
+@media screen and (width >= 48rem) and (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 (width < 48rem) {
+  footer {
+    flex-direction: column;
+    padding-top: 1.25rem;
+    padding-bottom: 5rem;
+    text-align: center;
+    font-size: 1.3125rem;
+
+    > div {
+      margin-top: 2.5rem;
+    }
+
+    > div:first-child {
+      margin-top: 5rem;
+      order: 2;
+    }
+
+    img {
+      width: 8.4375rem;
+    }
+  }
+
+  .footer-contact {
+    margin: 1.25rem 0;
+
+    a {
+      justify-content: center;
+    }
+  }
+}

src/components/Footer/FooterStyles.css

@@ -1,87 +0,0 @@
-footer {
-  display: flex;
-  gap: 2.5rem;
-  padding: 4% 12%;
-  background-color: #020E10;
-
-  > div {
-    flex-basis: 0;
-    flex-grow: 1;
-
-    &:first-child {
-			flex-grow: 2 !important;
-		  display: flex;
-		  flex-direction: column;
-    }
-  }
-
-  h5 {
-    @apply text-2xl;
-    white-space: nowrap;
-    margin-bottom: 0.5rem;
-  }
-
-  li {
-    @apply text-xl leading-8;
-    font-family: var(--font-family-jaldi);
-    color: var(--cloud);
-    list-style-type: none;
-    white-space: nowrap;
-  }
-}
-
-.footer-logo {
-  a {
-    display: inline-block;
-  }
-
-  img {
-    width: 126px;
-  }
-}
-
-.footer-contact {
-  margin: auto 0;
-  color: var(--cloud);
-
-  a {
-    display: flex;
-    align-items: center;
-  }
-
-  span {
-    display: block;
-    background-image: url('../../assets/email-icon.webp');
-    background-size: cover;
-    margin-right: 0.5rem;
-    width: 1.0625rem;
-    height: 0.875rem;
-  }
-}
-
-.footer-phrase {
-  @apply text-xl;
-  margin: auto 0 0;
-  color: var(--aquamarine);
-}
-
-@media screen and (width <= 900px) {
-  footer {
-    flex-direction: column;
-    padding: 12% 8% 12%;
-    text-align: center;
-
-    > div:first-child {;
-    	margin-top: 1.5rem;
-    	order: 2;
-  	}
-  }
-
-  .footer-contact {
-  	margin: 4% 0;
-
-  	a {
-  		justify-content: center;
-  	}
-  }
-}

src/components/Home/Header/Header.astro

@@ -1,15 +1,10 @@
 ---
+import "./Header.scss";
 import HeaderContent from "./HeaderContent.jsx";
 ---
 
-<div class="mt-[145.5px] items-start flex items-start flex z-[-1]">
+<section id="home-header">
-  <div
+  <h1 class="flex flex-col justify-center">
-    class="text-[color:var(--white)] font-normal not-italic tracking-[-6px] leading-[calc(75px_+_(110_-_75)_*_((100vw_-_300px)_/_(1600_-_300)))] text-center w-full"
+    <HeaderContent client:load />
-  >
+  </h1>
-    <h1
+</section>
-      class="flex flex-col justify-center text-[calc(26px_+_(82_-_26)_*_((100vw_-_300px)_/_(1600_-_300)))] font-thin"
-    >
-      <HeaderContent client:load />
-    </h1>
-  </div>
-</div>

src/components/Home/Header/Header.scss

@@ -0,0 +1,17 @@
+@import "../../../styles/mixins.scss";
+
+#home-header {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0 7.5%;
+
+  h1 {
+    height: 1.1em;
+    margin-top: 1.1em;
+    @include fluid-font-size-s(6.25rem);
+    line-height: 110%;
+    letter-spacing: -0.06em;
+    text-align: center;
+  }
+}

src/components/Home/Header/HeaderContent.jsx

@@ -10,22 +10,18 @@ const HeaderContent = () => {
         return n[n.length - 1];
     }
     var lastIndex = randomString.lastIndexOf(" ");
-    return <div>
+    return (
-        <Typewriter options={
+        <Typewriter options={{ cursor: `<span class="text-[color:var(--aquamarine)]">_</span>` }} onInit={
-                {cursor: `<span class="text-[color:var(--aquamarine)]">${
+            (typewriter) => {
-                    '_'
+                typewriter.changeDelay(50).typeString(`${
-                }</span>`}
+                    randomString.substring(0, lastIndex)
+                }` + ' ').start();
+                typewriter.typeString(`<span class="text-[color:var(--aquamarine)]">${
+                    lastWord(randomString)
+                }</span>`)
             }
-            onInit={
+        }/>
-                (typewriter) => {
+    );
-                    typewriter.changeDelay(50).typeString(`${
-                        randomString.substring(0, lastIndex)
-                    }` + ' ').start();
-                    typewriter.typeString(`<span class="text-[color:var(--aquamarine)]">${
-                        lastWord(randomString)
-                    }</span>`)
-                }
-            }/></div>;
 };
 
 export default HeaderContent;

src/components/Home/Meme/Meme.astro

@@ -1,5 +1,5 @@
 ---
-import "./MemeStyles.css";
+import "./Meme.scss";
 
 import meme1 from '../../../assets/meme-1.png';
 import meme2 from '../../../assets/meme-2.png';
@@ -7,7 +7,7 @@ import meme3 from '../../../assets/meme-3.png';
 import meme4 from '../../../assets/meme-4.png';
 ---
 
-<div class="meme-wrapper">
+<div id="home-meme">
   <div class="meme-text">
     <h2>TITLE</h2>
     <h3>Building a new world for your data</h3>

src/components/Home/Meme/Meme.scss

@@ -1,4 +1,4 @@
-.meme-wrapper {
+#home-meme {
   display: flex;
   justify-content: center;
   align-items: center;
@@ -43,7 +43,7 @@
 }
 
 @media screen and (width <=900px) {
-  .meme-wrapper {
+  #home-meme {
     flex-direction: column;
     padding: 20% 8%;
     text-align: center;

src/components/Home/Message/Message.astro

@@ -1,18 +1,12 @@
 ---
-import "./MessageStyles.css";
+import "./Message.scss";
 ---
 
-<div class="message-container">
+<section id="home-message">
-    <div
+  <h2>
-        class="message-header text-[color:var(--blue-charcoal-2)] text-[calc(25px_+_(32_-_24)_*_((100vw_-_300px)_/_(1600_-_300)))] font-bold leading-[2em] not-italic;"
+    A message from Derrick
-    >
+  </h2>
-        A message from Derrick
+  <p>
-    </div>
+    Web3 gives people control over their data, privacy, and ownership. Lume's affordable Web3 tech aims to speed up the transition from Web2 to Web3, which matters for privacy and security.
-    <div
+  </p>
-        class="message-content text-[color:var(--blue-charcoal-2)] text-[calc(15px_+_(21_-_14)_*_((100vw_-_300px)_/_(1600_-_300)))] max-w-[100%] font-normal not-italic;"
+</section>
-    >
-        Web3 gives people control over their data, privacy, and ownership.
-        Lume's affordable Web3 tech aims to speed up the transition from Web2 to
-        Web3, which matters for privacy and security.
-    </div>
-</div>

src/components/Home/Message/Message.scss

@@ -0,0 +1,28 @@
+@import "../../../styles/mixins.scss";
+
+#home-message {
+  padding-top: 3.16%;
+  padding-bottom: 3.16%;
+  @include fluid-padding-lr;
+  background: var(--aquamarine);
+  color: var(--blue-charcoal);
+
+  @media screen and (width < 48rem) {
+    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: var(--font-family-jaldi);
+    @include fluid-font-size(1.3125rem);
+    line-height: 157%;
+  }
+}

src/components/Home/Message/MessageStyles.css

@@ -1,18 +0,0 @@
-.message-container {
-    align-items: flex-start;
-    background-color: var(--aquamarine);
-    display: flex;
-    flex-direction: column;
-    gap: 7px;
-    min-height: 237px;
-    padding: 5% 12%;
-    width: 100%;
-}
-
-.message-header {
-    font-family: var(--font-family-jetbrains-mono);
-}
-
-.message-content {
-    font-family: var(--font-family-jaldi);
-}

src/components/Home/Vision/Vision.astro

@@ -7,12 +7,7 @@ import "./VisionStyles.css";
   style="padding-bottom: 5vh; vertical-align: center; padding-inline: 11.9%;"
 >
   <div>
-    <span id="vision"></span>
+    <h2>Our Vision</h2>
-    <h2
-      class="text-[calc(15px_+_(25_-_10)_*_((100vw_-_300px)_/_(1600_-_300)))] text-[color:var(--aquamarine)] uppercase font-bold"
-    >
-      OUR VISION
-    </h2>
     <h3
       class="text-[calc(30px_+_(45_-_30)_*_((100vw_-_300px)_/_(1600_-_300)))] min-w-[75vw] z-[999] mt-[0.5em]"
     >

src/components/Navbar/Navbar.jsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react';
-import './NavbarStyles.css';
+import './Navbar.scss';
 import logo from '../../../src/assets/lume-logo.png';
 
 function Navbar({ view }) {

src/components/Navbar/Navbar.scss

@@ -1,19 +1,19 @@
+@import "../../styles/mixins.scss";
+
 nav {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  height: 9.375rem;
+  padding: 2em 3.75%;
-  padding: 2.5rem 3%;
+  @include fluid-font-size(1.25rem);
-  background: #031418;
-  font-size: 1.125rem;
   white-space: nowrap;
 
   .logo {
     flex-shrink: 0;
 
     img {
-      width: 13.125rem;
+      @include fluid-width(13.125rem);
-      height: 4.274rem;
+      @include fluid-height(4.375rem);
     }
   }
 }
@@ -24,11 +24,11 @@ menu {
 
   li > a {
     display: block;
-    padding: 1rem 1.125rem;
+    padding: 0.55em 0.9em;
   }
 
   .download-btn {
-    margin-left: 1.25rem;
+    margin-left: 0.9em;
   }
 }
 
@@ -40,7 +40,7 @@ menu {
   margin: 0 2.125rem;
 }
 
-@media screen and (width <=940px) {
+@media screen and (width < 768px) {
   menu {
     display: flex;
     align-items: flex-start;
@@ -49,12 +49,15 @@ menu {
     top: -100vh;
     right: 3%;
     padding: 1rem;
+    font-size: 1.25rem;
+    background: var(--blue-charcoal);
     border: 1px solid red;
     border-radius: 0.5rem;
     transition: top 250ms;
+    z-index: 1;
 
     &.active {
-      top: 2.25rem;
+      top: 1.4rem;
     }
 
     li > a {

src/components/Vision/CommunityPower/CommunityPower.astro

@@ -0,0 +1,10 @@
+---
+import "./CommunityPower.scss";
+import communityPower from "../../../../src/assets/community-power.png";
+---
+
+<section id="community-power">
+  <div class="community-power-wrapper">
+    <div class="community-power-description"></div>
+  </div>
+</section>

src/components/Vision/CommunityPower/CommunityPower.scss

@@ -0,0 +1,7 @@
+#community-power {
+  background-image: url("../../../assets/community-power-bg.png");
+  margin-top: 7.8125rem;
+  background-size: max(75rem, 100%);
+  background-position: right;
+  padding-top: max(29.25rem, 39.02%);
+}

src/components/Vision/Grid/Grid.astro

@@ -0,0 +1,29 @@
+---
+import "./Grid.scss";
+---
+
+<section id="vision-grid">
+  <div>
+    <h2>Freedom, Privacy, Ownership.</h2>
+  </div>
+  <div>
+    <h3>Web3 Universal Storage</h3>
+    <p>Get access to a universal network drive, powered by the Web3/dWeb cloud. Enjoy portability to any device or platform you wish.</p>
+  </div>
+  <div>
+    <h3>Web3 Gateway</h3>
+    <p>Install the Lume Web3 Extension and have a 1-click gateway into the Web3 internet on Opera, Vivaldi, Edge and Firefox.</p>
+  </div>
+  <div>
+    <h3>Web3 Universal Storage</h3>
+    <p>Get access to a universal network drive, powered by the Web3/dWeb cloud. Enjoy portability to any device or platform you wish.</p>
+  </div>
+  <div>
+    <h3>Web3 Gateway</h3>
+    <p>Install the Lume Web3 Extension and have a 1-click gateway into the Web3 internet on Opera, Vivaldi, Edge and Firefox.</p>
+  </div>
+  <div>
+    <h3>Build Your Site, Censorship Free</h3>
+    <p>Combining Lume and Skynet technologies, you can build a website just like you are on the Web2 internet.</p>
+  </div>
+</section>

src/components/Vision/Grid/Grid.scss

@@ -0,0 +1,55 @@
+@import "../../../styles/mixins.scss";
+
+#vision-grid {
+    display: grid;
+    grid-template-columns: repeat(1, 1fr);
+    grid-auto-rows: 1fr;
+    gap: 1.125rem;
+    padding-top: 2.5625rem;
+    @include fluid-padding-lr;
+
+    @media screen and (width >= 48rem) {
+      grid-template-columns: repeat(2, 1fr);
+    }
+
+    @media screen and (width >= 64rem) {
+      grid-template-columns: repeat(3, 1fr);
+    }
+
+    div {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      padding: 39px;
+      color: var(--white);
+      border: 1px solid transparent;
+      font-family: var(--font-family-jaldi);
+
+      &:not(:first-child) {
+        background: var(--blue-charcoal);
+        transition: border-color 200ms;
+
+        &:hover {
+          border: 1px solid var(--aquamarine);
+        }
+      }
+    }
+
+    h2 {
+      @include fluid-font-size(2.75rem);
+      font-weight: bold;
+      line-height: 129.55%;
+    }
+
+    h3 {
+      @include fluid-font-size(1.875rem);
+      line-height: 103.33%;
+    }
+
+    p {
+      margin-top: 0.67em;
+      @include fluid-font-size(1.3125rem);
+      line-height: 123.81%;
+      color: #c7c7c7;
+    }
+}

src/components/Vision/Jumbotron/Jumbotron.astro

@@ -0,0 +1,9 @@
+---
+import "./Jumbotron.scss";
+---
+
+<section id="vision-jumbotron">
+  <h1>
+    Easy Web3 access, storage, publishing, and payment for content creation.
+  </h1>
+</section>

src/components/Vision/Jumbotron/Jumbotron.scss

@@ -0,0 +1,16 @@
+@import "../../../styles/mixins.scss";
+
+#vision-jumbotron {
+  display: flex;
+  justify-content: center;
+
+  h1 {
+    max-width: 21em;
+    margin: 2.12em 7.5% 0;
+    font-family: var(--font-family-ibm-plex-sans-devanagari);
+    @include fluid-font-size-s(3.6875rem);
+    line-height: 137.29%;
+    letter-spacing: -0.06em;
+    text-align: center;
+  }
+}

src/layouts/Layout.astro

@@ -1,5 +1,5 @@
 ---
-import "../styles/global.css";
+import "../styles/global.scss";
 import Navbar from "../components/Navbar/Navbar.jsx";
 import Footer from "../components/Footer/Footer.astro";
 
@@ -22,7 +22,7 @@ const { view, title } = Astro.props;
   </head>
   <body>
     <Navbar view={view} client:load />
-    <main>
+    <main class={view}>
       <slot />
     </main>
     <Footer />

src/pages/vision.astro

@@ -1,7 +1,12 @@
 ---
 import Layout from "../layouts/Layout.astro";
+import Jumbotron from "../components/Vision/Jumbotron/Jumbotron.astro";
+import CommunityPower from "../components/Vision/CommunityPower/CommunityPower.astro";
+import Grid from "../components/Vision/Grid/Grid.astro";
 ---
 
 <Layout view="vision" title="Vision - Lume Web">
-
+  <Jumbotron />
+  <CommunityPower />
+  <Grid />
 </Layout>

src/styles/global.scss

@@ -1,3 +1,5 @@
+@import "mixins.scss";
+
 @import url("https://fonts.googleapis.com/css?family=Jaldi:400|JetBrains+Mono:400,700|IBM+Plex+Sans+Devanagari:400");
 
 @tailwind base;
@@ -30,6 +32,7 @@ html {
   display: flex;
   flex-direction: column;
   height: 100%;
+  min-width: 20rem;
   scroll-behavior: smooth;
 }
 
@@ -46,6 +49,10 @@ main {
   flex-grow: 1;
 }
 
+a {
+  transition: color 200ms;
+}
+
 .body-block {
   align-items: center;
   display: flex;
@@ -60,17 +67,6 @@ main {
   margin-bottom: 1.5vh;
 }
 
-.home {
-  background-color: rgb(3 20 24);
-  flex-direction: column;
-  align-items: center;
-  display: absolute;
-  overflow: hidden;
-  border: 1px none;
-  height: auto;
-  width: 100%;
-}
-
 .title {
   height: 57px;
   letter-spacing: -1.5px;
@@ -78,22 +74,14 @@ main {
   white-space: nowrap;
 }
 
-h1 {
-  font-size: calc(26px + (82 - 26) * ((100vw - 300px) / (1600 - 300)));
-  font-weight: 100;
-}
-
 h2 {
-  font-size: calc(15px + (25 - 10) * ((100vw - 300px) / (1600 - 300)));
+  @include fluid-font(1rem, 2rem); /* 16px - 32px  */
   color: var(--aquamarine);
   text-transform: uppercase;
-  z-index: 999;
 }
 
 h3 {
   font-size: calc(30px + (45 - 30) * ((100vw - 300px) / (1600 - 300)));
-  margin-top: 0.5em;
-  z-index: 999;
 }
 
 h4 {
@@ -137,8 +125,8 @@ h6 {
     color: var(--black);
     background: var(--aquamarine);
     border: 1px solid var(--aquamarine);
-    padding: 0.625rem 1rem;
+    padding: 0.5em 0.8em;
-    border-radius: 0.3125rem;
+    border-radius: 0.25em;
     transition: color 200ms, background 200ms;
 
     &:hover {
@@ -178,3 +166,18 @@ h6 {
     max-width: 300;
   }
 }
+
+main.vision {
+  &::before {
+    content: "";
+    position: absolute;
+    width: 1031px;
+    height: 733px;
+    top: 0;
+    left: 50%;
+    margin-left: -515.5px;
+    z-index: -1;
+    background: url(../assets/vision-bg.png);
+    background-size: contain;
+  }
+}

src/styles/mixins.scss

@@ -0,0 +1,149 @@
+@use "sass:math";
+
+$min-vw: 80rem;
+$max-vw: 384rem;
+
+@function strip-unit($value) {
+  @return math.div($value, ($value * 0 + 1));
+}
+
+@mixin fluid-font($min-font-size, $max-font-size) {
+  $u1: unit($min-vw);
+  $u2: unit($max-vw);
+  $u3: unit($min-font-size);
+  $u4: unit($max-font-size);
+
+  @if $u1 == $u2 and $u1 == $u3 and $u1 == $u4 {
+    & {
+      font-size: $min-font-size;
+
+      @media screen and (min-width: $min-vw) {
+        font-size: calc(#{$min-font-size} + #{strip-unit($max-font-size - $min-font-size)} * ((100vw - #{$min-vw}) / #{strip-unit($max-vw - $min-vw)}));
+      }
+
+      @media screen and (min-width: $max-vw) {
+        font-size: $max-font-size;
+      }
+    }
+  }
+}
+
+@mixin fluid-font-size($font-size) {
+  $min-font-size: calc($font-size / 1.2);
+  $max-font-size: calc($font-size * 2);
+
+  $u1: unit($min-vw);
+  $u2: unit($max-vw);
+  $u3: unit($font-size);
+
+  @if $u1 == $u2 and $u1 == $u3 {
+    & {
+      font-size: $min-font-size;
+
+      @media screen and (width >= $min-vw) {
+        font-size: calc(#{$min-font-size} + #{strip-unit($max-font-size - $min-font-size)} * ((100vw - #{$min-vw}) / #{strip-unit($max-vw - $min-vw)}));
+      }
+
+      @media screen and (width >= $max-vw) {
+        font-size: $max-font-size;
+      }
+    }
+  }
+}
+
+@mixin fluid-font-size-s($font-size) {
+  $min-font-size: calc($font-size / 4.8);
+  $medium-font-size: calc($font-size / 1.2);
+  $max-font-size: calc($font-size * 2);
+
+  $u1: unit($min-vw);
+  $u2: unit($max-vw);
+  $u3: unit($font-size);
+
+  @if $u1 == $u2 and $u1 == $u3 {
+    & {
+      font-size: $min-font-size;
+
+      @media screen and (width >= 20rem) and (width < $min-vw) {
+        font-size: calc(#{$min-font-size} + #{strip-unit($medium-font-size - $min-font-size)} * ((100vw - 20rem) / (80 - 20)));
+      }
+
+      @media screen and (width >= $min-vw) {
+        font-size: calc(#{$medium-font-size} + #{strip-unit($max-font-size - $medium-font-size)} * ((100vw - #{$min-vw}) / #{strip-unit($max-vw - $min-vw)}));
+      }
+
+      @media screen and (width >= $max-vw) {
+        font-size: $max-font-size;
+      }
+    }
+  }
+}
+
+@mixin fluid-width($width) {
+  $min-width: calc($width / 1.2);
+  $max-width: calc($width * 2);
+
+  $u1: unit($min-vw);
+  $u2: unit($max-vw);
+  $u3: unit($width);
+
+  @if $u1 == $u2 and $u1 == $u3 {
+    & {
+      width: $min-width;
+
+      @media screen and (width >= $min-vw) {
+        width: calc(#{$min-width} + #{strip-unit($max-width - $min-width)} * ((100vw - #{$min-vw}) / #{strip-unit($max-vw - $min-vw)}));
+      }
+
+      @media screen and (width >= $max-vw) {
+        width: $max-width;
+      }
+    }
+  }
+}
+
+@mixin fluid-height($height) {
+  $min-height: calc($height / 1.2);
+  $max-height: calc($height * 2);
+
+  $u1: unit($min-vw);
+  $u2: unit($max-vw);
+  $u3: unit($height);
+
+  @if $u1 == $u2 and $u1 == $u3 {
+    & {
+      height: $min-height;
+
+      @media screen and (width >= $min-vw) {
+        height: calc(#{$min-height} + #{strip-unit($max-height - $min-height)} * ((100vw - #{$min-vw}) / #{strip-unit($max-vw - $min-vw)}));
+      }
+
+      @media screen and (width >= $max-vw) {
+        height: $max-height;
+      }
+    }
+  }
+}
+
+@mixin fluid-padding-lr {
+  $min-vw: 48rem;
+  $max-vw: 96rem;
+
+  $min-padding: 3.75%;
+  $max-padding: 7.5%;
+
+  & {
+    padding-left: $min-padding;
+    padding-right: $min-padding;
+
+    @media screen and (width >= $min-vw) {
+      padding-left: calc(#{$min-padding} + #{strip-unit($max-padding - $min-padding)} * ((100vw - #{$min-vw}) / #{strip-unit($max-vw - $min-vw)}));
+      padding-right: calc(#{$min-padding} + #{strip-unit($max-padding - $min-padding)} * ((100vw - #{$min-vw}) / #{strip-unit($max-vw - $min-vw)}));
+    }
+
+    @media screen and (width >= $max-vw) {
+      padding-left: $max-padding;
+      padding-right: $max-padding;
+    }
+  }
+}