adopt design changes, fixes and improvements

This commit is contained in:
cymon 2023-06-30 09:49:40 +00:00
parent b52911cb51
commit e3a1e48a83
58 changed files with 290 additions and 252 deletions

View File

@ -2,6 +2,7 @@
"name": "lume-web",
"type": "module",
"version": "0.0.1",
"private": true,
"scripts": {
"dev": "TAILWIND_MODE=watch astro dev",
"start": "astro dev",
@ -14,13 +15,10 @@
"@astrojs/react": "^2.1.1",
"@astrojs/tailwind": "^3.1.1",
"@types/react": "^18.2.0",
"@types/react-dom": "^18.2.1",
"astro": "^2.3.2",
"astro-icon": "^0.8.0",
"autoprefixer": "^10.4.14",
"qrcode": "^1.5.3",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"sass": "^1.62.1",
"tailwindcss": "^3.3.2",
"typewriter-effect": "^2.19.0"

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.1 MiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 843 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 37 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 787 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.4 MiB

BIN
src/assets/cto-avatar.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 46 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.8 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.4 MiB

After

Width:  |  Height:  |  Size: 1.8 MiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 14 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 472 KiB

View File

@ -0,0 +1,3 @@
<svg viewBox="0 0 127.14 96.36" xmlns="http://www.w3.org/2000/svg">
<path fill="currentcolor" d="M107.7,8.07A105.15,105.15,0,0,0,81.47,0a72.06,72.06,0,0,0-3.36,6.83A97.68,97.68,0,0,0,49,6.83,72.37,72.37,0,0,0,45.64,0,105.89,105.89,0,0,0,19.39,8.09C2.79,32.65-1.71,56.6.54,80.21h0A105.73,105.73,0,0,0,32.71,96.36,77.7,77.7,0,0,0,39.6,85.25a68.42,68.42,0,0,1-10.85-5.18c.91-.66,1.8-1.34,2.66-2a75.57,75.57,0,0,0,64.32,0c.87.71,1.76,1.39,2.66,2a68.68,68.68,0,0,1-10.87,5.19,77,77,0,0,0,6.89,11.1A105.25,105.25,0,0,0,126.6,80.22h0C129.24,52.84,122.09,29.11,107.7,8.07ZM42.45,65.69C36.18,65.69,31,60,31,53s5-12.74,11.43-12.74S54,46,53.89,53,48.84,65.69,42.45,65.69Zm42.24,0C78.41,65.69,73.25,60,73.25,53s5-12.74,11.44-12.74S96.23,46,96.12,53,91.08,65.69,84.69,65.69Z"/>
</svg>

After

Width:  |  Height:  |  Size: 773 B

3
src/assets/icons/git.svg Normal file
View File

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 92 92">
<path style="stroke:none;fill-rule:nonzero;fill:currentColor;fill-opacity:1" d="M90.156 41.965 50.036 1.848a5.918 5.918 0 0 0-8.372 0l-8.328 8.332 10.566 10.566a7.03 7.03 0 0 1 7.23 1.684 7.034 7.034 0 0 1 1.669 7.277l10.187 10.184a7.028 7.028 0 0 1 7.278 1.672 7.04 7.04 0 0 1 0 9.957 7.05 7.05 0 0 1-9.965 0 7.044 7.044 0 0 1-1.528-7.66l-9.5-9.497V59.36a7.04 7.04 0 0 1 1.86 11.29 7.04 7.04 0 0 1-9.957 0 7.04 7.04 0 0 1 0-9.958 7.06 7.06 0 0 1 2.304-1.539V33.926a7.049 7.049 0 0 1-3.82-9.234L29.242 14.272 1.73 41.777a5.925 5.925 0 0 0 0 8.371L41.852 90.27a5.925 5.925 0 0 0 8.37 0l39.934-39.934a5.925 5.925 0 0 0 0-8.371"/>
</svg>

After

Width:  |  Height:  |  Size: 696 B

View File

@ -0,0 +1,3 @@
<svg viewBox="0 0 98 96" xmlns="http://www.w3.org/2000/svg">
<path fill="currentcolor" fill-rule="evenodd" clip-rule="evenodd" d="M48.854 0C21.839 0 0 22 0 49.217c0 21.756 13.993 40.172 33.405 46.69 2.427.49 3.316-1.059 3.316-2.362 0-1.141-.08-5.052-.08-9.127-13.59 2.934-16.42-5.867-16.42-5.867-2.184-5.704-5.42-7.17-5.42-7.17-4.448-3.015.324-3.015.324-3.015 4.934.326 7.523 5.052 7.523 5.052 4.367 7.496 11.404 5.378 14.235 4.074.404-3.178 1.699-5.378 3.074-6.6-10.839-1.141-22.243-5.378-22.243-24.283 0-5.378 1.94-9.778 5.014-13.2-.485-1.222-2.184-6.275.486-13.038 0 0 4.125-1.304 13.426 5.052a46.97 46.97 0 0 1 12.214-1.63c4.125 0 8.33.571 12.213 1.63 9.302-6.356 13.427-5.052 13.427-5.052 2.67 6.763.97 11.816.485 13.038 3.155 3.422 5.015 7.822 5.015 13.2 0 18.905-11.404 23.06-22.324 24.283 1.78 1.548 3.316 4.481 3.316 9.126 0 6.6-.08 11.897-.08 13.526 0 1.304.89 2.853 3.316 2.364 19.412-6.52 33.405-24.935 33.405-46.691C97.707 22 75.788 0 48.854 0z"/>
</svg>

After

Width:  |  Height:  |  Size: 969 B

View File

Before

Width:  |  Height:  |  Size: 2.0 KiB

After

Width:  |  Height:  |  Size: 2.0 KiB

View File

Before

Width:  |  Height:  |  Size: 13 KiB

After

Width:  |  Height:  |  Size: 13 KiB

View File

Before

Width:  |  Height:  |  Size: 1.2 KiB

After

Width:  |  Height:  |  Size: 1.2 KiB

View File

@ -0,0 +1,3 @@
<svg version="1.1" viewBox="0 0 400 400" xmlns="http://www.w3.org/2000/svg">
<path fill="currentcolor" d="M400,200c0,110.5-89.5,200-200,200S0,310.5,0,200S89.5,0,200,0S400,89.5,400,200z M163.4,305.5 c88.7,0,137.2-73.5,137.2-137.2c0-2.1,0-4.2-0.1-6.2c9.4-6.8,17.6-15.3,24.1-25c-8.6,3.8-17.9,6.4-27.7,7.6 c10-6,17.6-15.4,21.2-26.7c-9.3,5.5-19.6,9.5-30.6,11.7c-8.8-9.4-21.3-15.2-35.2-15.2c-26.6,0-48.2,21.6-48.2,48.2 c0,3.8,0.4,7.5,1.3,11c-40.1-2-75.6-21.2-99.4-50.4c-4.1,7.1-6.5,15.4-6.5,24.2c0,16.7,8.5,31.5,21.5,40.1c-7.9-0.2-15.3-2.4-21.8-6 c0,0.2,0,0.4,0,0.6c0,23.4,16.6,42.8,38.7,47.3c-4,1.1-8.3,1.7-12.7,1.7c-3.1,0-6.1-0.3-9.1-0.9c6.1,19.2,23.9,33.1,45,33.5 c-16.5,12.9-37.3,20.6-59.9,20.6c-3.9,0-7.7-0.2-11.5-0.7C110.8,297.5,136.2,305.5,163.4,305.5"/>
</svg>

After

Width:  |  Height:  |  Size: 764 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 31 KiB

View File

Before

Width:  |  Height:  |  Size: 270 KiB

After

Width:  |  Height:  |  Size: 270 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 282 KiB

View File

Before

Width:  |  Height:  |  Size: 525 KiB

After

Width:  |  Height:  |  Size: 525 KiB

BIN
src/assets/new-world-bg.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.3 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 179 KiB

View File

Before

Width:  |  Height:  |  Size: 175 KiB

After

Width:  |  Height:  |  Size: 175 KiB

BIN
src/assets/unifying-bg.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.6 MiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 210 KiB

View File

@ -2,16 +2,17 @@
import './How.scss';
---
<section id="how" class="tilted-bg-r">
<section id="how">
<div class="custom-bg"></div>
<div class="feature-group">
<h2>How should I donate?</h2>
<h3>Donate via Gitcoin during funding rounds</h3>
<div>
<a href="https://gitcoin.co/grants/4722/lume-web-web3-accessibility-freedom-and-education" class="btn-main">Gitcoin</a>
</div>
<p>
When Gitcoin is doing funding rounds, donating through their website will give a matching bonus of up to
150%. This means that your donation will have a bigger impact on the project during this time period.
</p>
<div>
<a href="https://gitcoin.co/grants/4722/lume-web-web3-accessibility-freedom-and-education" class="btn-main">Gitcoin</a>
</div>
</div>
</section>

View File

@ -1,31 +1,47 @@
@import "/src/styles/vars.scss";
#how {
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
margin-top: 8em;
padding: 14em 7.5% 16em;
&::before {
background-image: url("/src/assets/donate-gfx-right.png");
background-position: 85% 100%;
background-repeat: no-repeat;
background-size: contain;
.custom-bg {
position: absolute;
top: 0;
right: -12.5%;
bottom: 0;
left: -12.5%;
margin: 2% 0;
background: $color-blue-charcoal;
transform: matrix(1, 0.04, -0.04, 1, 0, 0);
z-index: -1;
overflow: hidden;
&::after {
content: "";
position: absolute;
top: 3%;
bottom: -9%;
left: 10%;
right: 10%;
background-image: url("/src/assets/donate-gfx-right.png");
background-position: 100% 100%;
background-repeat: no-repeat;
background-size: contain;
transform: rotate(-2.25deg);
}
}
.feature-group {
max-width: 64em;
}
p{
font-size: 1.9em;
font-style: italic;
padding-top: 1em;
}
@media screen and (max-width: 80rem) {
p {
background: rgba($color-blue-charcoal, 0.65);
background: rgba($color-blue-charcoal, 0.75);
border-radius: 0.5em;
padding: 0.3em 0.5em;
margin: -0.3em -0.5em;

View File

@ -46,6 +46,9 @@ await addCurrency('algorand', 'Algorand (ALGO)', '3QBE5TZ63TF5W7V2QRJWRB72M7INQL
</div>
</div>
))}
</div>
<h2>Donate Fiat</h2>
<div class="method-grid">
<div id="donate-paypal">
<div>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 154.728 190.5">

View File

@ -10,14 +10,12 @@
font-family: $font-family-jaldi;
h2 {
margin-bottom: 1em;
margin: 1.25em 0 1em;
@include fluid-font-size(2.8125rem);
line-height: 122%;
}
> div {
p {
font-style: italic;
&:first-child {
margin-top: 0;
}
}
@ -140,6 +138,7 @@
p {
margin-top: 1em;
@include fluid-font-size(1.25rem);
font-style: italic;
line-height: 157%;
color: $color-cloud;
}

View File

@ -17,7 +17,7 @@
left: min(0em, calc((100% - 92.2em) / 2));
width: calc(100% - 64em - 7.5%);
min-width: 92.2em;
background-image: url("/src/assets/donate-why-bg.png");
background-image: url("/src/assets/single-brand-bg-2.png");
background-position: 50% 0;
background-repeat: no-repeat;
background-size: contain;
@ -32,7 +32,7 @@
@media screen and (max-width: 80rem) {
ul, p {
background: rgba($color-blue-charcoal-2, 0.65);
background: rgba($color-blue-charcoal-2, 0.75);
}
ul {

View File

@ -1,6 +1,6 @@
---
import './CTO.scss';
import avatar from '/src/assets/cto-avatar.webp';
import avatar from '/src/assets/cto-avatar.png';
---
<section id="cto">

View File

@ -18,7 +18,7 @@
left: min(0em, calc((100% - 95em) / 2));
width: calc(100% - 64em - 7.5%);
min-width: 95em;
background-image: url("/src/assets/geometric-bg.webp");
background-image: url("/src/assets/single-brand-bg-1.png");
background-position: 50% 100%;
background-repeat: no-repeat;
background-size: contain;
@ -53,7 +53,7 @@
@media screen and (max-width: 80rem) {
p, .bio div {
background: rgba($color-blue-charcoal-2, 0.65);
background: rgba($color-blue-charcoal-2, 0.75);
border-radius: 0 0.5em 0.5em 0;
padding: 0.3em 0.5em;
margin: -0.3em -0.5em;

View File

@ -1,9 +1,9 @@
---
import './PoweredBy.scss';
import svgSia from '/src/assets/sia.svg?raw';
import svgHns from '/src/assets/hns.svg?raw';
import svgOsi from '/src/assets/osi.svg?raw';
import svgSia from '/src/assets/icons/sia.svg?raw';
import svgHns from '/src/assets/icons/hns.svg?raw';
import svgOsi from '/src/assets/icons/osi.svg?raw';
---
<section id="powered-by">

View File

@ -1,31 +1,26 @@
---
import './Socials.scss';
import svgGit from '/src/assets/icons/git.svg?raw';
import svgGithub from '/src/assets/icons/github.svg?raw';
import svgDiscord from '/src/assets/icons/discord.svg?raw';
import svgTwitter from '/src/assets/icons/twitter.svg?raw';
---
<section id="socials">
<h2>Get in touch</h2>
<div>
<a href="https://git.lumeweb.com" title="Git" class="git-logo">
<svg xmlns="http://www.w3.org/2000/svg" width="92pt" height="92pt" viewBox="0 0 92 92"><defs><clipPath id="a"><path d="M0 .113h91.887V92H0Zm0 0"/></clipPath></defs><g clip-path="url(#a)"><path style="stroke:none;fill-rule:nonzero;fill:#fff;fill-opacity:1" d="M90.156 41.965 50.036 1.848a5.918 5.918 0 0 0-8.372 0l-8.328 8.332 10.566 10.566a7.03 7.03 0 0 1 7.23 1.684 7.034 7.034 0 0 1 1.669 7.277l10.187 10.184a7.028 7.028 0 0 1 7.278 1.672 7.04 7.04 0 0 1 0 9.957 7.05 7.05 0 0 1-9.965 0 7.044 7.044 0 0 1-1.528-7.66l-9.5-9.497V59.36a7.04 7.04 0 0 1 1.86 11.29 7.04 7.04 0 0 1-9.957 0 7.04 7.04 0 0 1 0-9.958 7.06 7.06 0 0 1 2.304-1.539V33.926a7.049 7.049 0 0 1-3.82-9.234L29.242 14.272 1.73 41.777a5.925 5.925 0 0 0 0 8.371L41.852 90.27a5.925 5.925 0 0 0 8.37 0l39.934-39.934a5.925 5.925 0 0 0 0-8.371"/></g></svg>
<Fragment set:html={svgGit} />
</a>
<a href="https://github.com/LumeWeb" title="GitHub" class="github-logo">
<svg viewBox="0 0 98 96" xmlns="http://www.w3.org/2000/svg">
<path fill="currentcolor" fill-rule="evenodd" clip-rule="evenodd"
d="M48.854 0C21.839 0 0 22 0 49.217c0 21.756 13.993 40.172 33.405 46.69 2.427.49 3.316-1.059 3.316-2.362 0-1.141-.08-5.052-.08-9.127-13.59 2.934-16.42-5.867-16.42-5.867-2.184-5.704-5.42-7.17-5.42-7.17-4.448-3.015.324-3.015.324-3.015 4.934.326 7.523 5.052 7.523 5.052 4.367 7.496 11.404 5.378 14.235 4.074.404-3.178 1.699-5.378 3.074-6.6-10.839-1.141-22.243-5.378-22.243-24.283 0-5.378 1.94-9.778 5.014-13.2-.485-1.222-2.184-6.275.486-13.038 0 0 4.125-1.304 13.426 5.052a46.97 46.97 0 0 1 12.214-1.63c4.125 0 8.33.571 12.213 1.63 9.302-6.356 13.427-5.052 13.427-5.052 2.67 6.763.97 11.816.485 13.038 3.155 3.422 5.015 7.822 5.015 13.2 0 18.905-11.404 23.06-22.324 24.283 1.78 1.548 3.316 4.481 3.316 9.126 0 6.6-.08 11.897-.08 13.526 0 1.304.89 2.853 3.316 2.364 19.412-6.52 33.405-24.935 33.405-46.691C97.707 22 75.788 0 48.854 0z"/>
</svg>
<Fragment set:html={svgGithub} />
</a>
<a href="https://discord.gg/qpC8ADp3rS" title="Discord" class="discord-logo">
<svg viewBox="0 0 127.14 96.36" xmlns="http://www.w3.org/2000/svg">
<path fill="currentcolor"
d="M107.7,8.07A105.15,105.15,0,0,0,81.47,0a72.06,72.06,0,0,0-3.36,6.83A97.68,97.68,0,0,0,49,6.83,72.37,72.37,0,0,0,45.64,0,105.89,105.89,0,0,0,19.39,8.09C2.79,32.65-1.71,56.6.54,80.21h0A105.73,105.73,0,0,0,32.71,96.36,77.7,77.7,0,0,0,39.6,85.25a68.42,68.42,0,0,1-10.85-5.18c.91-.66,1.8-1.34,2.66-2a75.57,75.57,0,0,0,64.32,0c.87.71,1.76,1.39,2.66,2a68.68,68.68,0,0,1-10.87,5.19,77,77,0,0,0,6.89,11.1A105.25,105.25,0,0,0,126.6,80.22h0C129.24,52.84,122.09,29.11,107.7,8.07ZM42.45,65.69C36.18,65.69,31,60,31,53s5-12.74,11.43-12.74S54,46,53.89,53,48.84,65.69,42.45,65.69Zm42.24,0C78.41,65.69,73.25,60,73.25,53s5-12.74,11.44-12.74S96.23,46,96.12,53,91.08,65.69,84.69,65.69Z"/>
</svg>
<Fragment set:html={svgDiscord} />
</a>
<a href="https://twitter.com/lumeweb3" title="Twitter" class="twitter-logo">
<svg version="1.1" viewBox="0 0 400 400" xmlns="http://www.w3.org/2000/svg">
<path fill="currentcolor"
d="M400,200c0,110.5-89.5,200-200,200S0,310.5,0,200S89.5,0,200,0S400,89.5,400,200z M163.4,305.5 c88.7,0,137.2-73.5,137.2-137.2c0-2.1,0-4.2-0.1-6.2c9.4-6.8,17.6-15.3,24.1-25c-8.6,3.8-17.9,6.4-27.7,7.6 c10-6,17.6-15.4,21.2-26.7c-9.3,5.5-19.6,9.5-30.6,11.7c-8.8-9.4-21.3-15.2-35.2-15.2c-26.6,0-48.2,21.6-48.2,48.2 c0,3.8,0.4,7.5,1.3,11c-40.1-2-75.6-21.2-99.4-50.4c-4.1,7.1-6.5,15.4-6.5,24.2c0,16.7,8.5,31.5,21.5,40.1c-7.9-0.2-15.3-2.4-21.8-6 c0,0.2,0,0.4,0,0.6c0,23.4,16.6,42.8,38.7,47.3c-4,1.1-8.3,1.7-12.7,1.7c-3.1,0-6.1-0.3-9.1-0.9c6.1,19.2,23.9,33.1,45,33.5 c-16.5,12.9-37.3,20.6-59.9,20.6c-3.9,0-7.7-0.2-11.5-0.7C110.8,297.5,136.2,305.5,163.4,305.5"/>
</svg>
<Fragment set:html={svgTwitter} />
</a>
</div>
</section>

View File

@ -47,8 +47,4 @@
.twitter-logo svg {
@include fluid-width(3.5rem);
}
.facebook-logo svg {
@include fluid-width(3.5rem);
}
}

View File

@ -27,10 +27,14 @@
@media screen and (max-width: 80rem) {
p {
background: rgba($color-blue-charcoal-2, 0.65);
background: rgba($color-blue-charcoal-2, 0.75);
border-radius: 0.5em;
padding: 0.3em 0.5em;
margin: -0.3em -0.5em;
}
p + p {
margin-top: 0.48em;
}
}
}

View File

@ -17,7 +17,7 @@
height: 81.7em;
max-width: 63.7em;
margin: -40em 0 0;
background-image: url("/src/assets/img-left.webp");
background-image: url("/src/assets/home-gfx-left.png");
background-position: left;
background-repeat: no-repeat;
background-size: contain;
@ -35,11 +35,15 @@
@media screen and (max-width: 80rem) {
p {
background: rgba($color-blue-charcoal, 0.65);
background: rgba($color-blue-charcoal, 0.75);
border-radius: 0.5em;
padding: 0.3em 0.5em;
margin: -0.3em -0.5em;
}
p + p {
margin-top: 0.48em;
}
}
}
}

View File

@ -1,5 +1,10 @@
---
import './JoinCommunity.scss';
import svgGit from '/src/assets/icons/git.svg?raw';
import svgGithub from '/src/assets/icons/github.svg?raw';
import svgDiscord from '/src/assets/icons/discord.svg?raw';
import svgTwitter from '/src/assets/icons/twitter.svg?raw';
---
<section id="join-community">
@ -12,30 +17,23 @@ import './JoinCommunity.scss';
</p>
</div>
<div>
<a href="#" title="GitHub" class="git-logo">
<svg xmlns="http://www.w3.org/2000/svg" width="92pt" height="92pt" viewBox="0 0 92 92"><defs><clipPath id="a"><path d="M0 .113h91.887V92H0Zm0 0"/></clipPath></defs><g clip-path="url(#a)"><path style="stroke:none;fill-rule:nonzero;fill:#100f0d;fill-opacity:1" d="M90.156 41.965 50.036 1.848a5.913 5.913 0 0 0-8.368 0l-8.332 8.332 10.566 10.566a7.03 7.03 0 0 1 7.23 1.684 7.043 7.043 0 0 1 1.673 7.277l10.183 10.184a7.026 7.026 0 0 1 7.278 1.672 7.04 7.04 0 0 1 0 9.957 7.045 7.045 0 0 1-9.961 0 7.038 7.038 0 0 1-1.532-7.66l-9.5-9.497V59.36a7.04 7.04 0 0 1 1.86 11.29 7.04 7.04 0 0 1-9.957 0 7.04 7.04 0 0 1 0-9.958 7.034 7.034 0 0 1 2.308-1.539V33.926a7.001 7.001 0 0 1-2.308-1.535 7.049 7.049 0 0 1-1.516-7.7L29.242 14.273 1.734 41.777a5.918 5.918 0 0 0 0 8.371L41.855 90.27a5.92 5.92 0 0 0 8.368 0l39.933-39.934a5.925 5.925 0 0 0 0-8.371"/></g></svg>
</a>
<a href="https://git.lumeweb.com" title="Git" class="git-logo">
<Fragment set:html={svgGit} />
</a>
</div>
<div>
<a href="#" title="GitHub" class="github-logo">
<svg viewBox="0 0 98 96" xmlns="http://www.w3.org/2000/svg">
<path fill="currentcolor" fill-rule="evenodd" clip-rule="evenodd" d="M48.854 0C21.839 0 0 22 0 49.217c0 21.756 13.993 40.172 33.405 46.69 2.427.49 3.316-1.059 3.316-2.362 0-1.141-.08-5.052-.08-9.127-13.59 2.934-16.42-5.867-16.42-5.867-2.184-5.704-5.42-7.17-5.42-7.17-4.448-3.015.324-3.015.324-3.015 4.934.326 7.523 5.052 7.523 5.052 4.367 7.496 11.404 5.378 14.235 4.074.404-3.178 1.699-5.378 3.074-6.6-10.839-1.141-22.243-5.378-22.243-24.283 0-5.378 1.94-9.778 5.014-13.2-.485-1.222-2.184-6.275.486-13.038 0 0 4.125-1.304 13.426 5.052a46.97 46.97 0 0 1 12.214-1.63c4.125 0 8.33.571 12.213 1.63 9.302-6.356 13.427-5.052 13.427-5.052 2.67 6.763.97 11.816.485 13.038 3.155 3.422 5.015 7.822 5.015 13.2 0 18.905-11.404 23.06-22.324 24.283 1.78 1.548 3.316 4.481 3.316 9.126 0 6.6-.08 11.897-.08 13.526 0 1.304.89 2.853 3.316 2.364 19.412-6.52 33.405-24.935 33.405-46.691C97.707 22 75.788 0 48.854 0z"/>
</svg>
<a href="https://github.com/LumeWeb" title="GitHub" class="github-logo">
<Fragment set:html={svgGithub} />
</a>
</div>
<div>
<a href="#" title="Discord" class="discord-logo">
<svg viewBox="0 0 127.14 96.36" xmlns="http://www.w3.org/2000/svg">
<path fill="currentcolor" d="M107.7,8.07A105.15,105.15,0,0,0,81.47,0a72.06,72.06,0,0,0-3.36,6.83A97.68,97.68,0,0,0,49,6.83,72.37,72.37,0,0,0,45.64,0,105.89,105.89,0,0,0,19.39,8.09C2.79,32.65-1.71,56.6.54,80.21h0A105.73,105.73,0,0,0,32.71,96.36,77.7,77.7,0,0,0,39.6,85.25a68.42,68.42,0,0,1-10.85-5.18c.91-.66,1.8-1.34,2.66-2a75.57,75.57,0,0,0,64.32,0c.87.71,1.76,1.39,2.66,2a68.68,68.68,0,0,1-10.87,5.19,77,77,0,0,0,6.89,11.1A105.25,105.25,0,0,0,126.6,80.22h0C129.24,52.84,122.09,29.11,107.7,8.07ZM42.45,65.69C36.18,65.69,31,60,31,53s5-12.74,11.43-12.74S54,46,53.89,53,48.84,65.69,42.45,65.69Zm42.24,0C78.41,65.69,73.25,60,73.25,53s5-12.74,11.44-12.74S96.23,46,96.12,53,91.08,65.69,84.69,65.69Z"/>
</svg>
<Fragment set:html={svgDiscord} />
</a>
</div>
<div>
<a href="#" title="Twitter" class="twitter-logo">
<svg version="1.1" viewBox="0 0 400 400" xmlns="http://www.w3.org/2000/svg">
<path fill="currentcolor" d="M400,200c0,110.5-89.5,200-200,200S0,310.5,0,200S89.5,0,200,0S400,89.5,400,200z M163.4,305.5 c88.7,0,137.2-73.5,137.2-137.2c0-2.1,0-4.2-0.1-6.2c9.4-6.8,17.6-15.3,24.1-25c-8.6,3.8-17.9,6.4-27.7,7.6 c10-6,17.6-15.4,21.2-26.7c-9.3,5.5-19.6,9.5-30.6,11.7c-8.8-9.4-21.3-15.2-35.2-15.2c-26.6,0-48.2,21.6-48.2,48.2 c0,3.8,0.4,7.5,1.3,11c-40.1-2-75.6-21.2-99.4-50.4c-4.1,7.1-6.5,15.4-6.5,24.2c0,16.7,8.5,31.5,21.5,40.1c-7.9-0.2-15.3-2.4-21.8-6 c0,0.2,0,0.4,0,0.6c0,23.4,16.6,42.8,38.7,47.3c-4,1.1-8.3,1.7-12.7,1.7c-3.1,0-6.1-0.3-9.1-0.9c6.1,19.2,23.9,33.1,45,33.5 c-16.5,12.9-37.3,20.6-59.9,20.6c-3.9,0-7.7-0.2-11.5-0.7C110.8,297.5,136.2,305.5,163.4,305.5"/>
</svg>
<Fragment set:html={svgTwitter} />
</a>
</div>
</section>

View File

@ -77,8 +77,4 @@
.twitter-logo svg {
@include fluid-width(3.625rem);
}
.facebook-logo svg {
@include fluid-width(3.625rem);
}
}

View File

@ -25,7 +25,7 @@ menu {
li > a {
display: block;
padding: 0.55em 0.9em;
@include fluid-font-size(1.375rem);
@include fluid-font-size(1.25rem);
text-decoration: underline;
text-decoration-color: transparent;
transition: text-decoration-color $transition-duration;
@ -33,11 +33,15 @@ menu {
&.current, &:hover, &:active {
text-decoration-color: inherit;
}
&.current {
font-weight: 700;
}
}
.download-btn {
margin-left: 0.9em;
@include fluid-font-size(1.375rem);
@include fluid-font-size(1.25rem);
text-decoration: none;
}
}

View File

@ -1,27 +0,0 @@
@import "/src/styles/vars.scss";
#community {
position: relative;
background-image: url("/src/assets/community-power-bg.png");
background-size: max(157.5em, 100%);
background-position: right;
padding-top: max(61.4525em, 39.0175%);
.feature-group {
position: absolute;
top: 0;
bottom: 0;
display: flex;
flex-direction: column;
justify-content: center;
max-width: 64em;
margin: 0 7.5%;
}
p {
background: rgba($color-blue-charcoal, 0.65);
border-radius: 0.5em;
padding: 0.3em 0.5em;
margin: -0.3em -0.5em;
}
}

View File

@ -1,20 +1,24 @@
---
import './People.scss';
import './NoVc.scss';
---
<section id="people">
<section id="no-vc">
<div class="feature-group">
<h2>Community-Powered</h2>
<h3>All about the people, no VC here.</h3>
<p>
Our vision is completely grass roots, and FOSS. The user needs to have a voice and be in control of their web. Due to our principles, we have not taken any VC money that might be able to strap a jetpack to the project, because the output would compromise the spirit and goals we are setting out to achieve.
<br /><br />
</p>
<p>
We are <i>very</i> aware of the projects that have come before us and whom have made similar promises. We are also doing our best to learn from their mistakes and failures.
<br /><br />
</p>
<p>
The key difference that we see big picture is you need both an <b>economy</b> and <b>decentralized/P2P</b> networks, because running the internet is not free, and someone <i>always</i> has to foot the bill.
<br /><br />
</p>
<p>
Blockchain <b><i>finally</i></b> makes this possible.
<br /><br />
</p>
<p>
Having a pragmatic view on mass adoption without compromising on principles is needed to make progress on a user-owned web.
</p>
<div>

View File

@ -1,6 +1,6 @@
@import "/src/styles/vars.scss";
#people {
#no-vc {
position: relative;
display: flex;
justify-content: flex-end;
@ -32,10 +32,14 @@
@media screen and (max-width: 80rem) {
p {
background: rgba($color-blue-charcoal-2, 0.65);
background: rgba($color-blue-charcoal-2, 0.75);
border-radius: 0.5em;
padding: 0.3em 0.5em;
margin: -0.3em -0.5em;
}
p + p {
margin-top: 0.48em;
}
}
}

View File

@ -1,8 +1,9 @@
---
import './Community.scss';
import './Unify.scss';
---
<section id="community">
<section id="unify">
<div class="custom-bg"></div>
<div class="feature-group">
<h2>Community-Powered</h2>
<h3>Unifying all the Networks</h3>
@ -10,10 +11,12 @@ import './Community.scss';
There are many, <i>many</i> "crypto", "defi", "web3", "P2P", and "dWeb" projects that have all taken hundreds
of different approaches to innovate. However, they all have the same broad ethos in common, and they all
need an easy means to access them in one place, but in a censorship-resistant way.
<br/><br/>
</p>
<p>
We have a very ambitious vision, and this requires all "tribes" to work together enough for the benefit of
the end user.
<br/><br/>
</p>
<p>
Below are some of the ideas we are aiming for, and some we would like to tackle eventually.
</p>
</div>

View File

@ -0,0 +1,51 @@
@import "/src/styles/vars.scss";
#unify {
position: relative;
padding: 14em 7.5%;
.custom-bg {
position: absolute;
top: 0;
right: -12.5%;
bottom: 0;
left: -12.5%;
margin: 2% 0;
background: $color-blue-charcoal;
transform: matrix(1, 0.04, -0.04, 1, 0, 0);
z-index: -1;
overflow: hidden;
&::after {
content: "";
position: absolute;
top: -1%;
bottom: -5%;
left: 10%;
right: 10%;
background-image: url("/src/assets/unifying-bg.png");
background-position: 100% 100%;
background-repeat: no-repeat;
background-size: contain;
transform: rotate(-2.25deg);
}
}
.feature-group {
display: flex;
flex-direction: column;
justify-content: center;
max-width: 64em;
}
p {
background: rgba($color-blue-charcoal, 0.75);
border-radius: 0.5em;
padding: 0.3em 0.5em;
margin: -0.3em -0.5em;
}
p + p {
margin-top: 0.48em;
}
}

