General
diff --git a/src/components/Footer/Footer.scss b/src/components/Footer/Footer.scss index 23cff5b..24d5d0a 100644 --- a/src/components/Footer/Footer.scss +++ b/src/components/Footer/Footer.scss @@ -65,8 +65,7 @@ footer { background-image: url('../../assets/email-icon.webp'); background-size: cover; margin-right: 0.375em; - @include fluid-width(1.0625rem); - @include fluid-height(0.875rem); + @include fluid-width-height(1.0625rem, 0.875rem); } } diff --git a/src/components/Home/Grid/Grid.astro b/src/components/Home/Grid/Grid.astro index 22b4aaf..fd2ba49 100644 --- a/src/components/Home/Grid/Grid.astro +++ b/src/components/Home/Grid/Grid.astro @@ -1,90 +1,30 @@ --- -import "./GridStyles.css"; +import "./Grid.scss"; --- -
-
+
-
- - Web3 Universal Storage -
- Get access to a universal network drive, powered by the Web3/dWeb - cloud. Enjoy portability to any device or platform you wish. -
-
-
- - Web3 Gateway -
- Install the Lume Web3 Extension and have a 1-click gateway into the - Web3 internet on Opera, Vivaldi, Edge, and Firefox. -
-
-
- Build Your Site,
-
- Build Your Site,
Censorship Free
-
- Combining Lume and Skynet technologies, you can build a website just - like you are on the Web2 internet. -
-
-
- - Web3 Universal Storage -
- Get access to a universal network drive, powered by the Web3/dWeb - cloud. Enjoy portability to any device or platform you wish. -
-
-
- - Web3 Gateway -
- Install the Lume Web3 Extension and have a 1-click gateway into the - Web3 internet on Opera, Vivaldi, Edge, and Firefox. -
-
-
- Build Your Site,
-
- Build Your Site,
Censorship Free
-
- Combining Lume and Skynet technologies, you can build a website just - like you are on the Web2 internet. -
-
+
+ Web3 Universal Storage
+Get access to a universal network drive, powered by the Web3/dWeb cloud. Enjoy portability to any device or platform you wish.
+
+
+ Web3 Gateway
+Install the Lume Web3 Extension and have a 1-click gateway into the Web3 internet on Opera, Vivaldi, Edge and Firefox.
+
+
+ Build Your Site, Censorship Free
+Combining Lume and Skynet technologies, you can build a website just like you are on the Web2 internet.
+
+
+ Web3 Universal Storage
+Get access to a universal network drive, powered by the Web3/dWeb cloud. Enjoy portability to any device or platform you wish.
+
+
+ Web3 Gateway
+Install the Lume Web3 Extension and have a 1-click gateway into the Web3 internet on Opera, Vivaldi, Edge and Firefox.
+
+
+Build Your Site, Censorship Free
+Combining Lume and Skynet technologies, you can build a website just like you are on the Web2 internet.
+
-
+
+
diff --git a/src/components/Home/PoweredBy/PoweredBy.scss b/src/components/Home/PoweredBy/PoweredBy.scss
new file mode 100644
index 0000000..9419081
--- /dev/null
+++ b/src/components/Home/PoweredBy/PoweredBy.scss
@@ -0,0 +1,45 @@
+@import "../../../styles/mixins.scss";
+
+#home-powered-by {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ gap: 1.5em;
+ margin: 5em 0;
+ @include fluid-font-size(1.25rem);
+
+ @media screen and (width < 48rem) {
+ flex-direction: column;
+ gap: 1em;
+ }
+
+ div {
+ display: flex;
+ align-items: center;
+ gap: 1em;
+ }
+
+ h2 {
+ @include fluid-font-size(1.5625rem);
+ font-weight: 700;
+ line-height: 100%;
+ text-transform: uppercase;
+ color: var(--aquamarine);
+
+ @media screen and (width >= 48rem) {
+ margin-top: 0.75em;
+ }
+ }
+
+ .sia-logo {
+ @include fluid-width-height(8rem, 4.625rem);
+ }
+
+ .hns-logo {
+ @include fluid-width-height(3.875rem, 4.125rem);
+ }
+
+ .osi-logo {
+ @include fluid-width-height(5.1875rem, 6.25rem);
+ }
+}
diff --git a/src/components/Home/Vision/Vision.astro b/src/components/Home/Vision/Vision.astro
index ae96bf9..247bf38 100644
--- a/src/components/Home/Vision/Vision.astro
+++ b/src/components/Home/Vision/Vision.astro
@@ -1,27 +1,16 @@
---
-import "./VisionStyles.css";
+import "./Vision.scss";
---
-
+
+
diff --git a/src/components/Home/WhatIsWeb3/WhatIsWeb3.scss b/src/components/Home/WhatIsWeb3/WhatIsWeb3.scss
new file mode 100644
index 0000000..8534eb8
--- /dev/null
+++ b/src/components/Home/WhatIsWeb3/WhatIsWeb3.scss
@@ -0,0 +1,72 @@
+@import "../../../styles/colors.scss";
+@import "../../../styles/mixins.scss";
+
+@mixin fluid-margin {
+ $min-vw: 48rem;
+ $max-vw: 96rem;
+
+ $min-margin: 3.75%;
+ $max-margin: 7.5%;
+
+ & {
+ margin-left: min(27.8em, max($min-margin, calc(100vw - 28em - $min-margin)));
+ margin-right: $min-margin;
+
+ @media screen and (width >= $min-vw) {
+ $margin: calc(#{$min-margin} + #{strip-unit($max-margin - $min-margin)} * ((100vw - #{$min-vw}) / #{strip-unit($max-vw - $min-vw)}));
+ margin-left: min(calc(27.8em + $margin), max($margin, calc(100vw - 28em - $margin)));
+ margin-right: $margin;
+ }
+
+ @media screen and (width >= $max-vw) {
+ margin-left: min(calc(27.8em + $max-margin), max($max-margin, calc(100vw - 28em - $max-margin)));
+ margin-right: $max-margin;
+ }
+ }
+}
+
+#home-whatisweb3 {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ position: relative;
+ height: 32.42em;
+ margin-top: 2.48em;
+ @include fluid-font-size(1.3125rem);
+ background-image: url("../../../assets/tilted-rectangle.webp");
+ background-size: 100% 100%;
+
+ .background {
+ position: absolute;
+ left: 0;
+ top: 50%;
+ width: 100%;
+ height: 38.9em;
+ max-width: 30.34em;
+ margin: -19em 0 0;
+ background-image: url("../../../src/assets/img-left.webp");
+ background-position: left;
+ background-repeat: no-repeat;
+ background-size: contain;
+ pointer-events: none;
+ }
+
+ .feature-group {
+ @include fluid-margin;
+ max-width: 28em;
+ z-index: 1;
+
+ h1 {
+ margin-top: 1em;
+ }
+
+ @media screen and (width < 80rem) {
+ p {
+ background: rgba(2, 13, 17, 0.65);
+ border-radius: 0 0.5em 0.5em 0;
+ padding: 0.5em 0.5em;
+ margin: -0.5em -0.5em;
+ }
+ }
+ }
+}
diff --git a/src/components/Home/Whatisweb3/Whatisweb3.astro b/src/components/Home/Whatisweb3/Whatisweb3.astro
deleted file mode 100644
index 0f7a6b5..0000000
--- a/src/components/Home/Whatisweb3/Whatisweb3.astro
+++ /dev/null
@@ -1,46 +0,0 @@
----
-import "./Whatisweb3Styles.css";
----
-
-
+
TITLE
Building a new world for your data
diff --git a/src/components/Home/Meme/Meme.scss b/src/components/Home/Meme/Meme.scss index aca3472..0a6fc3a 100644 --- a/src/components/Home/Meme/Meme.scss +++ b/src/components/Home/Meme/Meme.scss @@ -1,8 +1,11 @@ +@import "../../../styles/mixins.scss"; + #home-meme { display: flex; justify-content: center; align-items: center; padding: 8% 12%; + @include fluid-font-size(1.3125rem); background-image: url("../../../assets/tilted-rectangle.webp"); background-size: 100% 100%; } @@ -11,15 +14,6 @@ width: 60%; margin-right: 5%; flex-shrink: 0; - - p { - margin-top: 1rem; - font-size: calc(15px + (21 - 15) * ((100vw - 300px) / (1600 - 300))); - color: var(--cloud); - font-family: var(--font-family-jaldi); - font-weight: 400; - font-style: normal; - } } .meme-grid { diff --git a/src/components/Home/Powered/Powered.astro b/src/components/Home/Powered/Powered.astro deleted file mode 100644 index 4ba8e27..0000000 --- a/src/components/Home/Powered/Powered.astro +++ /dev/null @@ -1,20 +0,0 @@ ---- -import "./PoweredStyles.css"; ---- - -
-
diff --git a/src/components/Home/Powered/PoweredStyles.css b/src/components/Home/Powered/PoweredStyles.css
deleted file mode 100644
index 1623d29..0000000
--- a/src/components/Home/Powered/PoweredStyles.css
+++ /dev/null
@@ -1,65 +0,0 @@
-.p-l-wrapper {
- align-items: center;
- flex-direction: column;
- white-space: nowrap;
- display: flex;
- width: 100%;
- margin-left: 50%;
- margin-right: 50%;
-}
-
-.p-l-container {
- justify-content: center;
- align-items: center;
- overflow: visible;
- white-space: normal;
- display: flex;
-}
-
-@media screen and (width <=625px) {
- .p-l-container {
- width: 100%;
- margin-top: 5%;
- transition: 0.5s;
- justify-content: center;
- align-items: center;
- overflow: visible;
- display: grid;
- }
-
- .p-l-wrapper {
- margin-left: 0%
- }
-}
-
-.sia-logo {
- background-image: url("../../../assets/sia-logo.webp");
- background-position: 50% 50%;
- background-size: contain;
- background-repeat: no-repeat;
- height: 51.8px;
- margin-bottom: 8px;
- object-fit: cover;
- width: 89.6px;
-}
-
-.hns-logo {
- background-image: url("../../../assets/hsn-logo.webp");
- background-position: 50% 50%;
- background-repeat: no-repeat;
- background-size: contain;
- height: 46.2px;
- margin-left: 5px;
- object-fit: cover;
- width: 43.4px;
-}
-
-.osi-logo {
- background-image: url("../../../assets/osi-logo.webp");
- background-position: 50% 50%;
- background-size: contain;
- background-repeat: no-repeat;
- height: 70px;
- margin-left: 18px;
- width: 58.1px;
-}
\ No newline at end of file
diff --git a/src/components/Home/PoweredBy/PoweredBy.astro b/src/components/Home/PoweredBy/PoweredBy.astro
new file mode 100644
index 0000000..9488e47
--- /dev/null
+++ b/src/components/Home/PoweredBy/PoweredBy.astro
@@ -0,0 +1,15 @@
+---
+import "./PoweredBy.scss";
+import siaLogo from "../../../assets/sia-logo.webp";
+import hnsLogo from "../../../assets/hsn-logo.webp";
+import osiLogo from "../../../assets/osi-logo.webp";
+---
+
+
-
-- POWERED BY -
-
-
-
-
-
- Powered By
+
+ 
+ 
+ 
+
+
+
- Make Web3 easy for
-
-
+
diff --git a/src/components/Home/Vision/Vision.scss b/src/components/Home/Vision/Vision.scss
new file mode 100644
index 0000000..fd93711
--- /dev/null
+++ b/src/components/Home/Vision/Vision.scss
@@ -0,0 +1,29 @@
+@import "../../../styles/colors.scss";
+@import "../../../styles/mixins.scss";
+
+#home-vision {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ height: 27.05em;
+ margin-top: 5.32em;
+ @include fluid-margin-lr;
+ @include fluid-font-size(1.3125rem);
+ background-image: url("../../../src/assets/video-placeholder.webp");
+ background-position: 98%;
+ background-repeat: no-repeat;
+ background-size: contain;
+
+ > div {
+ max-width: 29em;
+ }
+
+ @media screen and (width < 80rem) {
+ p {
+ background: rgba($body-bg, 0.65);
+ border-radius: 0 0.5em 0.5em 0;
+ padding: 0.5em 0.5em;
+ margin: -0.5em -0.5em;
+ }
+ }
+}
diff --git a/src/components/Home/Vision/VisionStyles.css b/src/components/Home/Vision/VisionStyles.css
deleted file mode 100644
index 1e5a3b2..0000000
--- a/src/components/Home/Vision/VisionStyles.css
+++ /dev/null
@@ -1,11 +0,0 @@
-.vt {
- background-color: rgba(0 0 0 0%);
-}
-
-@media screen and (width <=1200px) {
- .vt {
- background-color: #031418a7;
- border-radius: 15px;
- transition: 0.5s;
- }
-}
diff --git a/src/components/Home/WhatIsWeb3/WhatIsWeb3.astro b/src/components/Home/WhatIsWeb3/WhatIsWeb3.astro
new file mode 100644
index 0000000..5f83d9b
--- /dev/null
+++ b/src/components/Home/WhatIsWeb3/WhatIsWeb3.astro
@@ -0,0 +1,21 @@
+---
+import "./WhatIsWeb3.scss";
+---
+
+Our Vision
-
- Make Web3 easy for
everyone
-
- - Web3 offers freedom of speech, data sovereignty, and privacy. We - simplify Web3 by bridging the gap between the two webs, enabling - easy usage without censorship or backdoors. -
+Make Web3 easy for everyone
++ Web3 offers freedom of speech, data sovereignty, and privacy. We simplify Web3 by bridging the gap between the two webs, enabling easy usage without censorship or backdoors. +
+
++ What is the Web? +
++ Why Web3 matters +
++ 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. +
+
+ Learn More
+
+
-
diff --git a/src/components/Home/Whatisweb3/Whatisweb3Styles.css b/src/components/Home/Whatisweb3/Whatisweb3Styles.css
deleted file mode 100644
index 606084a..0000000
--- a/src/components/Home/Whatisweb3/Whatisweb3Styles.css
+++ /dev/null
@@ -1,65 +0,0 @@
-.w3-container {
- z-index: 999 !important;
- width: 100%;
- padding-left: 47.5vw;
- transition: 0.5s;
-}
-
-.whatisweb3-wrapper {
- background-image: url("../../../assets/tilted-rectangle.webp");
- background-size: 100% 100%;
- background-repeat: no-repeat;
- left: 0%;
- width: 100%;
- padding-block: 11em;
- justify-content: center;
- align-items: center;
- overflow: hidden;
- display: flex;
- padding-left: calc(8px + 1.5625vw);
-}
-
-.w3-transluscent {
- background-color: #020e1076;
- border-radius: 15px;
- transition: 0.5s;
- max-width: 71.5%;
-}
-
-@media screen and (width <=1050px) {
- .w3-container {
- width: 100%;
- padding-inline: 9%;
- z-index: 999 !important;
- }
-
- .whatisweb3-wrapper {
- width: 100%;
- }
-
- .img-left {
- left: 15%;
- transition: 0.5s;
- }
-
- .w3-transluscent {
- max-width: 100%;
- }
-}
-
-@media screen and (width >=2200px) {
- .w3-container {
- padding-inline: 96vw;
- width: 100%;
- justify-content: center;
- display: grid;
- }
-
- .img-left {
- left: 5.5%;
- }
-
- .w3-transluscent {
- max-width: 30%;
- }
-}
\ No newline at end of file
diff --git a/src/components/Navbar/Navbar.scss b/src/components/Navbar/Navbar.scss
index 53666e9..6eda59d 100644
--- a/src/components/Navbar/Navbar.scss
+++ b/src/components/Navbar/Navbar.scss
@@ -12,8 +12,7 @@ nav {
flex-shrink: 0;
img {
- @include fluid-width(13.125rem);
- @include fluid-height(4.375rem);
+ @include fluid-width-height(13.125rem, 4.375rem);
}
}
}
diff --git a/src/components/Vision/Grid/Grid.astro b/src/components/Vision/Grid/Grid.astro
index c0040c5..628d1d8 100644
--- a/src/components/Vision/Grid/Grid.astro
+++ b/src/components/Vision/Grid/Grid.astro
@@ -2,9 +2,9 @@
import "./Grid.scss";
---
-
-
-
-
-
-
-
-
-
- - what is the web? -
-- Why Web3 matters -
-- 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. -
-
- Learn More
-
-
-