continue work on components

This commit is contained in:
cymon 2023-05-30 22:08:42 +00:00
parent 076ae962a1
commit b86e45511e
32 changed files with 457 additions and 96 deletions

BIN
src/assets/bitcoin-logo.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.4 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 175 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 10 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.1 KiB

BIN
src/assets/monero-logo.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.3 KiB

BIN
src/assets/patreon-logo.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.3 KiB

BIN
src/assets/paypal-logo.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.6 KiB

View File

@ -0,0 +1,16 @@
---
import './How.scss';
---
<section id="donate-how" class="tilted-bg-r">
<div class="feature-group">
<h2>How should I donate?</h2>
<h3>Donate via Gitcoin during funding rounds</h3>
<p>
This is because they will match you up to 150%. Currently, this is on the dates: June 7, 2022 June 22, 2022
</p>
<div>
<a href="#" class="btn-main">Gitcoin</a>
</div>
</div>
</section>

View File

@ -0,0 +1,33 @@
@import "../../../styles/colors.scss";
@import "../../../styles/mixins.scss";
#donate-how {
display: flex;
flex-direction: column;
justify-content: center;
margin-top: 4em;
@include fluid-padding-lr;
padding-top: 7em;
padding-bottom: 7em;
@include fluid-font-size(1.3125rem);
&::before {
background-image: url("../../../src/assets/donate-gfx-right.png");
background-position: 85% 100%;
background-repeat: no-repeat;
background-size: contain;
}
> div {
max-width: 29em;
}
@media screen and (width < 80rem) {
p {
background: rgba($body-bg-darker, 0.65);
border-radius: 0.5em;
padding: 0.3em 0.5em;
margin: -0.3em -0.5em;
}
}
}

View File

@ -0,0 +1,9 @@
---
import '../../../styles/jumbotron.scss';
---
<section id="donate-jumbotron" class="jumbotron">
<h1>
Lume is people-powered.
</h1>
</section>

View File

@ -0,0 +1,18 @@
---
import './Legal.scss';
---
<section id="donate-legal" class="tilted-bg-r">
<div>
<h2>Tax and Legal</h2>
<p>
<strong>Please understand that, according to United States regulations for our present incorporation status, donations are not currently tax-deductible.</strong>
</p>
<p>
If you are a corporation or business, planning to make a large donation, we recommend that you consult a CPA to ensure you understand the tax implications of your donated funds first.
</p>
<p>
All payments are nondeductible donations (unless you get consulted otherwise) and do not create any implied service contract or obligation for Hammer Technologies LLC to render any services.
</p>
</div>
</section>

View File

@ -0,0 +1,31 @@
@import "../../../styles/mixins.scss";
#donate-legal {
display: flex;
flex-direction: column;
justify-content: center;
padding: 11em 0 9em;
@include fluid-padding-lr;
h2 {
margin-bottom: 1em;
@include fluid-font-size(2.5rem);
line-height: 122%;
}
p {
margin-top: 1.5em;
font-family: var(--font-family-jaldi);
@include fluid-font-size(1.3125rem);
line-height: 157%;
color: var(--cloud);
}
strong {
@include fluid-font-size(1.625rem);
}
&::before {
bottom: -12%;
}
}

View File

@ -0,0 +1,56 @@
---
import './Methods.scss';
import bitcoinLogo from '../../../../src/assets/bitcoin-logo.png';
import litecoinLogo from '../../../../src/assets/litecoin-logo.png';
import moneroLogo from '../../../../src/assets/monero-logo.png';
import ethereumLogo from '../../../../src/assets/ethereum-logo.png';
import paypalLogo from '../../../../src/assets/paypal-logo.png';
import patreonLogo from '../../../../src/assets/patreon-logo.png';
---
<section id="donate-methods">
<div>
<h2>Donate Cryptocurrency</h2>
<div class="method-grid">
<div>
<div>
<img src={bitcoinLogo.src} alt="BTC" />
<h3>Bitcoin (BTC)</h3>
</div>
</div>
<div>
<div>
<img src={litecoinLogo.src} alt="LTC" />
<h3>Litecoin (LTC)</h3>
</div>
</div>
<div>
<div>
<img src={moneroLogo.src} alt="XMR" />
<h3>Monero (XMR)</h3>
</div>
</div>
<div>
<div>
<img src={ethereumLogo.src} alt="ETH" />
<h3>Ethereum (ETH)</h3>
</div>
</div>
<div>
<div>
<img src={paypalLogo.src} alt="Paypal" />
<h3>PayPal</h3>
</div>
</div>
<div>
<div>
<img src={patreonLogo.src} alt="Patreon" />
<h3>Patreon</h3>
</div>
</div>
</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.** If you are interested in donating through other means, please get in touch with us to discuss. If there is a cryptocurrency you wish to contribute with that we have not listed, please let me know!
</p>
</div>
</section>