View File

@ -1,35 +0,0 @@
@import "/src/styles/vars.scss";
#astronaut {
position: relative;
display: flex;
align-items: center;
min-height: 71.1em;
background: $color-blue-charcoal;
&::before {
content: "";
position: absolute;
top: 0;
right: min(0em, calc(100% - 100.3em) / 2);
bottom: 0;
width: 100.3em;
background-image: url("/src/assets/astronaut.png");
background-position: 100%;
background-repeat: no-repeat;
background-size: contain;
}
&::after {
content: "";
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.8);
}
.feature-group {
max-width: 64em;
margin: 6em 7.5%;
z-index: 1;
}
}

View File

@ -1,46 +0,0 @@
@import "/src/styles/vars.scss";
#building {
&::before {
bottom: -50%;
}
> div {
position: relative;
display: flex;
justify-content: flex-end;
align-items: center;
max-width: 185.6em;
min-height: 58.8em;
margin: 0 auto;
&::before {
content: "";
position: absolute;
top: 2.3em;
bottom: -2.3em;
left: min(0em, calc((100% - 77.56em) / 2));
width: calc(100% - 64em - 7.5%);
min-width: 77.56em;
background-image: url("/src/assets/double-brand-bg.png");
background-position: 50%;
background-repeat: no-repeat;
background-size: contain;
z-index: -1;
}
}
.feature-group {
max-width: 64em;
margin: 7em 7.5% 5em;
}
@media screen and (max-width: 80rem) {
p {
background: rgba($color-blue-charcoal, 0.65);
border-radius: 0.5em;
padding: 0.3em 0.5em;
margin: -0.3em -0.5em;
}
}
}

