Merge branch 'lume-refactor'
# Conflicts: # .gitignore # README.md # package.json # public/robots.txt
This commit is contained in:
commit
4d0e991a61
|
|
@ -1,24 +1,2 @@
|
|||
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
|
||||
|
||||
# dependencies
|
||||
/node_modules
|
||||
/.pnp
|
||||
.pnp.js
|
||||
.parcel-cache
|
||||
|
||||
# testing
|
||||
/coverage
|
||||
|
||||
# production
|
||||
/build
|
||||
|
||||
# misc
|
||||
.DS_Store
|
||||
.env.local
|
||||
.env.development.local
|
||||
.env.test.local
|
||||
.env.production.local
|
||||
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
node_modules
|
||||
dist
|
||||
|
|
|
|||
|
|
@ -0,0 +1 @@
|
|||
{ "extends": ["stylelint-config-standard"] }
|
||||
|
|
@ -0,0 +1,47 @@
|
|||
# Astro Starter Kit: Minimal
|
||||
|
||||
```
|
||||
npm create astro@latest -- --template minimal
|
||||
```
|
||||
|
||||
[](https://stackblitz.com/github/withastro/astro/tree/latest/examples/minimal)
|
||||
[](https://codesandbox.io/p/sandbox/github/withastro/astro/tree/latest/examples/minimal)
|
||||
[](https://codespaces.new/withastro/astro?devcontainer_path=.devcontainer/minimal/devcontainer.json)
|
||||
|
||||
> 🧑🚀 **Seasoned astronaut?** Delete this file. Have fun!
|
||||
|
||||
## 🚀 Project Structure
|
||||
|
||||
Inside of your Astro project, you'll see the following folders and files:
|
||||
|
||||
```
|
||||
/
|
||||
├── public/
|
||||
├── src/
|
||||
│ └── pages/
|
||||
│ └── index.astro
|
||||
└── package.json
|
||||
```
|
||||
|
||||
Astro looks for `.astro` or `.md` files in the `src/pages/` directory. Each page is exposed as a route based on its file name.
|
||||
|
||||
There's nothing special about `src/components/`, but that's where we like to put any Astro/React/Vue/Svelte/Preact components.
|
||||
|
||||
Any static assets, like images, can be placed in the `public/` directory.
|
||||
|
||||
## 🧞 Commands
|
||||
|
||||
All commands are run from the root of the project, from a terminal:
|
||||
|
||||
| Command | Action |
|
||||
| :------------------------ | :----------------------------------------------- |
|
||||
| `npm install` | Installs dependencies |
|
||||
| `npm run dev` | Starts local dev server at `localhost:3000` |
|
||||
| `npm run build` | Build your production site to `./dist/` |
|
||||
| `npm run preview` | Preview your build locally, before deploying |
|
||||
| `npm run astro ...` | Run CLI commands like `astro add`, `astro check` |
|
||||
| `npm run astro -- --help` | Get help using the Astro CLI |
|
||||
|
||||
## 👀 Want to learn more?
|
||||
|
||||
Feel free to check [our documentation](https://docs.astro.build) or jump into our [Discord server](https://astro.build/chat).
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
import { defineConfig } from 'astro/config';
|
||||
import tailwind from '@astrojs/tailwind';
|
||||
import react from '@astrojs/react';
|
||||
import image from '@astrojs/image';
|
||||
|
||||
// https://astro.build/config
|
||||
export default defineConfig({
|
||||
integrations: [tailwind({ config: { applyBaseStyles: false } }), image(), react()],
|
||||
});
|
||||
54
package.json
54
package.json
|
|
@ -1,43 +1,33 @@
|
|||
{
|
||||
"name": "react-package",
|
||||
"name": "lume-web",
|
||||
"type": "module",
|
||||
"version": "0.0.1",
|
||||
"scripts": {
|
||||
"start": "PORT=4321 parcel index.html && parcel watch index.html",
|
||||
"build": "parcel build index.html --public-url ./ --no-scope-hoist",
|
||||
"ssr": "node server/index.js"
|
||||
"dev": "TAILWIND_MODE=watch astro dev",
|
||||
"start": "astro dev",
|
||||
"build": "astro build",
|
||||
"preview": "astro preview",
|
||||
"astro": "astro"
|
||||
},
|
||||
"dependencies": {
|
||||
"@babel/preset-react": "^7.18.6",
|
||||
"@babel/register": "^7.21.0",
|
||||
"compression": "^1.7.4",
|
||||
"@astrojs/image": "^0.16.6",
|
||||
"@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",
|
||||
"dynamic-react-grid": "^0.2.0",
|
||||
"express": "^4.18.2",
|
||||
"hamburger-react": "^2.5.0",
|
||||
"ignore-styles": "^5.0.1",
|
||||
"kill-port": "^2.0.1",
|
||||
"ngrok": "^4.3.3",
|
||||
"react": "18.2.0",
|
||||
"qrcode": "^1.5.3",
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-router-dom": "6.10.0",
|
||||
"sass": "^1.62.1",
|
||||
"tailwindcss": "^3.3.2",
|
||||
"typewriter-effect": "^2.19.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/preset-env": "^7.21.4",
|
||||
"assert": "^2.0.0",
|
||||
"browserify-zlib": "^0.2.0",
|
||||
"browserslist": "4.21.5",
|
||||
"buffer": "^5.7.1",
|
||||
"compression-webpack-plugin": "^10.0.0",
|
||||
"crypto-browserify": "^3.12.0",
|
||||
"parcel": "2.8.3",
|
||||
"parcel-reporter-static-files-copy": "1.5.0",
|
||||
"path-browserify": "^1.0.1",
|
||||
"process": "^0.11.10",
|
||||
"punycode": "^1.4.1",
|
||||
"querystring-es3": "^0.2.1",
|
||||
"stream-browserify": "^3.0.0",
|
||||
"stream-http": "^3.2.0",
|
||||
"string_decoder": "^1.3.0",
|
||||
"url": "^0.11.0",
|
||||
"util": "^0.12.5"
|
||||
"stylelint": "^15.6.0",
|
||||
"stylelint-config-standard": "^33.0.0"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,7 @@
|
|||
module.exports = {
|
||||
plugins: [
|
||||
require('tailwindcss/nesting'),
|
||||
require('tailwindcss'),
|
||||
require('autoprefixer')
|
||||
]
|
||||
};
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 128 128">
|
||||
<path d="M50.4 78.5a75.1 75.1 0 0 0-28.5 6.9l24.2-65.7c.7-2 1.9-3.2 3.4-3.2h29c1.5 0 2.7 1.2 3.4 3.2l24.2 65.7s-11.6-7-28.5-7L67 45.5c-.4-1.7-1.6-2.8-2.9-2.8-1.3 0-2.5 1.1-2.9 2.7L50.4 78.5Zm-1.1 28.2Zm-4.2-20.2c-2 6.6-.6 15.8 4.2 20.2a17.5 17.5 0 0 1 .2-.7 5.5 5.5 0 0 1 5.7-4.5c2.8.1 4.3 1.5 4.7 4.7.2 1.1.2 2.3.2 3.5v.4c0 2.7.7 5.2 2.2 7.4a13 13 0 0 0 5.7 4.9v-.3l-.2-.3c-1.8-5.6-.5-9.5 4.4-12.8l1.5-1a73 73 0 0 0 3.2-2.2 16 16 0 0 0 6.8-11.4c.3-2 .1-4-.6-6l-.8.6-1.6 1a37 37 0 0 1-22.4 2.7c-5-.7-9.7-2-13.2-6.2Z" />
|
||||
<style>
|
||||
path { fill: #000; }
|
||||
@media (prefers-color-scheme: dark) {
|
||||
path { fill: #FFF; }
|
||||
}
|
||||
</style>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 749 B |
|
|
@ -1,3 +1,2 @@
|
|||
# https://www.robotstxt.org/robotstxt.html
|
||||
User-agent: *
|
||||
Disallow:
|
||||
User-Agent: *
|
||||
Allow: /
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 1.1 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 843 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 37 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 787 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 270 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: 181 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 8.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 110 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 130 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 254 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 273 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 210 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 525 KiB |
|
|
@ -0,0 +1,16 @@
|
|||
---
|
||||
import './How.scss';
|
||||
---
|
||||
|
||||
<section id="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="https://gitcoin.co/grants/4722/lume-web-web3-accessibility-freedom-and-education" class="btn-main">Gitcoin</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
@import "/src/styles/mixins.scss";
|
||||
@import "/src/styles/vars.scss";
|
||||
|
||||
#how {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
margin-top: 8em;
|
||||
@include fluid-padding-lr;
|
||||
padding-top: 14em;
|
||||
padding-bottom: 16em;
|
||||
|
||||
&::before {
|
||||
background-image: url("/src/assets/donate-gfx-right.png");
|
||||
background-position: 85% 100%;
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
}
|
||||
|
||||
.feature-group {
|
||||
max-width: 64em;
|
||||
}
|
||||
|
||||
@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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
---
|
||||
import '../../../styles/jumbotron.scss';
|
||||
---
|
||||
|
||||
<section id="jumbotron">
|
||||
<h1>
|
||||
Lume is people-powered.
|
||||
</h1>
|
||||
</section>
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
---
|
||||
import './Legal.scss';
|
||||
---
|
||||
|
||||
<section id="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>
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
@import "/src/styles/mixins.scss";
|
||||
@import "/src/styles/vars.scss";
|
||||
|
||||
#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.8125rem);
|
||||
line-height: 122%;
|
||||
}
|
||||
|
||||
p {
|
||||
margin-top: 1.5em;
|
||||
font-family: $font-family-jaldi;
|
||||
@include fluid-font-size(1.375rem);
|
||||
line-height: 157%;
|
||||
color: $color-cloud;
|
||||
}
|
||||
|
||||
strong {
|
||||
@include fluid-font-size(1.625rem);
|
||||
}
|
||||
|
||||
&::before {
|
||||
bottom: -12%;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,150 @@
|
|||
---
|
||||
import './Methods.scss';
|
||||
import QRCode from 'qrcode';
|
||||
|
||||
const currencies = [];
|
||||
|
||||
const addCurrency = async (id, title, address) => {
|
||||
currencies.push({
|
||||
id: id,
|
||||
title: title,
|
||||
address: address,
|
||||
svgLogo: await import(`./icons/${id}.svg?raw`),
|
||||
qrSmall: await QRCode.toDataURL(address, { version: 6, scale: 1, margin: 1 }),
|
||||
qrLarge: await QRCode.toDataURL(address, { version: 6, scale: 7, margin: 2 })
|
||||
});
|
||||
};
|
||||
|
||||
await addCurrency('bitcoin', 'Bitcoin (BTC)', 'bc1q9xq2w4w2hjc240rs6mf0g8gpzz3rmcz4h77a2a');
|
||||
await addCurrency('litecoin', 'Litecoin (LTC)', 'ltc1qgk6fc4u6grqyhfzw208477ze35vrr5tcwhq8zq');
|
||||
await addCurrency('ethereum', 'Ethereum (ETH, USDT/USDC, ERC20)', '0x63cd2C691632720Ff2ABDD0b6AABA2466D3Fe468');
|
||||
await addCurrency('polygon', 'Polygon (MATIC)', '0x63cd2C691632720Ff2ABDD0b6AABA2466D3Fe468');
|
||||
await addCurrency('solana', 'Solana (SOL)', '4nMRucCuqttipwQXm31vBgoaxDW6o25TnD8fj1imviCu');
|
||||
await addCurrency('cardano', 'Cardano (ADA)', 'addr1q9jd69s53pdy9j567a27ac6uvc2966x0rjz2l9sxy4y5w8383jl87mrdf6uuk9ja7lmagm2p4vw30sa42kjylxxrdufqucgst6');
|
||||
await addCurrency('siacoin', 'Siacoin (SC)', '7506caa950cdddbaec8f465937b50324e942ac6f5280a053662e58e3cc8bdb543ab88ccd5c23');
|
||||
await addCurrency('monero', 'Monero (XMR)', '48A33fSyFo9YAiux3KHKVBagPGvqmcr2h4oy5pufJn6NUWyZsPF6PAufmrET3gLJjsLwxfU7HU9xe8mEeCqtHqvZN3Ly12h');
|
||||
await addCurrency('handshake', 'Handshake (HNS)', 'hs1qe67ak3j2u4yrq0qnfs2hmycxqdvaf9v5rjsxzy');
|
||||
await addCurrency('cosmos', 'Cosmos (ATOM)', 'cosmos1pvy8zyzqwz2r2jl9j9d3zrfmg6dqc5hyhj6d5z');
|
||||
await addCurrency('secret', 'Secret (SCRT)', 'secret18377vc3af588ggauhrpuyfd954lmmu05xqhf0y');
|
||||
await addCurrency('algorand', 'Algorand (ALGO)', '3QBE5TZ63TF5W7V2QRJWRB72M7INQLA3RZW4XHD3ISRE7CRYCVNU4EEVAE');
|
||||
---
|
||||
|
||||
<section id="methods">
|
||||
<div>
|
||||
<h2>Donate Cryptocurrency</h2>
|
||||
<div class="method-grid">
|
||||
{currencies.map(currency => (
|
||||
<div id={'donate-' + currency.id}>
|
||||
<div>
|
||||
<Fragment set:html={currency.svgLogo.default} />
|
||||
<h3>{currency.title}</h3>
|
||||
<img onclick={"openDialog('" + currency.qrLarge + "')"} src={currency.qrSmall}/>
|
||||
</div>
|
||||
<div class="address">
|
||||
<button onclick="copyToClipboard(this)"></button>
|
||||
<div>{currency.address}</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
<div id="donate-paypal">
|
||||
<div>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 154.728 190.5">
|
||||
<g transform="translate(898.192 276.071)">
|
||||
<path clip-path="none" d="M-837.663-237.968a5.49 5.49 0 0 0-5.423 4.633l-9.013 57.15-8.281 52.514-.005.044.01-.044 8.281-52.514c.421-2.669 2.719-4.633 5.42-4.633h26.404c26.573 0 49.127-19.387 53.246-45.658.314-1.996.482-3.973.52-5.924v-.003h-.003c-6.753-3.543-14.683-5.565-23.372-5.565z" fill="#001c64"/>
|
||||
<path clip-path="none" d="M-766.506-232.402c-.037 1.951-.207 3.93-.52 5.926-4.119 26.271-26.673 45.658-53.246 45.658h-26.404c-2.701 0-4.999 1.964-5.42 4.633l-8.281 52.514-5.197 32.947a4.46 4.46 0 0 0 4.405 5.153h28.66a5.49 5.49 0 0 0 5.423-4.633l7.55-47.881c.423-2.669 2.722-4.636 5.423-4.636h16.876c26.573 0 49.124-19.386 53.243-45.655 2.924-18.649-6.46-35.614-22.511-44.026z" fill="#0070e0"/>
|
||||
<path clip-path="none" d="M-870.225-276.071a5.49 5.49 0 0 0-5.423 4.636l-22.489 142.608a4.46 4.46 0 0 0 4.405 5.156h33.351l8.281-52.514 9.013-57.15a5.49 5.49 0 0 1 5.423-4.633h47.782c8.691 0 16.621 2.025 23.375 5.563.46-23.917-19.275-43.666-46.412-43.666z" fill="#003087"/>
|
||||
</g>
|
||||
</svg>
|
||||
<h3>PayPal</h3>
|
||||
<form action="https://www.paypal.com/donate" method="post" target="_top">
|
||||
<input type="hidden" name="hosted_button_id" value="LKDLTQQRQV2U8">
|
||||
<button class="btn-main">Donate</a>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<div id="donate-patreon">
|
||||
<div>
|
||||
<svg version="1.1" viewBox="0 -4.5 256 256" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M45.1355837,0 L45.1355837,246.35001 L0,246.35001 L0,0 L45.1355837,0 Z M163.657111,0 C214.65668,0 256,41.3433196 256,92.3428889 C256,143.342458 214.65668,184.685778 163.657111,184.685778 C112.657542,184.685778 71.3142222,143.342458 71.3142222,92.3428889 C71.3142222,41.3433196 112.657542,0 163.657111,0 Z" fill="#FF424D"/>
|
||||
</svg>
|
||||
<h3>Patreon</h3>
|
||||
<a class="btn-main" href="https://www.patreon.com/bePatron?u=71702133">Become a Patron!</a>
|
||||
</div>
|
||||
</div>
|
||||
<div id="donate-liberapay">
|
||||
<div>
|
||||
<svg viewBox="0 0 80 80" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect fill="#f6c915" width="80" height="80" rx="8"/>
|
||||
<path fill="#FFF" d="M32.73 56.2651c-2.5867 0-4.6175-.3376-6.0925-1.0107s-2.5308-1.5936-3.1708-2.7611-.9458-2.4933-.9275-4.015.2267-3.1234.6284-4.8357l6.9391-29.0143 8.47-1.3108-7.595 31.4733c-.1458.655-.2275 1.2567-.2458 1.8025s.0817 1.0292.3 1.4475.5917.7566 1.12 1.0108 1.2658.42 2.2133.4925zM40.5333 28.0209c1.46-.4367 3.1267-.8284 5.0025-1.175s3.9075-.5183 6.0933-.5183 3.7985.3092 5.2726.9283 2.6864 1.4667 3.6341 2.5409 1.6475 2.3316 2.1024 3.77.6832 2.9783.6832 4.6183c0 2.6583-.4373 5.09-1.3214 7.2942s-2.076 4.1075-3.6237 5.71-3.4059 2.851-5.5763 3.7475-4.5235 1.3344-7.0718 1.3344c-1.2391 0-2.4775-.1104-3.7158-.3296l-2.4592 9.8912h-8.0865zM43.4867 49.3867c.6192.1458 1.3842.2133 2.295.2133 1.42 0 2.7133-.2583 3.8792-.7875s2.1583-1.265 2.9783-2.2125 1.4557-2.0842 1.9117-3.415.6827-2.795.6827-4.3983-.3467-2.8958-1.0379-3.9892-1.894-1.6391-3.6057-1.6391c-1.1667 0-2.2592.1092-3.2792.3283z"/>
|
||||
</svg>
|
||||
<h3>Liberapay</h3>
|
||||
<a class="btn-main" href="https://liberapay.com/lumeweb/donate">Donate</a>
|
||||
</div>
|
||||
</div>
|
||||
<div id="donate-github">
|
||||
<div>
|
||||
<svg viewBox="0 0 98 96" xmlns="http://www.w3.org/2000/svg">
|
||||
<path 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" fill="#fff"/>
|
||||
</svg>
|
||||
<h3>GitHub Sponsors</h3>
|
||||
<a class="btn-main" href="https://github.com/sponsors/LumeWeb">Donate</a>
|
||||
</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.**
|
||||
</p>
|
||||
<p>
|
||||
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>
|
||||
<dialog id="qr-dialog"></dialog>
|
||||
<script is:inline>
|
||||
var
|
||||
msgCallback,
|
||||
msgTimeout,
|
||||
qrDialog = document.getElementById('qr-dialog');
|
||||
|
||||
function copyToClipboard(element) {
|
||||
var
|
||||
range = document.createRange(),
|
||||
selection = window.getSelection();
|
||||
|
||||
if(msgCallback) {
|
||||
clearTimeout(msgTimeout);
|
||||
msgCallback();
|
||||
}
|
||||
|
||||
range.selectNode(element.nextElementSibling); // select address container
|
||||
selection.removeAllRanges(); // clear current selection
|
||||
selection.addRange(range); // select address
|
||||
document.execCommand('copy'); // copy
|
||||
selection.removeAllRanges(); // deselect
|
||||
|
||||
element.classList.add('success');
|
||||
|
||||
msgCallback = function() {
|
||||
element.classList.remove('success');
|
||||
msgCallback = undefined;
|
||||
}
|
||||
|
||||
msgTimeout = window.setTimeout(msgCallback, 5000);
|
||||
}
|
||||
|
||||
function openDialog(qrLarge) {
|
||||
document.body.classList.add('scroll-lock');
|
||||
qrDialog.innerHTML = '<img src="' + qrLarge + '"/>';
|
||||
qrDialog.showModal();
|
||||
}
|
||||
|
||||
qrDialog.addEventListener('close', function() {
|
||||
document.body.classList.remove('scroll-lock');
|
||||
});
|
||||
|
||||
qrDialog.addEventListener('click', function(event) {
|
||||
if (event.target === this) {
|
||||
this.close();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</section>
|
||||
|
|
@ -0,0 +1,287 @@
|
|||
@import "/src/styles/mixins.scss";
|
||||
@import "/src/styles/vars.scss";
|
||||
|
||||
#methods {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
margin: 2em 0 6em;
|
||||
padding-top: 3em;
|
||||
@include fluid-margin-lr;
|
||||
font-family: $font-family-jaldi;
|
||||
|
||||
h2 {
|
||||
margin-bottom: 1em;
|
||||
@include fluid-font-size(2.8125rem);
|
||||
line-height: 122%;
|
||||
}
|
||||
|
||||
.method-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(1, 1fr);
|
||||
gap: 2em;
|
||||
margin-bottom: 4em;
|
||||
|
||||
@media screen and (min-width: 48rem) {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
|
||||
> div {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 4em 4em 1em;
|
||||
background: $color-blue-charcoal;
|
||||
border: 0.1em solid transparent;
|
||||
border-radius: 1em;
|
||||
transition: border-color 200ms;
|
||||
|
||||
&:hover {
|
||||
border-color: $color-aquamarine;
|
||||
}
|
||||
|
||||
> div:first-child {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 2em;
|
||||
margin-bottom: 3em;
|
||||
|
||||
svg {
|
||||
flex-shrink: 0;
|
||||
@include fluid-max-width-height(3.4375rem, 3.4375rem);
|
||||
}
|
||||
|
||||
h3 {
|
||||
flex-grow: 1;
|
||||
font-family: $font-family-jetbrains-mono;
|
||||
@include fluid-font-size(1.5rem);
|
||||
}
|
||||
|
||||
img {
|
||||
@include fluid-width-height(3.4375rem, 3.4375rem);
|
||||
image-rendering: pixelated;
|
||||
cursor: zoom-in;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.address {
|
||||
display: flex;
|
||||
margin-bottom: 3em;
|
||||
color: $color-cloud;
|
||||
|
||||
div {
|
||||
order: 1;
|
||||
flex-grow: 1;
|
||||
position: relative;
|
||||
@include fluid-font-size(1.375rem);
|
||||
word-break: break-all;
|
||||
user-select: all;
|
||||
}
|
||||
|
||||
button {
|
||||
order: 2;
|
||||
flex-shrink: 0;
|
||||
@include fluid-width-height(1.875rem, 1.875rem);
|
||||
@include fluid-margin-lr-rem(0.78125rem);
|
||||
mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 17.25v3.375c0 .621-.504 1.125-1.125 1.125h-9.75a1.125 1.125 0 01-1.125-1.125V7.875c0-.621.504-1.125 1.125-1.125H6.75a9.06 9.06 0 011.5.124m7.5 10.376h3.375c.621 0 1.125-.504 1.125-1.125V11.25c0-4.46-3.243-8.161-7.5-8.876a9.06 9.06 0 00-1.5-.124H9.375c-.621 0-1.125.504-1.125 1.125v3.5m7.5 10.375H9.375a1.125 1.125 0 01-1.125-1.125v-9.25m12 6.625v-1.875a3.375 3.375 0 00-3.375-3.375h-1.5a1.125 1.125 0 01-1.125-1.125v-1.5a3.375 3.375 0 00-3.375-3.375H9.75" /></svg>');
|
||||
background: $color-cloud;
|
||||
transition: background $transition-duration;
|
||||
|
||||
&:hover {
|
||||
background: $color-white;
|
||||
}
|
||||
|
||||
&.success {
|
||||
mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>');
|
||||
background: $color-aquamarine;
|
||||
}
|
||||
}
|
||||
|
||||
button:hover + div, button.success + div {
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: -0.5em;
|
||||
padding: 0.5em;
|
||||
background: $color-blue-charcoal;
|
||||
animation: $transition-duration overlay-opacity forwards;
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: "Copy to Clipboard";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: -0.5em;
|
||||
padding: 0 0.5em;
|
||||
background: rgba($color-blue-charcoal, 0.75);
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
color: $color-white;
|
||||
border-radius: 0.5em 0 0 0.5em;
|
||||
animation: $transition-duration hint-opacity forwards;
|
||||
transition: color $transition-duration;
|
||||
}
|
||||
}
|
||||
|
||||
button.success + div {
|
||||
&::after {
|
||||
content: "Copied to Clipboard";
|
||||
color: $color-aquamarine;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
margin-top: 1em;
|
||||
@include fluid-font-size(1.25rem);
|
||||
line-height: 157%;
|
||||
color: $color-cloud;
|
||||
}
|
||||
|
||||
.btn-main {
|
||||
@include fluid-font-size(1.5rem);
|
||||
}
|
||||
|
||||
#donate-bitcoin:hover {
|
||||
border-color: #f7931a;
|
||||
}
|
||||
|
||||
#donate-litecoin:hover {
|
||||
border-color: #345d9d;
|
||||
}
|
||||
|
||||
#donate-ethereum:hover {
|
||||
border-color: #8c8c8c;
|
||||
}
|
||||
|
||||
#donate-polygon:hover {
|
||||
border-color: #8247e5;
|
||||
}
|
||||
|
||||
#donate-solana:hover {
|
||||
border-color: #dc1fff;
|
||||
}
|
||||
|
||||
#donate-cardano:hover {
|
||||
border-color: #0033ad;
|
||||
}
|
||||
|
||||
#donate-siacoin:hover {
|
||||
border-color: #20ee82;
|
||||
}
|
||||
|
||||
#donate-monero:hover {
|
||||
border-color: #f26822;
|
||||
}
|
||||
|
||||
#donate-handshake:hover {
|
||||
border-color: #fff;
|
||||
}
|
||||
|
||||
#donate-cosmos:hover {
|
||||
border-color: #6f7390;
|
||||
}
|
||||
|
||||
#donate-secret:hover {
|
||||
border-color: #fff;
|
||||
}
|
||||
|
||||
#donate-algorand:hover {
|
||||
border-color: #fff;
|
||||
}
|
||||
|
||||
#donate-paypal {
|
||||
&:hover {
|
||||
border-color: #0070e0;
|
||||
}
|
||||
|
||||
.btn-main {
|
||||
color: #fff;
|
||||
background: #0070e0;
|
||||
border-color: #0070e0;
|
||||
|
||||
&:hover {
|
||||
background: inherit;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#donate-patreon {
|
||||
&:hover {
|
||||
border-color: #ff424d;
|
||||
}
|
||||
|
||||
.btn-main {
|
||||
color: #fff;
|
||||
background: #ff424d;
|
||||
border-color: #ff424d;
|
||||
|
||||
&:hover {
|
||||
background: inherit;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#donate-liberapay {
|
||||
&:hover {
|
||||
border-color: #f6c915;
|
||||
}
|
||||
|
||||
.btn-main {
|
||||
color: #000;
|
||||
background: #f6c915;
|
||||
border-color: #f6c915;
|
||||
|
||||
&:hover {
|
||||
color: inherit;
|
||||
background: inherit;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#donate-github {
|
||||
&:hover {
|
||||
border-color: #fff;
|
||||
}
|
||||
|
||||
.btn-main {
|
||||
color: #000;
|
||||
background: #fff;
|
||||
border-color: #fff;
|
||||
|
||||
&:hover {
|
||||
color: inherit;
|
||||
background: inherit;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#qr-dialog {
|
||||
padding: 0;
|
||||
|
||||
&::backdrop {
|
||||
background: rgba($color-black, 0.85);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes overlay-opacity {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 0.75;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes hint-opacity {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
<svg viewBox="0 0 113 113.4" xmlns="http://www.w3.org/2000/svg">
|
||||
<polygon fill="#fff" points="19.6 113.4 36 85 52.4 56.7 68.7 28.3 71.4 23.8 72.6 28.3 77.6 47 72 56.7 55.6 85 39.3 113.4 58.9 113.4 75.3 85 83.8 70.3 87.8 85 95.4 113.4 113 113.4 105.4 85 97.8 56.7 95.8 49.4 108 28.3 90.2 28.3 89.6 26.2 83.4 3 82.6 0 65.5 0 65.1 0.6 49.1 28.3 32.7 56.7 16.4 85 0 113.4 19.6 113.4"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 390 B |
|
|
@ -0,0 +1,4 @@
|
|||
<svg viewBox="0 0 4091.27 4091.73" fill-rule="evenodd" clip-rule="evenodd" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill="#F7931A" fill-rule="nonzero" d="M4030.06 2540.77c-273.24,1096.01 -1383.32,1763.02 -2479.46,1489.71 -1095.68,-273.24 -1762.69,-1383.39 -1489.33,-2479.31 273.12,-1096.13 1383.2,-1763.19 2479,-1489.95 1096.06,273.24 1763.03,1383.51 1489.76,2479.57l0.02 -0.02z"/>
|
||||
<path fill="white" fill-rule="nonzero" d="M2947.77 1754.38c40.72,-272.26 -166.56,-418.61 -450,-516.24l91.95 -368.8 -224.5 -55.94 -89.51 359.09c-59.02,-14.72 -119.63,-28.59 -179.87,-42.34l90.16 -361.46 -224.36 -55.94 -92 368.68c-48.84,-11.12 -96.81,-22.11 -143.35,-33.69l0.26 -1.16 -309.59 -77.31 -59.72 239.78c0,0 166.56,38.18 163.05,40.53 90.91,22.69 107.35,82.87 104.62,130.57l-104.74 420.15c6.26,1.59 14.38,3.89 23.34,7.49 -7.49,-1.86 -15.46,-3.89 -23.73,-5.87l-146.81 588.57c-11.11,27.62 -39.31,69.07 -102.87,53.33 2.25,3.26 -163.17,-40.72 -163.17,-40.72l-111.46 256.98 292.15 72.83c54.35,13.63 107.61,27.89 160.06,41.3l-92.9 373.03 224.24 55.94 92 -369.07c61.26,16.63 120.71,31.97 178.91,46.43l-91.69 367.33 224.51 55.94 92.89 -372.33c382.82,72.45 670.67,43.24 791.83,-303.02 97.63,-278.78 -4.86,-439.58 -206.26,-544.44 146.69,-33.83 257.18,-130.31 286.64,-329.61l-0.07 -0.05zm-512.93 719.26c-69.38,278.78 -538.76,128.08 -690.94,90.29l123.28 -494.2c152.17,37.99 640.17,113.17 567.67,403.91zm69.43 -723.3c-63.29,253.58 -453.96,124.75 -580.69,93.16l111.77 -448.21c126.73,31.59 534.85,90.55 468.94,355.05l-0.02 0z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.5 KiB |
|
|
@ -0,0 +1,32 @@
|
|||
<svg version="1.1" viewBox="0 0 375 346.5" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill="#0033AD" d="M102.8,172c-0.8,13.9,9.9,25.8,23.8,26.6c0.5,0,1,0,1.5,0c14,0,25.3-11.3,25.2-25.3c0-14-11.3-25.3-25.3-25.2 C114.6,148.1,103.5,158.6,102.8,172z"/>
|
||||
<path fill="#0033AD" d="M8.6,165.5c-4.5-0.3-8.4,3.2-8.6,7.7s3.2,8.4,7.7,8.6c4.5,0.3,8.3-3.2,8.6-7.7 C16.6,169.6,13.1,165.8,8.6,165.5C8.6,165.5,8.6,165.5,8.6,165.5z"/>
|
||||
<path fill="#0033AD" d="M101.2,25.4c4-2,5.6-7,3.6-11c-2-4-7-5.6-11-3.6c-4,2-5.6,6.9-3.6,10.9C92.2,25.8,97.1,27.5,101.2,25.4 C101.1,25.4,101.2,25.4,101.2,25.4z"/>
|
||||
<path fill="#0033AD" d="M126.8,70.1c6.2-3.1,8.7-10.7,5.6-16.9s-10.7-8.7-16.9-5.6c-6.2,3.1-8.7,10.7-5.6,16.9 C113,70.7,120.6,73.2,126.8,70.1z"/>
|
||||
<path fill="#0033AD" d="M40.6,100.8c4.8,3.1,11.2,1.8,14.4-3c3.1-4.8,1.8-11.2-3-14.4c-4.8-3.1-11.2-1.8-14.4,3c0,0,0,0,0,0 C34.4,91.2,35.8,97.7,40.6,100.8z"/>
|
||||
<path fill="#0033AD" d="M55.9,161c-7-0.4-12.9,4.9-13.3,11.9s4.9,12.9,11.9,13.3c7,0.4,12.9-4.9,13.3-11.9c0,0,0,0,0,0 C68.2,167.4,62.9,161.4,55.9,161z"/>
|
||||
<path fill="#0033AD" d="M42,245.7c-5.1,2.6-7.2,8.8-4.6,14c2.6,5.1,8.8,7.2,14,4.6c5.1-2.6,7.2-8.8,4.6-14c0,0,0,0,0,0 C53.4,245.2,47.1,243.1,42,245.7C42,245.7,42,245.7,42,245.7z"/>
|
||||
<path fill="#0033AD" d="M91,134.9c6.9,4.5,16.1,2.6,20.5-4.3c4.5-6.9,2.6-16.1-4.3-20.5c-6.9-4.5-16.1-2.6-20.5,4.3 C82.2,121.2,84.1,130.4,91,134.9C91,134.9,91,134.9,91,134.9z"/>
|
||||
<path fill="#0033AD" d="M246.5,69.1c5.8,3.8,13.7,2.2,17.5-3.6s2.2-13.7-3.6-17.5c-5.8-3.8-13.7-2.2-17.5,3.6c0,0,0,0,0,0 C239,57.5,240.6,65.3,246.5,69.1C246.5,69.1,246.5,69.1,246.5,69.1z"/>
|
||||
<path fill="#0033AD" d="M272.3,24.6c3.8,2.5,8.8,1.4,11.3-2.4s1.4-8.8-2.4-11.3c-3.8-2.5-8.8-1.4-11.3,2.3 C267.5,17,268.6,22.1,272.3,24.6C272.3,24.6,272.3,24.6,272.3,24.6z"/>
|
||||
<path fill="#0033AD" d="M248.4,147.9c-13.9-0.8-25.9,9.9-26.6,23.8c-0.8,13.9,9.9,25.9,23.8,26.6c0.5,0,1,0,1.4,0 c13.9,0,25.2-11.3,25.2-25.3C272.3,159.7,261.8,148.6,248.4,147.9L248.4,147.9z"/>
|
||||
<path fill="#0033AD" d="M135.1,133.1c4.3,8.5,13,13.9,22.6,13.9c13.9,0,25.2-11.3,25.2-25.3c0-3.9-0.9-7.8-2.7-11.4 c-6.3-12.5-21.5-17.5-33.9-11.2C133.8,105.5,128.8,120.7,135.1,133.1L135.1,133.1z"/>
|
||||
<path fill="#0033AD" d="M333,100.8c5.1-2.6,7.1-8.9,4.5-14c-2.6-5.1-8.9-7.1-14-4.5c-5.1,2.6-7.1,8.8-4.6,13.9 C321.6,101.3,327.8,103.4,333,100.8C333,100.8,333,100.8,333,100.8z"/>
|
||||
<path fill="#0033AD" d="M269,108.8c-7.3,3.7-10.3,12.6-6.6,19.9c3.7,7.3,12.6,10.3,19.9,6.6c7.3-3.7,10.3-12.6,6.6-19.9 C285.2,108.1,276.3,105.2,269,108.8z"/>
|
||||
<path fill="#0033AD" d="M186.5,20.8c5.7,0.3,10.6-4.1,11-9.8s-4.1-10.6-9.8-11c-5.7-0.3-10.6,4-11,9.7 C176.4,15.5,180.8,20.4,186.5,20.8C186.5,20.8,186.5,20.8,186.5,20.8z"/>
|
||||
<path fill="#0033AD" d="M186.4,86.1c8.2,0.5,15.2-5.8,15.6-14c0.5-8.2-5.8-15.2-14-15.6c-8.2-0.5-15.2,5.8-15.6,14 C172,78.7,178.2,85.7,186.4,86.1C186.4,86.1,186.4,86.1,186.4,86.1z"/>
|
||||
<path fill="#0033AD" d="M106,237.7c7.3-3.7,10.3-12.6,6.6-19.9c-3.7-7.3-12.6-10.3-19.9-6.6c-7.3,3.7-10.3,12.6-6.6,19.9 C89.8,238.4,98.7,241.4,106,237.7z"/>
|
||||
<path fill="#0033AD" d="M196,107.8c-7.6,11.7-4.4,27.3,7.3,34.9c11.7,7.6,27.3,4.4,34.9-7.3c7.6-11.7,4.4-27.3-7.3-34.9 c-4.1-2.7-8.9-4.1-13.8-4.1C208.6,96.4,200.7,100.7,196,107.8z"/>
|
||||
<path fill="#0033AD" d="M239.9,213.4c-6.3-12.5-21.5-17.5-33.9-11.2c-12.5,6.3-17.5,21.5-11.2,33.9c6.3,12.5,21.5,17.5,33.9,11.2 c0,0,0,0,0,0c12.4-6.2,17.5-21.2,11.3-33.7C240,213.5,240,213.5,239.9,213.4z"/>
|
||||
<path fill="#0033AD" d="M284,211.6c-6.9-4.5-16.1-2.6-20.5,4.3c-4.5,6.9-2.6,16.1,4.3,20.5c6.9,4.5,16.1,2.6,20.5-4.3 C292.8,225.3,290.9,216.1,284,211.6C284,211.6,284,211.6,284,211.6z"/>
|
||||
<path fill="#0033AD" d="M332.4,173.7c0.4-7-4.9-12.9-11.9-13.3c-7-0.4-12.9,4.9-13.3,11.9c-0.4,7,4.9,12.9,11.9,13.3c0,0,0,0,0,0 C326,186,332,180.6,332.4,173.7z"/>
|
||||
<path fill="#0033AD" d="M367.3,164.7c-4.5-0.3-8.4,3.2-8.6,7.7s3.2,8.4,7.7,8.6c4.5,0.3,8.3-3.2,8.6-7.7 C375.2,168.8,371.8,165,367.3,164.7z"/>
|
||||
<path fill="#0033AD" d="M334.4,245.7c-4.8-3.1-11.2-1.8-14.4,3c-3.1,4.8-1.8,11.2,3,14.4c4.8,3.1,11.2,1.8,14.4-3 C340.6,255.3,339.2,248.8,334.4,245.7C334.4,245.7,334.4,245.7,334.4,245.7z"/>
|
||||
<path fill="#0033AD" d="M102.6,321.9c-3.8-2.5-8.8-1.4-11.3,2.3c-2.5,3.8-1.4,8.8,2.3,11.3c3.8,2.5,8.8,1.4,11.3-2.3c0,0,0,0,0,0 C107.5,329.5,106.4,324.4,102.6,321.9z"/>
|
||||
<path fill="#0033AD" d="M273.8,321.1c-4,2-5.6,7-3.6,11c2,4,7,5.6,11,3.6c4-2,5.6-6.9,3.6-10.9C282.8,320.7,277.9,319,273.8,321.1 C273.9,321.1,273.8,321.1,273.8,321.1z"/>
|
||||
<path fill="#0033AD" d="M179,238.7c7.6-11.7,4.4-27.3-7.3-35c-11.7-7.6-27.3-4.4-35,7.3s-4.4,27.3,7.3,35c4.1,2.7,8.9,4.1,13.8,4.1 C166.4,250.2,174.3,245.9,179,238.7z"/>
|
||||
<path fill="#0033AD" d="M128.5,277.4c-5.8-3.8-13.7-2.2-17.5,3.6c-3.8,5.8-2.2,13.7,3.6,17.5s13.7,2.2,17.5-3.6c0,0,0,0,0,0 C136,289.1,134.4,281.2,128.5,277.4z"/>
|
||||
<path fill="#0033AD" d="M187.4,325.7c-5.7-0.3-10.6,4.1-11,9.8s4.1,10.6,9.8,11c5.7,0.3,10.6-4,11-9.7 C197.5,331,193.1,326.1,187.4,325.7C187.4,325.7,187.4,325.7,187.4,325.7z"/>
|
||||
<path fill="#0033AD" d="M187.5,260.4c-8.2-0.5-15.2,5.8-15.6,14c-0.5,8.2,5.8,15.2,14,15.6c8.2,0.4,15.2-5.8,15.6-14 C202,267.9,195.7,260.8,187.5,260.4C187.5,260.4,187.5,260.4,187.5,260.4z"/>
|
||||
<path fill="#0033AD" d="M248.2,276.4c-6.2,3.2-8.7,10.8-5.5,17c3.2,6.2,10.8,8.7,17,5.5c6.2-3.1,8.7-10.7,5.6-16.9 C262.1,275.8,254.5,273.2,248.2,276.4C248.2,276.4,248.2,276.4,248.2,276.4z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 5.2 KiB |
|
|
@ -0,0 +1,11 @@
|
|||
<svg viewBox="0 0 2500 2500" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle cx="1250" cy="1250" r="1250" style="fill:#2e3148"/>
|
||||
<circle cx="1250" cy="1250" r="725.31" style="fill:#1b1e36"/>
|
||||
<path d="M1252.57,159.47c-134.93,0-244.34,489.4-244.34,1093.11s109.41,1093.11,244.34,1093.11,244.34-489.4,244.34-1093.11S1387.5,159.47,1252.57,159.47ZM1269.44,2284c-15.43,20.58-30.86,5.14-30.86,5.14-62.14-72-93.21-205.76-93.21-205.76-108.69-349.79-82.82-1100.82-82.82-1100.82,51.08-596.24,144-737.09,175.62-768.36a19.29,19.29,0,0,1,24.74-2c45.88,32.51,84.36,168.47,84.36,168.47,113.63,421.81,103.34,817.9,103.34,817.9,10.29,344.65-56.94,730.45-56.94,730.45C1341.92,2222.22,1269.44,2284,1269.44,2284Z" style="fill:#6f7390"/>
|
||||
<path d="M2200.72,708.59c-67.18-117.08-546.09,31.58-1070,332s-893.47,638.89-826.34,755.92,546.09-31.58,1070-332,893.47-638.89,826.34-755.92h0ZM366.36,1780.45c-25.72-3.24-19.91-24.38-19.91-24.38C378,1666.36,478.4,1572.84,478.4,1572.84c249.43-268.36,913.79-619.65,913.79-619.65,542.54-252.42,711.06-241.77,753.81-230a19.29,19.29,0,0,1,14,20.58c-5.14,56-104.17,157-104.17,157C1746.71,1209.36,1398,1397.58,1398,1397.58c-293.83,180.5-661.93,314.09-661.93,314.09-280.09,100.93-369.7,68.78-369.7,68.78h0Z" style="fill:#6f7390"/>
|
||||
<path d="M2198.35,1800.41c67.7-116.77-300.93-456.79-823-759.47S374.43,587.76,306.79,704.73s300.93,456.79,823.3,759.47S2130.71,1917.39,2198.35,1800.41ZM351.65,749.85c-10-23.71,11.11-29.42,11.11-29.42C456.22,702.78,587.5,743,587.5,743c357.15,81.33,994,480.25,994,480.25,490.33,343.11,565.53,494.24,576.8,537.14a19.29,19.29,0,0,1-10.7,22.43c-51.13,23.41-188.07-11.47-188.07-11.47-422.07-113.17-759.62-320.52-759.62-320.52-303.29-163.58-603.19-415.28-603.19-415.28-227.88-191.87-245-285.44-245-285.44Z" style="fill:#6f7390"/>
|
||||
<circle cx="1250" cy="1250" r="128.6" style="fill:#b7b9c8"/>
|
||||
<ellipse cx="1777.26" cy="756.17" rx="74.59" ry="77.16" style="fill:#b7b9c8"/>
|
||||
<ellipse cx="552.98" cy="1018.52" rx="74.59" ry="77.16" style="fill:#b7b9c8"/>
|
||||
<ellipse cx="1098.25" cy="1965.02" rx="74.59" ry="77.16" style="fill:#b7b9c8"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.0 KiB |
|
|
@ -0,0 +1,8 @@
|
|||
<svg version="1.1" fill-rule="evenodd" clip-rule="evenodd" viewBox="0 0 784.37 1277.39" xmlns="http://www.w3.org/2000/svg">
|
||||
<polygon fill="#343434" fill-rule="nonzero" points="392.07,0 383.5,29.11 383.5,873.74 392.07,882.29 784.13,650.54"/>
|
||||
<polygon fill="#8C8C8C" fill-rule="nonzero" points="392.07,0 -0,650.54 392.07,882.29 392.07,472.33"/>
|
||||
<polygon fill="#3C3C3B" fill-rule="nonzero" points="392.07,956.52 387.24,962.41 387.24,1263.28 392.07,1277.38 784.37,724.89"/>
|
||||
<polygon fill="#8C8C8C" fill-rule="nonzero" points="392.07,1277.38 392.07,956.52 -0,724.89"/>
|
||||
<polygon fill="#141414" fill-rule="nonzero" points="392.07,882.29 784.13,650.54 392.07,472.33"/>
|
||||
<polygon fill="#393939" fill-rule="nonzero" points="0,650.54 392.07,882.29 392.07,472.33"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 771 B |
|
|
@ -0,0 +1,3 @@
|
|||
<svg version="1.1" viewBox="0 0 2000 2088.9" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill="currentColor" clip="evenodd" d="M1726.6,681.4l-129.8-230.6l251.5,0.1c6.7,0,14.6,4.5,18.2,10.5c4,6.6,24.4,40.3,49,80.7 c29.4,48.4,64.5,106.3,84.6,139.3H1726.6z M1261.4,2078c-6.1,10.9-14,10.9-16.6,10.9h-102.8c-54.4,0-117.1-0.1-154.5-0.1 l399.6-717.4c10.4-18.5,3.7-42-14.8-52.3c-5.7-3.2-12.1-4.9-18.6-4.9l0,0l-681,0.9l-135.5-234.5h992c0.1,0,0.2,0,0.3,0s0.2,0,0.3,0 c0.6,0,1.1-0.2,1.6-0.2c2.2-0.1,4.4-0.4,6.6-0.9c1.6-0.4,3.3-0.9,4.8-1.5c0.8-0.3,1.7-0.7,2.5-1c7.7-3.3,14.1-9.1,18.2-16.5 L1727,758.2h270L1261.4,2078z M921.1,2050.7c-8.7-14.3-20-32.9-32.3-53.1c-41.3-68.2-94.2-155.5-100.2-165.1 c-2-3.2-2.9-11.1,1.3-18.7c9.6-17.2,190.4-343,234.5-422.4l264.1-0.3L921.1,2050.7z M470.8,1601.8l-131.3-233.2l132.3-248 l132.7,229.7C563.3,1428,498.9,1549.1,470.8,1601.8z M294.6,1638.1c-66.8,0-133.3,0-143,0l0,0c-6.5,0-14.4-4.6-18-10.5l-42.7-70.4 C60.4,1507,21.5,1442.9,0,1407.5h273.4l129.8,230.6C374.9,1638.1,334.8,1638.1,294.6,1638.1L294.6,1638.1z M738.6,11 c6.1-11,14-11,16.5-11h258.3L612.7,717.4c-0.3,0.6-0.5,1.2-0.8,1.9c-0.6,1.2-1.1,2.4-1.6,3.7c-0.4,1.2-0.8,2.4-1.1,3.7 s-0.6,2.3-0.8,3.5c-0.2,1.4-0.4,2.8-0.4,4.3c0,0.6-0.2,1.2-0.2,1.9c0,0.5,0.1,0.9,0.2,1.4c0,1.4,0.2,2.8,0.4,4.2 c0.1,1.2,0.3,2.3,0.6,3.5c0.3,1.2,0.7,2.4,1.1,3.6c0.4,1.2,0.8,2.3,1.3,3.5s1.1,2.2,1.7,3.2s1.2,2.1,2,3.1c0.7,1,1.5,2,2.4,2.9 c0.8,0.9,1.6,1.8,2.5,2.7s1.8,1.5,2.8,2.3c1.1,0.8,2.2,1.6,3.3,2.3c0.4,0.3,0.8,0.6,1.2,0.9s0.9,0.3,1.4,0.6c2,1,4.1,1.9,6.2,2.5 c0.8,0.2,1.5,0.5,2.3,0.7c2.8,0.7,5.7,1.1,8.7,1.1c0,0,0,0,0.1,0h0.1h17c0.1,0,0.2,0,0.2,0l0,0l663.9-0.9 c17.6,30.5,50.4,88,78.3,136.9c21.4,37.6,39.2,68.6,53.2,93h-988c-0.4,0-0.8,0.1-1.3,0.2c-13.9,0.1-26.6,7.9-33.2,20.1l-163.6,306.6 H3.1C120.8,1119.3,730.7,25,738.6,11z M1079.4,39.1l24,39.5c42.1,69.5,101.6,167.6,107.9,177.8c2,3.2,2.9,11.1-1.3,18.7L975.6,697.3 l-264,0.3L1079.4,39.1z M1529.1,486.9l131.3,233.3l-133.9,247.5c-16-27.8-35.8-62.6-54.4-95.2c-36.8-64.4-63.6-111.3-78.7-137.5 C1422.1,682.8,1497.5,544.5,1529.1,486.9z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.0 KiB |
|
|
@ -0,0 +1,4 @@
|
|||
<svg viewBox="0 0 82.6 82.6" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle cx="41.3" cy="41.3" r="36.83" style="fill:#fff"/>
|
||||
<path d="M41.3,0A41.3,41.3,0,1,0,82.6,41.3h0A41.18,41.18,0,0,0,41.54,0ZM42,42.7,37.7,57.2h23a1.16,1.16,0,0,1,1.2,1.12v.38l-2,6.9a1.49,1.49,0,0,1-1.5,1.1H23.2l5.9-20.1-6.6,2L24,44l6.6-2,8.3-28.2a1.51,1.51,0,0,1,1.5-1.1h8.9a1.16,1.16,0,0,1,1.2,1.12v.38L43.5,38l6.6-2-1.4,4.8Z" style="fill:#345d9d"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 431 B |
|
|
@ -0,0 +1,5 @@
|
|||
<svg viewBox="0 0 3756.09 3756.49" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M4128,2249.81C4128,3287,3287.26,4127.86,2250,4127.86S372,3287,372,2249.81,1212.76,371.75,2250,371.75,4128,1212.54,4128,2249.81Z" transform="translate(-371.96 -371.75)" style="fill:#fff"/>
|
||||
<path d="M2250,371.75c-1036.89,0-1879.12,842.06-1877.8,1878,0.26,207.26,33.31,406.63,95.34,593.12h561.88V1263L2250,2483.57,3470.52,1263v1579.9h562c62.12-186.48,95-385.85,95.37-593.12C4129.66,1212.76,3287,372,2250,372Z" transform="translate(-371.96 -371.75)" style="fill:#f26822"/>
|
||||
<path d="M1969.3,2764.17l-532.67-532.7v994.14H1029.38l-384.29.07c329.63,540.8,925.35,902.56,1604.91,902.56S3525.31,3766.4,3855,3225.6H3063.25V2231.47l-532.7,532.7-280.61,280.61-280.62-280.61h0Z" transform="translate(-371.96 -371.75)" style="fill:#4d4d4d"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 818 B |
|
|
@ -0,0 +1,3 @@
|
|||
<svg version="1.1" viewBox="0 0 38.4 33.5" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill="#8247E5" d="M29,10.2c-0.7-0.4-1.6-0.4-2.4,0L21,13.5l-3.8,2.1l-5.5,3.3c-0.7,0.4-1.6,0.4-2.4,0L5,16.3 c-0.7-0.4-1.2-1.2-1.2-2.1v-5c0-0.8,0.4-1.6,1.2-2.1l4.3-2.5c0.7-0.4,1.6-0.4,2.4,0L16,7.2c0.7,0.4,1.2,1.2,1.2,2.1v3.3l3.8-2.2V7 c0-0.8-0.4-1.6-1.2-2.1l-8-4.7c-0.7-0.4-1.6-0.4-2.4,0L1.2,5C0.4,5.4,0,6.2,0,7v9.4c0,0.8,0.4,1.6,1.2,2.1l8.1,4.7 c0.7,0.4,1.6,0.4,2.4,0l5.5-3.2l3.8-2.2l5.5-3.2c0.7-0.4,1.6-0.4,2.4,0l4.3,2.5c0.7,0.4,1.2,1.2,1.2,2.1v5c0,0.8-0.4,1.6-1.2,2.1 L29,28.8c-0.7,0.4-1.6,0.4-2.4,0l-4.3-2.5c-0.7-0.4-1.2-1.2-1.2-2.1V21l-3.8,2.2v3.3c0,0.8,0.4,1.6,1.2,2.1l8.1,4.7 c0.7,0.4,1.6,0.4,2.4,0l8.1-4.7c0.7-0.4,1.2-1.2,1.2-2.1V17c0-0.8-0.4-1.6-1.2-2.1L29,10.2z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 765 B |
|
|
@ -0,0 +1,10 @@
|
|||
<svg version="1.1" viewBox="0 0 122 122" xmlns="http://www.w3.org/2000/svg">
|
||||
<style type="text/css">
|
||||
.st0{fill:#1B1B1B;stroke:#FFFFFF;stroke-width:4;}
|
||||
.st1{fill-rule:evenodd;clip-rule:evenodd;fill:#FFFFFF;}
|
||||
.st2{fill:none;stroke:#FFFFFF;stroke-width:2;stroke-linecap:round;}
|
||||
</style>
|
||||
<circle class="st0" cx="61" cy="61" r="59"/>
|
||||
<path class="st1" d="M78.3,43.7c0.8,0.8,2.1,0.7,2.7-0.2c0.6-0.7,0.5-1.8-0.2-2.4c-6.6-6.3-12.5-9.5-22.3-9 C48.2,32.6,39.1,38,39.7,49.4C40.2,59.5,50,63.2,58.6,66.5c6.6,2.5,12.4,4.7,12.7,9.4c0.3,5.2-5,8.3-9.6,8.6 c-8.7,0.5-13.8-2.6-19.5-8.1c-0.7-0.7-1.8-0.7-2.5-0.1c-0.8,0.7-0.8,1.9-0.1,2.7c6.4,6.4,13,9.6,22.6,9.1C71.8,87.4,83.6,82,83,70.6 c-0.5-9.9-9.9-13.6-18.4-16.8c-7-2.7-13.5-5.2-13.8-10.9c-0.2-4.1,4.7-7.1,8.2-7.3C67.5,35.2,72.8,38.2,78.3,43.7z M79.4,70.8 c0,4.4-2.4,8.2-6,10.4l-0.2-0.1c1.3-1.8,1.5-4.1,1.5-6.3c0-6.5-7.1-9-14.6-11.7c-8.3-3-17-6.1-17-14.9c0-4,1.8-8.3,5.3-10.3l0.1,0.2 c-0.9,1.9-1.3,4-1.3,6.1c0,7.2,7.9,10.1,15.9,13.1C71.3,60.3,79.4,63.3,79.4,70.8z"/>
|
||||
<path class="st2" d="M60.5,108c26.2,0,47.5-21.3,47.5-47.5S86.7,13,60.5,13S13,34.3,13,60.5S34.3,108,60.5,108z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.1 KiB |
|
|
@ -0,0 +1,5 @@
|
|||
<svg viewBox="0 0 404.03 404.04" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill="#20ee82" d="M262.65,202v60.6H202a60.6,60.6,0,1,1,60.6-60.6m-59.8-101a101,101,0,1,0-6,202H303v-99.8c0-55.7-44.5-101.8-100.2-102.2"/>
|
||||
<path fill="#7f8c8d" d="M344.85,59.17a202,202,0,0,0-254.2-25.7,40.5,40.5,0,0,1,5.8,8.3,192.2,192.2,0,0,1,241.2,24.6c74.8,74.7,74.8,196.4,0,271.2s-196.5,74.8-271.3,0a192.2,192.2,0,0,1-24.5-241.2,40.1,40.1,0,0,1-8.3-5.8c-61.55,93-36,218.37,57,279.92s218.37,36,279.92-57A202,202,0,0,0,344.85,59.17"/>
|
||||
<path fill="#20ee82" d="M46.45,46.37a20.2,20.2,0,1,1,.07,28.57l-0.07-.07a20.2,20.2,0,0,1,0-28.5"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 622 B |
|
|
@ -0,0 +1,17 @@
|
|||
<svg version="1.1" viewBox="0 0 397.7 311.7" xmlns="http://www.w3.org/2000/svg">
|
||||
<linearGradient id="solana_gr1" gradientUnits="userSpaceOnUse" x1="360.8791" y1="351.4553" x2="141.213" y2="-69.2936" gradientTransform="matrix(1 0 0 -1 0 314)">
|
||||
<stop offset="0" style="stop-color:#00FFA3"/>
|
||||
<stop offset="1" style="stop-color:#DC1FFF"/>
|
||||
</linearGradient>
|
||||
<path fill="url('#solana_gr1')" d="M64.6,237.9c2.4-2.4,5.7-3.8,9.2-3.8h317.4c5.8,0,8.7,7,4.6,11.1l-62.7,62.7c-2.4,2.4-5.7,3.8-9.2,3.8H6.5 c-5.8,0-8.7-7-4.6-11.1L64.6,237.9z"/>
|
||||
<linearGradient id="solana_gr2" gradientUnits="userSpaceOnUse" x1="264.8291" y1="401.6014" x2="45.163" y2="-19.1475" gradientTransform="matrix(1 0 0 -1 0 314)">
|
||||
<stop offset="0" style="stop-color:#00FFA3"/>
|
||||
<stop offset="1" style="stop-color:#DC1FFF"/>
|
||||
</linearGradient>
|
||||
<path fill="url('#solana_gr2')" d="M64.6,3.8C67.1,1.4,70.4,0,73.8,0h317.4c5.8,0,8.7,7,4.6,11.1l-62.7,62.7c-2.4,2.4-5.7,3.8-9.2,3.8H6.5 c-5.8,0-8.7-7-4.6-11.1L64.6,3.8z"/>
|
||||
<linearGradient id="solana_gr3" gradientUnits="userSpaceOnUse" x1="312.5484" y1="376.688" x2="92.8822" y2="-44.061" gradientTransform="matrix(1 0 0 -1 0 314)">
|
||||
<stop offset="0" style="stop-color:#00FFA3"/>
|
||||
<stop offset="1" style="stop-color:#DC1FFF"/>
|
||||
</linearGradient>
|
||||
<path fill="url('#solana_gr3')" d="M333.1,120.1c-2.4-2.4-5.7-3.8-9.2-3.8H6.5c-5.8,0-8.7,7-4.6,11.1l62.7,62.7c2.4,2.4,5.7,3.8,9.2,3.8h317.4 c5.8,0,8.7-7,4.6-11.1L333.1,120.1z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.4 KiB |
|
|
@ -0,0 +1,24 @@
|
|||
---
|
||||
import './Why.scss';
|
||||
---
|
||||
|
||||
<section id="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 can’t 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="#methods" class="btn-main">Donate</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
|
@ -0,0 +1,51 @@
|
|||
@import "/src/styles/mixins.scss";
|
||||
@import "/src/styles/vars.scss";
|
||||
|
||||
#why {
|
||||
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: 0;
|
||||
bottom: 0;
|
||||
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-position: 50% 0;
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.feature-group {
|
||||
box-sizing: content-box;
|
||||
margin: 2em 7.5%;
|
||||
max-width: 64em;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 80rem) {
|
||||
ul, p {
|
||||
background: rgba($color-blue-charcoal-2, 0.65);
|
||||
}
|
||||
|
||||
ul {
|
||||
border-radius: 0.5em 0.5em 0 0;
|
||||
padding: 0.3em 0.5em 0.3em 1.5em;
|
||||
margin: -0.3em -0.5em 0.28em;
|
||||
}
|
||||
|
||||
p {
|
||||
border-radius: 0 0 0.5em 0.5em;
|
||||
padding: 0.3em 0.5em;
|
||||
margin: -0.3em -0.5em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
---
|
||||
import './CTO.scss';
|
||||
import avatar from '/src/assets/cto-avatar.webp';
|
||||
---
|
||||
|
||||
<section id="cto">
|
||||
<div class="feature-group">
|
||||
<h2>Community-Powered</h2>
|
||||
<h3>Building a new world for your data</h3>
|
||||
<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 class="bio">
|
||||
<img src={avatar.src} />
|
||||
<div>
|
||||
<strong>Derrick Hammer</strong><br />
|
||||
CTO
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
|
@ -0,0 +1,66 @@
|
|||
@import "/src/styles/mixins.scss";
|
||||
@import "/src/styles/vars.scss";
|
||||
|
||||
#cto {
|
||||
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: 0;
|
||||
bottom: 0;
|
||||
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-position: 50% 100%;
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.feature-group {
|
||||
box-sizing: content-box;
|
||||
margin: 6em 7.5%;
|
||||
max-width: 64em;
|
||||
}
|
||||
|
||||
.bio {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
margin-top: 1.5em;
|
||||
gap: 1.2em;
|
||||
font-family: $font-family-jaldi;
|
||||
color: $color-cloud;
|
||||
@include fluid-font-size(1.5rem);
|
||||
|
||||
img {
|
||||
@include fluid-width-height(5.875rem, 5.875rem);
|
||||
}
|
||||
|
||||
strong {
|
||||
@include fluid-font-size(1.625rem);
|
||||
line-height: 133%;
|
||||
color: $color-white;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 80rem) {
|
||||
p, .bio div {
|
||||
background: rgba($color-blue-charcoal-2, 0.65);
|
||||
border-radius: 0 0.5em 0.5em 0;
|
||||
padding: 0.3em 0.5em;
|
||||
margin: -0.3em -0.5em;
|
||||
}
|
||||
|
||||
.bio {
|
||||
margin-top: 1.27em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
---
|
||||
import './Grid.scss';
|
||||
---
|
||||
|
||||
<section id="grid" class="feature-grid">
|
||||
<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>
|
||||
<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>
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
#grid {
|
||||
padding-top: 5.5em;
|
||||
}
|
||||
|
|
@ -0,0 +1,74 @@
|
|||
---
|
||||
import './Meme.scss';
|
||||
import meme1 from '/src/assets/meme-1.png';
|
||||
import meme2 from '/src/assets/meme-2.png';
|
||||
import meme3 from '/src/assets/meme-3.png';
|
||||
import meme4 from '/src/assets/meme-4.png';
|
||||
---
|
||||
|
||||
<section id="meme" class="tilted-bg">
|
||||
<div class="feature-group">
|
||||
<h2>
|
||||
What is the Web?
|
||||
</h2>
|
||||
<h3>
|
||||
Why Web3 matters
|
||||
</h3>
|
||||
<p>
|
||||
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.
|
||||
</p>
|
||||
<div>
|
||||
<a href="#" class="btn-main">Learn More</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="meme-items">
|
||||
<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,
|
||||
funders, and contributors to bring the new internet to the
|
||||
masses.
|
||||
</p>
|
||||
</div>
|
||||
<div class="meme-item">
|
||||
<div>
|
||||
<img src={meme2.src} />
|
||||
<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} />
|
||||
<h2>Crypto & 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} />
|
||||
<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>
|
||||
</div>
|
||||
</section>
|
||||
|
|
@ -0,0 +1,96 @@
|
|||
@import "/src/styles/mixins.scss";
|
||||
@import "/src/styles/vars.scss";
|
||||
|
||||
#meme {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@include fluid-padding-lr;
|
||||
padding-top: 12em;
|
||||
padding-bottom: 12em;
|
||||
gap: 10em;
|
||||
|
||||
.feature-group {
|
||||
max-width: 64em;
|
||||
}
|
||||
|
||||
.meme-items {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 1.5em;
|
||||
}
|
||||
|
||||
.meme-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 2em;
|
||||
|
||||
div {
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 2em;
|
||||
}
|
||||
|
||||
img {
|
||||
@include fluid-width(13.125rem);
|
||||
}
|
||||
|
||||
h2 {
|
||||
width: 8.6em;
|
||||
@include fluid-font-size(1.5625rem);
|
||||
font-weight: 700;
|
||||
text-align: center;
|
||||
color: $color-aquamarine;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
p {
|
||||
font-family: $font-family-jaldi;
|
||||
@include fluid-font-size(1.3125rem);
|
||||
line-height: 123.81%;
|
||||
color: $color-cloud;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 80rem) {
|
||||
flex-direction: column;
|
||||
gap: 5em;
|
||||
|
||||
.feature-group {
|
||||
max-width: none;
|
||||
margin: 2em 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 56rem) {
|
||||
.feature-group {
|
||||
max-width: 64em;
|
||||
}
|
||||
|
||||
.meme-items {
|
||||
gap: 3em;
|
||||
}
|
||||
|
||||
.meme-item {
|
||||
flex-direction: column;
|
||||
max-width: 64em;
|
||||
|
||||
p {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
img {
|
||||
@include fluid-width(11.25rem);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 80.000001rem) and (max-width: 100rem) {
|
||||
.meme-item {
|
||||
h2 {
|
||||
width: 4.5em;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
---
|
||||
import './Message.scss';
|
||||
---
|
||||
|
||||
<section id="message">
|
||||
<h2>
|
||||
A message from Derrick
|
||||
</h2>
|
||||
<p>
|
||||
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.
|
||||
</p>
|
||||
</section>
|
||||
|
|
@ -0,0 +1,28 @@
|
|||
@import "/src/styles/mixins.scss";
|
||||
@import "/src/styles/vars.scss";
|
||||
|
||||
#message {
|
||||
padding: 5em 0;
|
||||
@include fluid-padding-lr;
|
||||
background: $color-aquamarine;
|
||||
color: $color-blue-charcoal-2;
|
||||
|
||||
@media screen and (max-width: 47.99999rem) {
|
||||
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: $font-family-jaldi;
|
||||
@include fluid-font-size(1.5rem);
|
||||
line-height: 137%;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,49 @@
|
|||
---
|
||||
import './PoweredBy.scss';
|
||||
---
|
||||
|
||||
<section id="powered-by">
|
||||
<h2>Powered By</h2>
|
||||
<div>
|
||||
<a href="https://sia.tech" title="Sia" class="sia-logo">
|
||||
<svg viewBox="0 0 65 39" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M0 33.1034C2.44131 36.5305 6.36863 39 12.0473 39C18.2567 39 22.3963 35.6233 22.3963 31.1379C22.3963 27.7613 20.1673 24.8886 14.9132 23.2759L10.7736 22.0159C9.28758 21.5623 8.27922 20.8064 8.27922 19.5968C8.27922 18.3873 9.49987 17.3793 11.5697 17.3793C13.9048 17.3793 15.8685 18.8408 16.8238 20.0504L21.2818 16.5225C19.5835 14.3554 16.0277 12.0371 11.4105 12.0371C5.67869 12.0371 1.75137 15.6154 1.75137 19.5968C1.75137 22.7719 3.98039 25.695 8.4915 27.1565L12.2065 28.366C15.0193 29.2732 15.8685 30.1804 15.8685 31.3395C15.8685 32.7003 14.4886 33.6578 12.0473 33.6578C9.0753 33.6578 6.84628 32.4987 4.7234 29.8276L0 33.1034Z" fill="currentColor"/>
|
||||
<path d="M26.519 4.77984C26.519 6.84615 28.2703 8.61008 30.4993 8.61008C32.6753 8.61008 34.4797 6.84615 34.4797 4.77984C34.4797 2.71353 32.6753 1 30.4993 1C28.2703 1 26.519 2.71353 26.519 4.77984ZM27.1558 38.244H33.8429V12.7931H27.1558V38.244Z" fill="currentColor"/>
|
||||
<path d="M62.025 26.5L62.025 36.025L51 36.025C45.4633 36.025 40.975 31.5367 40.975 26C40.975 20.4633 45.4633 15.975 51 15.975L51.5 15.975C57.3128 15.975 62.025 20.6872 62.025 26.5Z" stroke="currentColor" stroke-width="5.95"/>
|
||||
</svg>
|
||||
</a>
|
||||
<a href="https://handshake.org" title="Handshake" class="hns-logo">
|
||||
<svg version="1.1" viewBox="0 0 2000 2088.9" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill="currentColor" clip="evenodd" d="M1726.6,681.4l-129.8-230.6l251.5,0.1c6.7,0,14.6,4.5,18.2,10.5c4,6.6,24.4,40.3,49,80.7 c29.4,48.4,64.5,106.3,84.6,139.3H1726.6z M1261.4,2078c-6.1,10.9-14,10.9-16.6,10.9h-102.8c-54.4,0-117.1-0.1-154.5-0.1 l399.6-717.4c10.4-18.5,3.7-42-14.8-52.3c-5.7-3.2-12.1-4.9-18.6-4.9l0,0l-681,0.9l-135.5-234.5h992c0.1,0,0.2,0,0.3,0s0.2,0,0.3,0 c0.6,0,1.1-0.2,1.6-0.2c2.2-0.1,4.4-0.4,6.6-0.9c1.6-0.4,3.3-0.9,4.8-1.5c0.8-0.3,1.7-0.7,2.5-1c7.7-3.3,14.1-9.1,18.2-16.5 L1727,758.2h270L1261.4,2078z M921.1,2050.7c-8.7-14.3-20-32.9-32.3-53.1c-41.3-68.2-94.2-155.5-100.2-165.1 c-2-3.2-2.9-11.1,1.3-18.7c9.6-17.2,190.4-343,234.5-422.4l264.1-0.3L921.1,2050.7z M470.8,1601.8l-131.3-233.2l132.3-248 l132.7,229.7C563.3,1428,498.9,1549.1,470.8,1601.8z M294.6,1638.1c-66.8,0-133.3,0-143,0l0,0c-6.5,0-14.4-4.6-18-10.5l-42.7-70.4 C60.4,1507,21.5,1442.9,0,1407.5h273.4l129.8,230.6C374.9,1638.1,334.8,1638.1,294.6,1638.1L294.6,1638.1z M738.6,11 c6.1-11,14-11,16.5-11h258.3L612.7,717.4c-0.3,0.6-0.5,1.2-0.8,1.9c-0.6,1.2-1.1,2.4-1.6,3.7c-0.4,1.2-0.8,2.4-1.1,3.7 s-0.6,2.3-0.8,3.5c-0.2,1.4-0.4,2.8-0.4,4.3c0,0.6-0.2,1.2-0.2,1.9c0,0.5,0.1,0.9,0.2,1.4c0,1.4,0.2,2.8,0.4,4.2 c0.1,1.2,0.3,2.3,0.6,3.5c0.3,1.2,0.7,2.4,1.1,3.6c0.4,1.2,0.8,2.3,1.3,3.5s1.1,2.2,1.7,3.2s1.2,2.1,2,3.1c0.7,1,1.5,2,2.4,2.9 c0.8,0.9,1.6,1.8,2.5,2.7s1.8,1.5,2.8,2.3c1.1,0.8,2.2,1.6,3.3,2.3c0.4,0.3,0.8,0.6,1.2,0.9s0.9,0.3,1.4,0.6c2,1,4.1,1.9,6.2,2.5 c0.8,0.2,1.5,0.5,2.3,0.7c2.8,0.7,5.7,1.1,8.7,1.1c0,0,0,0,0.1,0h0.1h17c0.1,0,0.2,0,0.2,0l0,0l663.9-0.9 c17.6,30.5,50.4,88,78.3,136.9c21.4,37.6,39.2,68.6,53.2,93h-988c-0.4,0-0.8,0.1-1.3,0.2c-13.9,0.1-26.6,7.9-33.2,20.1l-163.6,306.6 H3.1C120.8,1119.3,730.7,25,738.6,11z M1079.4,39.1l24,39.5c42.1,69.5,101.6,167.6,107.9,177.8c2,3.2,2.9,11.1-1.3,18.7L975.6,697.3 l-264,0.3L1079.4,39.1z M1529.1,486.9l131.3,233.3l-133.9,247.5c-16-27.8-35.8-62.6-54.4-95.2c-36.8-64.4-63.6-111.3-78.7-137.5 C1422.1,682.8,1497.5,544.5,1529.1,486.9z"/>
|
||||
</svg>
|
||||
</a>
|
||||
<a href="https://opensource.org/osd/" title="Open Source Initiative" class="osi-logo">
|
||||
<svg version="1.2" viewBox="0 0 468.1909 614.0127" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="m262.006 307.1224c32.25781-11.98047 49.09765-35.05078 49.09765-74.75781s-33.46093-74.69531-75.26953-74.76563c-44.12109-0.0703-77.40234 34.91407-76.87109 74.76563s19.53906 66.36328 49.95703 75.94922l-53.88672 132.5703c-72.12109-18.67187-145.4727-103.7539-145.4727-208.5195 0-124.0859 99.70313-224.6797 224.6719-224.6797s226.2734 100.5937 226.2734 224.6797c0 106.3945-72.65625 190.293-146.3164 208.8906zm0 0" style="fill:currentcolor;stroke-linecap:round;stroke-linejoin:round;stroke-width:15.3697;stroke:currentcolor"/>
|
||||
<g id="text" transform="matrix(1.082924 0 0 1.148944 -55.53372 -162.9183)" style="fill:currentcolor;stroke-width:.75px">
|
||||
<path id="o1" d="m91.04297 583.3072q0 9.77344-5.273438 15.25781-5.238281 5.44922-14.69531 5.44922-9.070313 0-14.44922-5.58984-5.34375-5.58985-5.34375-15.11719 0-9.73828 5.238281-15.11719 5.273438-5.41406 14.76562-5.41406 5.871094 0 10.37109 2.49609 4.5 2.4961 6.925781 7.17188 2.460938 4.64062 2.460938 10.86328zm-25.80469 0q0 5.13281 1.371094 7.83984 1.371094 2.67188 4.605469 2.67188 3.199218 0 4.5-2.67188 1.335937-2.70703 1.335937-7.83984 0-5.09766-1.335937-7.69922-1.335938-2.60156-4.570313-2.60156-3.164062 0-4.535156 2.60156-1.371094 2.56641-1.371094 7.69922z" style="font-feature-settings:normal;font-variant-caps:normal;font-variant-ligatures:normal;font-variant-numeric:normal"/>
|
||||
<path id="p" d="m122.7539 604.0143q-3.02344 0-5.41407-0.98437-2.39062-1.01953-4.74609-3.6211h-0.63281q0.63281 4.1836 0.63281 5.20313v15.99609h-13.74609v-57.1289h11.17968l1.9336 5.0625h0.63281q3.83203-5.76563 10.58203-5.76563 6.60938 0 10.37109 5.48438 3.76172 5.48437 3.76172 15.04687 0 9.63281-3.9375 15.1875-3.90234 5.51953-10.61718 5.51953zm-4.60547-30.44531q-3.02344 0-4.25391 2.17969-1.19531 2.14453-1.30078 6.39843v1.08985q0 5.13281 1.37109 7.41797 1.3711 2.28515 4.32422 2.28515 2.63672 0 3.83203-2.25 1.19532-2.28515 1.19532-7.52343 0-5.13282-1.19532-7.34766-1.19531-2.25-3.97265-2.25z" style="font-feature-settings:normal;font-variant-caps:normal;font-variant-ligatures:normal;font-variant-numeric:normal"/>
|
||||
<path id="e1" d="m164.3438 604.0143q-9.94922 0-15.46875-5.27344-5.48438-5.30859-5.48438-15.08203 0-10.08984 5.09766-15.46875 5.09766-5.41406 14.55469-5.41406 9 0 13.88672 4.71094 4.92187 4.67578 4.92187 13.5v6.11719h-24.57422q0.14063 3.33984 2.42578 5.23828 2.32032 1.89843 6.29297 1.89843 3.6211 0 6.64453-0.66796 3.0586-0.70313 6.60938-2.35547v9.8789q-3.23438 1.65235-6.67969 2.28516t-8.22656 0.63281zm-0.80859-31.88672q-2.42579 0-4.07813 1.54688-1.61719 1.51172-1.89844 4.78125h11.8125q-0.0703-2.88281-1.65234-4.60547-1.54688-1.72266-4.18359-1.72266z" style="font-feature-settings:normal;font-variant-caps:normal;font-variant-ligatures:normal;font-variant-numeric:normal"/>
|
||||
<path id="n1" d="m214.8281 603.3112v-21.72657q0-3.97265-1.16015-5.97656-1.125-2.03906-3.65625-2.03906-3.48047 0-5.02735 2.77734-1.54687 2.77735-1.54687 9.52735v17.4375h-13.74609v-39.83203h10.37109l1.72266 4.92187h0.80859q1.75781-2.8125 4.85156-4.21875 3.12891-1.40625 7.17188-1.40625 6.60937 0 10.26562 3.83203 3.69141 3.83203 3.69141 10.79297v25.91016z" style="font-feature-settings:normal;font-variant-caps:normal;font-variant-ligatures:normal;font-variant-numeric:normal"/>
|
||||
<path id="s" d="m283.9102 592.2369q0 5.69531-4.14844 8.7539-4.14844 3.02344-11.88281 3.02344-7.76954 0-12.48047-2.35547v-7.13672q6.85547 3.16407 12.76172 3.16407 7.6289 0 7.6289-4.60547 0-1.47656-0.84375-2.46094-0.84375-0.98437-2.77734-2.03906-1.9336-1.05469-5.37891-2.39063-6.71484-2.60156-9.10547-5.20312-2.35547-2.60156-2.35547-6.75 0-4.99219 4.00782-7.73438 4.04297-2.77734 10.96875-2.77734 6.85547 0 12.97265 2.77734l-2.67187 6.22266q-6.29297-2.60156-10.58203-2.60156-6.53907 0-6.53907 3.72656 0 1.82812 1.6875 3.09375 1.72266 1.26562 7.45313 3.48047 4.81641 1.86328 6.99609 3.41015 2.17969 1.54688 3.23438 3.58594 1.05469 2.00391 1.05469 4.81641z" style="font-feature-settings:normal;font-variant-caps:normal;font-variant-ligatures:normal;font-variant-numeric:normal"/>
|
||||
<path id="o2" d="m327.293 583.7994q0 9.52734-4.88672 14.87109t-13.60547 5.34375q-5.44922 0-9.63281-2.46094-4.1836-2.46093-6.4336-7.0664t-2.25-10.6875q0-9.45703 4.85157-14.76563 4.85156-5.30859 13.67578-5.30859 8.4375 0 13.35937 5.44922 4.92188 5.41406 4.92188 14.625zm-28.30078 0q0 13.46484 9.94922 13.46484 9.84375 0 9.84375-13.46484 0-13.32422-9.91407-13.32422-5.20312 0-7.55859 3.44531-2.32031 3.44531-2.32031 9.87891z" style="font-feature-settings:normal;font-variant-caps:normal;font-variant-ligatures:normal;font-variant-numeric:normal"/>
|
||||
<path id="u" d="m364.2422 603.3112-1.16016-5.09766h-0.42187q-1.72266 2.70703-4.92188 4.25391-3.16406 1.54687-7.24219 1.54687-7.0664 0-10.54687-3.51562-3.48047-3.51563-3.48047-10.65235v-25.41797h8.33203v23.97657q0 4.46484 1.82813 6.71484 1.82812 2.21484 5.73046 2.21484 5.20313 0 7.62891-3.09375 2.46094-3.1289 2.46094-10.4414v-19.3711h8.29687v38.88282z" style="font-feature-settings:normal;font-variant-caps:normal;font-variant-ligatures:normal;font-variant-numeric:normal"/>
|
||||
<path id="r" d="m402.2461 563.7252q2.4961 0 4.11328 0.35156l-0.80859 7.69922q-1.75781-0.42187-3.65625-0.42187-4.95703 0-8.05078 3.23437-3.05859 3.23438-3.05859 8.40234v20.32032h-8.26172v-38.88282h6.46875l1.08984 6.85547h0.42188q1.93359-3.48047 5.02734-5.51953 3.12891-2.03906 6.71484-2.03906z" style="font-feature-settings:normal;font-variant-caps:normal;font-variant-ligatures:normal;font-variant-numeric:normal"/>
|
||||
<path id="c" d="m429.2812 604.0143q-8.82422 0-13.42969-5.13281-4.57031-5.16797-4.57031-14.80078 0-9.8086 4.78125-15.08203 4.81641-5.27344 13.88672-5.27344 6.15234 0 11.07422 2.28516l-2.4961 6.64453q-5.23828-2.03907-8.64843-2.03907-10.08985 0-10.08985 13.39454 0 6.53906 2.4961 9.84375 2.53125 3.26953 7.38281 3.26953 5.51953 0 10.4414-2.74219v7.20703q-2.21484 1.30078-4.74609 1.86328-2.49609 0.5625-6.08203 0.5625z" style="font-feature-settings:normal;font-variant-caps:normal;font-variant-ligatures:normal;font-variant-numeric:normal"/>
|
||||
<path id="e2" d="m466.3008 604.0143q-9.07031 0-14.20312-5.27344-5.09766-5.30859-5.09766-14.58984 0-9.52734 4.74609-14.97656 4.7461-5.44922 13.04297-5.44922 7.69922 0 12.16406 4.67578 4.46485 4.67578 4.46485 12.86719v4.46484h-25.91016q0.17578 5.66016 3.0586 8.71875 2.88281 3.02344 8.12109 3.02344 3.44531 0 6.39844-0.63281 2.98828-0.66797 6.39843-2.17969v6.71484q-3.02343 1.44141-6.11718 2.03907-3.09375 0.59765-7.06641 0.59765zm-1.51172-34.03125q-3.9375 0-6.32812 2.4961-2.35547 2.49609-2.8125 7.27734h17.64843q-0.0703-4.81641-2.32031-7.27734-2.25-2.4961-6.1875-2.4961z" style="font-feature-settings:normal;font-variant-caps:normal;font-variant-ligatures:normal;font-variant-numeric:normal"/>
|
||||
<path id="i1" d="m128.5195 675.51h-8.26172v-38.88281h8.26172zm-8.7539-49.18359q0-2.21485 1.19531-3.41016 1.23047-1.19531 3.48047-1.19531 2.17968 0 3.375 1.19531 1.23046 1.19531 1.23046 3.41016 0 2.10937-1.23046 3.33984-1.19532 1.19531-3.375 1.19531-2.25 0-3.48047-1.19531-1.19531-1.23047-1.19531-3.33984z" style="font-feature-settings:normal;font-variant-caps:normal;font-variant-ligatures:normal;font-variant-numeric:normal;stroke-width:.75px"/>
|
||||
<path id="n2" d="m174.5742 675.51h-8.29688v-23.90625q0-4.5-1.82812-6.71484-1.79297-2.21485-5.73047-2.21485-5.23828 0-7.66406 3.09375t-2.42578 10.3711v19.37109h-8.26172v-38.88281h6.46875l1.16015 5.09765h0.42188q1.75781-2.77734 4.99219-4.28906 3.23437-1.51172 7.17187-1.51172 13.99219 0 13.99219 14.23828z" style="font-feature-settings:normal;font-variant-caps:normal;font-variant-ligatures:normal;font-variant-numeric:normal;stroke-width:.75px"/>
|
||||
<path id="i2" d="m194.332 675.51h-8.26172v-38.88281h8.26172zm-8.75391-49.18359q0-2.21485 1.19532-3.41016 1.23047-1.19531 3.48047-1.19531 2.17968 0 3.375 1.19531 1.23046 1.19531 1.23046 3.41016 0 2.10937-1.23046 3.33984-1.19532 1.19531-3.375 1.19531-2.25 0-3.48047-1.19531-1.19532-1.23047-1.19532-3.33984z" style="font-feature-settings:normal;font-variant-caps:normal;font-variant-ligatures:normal;font-variant-numeric:normal;stroke-width:.75px"/>
|
||||
<path id="t1" d="m220.6641 669.5334q3.02344 0 6.04688-0.94922v6.22265q-1.3711 0.59766-3.55078 0.98438-2.14454 0.42187-4.46485 0.42187-11.74219 0-11.74219-12.375v-20.95312h-5.30859v-3.65625l5.69531-3.02344 2.8125-8.22656h5.09766v8.64844h11.07422v6.25781h-11.07422v20.8125q0 2.98828 1.47656 4.42969 1.51172 1.40625 3.9375 1.40625z" style="font-feature-settings:normal;font-variant-caps:normal;font-variant-ligatures:normal;font-variant-numeric:normal;stroke-width:.75px"/>
|
||||
<path id="i3" d="m242.707 675.51h-8.26172v-38.88281h8.26172zm-8.75391-49.18359q0-2.21485 1.19532-3.41016 1.23047-1.19531 3.48047-1.19531 2.17968 0 3.375 1.19531 1.23046 1.19531 1.23046 3.41016 0 2.10937-1.23046 3.33984-1.19532 1.19531-3.375 1.19531-2.25 0-3.48047-1.19531-1.19532-1.23047-1.19532-3.33984z" style="font-feature-settings:normal;font-variant-caps:normal;font-variant-ligatures:normal;font-variant-numeric:normal;stroke-width:.75px"/>
|
||||
<path id="a" d="m278.8828 675.51-1.65234-5.41406h-0.28125q-2.8125 3.55078-5.66016 4.85156-2.84765 1.26562-7.3125 1.26562-5.73047 0-8.96484-3.09375-3.19922-3.09375-3.19922-8.7539 0-6.01172 4.46484-9.07031 4.46485-3.0586 13.60547-3.33985l6.71485-0.21094v-2.07421q0-3.72657-1.75782-5.55469-1.72265-1.86328-5.3789-1.86328-2.98828 0-5.73047 0.8789-2.74219 0.87891-5.27344 2.07422l-2.67187-5.90625q3.16406-1.65234 6.92578-2.49609 3.76172-0.87891 7.10156-0.87891 7.41797 0 11.17969 3.23438 3.79687 3.23437 3.79687 10.16015v26.19141zm-12.30469-5.625q4.5 0 7.20704-2.49609 2.74218-2.53125 2.74218-7.06641v-3.375l-4.99218 0.21094q-5.83594 0.21093-8.50782 1.96875-2.63672 1.72265-2.63672 5.30859 0 2.60156 1.54688 4.04297 1.54687 1.40625 4.64062 1.40625z" style="font-feature-settings:normal;font-variant-caps:normal;font-variant-ligatures:normal;font-variant-numeric:normal;stroke-width:.75px"/>
|
||||
<path id="t2" d="m310.8047 669.5334q3.02343 0 6.04687-0.94922v6.22265q-1.37109 0.59766-3.55078 0.98438-2.14453 0.42187-4.46484 0.42187-11.74219 0-11.74219-12.375v-20.95312h-5.30859v-3.65625l5.69531-3.02344 2.8125-8.22656h5.09765v8.64844h11.07422v6.25781h-11.07422v20.8125q0 2.98828 1.47657 4.42969 1.51172 1.40625 3.9375 1.40625z" style="font-feature-settings:normal;font-variant-caps:normal;font-variant-ligatures:normal;font-variant-numeric:normal;stroke-width:.75px"/>
|
||||
<path id="i4" d="m332.8477 675.51h-8.26172v-38.88281h8.26172zm-8.75391-49.18359q0-2.21485 1.19531-3.41016 1.23047-1.19531 3.48047-1.19531 2.17969 0 3.375 1.19531 1.23047 1.19531 1.23047 3.41016 0 2.10937-1.23047 3.33984-1.19531 1.19531-3.375 1.19531-2.25 0-3.48047-1.19531-1.19531-1.23047-1.19531-3.33984z" style="font-feature-settings:normal;font-variant-caps:normal;font-variant-ligatures:normal;font-variant-numeric:normal;stroke-width:.75px"/>
|
||||
<path id="v" d="m353.5547 675.51-14.76563-38.88281h8.71875l7.91016 22.60547q2.03906 5.69531 2.46094 9.21093h0.28125q0.3164-2.53125 2.46093-9.21093l7.91016-22.60547h8.78906l-14.83594 38.88281z" style="font-feature-settings:normal;font-variant-caps:normal;font-variant-ligatures:normal;font-variant-numeric:normal;stroke-width:.75px"/>
|
||||
<path id="e3" d="m400.207 676.2131q-9.07031 0-14.20312-5.27343-5.09766-5.3086-5.09766-14.58985 0-9.52734 4.74609-14.97656 4.7461-5.44922 13.04297-5.44922 7.69922 0 12.16406 4.67578 4.46485 4.67578 4.46485 12.86719v4.46484h-25.91016q0.17578 5.66016 3.0586 8.71875 2.88281 3.02344 8.12109 3.02344 3.44531 0 6.39844-0.63281 2.98828-0.66797 6.39843-2.17969v6.71485q-3.02343 1.4414-6.11718 2.03906-3.09375 0.59765-7.06641 0.59765zm-1.51172-34.03125q-3.9375 0-6.32812 2.4961-2.35547 2.49609-2.8125 7.27734h17.64843q-0.0703-4.8164-2.32031-7.27734-2.25-2.4961-6.1875-2.4961z" style="font-feature-settings:normal;font-variant-caps:normal;font-variant-ligatures:normal;font-variant-numeric:normal;stroke-width:.75px"/>
|
||||
<path id="registered_tm" d="m431.7151 631.1344h1.75306q1.29857 0 2.07771-0.62727 0.79537-0.64258 0.79537-1.62174 0-1.14745-0.69798-1.63703-0.69798-0.50488-2.20756-0.50488h-1.7206zm7.04472-2.31021q0 1.22395-0.69798 2.17252-0.68174 0.93326-1.93162 1.39224l3.86324 6.04325h-2.72699l-3.36004-5.41597h-2.19133v5.41597h-2.40235v-13.63174h4.23657q2.69453 0 3.9444 0.99446 1.2661 0.99446 1.2661 3.02927zm-17.15731 2.78449q0-3.05987 1.62321-5.73727 1.6232-2.67739 4.46382-4.22262 2.84061-1.54524 6.1195-1.54524 3.24641 0 6.08703 1.52994 2.84061 1.52994 4.48005 4.20733 1.63945 2.67739 1.63945 5.76786 0 3.01398-1.57452 5.66077-1.57451 2.64679-4.41512 4.23793-2.84062 1.59113-6.21689 1.59113-3.36005 0-6.20066-1.57583-2.84062-1.59114-4.43136-4.23793-1.57451-2.64679-1.57451-5.67607zm1.70437 0q0 2.64679 1.41219 4.957 1.41219 2.2949 3.847 3.62595 2.45105 1.31575 5.24297 1.31575 2.82438 0 5.24296-1.33105t3.83077-3.59535q1.42843-2.27961 1.42843-4.9723 0-2.66209-1.4122-4.9417-1.41219-2.2796-3.83077-3.61065-2.40235-1.34635-5.25919-1.34635-2.82439 0-5.24297 1.33105t-3.847 3.61066q-1.41219 2.2643-1.41219 4.95699z" style="fill:currentcolor;font-feature-settings:normal;font-variant-caps:normal;font-variant-ligatures:normal;font-variant-numeric:normal"/>
|
||||
</g>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
|
|
@ -0,0 +1,54 @@
|
|||
@import "/src/styles/mixins.scss";
|
||||
@import "/src/styles/vars.scss";
|
||||
|
||||
#powered-by {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 4em;
|
||||
margin: 12em 0;
|
||||
|
||||
@media screen and (max-width: 47.99999rem) {
|
||||
flex-direction: column;
|
||||
gap: 2.5em;
|
||||
}
|
||||
|
||||
div {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 2.5em;
|
||||
}
|
||||
|
||||
h2 {
|
||||
@include fluid-font-size(1.5625rem);
|
||||
font-weight: 700;
|
||||
line-height: 100%;
|
||||
text-transform: uppercase;
|
||||
color: $color-aquamarine;
|
||||
|
||||
@media screen and (min-width: 48rem) {
|
||||
margin-top: 0.75em;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
padding: 0.5em;
|
||||
color: $color-alto;
|
||||
|
||||
&:hover {
|
||||
color: $color-white;
|
||||
}
|
||||
}
|
||||
|
||||
.sia-logo svg {
|
||||
@include fluid-width(5.5rem);
|
||||
}
|
||||
|
||||
.hns-logo svg {
|
||||
@include fluid-width(4.5rem);
|
||||
}
|
||||
|
||||
.osi-logo svg {
|
||||
@include fluid-width(4.5rem);
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
---
|
||||
import './Socials.scss';
|
||||
---
|
||||
|
||||
<section id="socials">
|
||||
<h2>Get in touch</h2>
|
||||
<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>
|
||||
<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>
|
||||
</a>
|
||||
<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>
|
||||
</a>
|
||||
<a href="#" title="Facebook" class="facebook-logo">
|
||||
<svg viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill="currentcolor" d="M16.7 39.8C7.2 38.1 0 29.9 0 20 0 9 9 0 20 0s20 9 20 20c0 9.9-7.2 18.1-16.7 19.8l-1.1-.9h-4.4l-1.1.9z"/>
|
||||
<path fill="#031418" d="m27.8 25.6.9-5.6h-5.3v-3.9c0-1.6.6-2.8 3-2.8H29V8.2c-1.4-.2-3-.4-4.4-.4-4.6 0-7.8 2.8-7.8 7.8V20h-5v5.6h5v14.1c1.1.2 2.2.3 3.3.3 1.1 0 2.2-.1 3.3-.3V25.6h4.4z"/>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
|
|
@ -0,0 +1,50 @@
|
|||
@import "/src/styles/mixins.scss";
|
||||
@import "/src/styles/vars.scss";
|
||||
|
||||
#socials {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 3em;
|
||||
margin: 12em 0 8em;
|
||||
|
||||
div {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 2.5em;
|
||||
}
|
||||
|
||||
h2 {
|
||||
@include fluid-font-size(1.5625rem);
|
||||
font-weight: 700;
|
||||
line-height: 100%;
|
||||
text-transform: uppercase;
|
||||
color: $color-aquamarine;
|
||||
}
|
||||
|
||||
a {
|
||||
padding: 0.5em;
|
||||
color: $color-alto;
|
||||
|
||||
&:hover {
|
||||
color: $color-white;
|
||||
}
|
||||
}
|
||||
|
||||
.github-logo svg {
|
||||
@include fluid-width(3.5rem);
|
||||
}
|
||||
|
||||
.discord-logo svg {
|
||||
@include fluid-width(3.5rem);
|
||||
}
|
||||
|
||||
.twitter-logo svg {
|
||||
@include fluid-width(3.5rem);
|
||||
}
|
||||
|
||||
.facebook-logo svg {
|
||||
@include fluid-width(3.5rem);
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
---
|
||||
import './Typewriter.scss';
|
||||
import TypewriterContent from './TypewriterContent.jsx';
|
||||
---
|
||||
|
||||
<section id="typewriter">
|
||||
<h1>
|
||||
<TypewriterContent client:load />
|
||||
</h1>
|
||||
</section>
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
@import "/src/styles/mixins.scss";
|
||||
@import "/src/styles/vars.scss";
|
||||
|
||||
#typewriter {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0 7.5%;
|
||||
|
||||
h1 {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
min-height: 2.2em;
|
||||
margin: max(1.1em, 5rem) 0 max(0.9em, 7rem);
|
||||
@include fluid-font-size-xs(6.25rem);
|
||||
line-height: 110%;
|
||||
letter-spacing: -0.06em;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.highlight {
|
||||
color: $color-aquamarine;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
import Typewriter from "typewriter-effect";
|
||||
|
||||
const HeaderContent = () => {
|
||||
var
|
||||
headerStrings = [
|
||||
'Access to the web <br /> for the masses',
|
||||
'An open web for business',
|
||||
'Web3 for the masses',
|
||||
'Web3 for you'
|
||||
],
|
||||
randomString = headerStrings[Math.floor(Math.random() * headerStrings.length)],
|
||||
words = randomString.split(' ');
|
||||
|
||||
return (
|
||||
<Typewriter options={{ cursor: '<span class="highlight">_</span>' }} onInit={ (typewriter) => {
|
||||
typewriter
|
||||
.changeDelay(50)
|
||||
.typeString(randomString.substring(0, randomString.lastIndexOf(' ')) + ' ')
|
||||
.start();
|
||||
typewriter
|
||||
.typeString('<span class="highlight">' + words[words.length - 1] + '</span>')
|
||||
} }/>
|
||||
);
|
||||
};
|
||||
|
||||
export default HeaderContent;
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
---
|
||||
import './Vision.scss';
|
||||
---
|
||||
|
||||
<section id="vision">
|
||||
<div class="feature-group">
|
||||
<h2>Our Vision</h2>
|
||||
<h3>Make Web3 easy for everyone</h3>
|
||||
<p>
|
||||
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.
|
||||
</p>
|
||||
<div>
|
||||
<a href="#" class="btn-main">Download Extension</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
|
@ -0,0 +1,37 @@
|
|||
@import "/src/styles/mixins.scss";
|
||||
@import "/src/styles/vars.scss";
|
||||
|
||||
#vision {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
min-height: 56.8em;
|
||||
@include fluid-margin-lr;
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
min-width: 68em;
|
||||
margin-left: min(0em, calc((100% - 68em) / 2));
|
||||
background-image: url("/src/assets/video-placeholder.webp");
|
||||
background-position: right top;
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.feature-group {
|
||||
max-width: 64em;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 80rem) {
|
||||
p {
|
||||
background: rgba($color-blue-charcoal-2, 0.65);
|
||||
border-radius: 0.5em;
|
||||
padding: 0.3em 0.5em;
|
||||
margin: -0.3em -0.5em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
---
|
||||
import './Web3.scss';
|
||||
---
|
||||
|
||||
<section id="web3" class="tilted-bg">
|
||||
<div class="feature-group">
|
||||
<h2>
|
||||
What is the Web?
|
||||
</h2>
|
||||
<h3>
|
||||
Why Web3 matters
|
||||
</h3>
|
||||
<p>
|
||||
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.
|
||||
</p>
|
||||
<div>
|
||||
<a href="/what-is-web3" class="btn-main">Learn More</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
|
@ -0,0 +1,45 @@
|
|||
@import "/src/styles/mixins.scss";
|
||||
@import "/src/styles/vars.scss";
|
||||
|
||||
#web3 {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
height: 70em;
|
||||
margin-top: 6em;
|
||||
|
||||
&::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 50%;
|
||||
width: 100%;
|
||||
height: 81.7em;
|
||||
max-width: 63.7em;
|
||||
margin: -40em 0 0;
|
||||
background-image: url("/src/assets/img-left.webp");
|
||||
background-position: left;
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
pointer-events: none;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.feature-group {
|
||||
@include fluid-position-left(58.4em, 58em);
|
||||
max-width: 64em;
|
||||
|
||||
h2 {
|
||||
margin-top: 1em;
|
||||
}
|
||||
|
||||
@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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,99 @@
|
|||
---
|
||||
import "./Footer.scss";
|
||||
import logo from "/src/assets/lume-logo.png";
|
||||
---
|
||||
|
||||
<footer>
|
||||
<div>
|
||||
<div class="footer-logo">
|
||||
<a href="/">
|
||||
<img src={logo.src} alt="Lume">
|
||||
</a>
|
||||
</div>
|
||||
<div class="footer-contact">
|
||||
<a href="mailto:contact@lumeweb.com">
|
||||
<svg fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" xmlns="http://www.w3.org/2000/svg">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M21.75 6.75v10.5a2.25 2.25 0 01-2.25 2.25h-15a2.25 2.25 0 01-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25m19.5 0v.243a2.25 2.25 0 01-1.07 1.916l-7.5 4.615a2.25 2.25 0 01-2.36 0L3.32 8.91a2.25 2.25 0 01-1.07-1.916V6.75">
|
||||
</svg>
|
||||
contact@lumeweb.com
|
||||
</a>
|
||||
</div>
|
||||
<div class="footer-phrase">Freedom. Privacy. Ownership.</div>
|
||||
</div>
|
||||
<div>
|
||||
<h5>General</h5>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="/">Home</a>
|
||||
</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>
|
||||
<a href="#">GitHub</a>
|
||||
</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>
|
||||
<a href="#">Browser</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">Extension</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">Universal Storage</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h5>Other</h5>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="#">Browser</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">Extension</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">Universal Storage</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h5>Support Us</h5>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="/donate">Donate</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">Download App</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">Partnerships</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</footer>
|
||||
|
|
@ -0,0 +1,134 @@
|
|||
@import "/src/styles/mixins.scss";
|
||||
@import "/src/styles/vars.scss";
|
||||
|
||||
footer {
|
||||
display: flex;
|
||||
gap: 2%;
|
||||
padding-top: 7em;
|
||||
padding-bottom: 8em;
|
||||
@include fluid-padding-lr;
|
||||
font-family: $font-family-jaldi;
|
||||
@include fluid-font-size(0.625rem);
|
||||
background: $color-blue-charcoal;
|
||||
|
||||
> div {
|
||||
flex-basis: 0;
|
||||
flex-grow: 1;
|
||||
@include fluid-font-size(1.375rem);
|
||||
|
||||
&:first-child {
|
||||
flex-grow: 1.5 !important;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
img {
|
||||
@include fluid-width(8.4375rem);
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: $color-white;
|
||||
}
|
||||
|
||||
h5 {
|
||||
@include fluid-font-size(1.75rem);
|
||||
line-height: 100%;
|
||||
white-space: nowrap;
|
||||
margin: 0.3em 0;
|
||||
}
|
||||
|
||||
li {
|
||||
line-height: 138%;
|
||||
color: $color-cloud;
|
||||
list-style-type: none;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
.footer-logo {
|
||||
a {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
.footer-contact {
|
||||
margin: auto 0;
|
||||
color: $color-cloud;
|
||||
|
||||
a {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
svg {
|
||||
@include fluid-width-height(1.375rem, 1.375rem);
|
||||
margin-right: 0.5em;
|
||||
}
|
||||
}
|
||||
|
||||
.footer-phrase {
|
||||
margin: auto 0 0;
|
||||
font-family: $font-family-jetbrains-mono;
|
||||
font-weight: bold;
|
||||
line-height: 133%;
|
||||
color: $color-aquamarine;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 48rem) and (max-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 (max-width: 47.99999rem) {
|
||||
footer {
|
||||
flex-direction: column;
|
||||
padding-top: 1.5rem;
|
||||
padding-bottom: 5rem;
|
||||
text-align: center;
|
||||
|
||||
> div {
|
||||
margin-top: 2rem;
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
> div:first-child {
|
||||
margin-top: 4rem;
|
||||
order: 2;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 8.4375rem;
|
||||
}
|
||||
|
||||
h5 {
|
||||
font-size: 1.625rem;
|
||||
}
|
||||
}
|
||||
|
||||
.footer-contact {
|
||||
margin: 1.25rem 0;
|
||||
|
||||
a {
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,43 @@
|
|||
---
|
||||
import './JoinCommunity.scss';
|
||||
---
|
||||
|
||||
<section id="join-community">
|
||||
<div>
|
||||
<h2>
|
||||
Join our community, lend a hand.
|
||||
</h2>
|
||||
<p>
|
||||
Web3 gives people control over their data, privacy, and ownership.
|
||||
</p>
|
||||
</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>
|
||||
</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>
|
||||
</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>
|
||||
</a>
|
||||
</div>
|
||||
<div>
|
||||
<a href="#" title="Facebook" class="facebook-logo">
|
||||
<svg viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill="currentcolor" d="M16.7 39.8C7.2 38.1 0 29.9 0 20 0 9 9 0 20 0s20 9 20 20c0 9.9-7.2 18.1-16.7 19.8l-1.1-.9h-4.4l-1.1.9z"/>
|
||||
<path fill="#7afcbb" d="m27.8 25.6.9-5.6h-5.3v-3.9c0-1.6.6-2.8 3-2.8H29V8.2c-1.4-.2-3-.4-4.4-.4-4.6 0-7.8 2.8-7.8 7.8V20h-5v5.6h5v14.1c1.1.2 2.2.3 3.3.3 1.1 0 2.2-.1 3.3-.3V25.6h4.4z"/>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
|
|
@ -0,0 +1,81 @@
|
|||
@import "/src/styles/mixins.scss";
|
||||
@import "/src/styles/vars.scss";
|
||||
|
||||
#join-community {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 2em;
|
||||
padding: 5em 0;
|
||||
@include fluid-padding-lr;
|
||||
background: $color-aquamarine;
|
||||
color: $color-blue-charcoal-2;
|
||||
@include fluid-font-size(0.625rem);
|
||||
|
||||
div {
|
||||
flex-grow: 1;
|
||||
|
||||
&:first-child {
|
||||
flex-grow: 10;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
flex-grow: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 56rem) {
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
|
||||
div:first-child {
|
||||
flex-basis: 100%;
|
||||
margin-bottom: 2em;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
div {
|
||||
flex-grow: 0;
|
||||
}
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin-bottom: 0.25em;
|
||||
@include fluid-font-size(2rem);
|
||||
font-weight: 700;
|
||||
line-height: 153%;
|
||||
text-transform: none;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
p {
|
||||
font-family: $font-family-jaldi;
|
||||
@include fluid-font-size(1.5rem);
|
||||
line-height: 157%;
|
||||
}
|
||||
|
||||
a {
|
||||
display: block;
|
||||
color: #0B3F48;
|
||||
|
||||
&:hover {
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
.github-logo svg {
|
||||
@include fluid-width(3.625rem);
|
||||
}
|
||||
|
||||
.discord-logo svg {
|
||||
@include fluid-width(3.625rem);
|
||||
}
|
||||
|
||||
.twitter-logo svg {
|
||||
@include fluid-width(3.625rem);
|
||||
}
|
||||
|
||||
.facebook-logo svg {
|
||||
@include fluid-width(3.625rem);
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,74 @@
|
|||
import React, { useState, useEffect } from 'react';
|
||||
import './Navbar.scss';
|
||||
import logo from '/src/assets/lume-logo.png';
|
||||
|
||||
function Navbar({ view }) {
|
||||
const [nav, setNav] = useState(false);
|
||||
|
||||
const toggleNav = () => {
|
||||
if(nav) {
|
||||
document.body.classList.remove("scroll-lock");
|
||||
setNav(false);
|
||||
} else {
|
||||
document.body.classList.add("scroll-lock");
|
||||
setNav(true);
|
||||
}
|
||||
}
|
||||
|
||||
const onMenuClick = function(event) {
|
||||
if(!nav) {
|
||||
return;
|
||||
}
|
||||
|
||||
if(event.pageX < event.target.offsetLeft) {
|
||||
// click outside of menu
|
||||
toggleNav();
|
||||
}
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
let resizeTimeout;
|
||||
const onResize = () => {
|
||||
clearTimeout(resizeTimeout);
|
||||
resizeTimeout = setTimeout(() => {
|
||||
if(nav && window.innerWidth >= 900) {
|
||||
toggleNav();
|
||||
}
|
||||
}, 25);
|
||||
};
|
||||
|
||||
window.addEventListener('resize', onResize);
|
||||
|
||||
return () => window.removeEventListener('resize', onResize);
|
||||
}, [nav]);
|
||||
|
||||
return (
|
||||
<nav>
|
||||
<div className="logo">
|
||||
<a href="/">
|
||||
<img src={logo.src} alt="Lume" />
|
||||
</a>
|
||||
</div>
|
||||
<menu className={nav ? 'active' : undefined} onClick={onMenuClick}>
|
||||
<li>
|
||||
<a href="/" className={view === 'home' ? 'current' : undefined} aria-current={view === 'home' ? 'page' : undefined}>Home</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/vision" className={view === 'vision' ? 'current' : undefined} aria-current={view === 'vision' ? 'page' : undefined}>Vision</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/what-is-web3" className={view === 'what' ? 'current' : undefined} aria-current={view === 'what' ? 'page' : undefined}>What is Web3</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/donate" className={view === 'donate' ? 'current' : undefined} aria-current={view === 'donate' ? 'page' : undefined}>Donate</a>
|
||||
</li>
|
||||
<li>
|
||||
<a className="btn-main download-btn" href="#">Download Extension</a>
|
||||
</li>
|
||||
</menu>
|
||||
<button className="hamburger" onClick={toggleNav}>☰</button>
|
||||
</nav>
|
||||
)
|
||||
}
|
||||
|
||||
export default Navbar
|
||||
|
|
@ -0,0 +1,111 @@
|
|||
@import "/src/styles/mixins.scss";
|
||||
@import "/src/styles/vars.scss";
|
||||
|
||||
nav {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 2em 3.75%;
|
||||
@include fluid-font-size(1.25rem);
|
||||
white-space: nowrap;
|
||||
|
||||
.logo {
|
||||
flex-shrink: 0;
|
||||
|
||||
img {
|
||||
@include fluid-width-height(13.125rem, 4.375rem);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
menu {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
li > a {
|
||||
display: block;
|
||||
padding: 0.55em 0.9em;
|
||||
@include fluid-font-size(1.375rem);
|
||||
text-decoration: underline;
|
||||
text-decoration-color: transparent;
|
||||
transition: text-decoration-color $transition-duration;
|
||||
|
||||
&.current, &:hover, &:active {
|
||||
text-decoration-color: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
.download-btn {
|
||||
margin-left: 0.9em;
|
||||
@include fluid-font-size(1.375rem);
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
.hamburger {
|
||||
display: none;
|
||||
font-size: 2rem;
|
||||
cursor: pointer;
|
||||
z-index: 1;
|
||||
margin: 0 3.75% 0 2rem;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 56rem) {
|
||||
nav {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
background: rgba($color-blue-charcoal-2, 0.85);
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
menu {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
flex-direction: column;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: min(-20rem, -100vw);
|
||||
bottom: 0;
|
||||
padding: 7.5em 7.5% 1em;
|
||||
background: rgba($color-blue-charcoal-2, 0.85);
|
||||
transition: right $transition-duration;
|
||||
overflow-y: auto;
|
||||
|
||||
&.active {
|
||||
right: 0;
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: $color-black;
|
||||
animation: $transition-duration bg-opacity forwards;
|
||||
z-index: -1;
|
||||
}
|
||||
}
|
||||
|
||||
li > a {
|
||||
font-size: 1.25rem;
|
||||
padding-left: 0.8em;
|
||||
}
|
||||
|
||||
.download-btn {
|
||||
font-size: 1.25rem;
|
||||
margin: 1.1em 0 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
.hamburger {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes bg-opacity {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 0.85;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
---
|
||||
import './Community.scss';
|
||||
---
|
||||
|
||||
<section id="community">
|
||||
<div class="feature-group">
|
||||
<h2>Community-Powered</h2>
|
||||
<h3>Building a new world for your data</h3>
|
||||
<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>
|
||||
|
|
@ -0,0 +1,28 @@
|
|||
@import "/src/styles/mixins.scss";
|
||||
@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;
|
||||
@include fluid-margin-lr;
|
||||
max-width: 64em;
|
||||
}
|
||||
|
||||
p {
|
||||
background: rgba($color-blue-charcoal, 0.65);
|
||||
border-radius: 0.5em;
|
||||
padding: 0.3em 0.5em;
|
||||
margin: -0.3em -0.5em;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,29 @@
|
|||
---
|
||||
import './Grid.scss';
|
||||
---
|
||||
|
||||
<section id="grid" class="feature-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>
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
@import "/src/styles/mixins.scss";
|
||||
@import "/src/styles/vars.scss";
|
||||
|
||||
#grid {
|
||||
padding-top: 2.05em;
|
||||
padding-bottom: 2.05em;
|
||||
|
||||
div:first-child {
|
||||
background: inherit;
|
||||
border: none
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-family: $font-family-jetbrains-mono;
|
||||
@include fluid-font-size(2.75rem);
|
||||
font-weight: 700;
|
||||
line-height: 129.55%;
|
||||
color: $color-aquamarine;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
---
|
||||
import '../../../styles/jumbotron.scss';
|
||||
---
|
||||
|
||||
<section id="jumbotron">
|
||||
<h1>
|
||||
Easy Web3 access, storage, publishing, and payment for content creation.
|
||||
</h1>
|
||||
</section>
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
---
|
||||
import './People.scss';
|
||||
---
|
||||
|
||||
<section id="people">
|
||||
<div class="feature-group">
|
||||
<h2>Community-Powered</h2>
|
||||
<h3>All about the people, no VC here.</h3>
|
||||
<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. 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>
|
||||
<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>
|
||||
<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>
|
||||
<a href="#" class="btn-main">Contribute to our cause</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
|
@ -0,0 +1,42 @@
|
|||
@import "/src/styles/mixins.scss";
|
||||
@import "/src/styles/vars.scss";
|
||||
|
||||
#people {
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
max-width: 185.6em;
|
||||
min-height: 78.4em;
|
||||
margin: 0 auto;
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: min(0em, calc((100% - 95em) / 2));
|
||||
width: calc(100% - 64em - 7.5%);
|
||||
min-width: 95em;
|
||||
background-image: url("/src/assets/double-brand-bg.png");
|
||||
background-position: 50% 100%;
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.feature-group {
|
||||
box-sizing: content-box;
|
||||
padding: 9em 7.5%;
|
||||
max-width: 64em;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 80rem) {
|
||||
p {
|
||||
background: rgba($color-blue-charcoal-2, 0.65);
|
||||
border-radius: 0.5em;
|
||||
padding: 0.3em 0.5em;
|
||||
margin: -0.3em -0.5em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
---
|
||||
import './Astronaut.scss';
|
||||
---
|
||||
|
||||
<section id="astronaut">
|
||||
<div class="feature-group">
|
||||
<h2>Community-Powered</h2>
|
||||
<h3>Re-defining Web3, for the good of all</h3>
|
||||
<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. 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>
|
||||
<a href="/donate" class="btn-main">Donate</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
|
@ -0,0 +1,37 @@
|
|||
@import "/src/styles/mixins.scss";
|
||||
@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 {
|
||||
@include fluid-margin-lr;
|
||||
max-width: 64em;
|
||||
padding: 6em 0;
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
---
|
||||
import './Building.scss';
|
||||
---
|
||||
|
||||
<section id="building" class="tilted-bg-r">
|
||||
<div>
|
||||
<div class="feature-group">
|
||||
<h2>Community-Powered</h2>
|
||||
<h3>Building a new world for your data</h3>
|
||||
<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>
|
||||
</section>
|
||||
|
|
@ -0,0 +1,46 @@
|
|||
@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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
---
|
||||
import './Grid.scss';
|
||||
---
|
||||
|
||||
<section id="grid" class="feature-grid">
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
</section>
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
#grid {
|
||||
padding-bottom: 4.5em;
|
||||
}
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
---
|
||||
import '../../../styles/jumbotron.scss';
|
||||
---
|
||||
|
||||
<section id="jumbotron">
|
||||
<h1>
|
||||
A new web that is fair and accessible to all, where each user can have a say in its infrastructure.
|
||||
</h1>
|
||||
</section>
|
||||
|
|
@ -0,0 +1 @@
|
|||
/// <reference types="@astrojs/image/client" />
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
---
|
||||
import '../styles/global.scss';
|
||||
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;
|
||||
title: string;
|
||||
}
|
||||
|
||||
const { view, title } = Astro.props;
|
||||
---
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>{title}</title>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0" />
|
||||
<meta name="description" content="Lume Web - Web3 for the masses | Install the Lume Web3 Extension and have a 1-click gateway into the Web3 internet on Opera, Vivaldi, Edge and Firefox." />
|
||||
<meta name="keywords" content="Web3 Extension, Lume Web, Web3" />
|
||||
</head>
|
||||
<body>
|
||||
<Navbar view={view} client:load />
|
||||
<main class={view}>
|
||||
<slot />
|
||||
</main>
|
||||
{view !== 'home' && <JoinCommunity />}
|
||||
<Footer />
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +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>
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
---
|
||||
import Layout from '../layouts/Layout.astro';
|
||||
import Typewriter from '../components/Home/Typewriter/Typewriter.astro';
|
||||
import Vision from '../components/Home/Vision/Vision.astro';
|
||||
import Web3 from '../components/Home/Web3/Web3.astro';
|
||||
import PoweredBy from '../components/Home/PoweredBy/PoweredBy.astro';
|
||||
import Meme from '../components/Home/Meme/Meme.astro';
|
||||
import Grid from '../components/Home/Grid/Grid.astro';
|
||||
import Socials from '../components/Home/Socials/Socials.astro';
|
||||
import CTO from '../components/Home/CTO/CTO.astro';
|
||||
import Message from '../components/Home/Message/Message.astro';
|
||||
---
|
||||
|
||||
<Layout view="home" title="Lume Web - Web3 for the masses">
|
||||
<Typewriter />
|
||||
<Vision />
|
||||
<Web3 />
|
||||
<PoweredBy />
|
||||
<Meme />
|
||||
<Grid />
|
||||
<Socials />
|
||||
<CTO />
|
||||
<Message />
|
||||
</Layout>
|
||||
|
|
@ -0,0 +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 Grid from '../components/Vision/Grid/Grid.astro';
|
||||
import People from '../components/Vision/People/People.astro';
|
||||
---
|
||||
|
||||
<Layout view="vision" title="Vision - Lume Web">
|
||||
<Jumbotron />
|
||||
<Community />
|
||||
<Grid />
|
||||
<People />
|
||||
</Layout>
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
---
|
||||
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';
|
||||
---
|
||||
|
||||
<Layout view="what" title="What is Web3? - Lume Web">
|
||||
<Jumbotron />
|
||||
<Grid />
|
||||
<Building />
|
||||
<Astronaut />
|
||||
</Layout>
|
||||
|
|
@ -0,0 +1,230 @@
|
|||
@import "./mixins.scss";
|
||||
@import "./vars.scss";
|
||||
|
||||
@import url("https://fonts.googleapis.com/css?family=Jaldi:400|JetBrains+Mono:400,700|IBM+Plex+Sans+Devanagari:400");
|
||||
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
html {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-width: 20rem;
|
||||
min-height: 100%;
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
body {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
font-family: "JetBrains Mono", sans-serif;
|
||||
background: $color-blue-charcoal-2;
|
||||
color: $color-white;
|
||||
overflow-x: hidden;
|
||||
overflow-y: scroll;
|
||||
|
||||
&.scroll-lock {
|
||||
overflow-y: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
main {
|
||||
@include fluid-font-size(0.625rem);
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
a, button {
|
||||
transition: color $transition-duration;
|
||||
}
|
||||
|
||||
.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;
|
||||
|
||||
&:hover {
|
||||
color: $color-white;
|
||||
background: $color-blue-charcoal;
|
||||
}
|
||||
}
|
||||
|
||||
.feature-group {
|
||||
h2 {
|
||||
margin-bottom: 1em;
|
||||
@include fluid-font-size(1.5625rem);
|
||||
font-weight: 700;
|
||||
line-height: 100%;
|
||||
text-transform: uppercase;
|
||||
color: $color-aquamarine;
|
||||
}
|
||||
|
||||
h3 {
|
||||
margin-bottom: 0.65em;
|
||||
@include fluid-font-size(2.8125rem);
|
||||
line-height: 109%;
|
||||
}
|
||||
|
||||
h2, h3 {
|
||||
text-shadow: 0.017em 0.017em 0.034em rgba($color-blue-charcoal, 0.65);
|
||||
}
|
||||
|
||||
p, ul {
|
||||
@include fluid-font-size(1.5rem);
|
||||
font-family: $font-family-jaldi;
|
||||
line-height: 148%;
|
||||
color: $color-cloud;
|
||||
transition: background $transition-duration;
|
||||
}
|
||||
|
||||
p + p, ul + p {
|
||||
margin-top: 0.78em;
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style-type: disc;
|
||||
margin-left: 1em;
|
||||
}
|
||||
|
||||
.btn-main {
|
||||
font-family: $font-family-jaldi;
|
||||
@include fluid-font-size(1.5rem);
|
||||
margin-top: 1.57em;
|
||||
}
|
||||
}
|
||||
|
||||
.feature-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(1, 1fr);
|
||||
gap: 0.9em;
|
||||
@include fluid-padding-lr;
|
||||
@include fluid-font-size(1.25rem);
|
||||
|
||||
@media screen and (min-width: 48rem) {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
grid-auto-rows: 1fr;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 64rem) {
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
}
|
||||
|
||||
div {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
padding: 2.95em 1.95em;
|
||||
background: $color-blue-charcoal;
|
||||
border: 0.05em solid transparent;
|
||||
border-radius: 0.5em;
|
||||
font-family: $font-family-jaldi;
|
||||
transition: border-color $transition-duration;
|
||||
|
||||
&:hover {
|
||||
border-color: $color-aquamarine;
|
||||
}
|
||||
}
|
||||
|
||||
h3 {
|
||||
@include fluid-font-size(2rem);
|
||||
line-height: 109%;
|
||||
}
|
||||
|
||||
p {
|
||||
@include fluid-font-size(1.375rem);
|
||||
margin-top: 0.67em;
|
||||
line-height: 124%;
|
||||
color: $color-cloud;
|
||||
}
|
||||
}
|
||||
|
||||
.tilted-bg {
|
||||
position: relative;
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: -5%;
|
||||
bottom: 0;
|
||||
left: -5%;
|
||||
margin: 2% 0;
|
||||
background: $color-blue-charcoal;
|
||||
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: $color-blue-charcoal;
|
||||
transform: matrix(1, 0.04, -0.04, 1, 0, 0);
|
||||
z-index: -1;
|
||||
}
|
||||
}
|
||||
|
||||
main.home {
|
||||
.feature-group h3 {
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
|
||||
main.vision {
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: -1em;
|
||||
left: 50%;
|
||||
width: 103.1em;
|
||||
height: 73.3em;
|
||||
transform: translate(-50%, 0);
|
||||
background: url("/src/assets/vision-bg.png");
|
||||
background-size: contain;
|
||||
z-index: -1;
|
||||
}
|
||||
}
|
||||
|
||||
main.what {
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: -2em;
|
||||
left: 50%;
|
||||
width: 151.3em;
|
||||
height: 122.4em;
|
||||
background: url("/src/assets/what-bg.png");
|
||||
background-size: contain;
|
||||
transform: translate(-50%, 0);
|
||||
z-index: -1;
|
||||
}
|
||||
}
|
||||
|
||||
main.donate {
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: -3em;
|
||||
left: 50%;
|
||||
width: 144em;
|
||||
height: 93.3em;
|
||||
background: url("/src/assets/donate-bg.png");
|
||||
background-size: contain;
|
||||
transform: translate(-50%, 0);
|
||||
z-index: -1;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
@import "./mixins.scss";
|
||||
@import "./vars.scss";
|
||||
|
||||
#jumbotron {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin: 12.5em 7.5% 15em;
|
||||
|
||||
h1 {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
max-width: 21em;
|
||||
height: 2.74em;
|
||||
font-family: $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: 0.017em 0.017em 0.034em rgba($color-blue-charcoal, 0.65);
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,295 @@
|
|||
@use "sass:math";
|
||||
|
||||
$min-vw: 56rem;
|
||||
$max-vw: 476rem; // 336rem, 616rem
|
||||
|
||||
$screen-min: 24rem; // 384px
|
||||
$screen-sm: 48rem; // 768px
|
||||
$screen-md: 64rem; // 1024px
|
||||
$screen-lg: 80rem; // 1280px
|
||||
$screen-default: 96rem; // 1536px
|
||||
|
||||
@function strip-unit($value) {
|
||||
@return math.div($value, ($value * 0 + 1));
|
||||
}
|
||||
|
||||
@mixin fluid-font-size($font-size) {
|
||||
$min-font-size: calc($font-size * 0.75);
|
||||
$max-font-size: calc($font-size * 2.5);
|
||||
|
||||
$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 (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-s($font-size) {
|
||||
$min-font-size: calc($font-size * 0.5);
|
||||
$medium-font-size: calc($font-size * 0.75);
|
||||
$max-font-size: calc($font-size * 2.5);
|
||||
|
||||
$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 (min-width: 20rem) {
|
||||
font-size: calc(#{$min-font-size} + #{strip-unit($medium-font-size - $min-font-size)} * ((100vw - 20rem) / (56 - 20)));
|
||||
}
|
||||
|
||||
@media screen and (min-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 (min-width: $max-vw) {
|
||||
font-size: $max-font-size;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin fluid-font-size-xs($font-size) {
|
||||
$min-font-size: calc($font-size * 0.25);
|
||||
$medium-font-size: calc($font-size * 0.75);
|
||||
$max-font-size: calc($font-size * 2.5);
|
||||
|
||||
$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 (min-width: 20rem) {
|
||||
font-size: calc(#{$min-font-size} + #{strip-unit($medium-font-size - $min-font-size)} * ((100vw - 20rem) / (56 - 20)));
|
||||
}
|
||||
|
||||
@media screen and (min-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 (min-width: $max-vw) {
|
||||
font-size: $max-font-size;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin fluid-width-height($width, $height) {
|
||||
$min-width: calc($width * 0.75);
|
||||
$max-width: calc($width * 2.5);
|
||||
|
||||
$min-height: calc($height * 0.75);
|
||||
$max-height: calc($height * 2.5);
|
||||
|
||||
$u1: unit($min-vw);
|
||||
$u2: unit($max-vw);
|
||||
$u3: unit($width);
|
||||
$u4: unit($height);
|
||||
|
||||
@if $u1 == $u2 and $u1 == $u3 and $u1 == $u4 {
|
||||
& {
|
||||
width: $min-width;
|
||||
height: $min-height;
|
||||
|
||||
@media screen and (min-width: $min-vw) {
|
||||
width: calc(#{$min-width} + #{strip-unit($max-width - $min-width)} * ((100vw - #{$min-vw}) / #{strip-unit($max-vw - $min-vw)}));
|
||||
height: calc(#{$min-height} + #{strip-unit($max-height - $min-height)} * ((100vw - #{$min-vw}) / #{strip-unit($max-vw - $min-vw)}));
|
||||
}
|
||||
|
||||
@media screen and (min-width: $max-vw) {
|
||||
width: $max-width;
|
||||
height: $max-height;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin fluid-width($width) {
|
||||
$min-width: calc($width * 0.75);
|
||||
$max-width: calc($width * 2.5);
|
||||
|
||||
$u1: unit($min-vw);
|
||||
$u2: unit($max-vw);
|
||||
$u3: unit($width);
|
||||
|
||||
@if $u1 == $u2 and $u1 == $u3 {
|
||||
& {
|
||||
width: $min-width;
|
||||
|
||||
@media screen and (min-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 (min-width: $max-vw) {
|
||||
width: $max-width;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin fluid-height($height) {
|
||||
$min-height: calc($height * 0.75);
|
||||
$max-height: calc($height * 2.5);
|
||||
|
||||
$u1: unit($min-vw);
|
||||
$u2: unit($max-vw);
|
||||
$u3: unit($height);
|
||||
|
||||
@if $u1 == $u2 and $u1 == $u3 {
|
||||
& {
|
||||
height: $min-height;
|
||||
|
||||
@media screen and (min-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 (min-width: $max-vw) {
|
||||
height: $max-height;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin fluid-max-width-height($width, $height) {
|
||||
$min-width: calc($width * 0.75);
|
||||
$max-width: calc($width * 2.5);
|
||||
|
||||
$min-height: calc($height * 0.75);
|
||||
$max-height: calc($height * 2.5);
|
||||
|
||||
$u1: unit($min-vw);
|
||||
$u2: unit($max-vw);
|
||||
$u3: unit($width);
|
||||
$u4: unit($height);
|
||||
|
||||
@if $u1 == $u2 and $u1 == $u3 and $u1 == $u4 {
|
||||
& {
|
||||
max-width: $min-width;
|
||||
max-height: $min-height;
|
||||
|
||||
@media screen and (min-width: $min-vw) {
|
||||
max-width: calc(#{$min-width} + #{strip-unit($max-width - $min-width)} * ((100vw - #{$min-vw}) / #{strip-unit($max-vw - $min-vw)}));
|
||||
max-height: calc(#{$min-height} + #{strip-unit($max-height - $min-height)} * ((100vw - #{$min-vw}) / #{strip-unit($max-vw - $min-vw)}));
|
||||
}
|
||||
|
||||
@media screen and (min-width: $max-vw) {
|
||||
max-width: $max-width;
|
||||
max-height: $max-height;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin fluid-position-left($offset, $width) {
|
||||
$min-vw: 48rem;
|
||||
$max-vw: 96rem;
|
||||
|
||||
$min-margin: 7.5%;
|
||||
$max-margin: 7.5%;
|
||||
|
||||
& {
|
||||
margin-left: min(calc($offset + $min-margin), max($min-margin, calc(100vw - $width - $min-margin)));
|
||||
margin-right: $min-margin;
|
||||
|
||||
@media screen and (min-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($offset + $margin), max($margin, calc(100vw - $width - $margin)));
|
||||
margin-right: $margin;
|
||||
}
|
||||
|
||||
@media screen and (min-width: $max-vw) {
|
||||
margin-left: min(calc($offset + $max-margin), max($max-margin, calc(100vw - $width - $max-margin)));
|
||||
margin-right: $max-margin;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin fluid-padding-lr {
|
||||
$min-vw: 48rem;
|
||||
$max-vw: 96rem;
|
||||
|
||||
$min-padding: 7.5%;
|
||||
$max-padding: 7.5%;
|
||||
|
||||
& {
|
||||
padding-left: $min-padding;
|
||||
padding-right: $min-padding;
|
||||
|
||||
@media screen and (min-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 (min-width: $max-vw) {
|
||||
padding-left: $max-padding;
|
||||
padding-right: $max-padding;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin fluid-margin-lr {
|
||||
$min-vw: 48rem;
|
||||
$max-vw: 96rem;
|
||||
|
||||
$min-margin: 7.5%;
|
||||
$max-margin: 7.5%;
|
||||
|
||||
& {
|
||||
margin-left: $min-margin;
|
||||
margin-right: $min-margin;
|
||||
|
||||
@media screen and (min-width: $min-vw) {
|
||||
margin-left: calc(#{$min-margin} + #{strip-unit($max-margin - $min-margin)} * ((100vw - #{$min-vw}) / #{strip-unit($max-vw - $min-vw)}));
|
||||
margin-right: calc(#{$min-margin} + #{strip-unit($max-margin - $min-margin)} * ((100vw - #{$min-vw}) / #{strip-unit($max-vw - $min-vw)}));
|
||||
}
|
||||
|
||||
@media screen and (min-width: $max-vw) {
|
||||
margin-left: $max-margin;
|
||||
margin-right: $max-margin;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin fluid-margin-lr-rem($margin) {
|
||||
$min-margin: calc($margin * 0.75);
|
||||
$max-margin: calc($margin * 2.5);
|
||||
|
||||
$u1: unit($min-vw);
|
||||
$u2: unit($max-vw);
|
||||
$u3: unit($margin);
|
||||
|
||||
@if $u1 == $u2 and $u1 == $u3 {
|
||||
& {
|
||||
margin-left: $min-margin;
|
||||
margin-right: $min-margin;
|
||||
|
||||
@media screen and (min-width: $min-vw) {
|
||||
margin-left: calc(#{$min-margin} + #{strip-unit($max-margin - $min-margin)} * ((100vw - #{$min-vw}) / #{strip-unit($max-vw - $min-vw)}));
|
||||
margin-right: calc(#{$min-margin} + #{strip-unit($max-margin - $min-margin)} * ((100vw - #{$min-vw}) / #{strip-unit($max-vw - $min-vw)}));
|
||||
}
|
||||
|
||||
@media screen and (min-width: $max-vw) {
|
||||
margin-left: $max-margin;
|
||||
margin-right: $max-margin;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
$color-black: #000;
|
||||
$color-white: #fff;
|
||||
$color-blue-charcoal: #020e10;
|
||||
$color-blue-charcoal-2: #031418;
|
||||
$color-aquamarine: #7afcbb;
|
||||
$color-cloud: #c7c7c7;
|
||||
$color-alto: #d9d9d9;
|
||||
|
||||
$font-family-ibm-plex-sans-devanagari: "IBM Plex Sans Devanagari";
|
||||
$font-family-jaldi: "Jaldi";
|
||||
$font-family-jetbrains-mono: "JetBrains Mono";
|
||||
|
||||
$transition-duration: 250ms;
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
/** @type {import('tailwindcss').Config} */
|
||||
module.exports = {
|
||||
content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
|
||||
theme: { }
|
||||
}
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
{
|
||||
"extends": "astro/tsconfigs/base"
|
||||
}
|
||||
Loading…
Reference in New Issue