View File

@ -0,0 +1,65 @@
@import "../../../styles/colors.scss";
@import "../../../styles/mixins.scss";
#donate-methods {
display: flex;
flex-direction: column;
justify-content: center;
padding: 9em 0 14em;
@include fluid-padding-lr;
h2 {
margin-bottom: 1em;
@include fluid-font-size(2.5rem);
line-height: 122%;
}
.method-grid {
display: grid;
grid-template-columns: repeat(1, 1fr);
grid-auto-rows: 1fr;
gap: 0.9em;
@include fluid-font-size(1.25rem);
@media screen and (width >= 48rem) {
grid-template-columns: repeat(2, 1fr);
}
> div {
display: flex;
flex-direction: column;
justify-content: center;
padding: 2.95em 1.95em;
background: $body-bg-darker;
border: 0.05em solid transparent;
border-radius: 0.5em;
transition: border-color 200ms;
&:hover {
border-color: var(--aquamarine);
}
> div {
display: flex;
align-items: center;
gap: 1em;
}
}
img {
@include fluid-width-height(3.4375rem, 3.4375rem);
}
h3 {
@include fluid-font-size(1.4375rem);
}
}
p {
margin-top: 1.5em;
font-family: var(--font-family-jaldi);
@include fluid-font-size(1.0625rem);
line-height: 157%;
color: var(--cloud);
}
}

View File

@ -0,0 +1,24 @@
---
import './Why.scss';
---
<section id="donate-why">
<div class="feature-group">
<h2>Help us break the pattern</h2>
<h3>Why should I donate to Lume?</h3>
<ul>
<li>You believe the internet should be free and open for everyone, regardless of political beliefs.</li>
<li>You want a neutral web accessible to everyday people.</li>
<li>You believe your data should be private and secure unless you choose to share it.</li>
<li>You want to ensure that you or someone else cant be censored or “de-platformed.”</li>
<li>You think people should have free access to information no matter how they choose to access it.</li>
<li>You believe in handling web abuse using legal and social means instead of censorship and restriction.</li>
</ul>
<p>
Every single day you use the Internet, your data is sold to companies to pay for your usage. Help us break the pattern by funding the creation of free and open-source Web3 tools.
</p>
<div>
<a href="#" class="btn-main">Donate</a>
</div>
</div>
</section>

View File

@ -0,0 +1,61 @@
@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(calc(43.9em + $min-margin), 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(43.9em + $margin), max($margin, calc(100vw - 28em - $margin)));
margin-right: $margin;
}
@media screen and (width >= $max-vw) {
margin-left: min(calc(43.9em + $max-margin), max($max-margin, calc(100vw - 28em - $max-margin)));
margin-right: $max-margin;
}
}
}
#donate-why {
position: relative;
margin: 9em 0;
&::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 92.2em;
max-width: 100vw;
height: 58.8em;
background-image: url("../../../assets/donate-why-bg.png");
background-position: 0%;
background-repeat: no-repeat;
background-size: contain;
}
> div {
@include fluid-font-size(1.3125rem);
@include fluid-margin;
max-width: 29em;
padding: 0.5em 0;
}
@media screen and (width < 80rem) {
p {
background: rgba($body-bg, 0.65);
border-radius: 0 0.5em 0.5em 0;
padding: 0.3em 0.5em;
margin: -0.3em -0.5em;
}
}
}

View File