View File

@ -1,29 +1,32 @@
---
import './Astronaut.scss';
import './Contribute.scss';
import mario from "/src/assets/mario-level-up.gif"
---
<section id="astronaut">
<section id="contribute">
<div class="feature-group">
<h2>Web3 is Community</h2>
<h3>Re-defining Web3, for the users</h3>
<p>
Web3 was a term first defined by Gavin Wood when the Ethereum network was starting out. He defined it as a
"decentralized online ecosystem based on blockchain".
<br /><br />
</p>
<p>
However, we view it as much more than that, and definitely more than access to DeFi. We see a ton of more
potential to what Web3 as an ideal can evolve to, and are setting out to make it a reality.
<br /><br />
To those that see Web3 as DeFi, we ask this: Do you go on your web browser to access TradingView or other market tools as your homepage, or do you go check your social media, email, and news sites, as <i>well</i> as your money?
<br /><br />
Blockchain itself is more than just <i>money</i>, and so is Web3, and by extension P2P networks.
<br /><br />
So help us in our goals to level-up Web3
</p>
<img src={mario.src} alt="Mario Level Up"/>
<p>
To those that see Web3 as DeFi, we ask this: Do you go on your web browser to access TradingView or other market tools as your homepage, or do you go check your social media, email, and news sites, as <i>well</i> as your money?
</p>
<p>
Blockchain itself is more than just <i>money</i>, and so is Web3, and by extension P2P networks.
</p>
<p>
So help us in our goals to level-up Web3.
</p>
<div class="mario">
<img src={mario.src} alt="Mario Level Up"/>
</div>
<div>
<a href="/donate" class="btn-main">Donate</a>
</div>

