TITLE
Building a new world for your data
diff --git a/src/components/Home/Meme/MemeStyles.css b/src/components/Home/Meme/Meme.scss
similarity index 96%
rename from src/components/Home/Meme/MemeStyles.css
rename to src/components/Home/Meme/Meme.scss
index 9d40569..aca3472 100644
--- a/src/components/Home/Meme/MemeStyles.css
+++ b/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;
diff --git a/src/components/Home/Message/Message.astro b/src/components/Home/Message/Message.astro
index 0a101ee..2073645 100644
--- a/src/components/Home/Message/Message.astro
+++ b/src/components/Home/Message/Message.astro
@@ -1,18 +1,12 @@
---
-import "./MessageStyles.css";
+import "./Message.scss";
---
-
-
-
- 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.
-
-
+
+
+ A message from Derrick
+
+
+ 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.
+
+
diff --git a/src/components/Home/Message/Message.scss b/src/components/Home/Message/Message.scss
new file mode 100644
index 0000000..6007d8f
--- /dev/null
+++ b/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%;
+ }
+}
\ No newline at end of file
diff --git a/src/components/Home/Message/MessageStyles.css b/src/components/Home/Message/MessageStyles.css
deleted file mode 100644
index a451276..0000000
--- a/src/components/Home/Message/MessageStyles.css
+++ /dev/null
@@ -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);
-}
\ No newline at end of file
diff --git a/src/components/Home/Vision/Vision.astro b/src/components/Home/Vision/Vision.astro
index 7eb60bb..ae96bf9 100644
--- a/src/components/Home/Vision/Vision.astro
+++ b/src/components/Home/Vision/Vision.astro
@@ -7,12 +7,7 @@ import "./VisionStyles.css";
style="padding-bottom: 5vh; vertical-align: center; padding-inline: 11.9%;"
>
-
-
- OUR VISION
-
+
Our Vision
diff --git a/src/components/Navbar/Navbar.jsx b/src/components/Navbar/Navbar.jsx
index 4fa87f4..1b94541 100644
--- a/src/components/Navbar/Navbar.jsx
+++ b/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 }) {
diff --git a/src/components/Navbar/NavbarStyles.css b/src/components/Navbar/Navbar.scss
similarity index 69%
rename from src/components/Navbar/NavbarStyles.css
rename to src/components/Navbar/Navbar.scss
index 2aa87cb..53666e9 100644
--- a/src/components/Navbar/NavbarStyles.css
+++ b/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: 2.5rem 3%;
- background: #031418;
- font-size: 1.125rem;
+ padding: 2em 3.75%;
+ @include fluid-font-size(1.25rem);
white-space: nowrap;
.logo {
flex-shrink: 0;
img {
- width: 13.125rem;
- height: 4.274rem;
+ @include fluid-width(13.125rem);
+ @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 {
diff --git a/src/components/Vision/CommunityPower/CommunityPower.astro b/src/components/Vision/CommunityPower/CommunityPower.astro
new file mode 100644
index 0000000..1ac92c6
--- /dev/null
+++ b/src/components/Vision/CommunityPower/CommunityPower.astro
@@ -0,0 +1,10 @@
+---
+import "./CommunityPower.scss";
+import communityPower from "../../../../src/assets/community-power.png";
+---
+
+
diff --git a/src/components/Vision/CommunityPower/CommunityPower.scss b/src/components/Vision/CommunityPower/CommunityPower.scss
new file mode 100644
index 0000000..33384d4
--- /dev/null
+++ b/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%);
+}
diff --git a/src/components/Vision/Grid/Grid.astro b/src/components/Vision/Grid/Grid.astro
new file mode 100644
index 0000000..c0040c5
--- /dev/null
+++ b/src/components/Vision/Grid/Grid.astro
@@ -0,0 +1,29 @@
+---
+import "./Grid.scss";
+---
+
+
+
+
Freedom, Privacy, Ownership.
+
+
+
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.
+
+
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.
+
+ Easy Web3 access, storage, publishing, and payment for content creation.
+
+
diff --git a/src/components/Vision/Jumbotron/Jumbotron.scss b/src/components/Vision/Jumbotron/Jumbotron.scss
new file mode 100644
index 0000000..c199759
--- /dev/null
+++ b/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;
+ }
+}
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index 476a097..e820eac 100644
--- a/src/layouts/Layout.astro
+++ b/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;
-
+
diff --git a/src/pages/vision.astro b/src/pages/vision.astro
index 1db5650..62db5a1 100644
--- a/src/pages/vision.astro
+++ b/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";
---
-
+
+
+
diff --git a/src/styles/global.css b/src/styles/global.scss
similarity index 87%
rename from src/styles/global.css
rename to src/styles/global.scss
index ade398c..2e48246 100644
--- a/src/styles/global.css
+++ b/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;
- border-radius: 0.3125rem;
+ padding: 0.5em 0.8em;
+ 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;
+ }
+}
diff --git a/src/styles/mixins.scss b/src/styles/mixins.scss
new file mode 100644
index 0000000..2693644
--- /dev/null
+++ b/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;
+ }
+ }
+}