@ -7,9 +7,11 @@ import meme4 from '../../../assets/meme-4.png';
---
<section id="home-meme" class="tilted-bg">
<div class="meme-text feature-group">
<h2>TITLE</h2>
<h3>Building a new world for your data</h3>
<div class="meme-item">
<div>
<img src={meme1.src} alt="Web 1" />
<h2>Web1</h2>
</div>
<p>
Right now, Lume has only one full-time developer and limited
helper staff! We need help from developers, fundraisers,
@ -17,22 +19,40 @@ import meme4 from '../../../assets/meme-4.png';
masses.
</p>
</div>
<div class="meme-grid">
<div>
<img src={meme1.src} alt="Web 1" />
Web1
</div>
<div class="meme-item">
<div>
<img src={meme2.src} />
Web2
<h2>Web2</h2>
</div>
<p>
Right now, Lume has only one full-time developer and limited
helper staff! We need help from developers, fundraisers,
funders, and contributors to bring the new internet to the
masses.
</p>
</div>
<div class="meme-item">
<div>
<img src={meme3.src} />
Crypto &amp; Defi
<h2>Crypto &amp; Defi</h2>
</div>
<p>
Right now, Lume has only one full-time developer and limited
helper staff! We need help from developers, fundraisers,
funders, and contributors to bring the new internet to the
masses.
</p>
</div>
<div class="meme-item">
<div>
<img src={meme4.src} />
Web3
<h2>Web3</h2>
</div>
<p>
Right now, Lume has only one full-time developer and limited
helper staff! We need help from developers, fundraisers,
funders, and contributors to bring the new internet to the
masses.
</p>
</div>
</section>

View File