View File

@ -0,0 +1,35 @@
@import "/src/styles/vars.scss";
#contribute {
position: relative;
display: flex;
align-items: center;
min-height: 71.1em;
background: $color-blue-charcoal;
&::before {
content: "";
position: absolute;
inset: 0;
background-image: url("/src/assets/contribute-bg.png");
background-position: 50%;
background-size: cover;
}
&::after {
content: "";
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.75);
}
.feature-group {
max-width: 72em;
margin: 9em 7.5%;
z-index: 1;
}
.mario {
margin-top: 2.5em;
}
}

View File

@ -5,33 +5,24 @@ import './Grid.scss';
<section id="grid" class="feature-grid">
<div>
<h3>Access the markets, aka DeFi</h3>
<p>Web3 commonly get mixed up with DeFi, however, while you should be able to access any decentralized website
or network, access to DeFi to manage your money is critical as well</p>
<p>Web3 commonly get mixed up with DeFi, however, while you should be able to access any decentralized website or network, access to DeFi to manage your money is critical as well.</p>
</div>
<div>
<h3>Access any decentralized or P2P network</h3>
<p>The basics of Web3 is the sum of all the open networks and ecosystems. You should be able to access and visit
any of these places.
<br/><br/>You can compare this to accessing things on Google, Facebook, Apple, or other networks/platforms
that are
generally walled gardens in the current web system
</p>
<p>The basics of Web3 is the sum of all the open networks and ecosystems. You should be able to access and visit any of these places.</p>
<p>You can compare this to accessing things on Google, Facebook, Apple, or other networks/platforms that are generally walled gardens in the current web system.</p>
</div>
<div>
<h3>Publish Freely</h3>
<p>A core tenant of Web3 is censorship-resistance. You should be able to freely post controversial (or even
things others just don't want to hear) information, such as news, blogging, or video. You should be allowed
to openly debate, educate, inform, or entertain without getting "de-platformed".</p>
<p>A core tenant of Web3 is censorship-resistance. You should be able to freely post controversial (or even things others just don't want to hear) information, such as news, blogging, or video. You should be allowed to openly debate, educate, inform, or entertain without getting "de-platformed".</p>
</div>
<div>
<h3>Socialize and Discover Freely</h3>
<p>While you have the ability to post, you should <i>also</i> have the ability to <i>read</i></p>
<p>While you have the ability to post, you should <i>also</i> have the ability to <i>read</i>.</p>
</div>
<div>
<h3>Own your web. Own your identity.</h3>
<p>You should be able to have your private data <b>be</b> and <b>stay</b> private unless you choose otherwise. This is achieved with your online web3 account, which serves as your identity and means of encrypting everything you do.
<br/><br/>If you want to share you can, but your data is yours, no one else's.</p>
<p>You should be able to have your private data <b>be</b> and <b>stay</b> private unless you choose otherwise. This is achieved with your online web3 account, which serves as your identity and means of encrypting everything you do.</p>
<p>If you want to share you can, but your data is yours, no one else's.</p>
</div>
</section>

View File

@ -1,3 +1,3 @@
#grid {
padding-bottom: 4.5em;
margin-bottom: 1.2em;
}

View File

@ -1,10 +1,11 @@
---
import './Building.scss';
import './NewWorld.scss';
---
<section id="building" class="tilted-bg-r">
<section id="new-world">
<div>
<div class="feature-group">
<h2>Community-Powered</h2>
<h3>Your Web, Your Rules</h3>
<p>
In summary, Web3 is about what you want to do, post, read, play, chat, or interact without others saying

View File

@ -0,0 +1,28 @@
@import "/src/styles/vars.scss";
#new-world {
> div {
position: relative;
display: flex;
justify-content: flex-end;
align-items: center;
max-width: 185.6em;
min-height: 75em;
margin: 0 auto;
&::before {
content: "";
position: absolute;
inset: 0;
background-image: url("/src/assets/new-world-bg.png");
background-position: 50%;
background-size: cover;
z-index: -1;
}
}
.feature-group {
max-width: 64em;
margin: 9em 7.5%;
}
}

View File

@ -1,14 +1,14 @@
---
import Layout from '../layouts/Layout.astro';
import Jumbotron from '../components/Vision/Jumbotron/Jumbotron.astro';
import Community from '../components/Vision/Community/Community.astro';
import Unify from '../components/Vision/Unify/Unify.astro';
import Grid from '../components/Vision/Grid/Grid.astro';
import People from '../components/Vision/People/People.astro';
import NoVc from '../components/Vision/NoVc/NoVc.astro';
---
<Layout view="vision" title="Vision - Lume Web">
<Jumbotron />
<Community />
<Unify />
<Grid />
<People />
<NoVc />
</Layout>

View File

@ -2,13 +2,13 @@
import Layout from '../layouts/Layout.astro';
import Jumbotron from '../components/What/Jumbotron/Jumbotron.astro';
import Grid from '../components/What/Grid/Grid.astro';
import Building from '../components/What/Building/Building.astro';
import Astronaut from '../components/What/Astronaut/Astronaut.astro';
import NewWorld from '../components/What/NewWorld/NewWorld.astro';
import Contribute from '../components/What/Contribute/Contribute.astro';
---
<Layout view="what" title="What is Web3? - Lume Web">
<Jumbotron />
<Grid />
<Building />
<Astronaut />
<NewWorld />
<Contribute />
</Layout>