@ -2,48 +2,61 @@
#home-meme {
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
@include fluid-padding-lr;
padding-top: 12em;
padding-bottom: 12em;
gap: 2em;
.meme-item {
display: flex;
align-items: center;
padding: 8% 12%;
@include fluid-font-size(1.3125rem);
}
gap: 2.5em;
max-width: 55em;
.meme-text {
width: 60%;
margin-right: 5%;
div {
flex-shrink: 0;
display: flex;
align-items: center;
gap: 2.5em;
}
.meme-grid {
display: grid;
grid-template-columns: 50% 50%;
gap: 1rem;
max-width: 22em;
img {
margin-bottom: 0.5em;
@include fluid-width-height(15.4375rem, 13.625rem);
}
> div {
h2 {
width: 4.5em;
@include fluid-font-size(1.5625rem);
font-weight: 700;
text-align: center;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
color: var(--aquamarine);
text-transform: uppercase;
}
p {
font-family: var(--font-family-jaldi);
@include fluid-font-size(1.3125rem);
line-height: 123.81%;
color: var(--cloud);
}
}
@media screen and (width < 48rem) {
#home-meme {
.meme-item {
div {
flex-direction: column;
padding: 20% 8%;
text-align: center;
gap: 0.5em;
}
.meme-text {
h2 {
width: auto;
margin: 0 0 10%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
}
}
}

View File

@ -1,6 +1,6 @@
---
import "./Footer.scss";
import logo from "../../../src/assets/lume-logo.png";
import logo from "../../../../src/assets/lume-logo.png";
---
<footer>

View File

@ -1,5 +1,5 @@
@import "../../styles/mixins.scss";
@import "../../styles/colors.scss";
@import "../../../styles/mixins.scss";
@import "../../../styles/colors.scss";
footer {
display: flex;
@ -62,7 +62,7 @@ footer {
span {
display: block;
background-image: url('../../assets/email-icon.webp');
background-image: url('../../../assets/email-icon.webp');
background-size: cover;
margin-right: 0.375em;
@include fluid-width-height(1.0625rem, 0.875rem);

View File

@ -1,4 +1,4 @@
@import "../../styles/mixins.scss";
@import "../../../styles/mixins.scss";
#join-community {
padding-top: 3.16%;

View File

@ -1,6 +1,6 @@
import React, { useState, useEffect } from 'react';
import './Navbar.scss';
import logo from '../../../src/assets/lume-logo.png';
import logo from '../../../../src/assets/lume-logo.png';
function Navbar({ view }) {
const [nav, setNav] = useState(false);

View File

@ -1,4 +1,4 @@
@import "../../styles/mixins.scss";
@import "../../../styles/mixins.scss";
nav {
display: flex;

View File

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

View File

@ -1,8 +1,8 @@
---
import './Jumbotron.scss';
import '../../../styles/jumbotron.scss';
---
<section id="what-jumbotron">
<section id="what-jumbotron" class="jumbotron">
<h1>
A new web that is fair and accessible to all, where each user can have a say in its infrastructure.
</h1>

View File

@ -1,18 +0,0 @@
@import "../../../styles/mixins.scss";
@import "../../../styles/colors.scss";
#what-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%;
letter-spacing: -0.06em;
text-align: center;
text-shadow: 1px 1px 2px rgba($body-bg-darker, 0.65);
}
}

View File

@ -1,8 +1,8 @@
---
import '../styles/global.scss';
import Navbar from '../components/Navbar/Navbar.jsx';
import Footer from '../components/Footer/Footer.astro';
import JoinCommunity from '../components/JoinCommunity/JoinCommunity.astro';
import Navbar from '../components/Layout/Navbar/Navbar.jsx';
import Footer from '../components/Layout/Footer/Footer.astro';
import JoinCommunity from '../components/Layout/JoinCommunity/JoinCommunity.astro';
export interface Props {
view: string;

View File

@ -1,7 +1,16 @@
---
import Layout from '../layouts/Layout.astro';
import Jumbotron from '../components/Donate/Jumbotron/Jumbotron.astro';
import Why from '../components/Donate/Why/Why.astro';
import How from '../components/Donate/How/How.astro';
import Methods from '../components/Donate/Methods/Methods.astro';
import Legal from '../components/Donate/Legal/Legal.astro';
---
<Layout view="donate" title="Donate - Lume Web">
<Jumbotron />
<Why />
<How />
<Methods />
<Legal />
</Layout>

View File

@ -39,7 +39,7 @@ body {
}
main {
@include fluid-font-size(0.0625rem);
@include fluid-font-size(0.625rem);
flex-grow: 1;
}
@ -66,11 +66,11 @@ main.vision {
&::before {
content: "";
position: absolute;
width: max(min(1031em, 100vw), 320em);
height: max(min(733em, 100vw), 400em);
width: max(min(103.1em, 100vw), 32em);
height: max(min(73.3em, 100vw), 40em);
top: 0;
left: 50%;
margin-left: max(-515.5em, -50vw);
margin-left: max(-51.55em, -50vw);
z-index: -1;
background: url(../assets/vision-bg.png);
background-size: contain;
@ -83,11 +83,11 @@ main.what {
&::before {
content: "";
position: absolute;
width: max(min(1513em, 100vw), 320em);
height: max(min(1224em, 100vw), 560em);
width: max(min(151.3em, 100vw), 32em);
height: max(min(122.4em, 100vw), 56em);
top: -20em;
left: 50%;
margin-left: max(-756.5em, -50vw);
margin-left: max(-75.65em, -50vw);
z-index: -1;
background: url(../assets/what-bg.png);
background-size: contain;
@ -116,13 +116,19 @@ main.what {
text-shadow: 1px 1px 2px rgba($body-bg-darker, 0.65);
}
p {
p, li {
font-family: var(--font-family-jaldi);
line-height: 167%;
color: var(--cloud);
transition: background 200ms;
}
ul {
list-style-type: disc;
margin-left: 1.5em;
margin-bottom: 0.78em;
}
.btn-main {
margin-top: 1.57em;
}
@ -149,7 +155,6 @@ main.what {
flex-direction: column;
justify-content: center;
padding: 2.95em 1.95em;
color: var(--white);
background: $body-bg-darker;
border: 0.05em solid transparent;
border-radius: 0.5em;
@ -183,10 +188,27 @@ main.what {
top: 0;
right: -5%;
bottom: 0;
left: -25%;
left: -5%;
margin: 2% 0;
background: $body-bg-darker;
transform: matrix(1, -0.04, 0.04, 1, 0, 0);
z-index: -1;
}
}
.tilted-bg-r {
position: relative;
&::before {
content: "";
position: absolute;
top: 0;
right: -5%;
bottom: 0;
left: -5%;
margin: 2% 0;
background: $body-bg-darker;
transform: matrix(1, 0.04, -0.04, 1, 0, 0);
z-index: -1;
}
}

View File

@ -1,18 +1,20 @@
@import "../../../styles/mixins.scss";
@import "../../../styles/colors.scss";
@import "./mixins.scss";
@import "./colors.scss";
#vision-jumbotron {
.jumbotron {
display: flex;
justify-content: center;
align-items: center;
height: 18.78em;
margin: 12.5em 7.5% 0;
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%;
letter-spacing: -0.06em;
text-align: center;
text-shadow: 1px 1px 2px rgba($body-bg-darker, 0.65);
text-shadow: 0.017em 0.017em 0.034em rgba($body-bg-darker, 0.65);
}
}