View File

@ -70,19 +70,19 @@ a, button {
}
.btn-main {
display: inline-block;
padding: 0.5em 0.8em;
color: $color-black;
background: $color-aquamarine;
border: 0.05em solid $color-aquamarine;
border-radius: 0.25em;
transition: color $transition-duration, background $transition-duration;
white-space: nowrap;
display: inline-block;
padding: 0.5em 0.8em;
color: $color-black;
background: $color-aquamarine;
border: 0.05em solid $color-aquamarine;
border-radius: 0.25em;
transition: color $transition-duration, background $transition-duration;
white-space: nowrap;
&:hover {
color: $color-white;
background: $color-blue-charcoal;
}
&:hover {
color: $color-white;
background: $color-blue-charcoal;
}
}
.feature-group {
@ -106,7 +106,7 @@ a, button {
}
p, ul {
@include fluid-font-size(1.5rem);
@include fluid-font-size(1.375rem);
font-family: $font-family-jaldi;
line-height: 148%;
color: $color-cloud;
@ -149,7 +149,7 @@ a, button {
display: flex;
flex-direction: column;
justify-content: center;
padding: 2.95em 1.95em;
padding: 2.5em 2em;
background: $color-blue-charcoal;
border: 0.05em solid transparent;
border-radius: 0.5em;
@ -218,12 +218,12 @@ main.vision {
&::before {
content: "";
position: absolute;
top: -1em;
top: -0.5em;
left: 50%;
width: 103.1em;
height: 73.3em;
width: 132.9em;
height: 94.63334em;
transform: translate(-50%, 0);
background: url("/src/assets/vision-bg.png");
background: url("/src/assets/main-vision-bg.png");
background-size: contain;
z-index: -1;
}
@ -237,7 +237,7 @@ main.what {
left: 50%;
width: 151.3em;
height: 122.4em;
background: url("/src/assets/what-bg.png");
background: url("/src/assets/main-what-bg.png");
background-size: contain;
transform: translate(-50%, 0);
z-index: -1;
@ -252,7 +252,7 @@ main.donate {
left: 50%;
width: 144em;
height: 93.3em;
background: url("/src/assets/donate-bg.png");
background: url("/src/assets/main-donate-bg.png");
background-size: contain;
transform: translate(-50%, 0);
z-index: -1;