create astro project, complete initial design
This commit is contained in:
parent
aee06f037b
commit
e2a975abc4
|
|
@ -1,31 +0,0 @@
|
||||||
name: Deploy
|
|
||||||
|
|
||||||
on:
|
|
||||||
pull_request:
|
|
||||||
push:
|
|
||||||
branches: [master]
|
|
||||||
|
|
||||||
jobs:
|
|
||||||
build:
|
|
||||||
runs-on: ubuntu-latest
|
|
||||||
|
|
||||||
steps:
|
|
||||||
- uses: actions/checkout@v2
|
|
||||||
- uses: actions/setup-node@v2
|
|
||||||
with:
|
|
||||||
node-version: 16.x
|
|
||||||
- name: Install dependencies
|
|
||||||
run: yarn
|
|
||||||
|
|
||||||
- name: Build
|
|
||||||
run: yarn build
|
|
||||||
|
|
||||||
- name: Deploy to Skynet
|
|
||||||
uses: SkynetLabs/deploy-to-skynet-action@v2
|
|
||||||
with:
|
|
||||||
upload-dir: public
|
|
||||||
github-token: ${{ secrets.GITHUB_TOKEN }}
|
|
||||||
portal-url: https://web3portal.com
|
|
||||||
skynet-api-key: ${{ github.event_name == 'push' && github.ref == 'refs/heads/master' && secrets.SKYNET_API_KEY || '' }}
|
|
||||||
registry-seed: ${{ github.event_name == 'push' && github.ref == 'refs/heads/master' && secrets.REGISTRY_SEED || '' }}
|
|
||||||
registry-datakey: web3extension.com
|
|
||||||
|
|
@ -1,3 +1,2 @@
|
||||||
node_modules/
|
node_modules
|
||||||
.cache/
|
dist
|
||||||
public
|
|
||||||
|
|
|
||||||
21
LICENSE
21
LICENSE
|
|
@ -1,21 +0,0 @@
|
||||||
MIT License
|
|
||||||
|
|
||||||
Copyright (c) 2022 Hammer Technologies LLC
|
|
||||||
|
|
||||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
||||||
of this software and associated documentation files (the "Software"), to deal
|
|
||||||
in the Software without restriction, including without limitation the rights
|
|
||||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
||||||
copies of the Software, and to permit persons to whom the Software is
|
|
||||||
furnished to do so, subject to the following conditions:
|
|
||||||
|
|
||||||
The above copyright notice and this permission notice shall be included in all
|
|
||||||
copies or substantial portions of the Software.
|
|
||||||
|
|
||||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
||||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
||||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
||||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
||||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
||||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
||||||
SOFTWARE.
|
|
||||||
48
README.md
48
README.md
|
|
@ -1 +1,47 @@
|
||||||
# Web3Extension.com
|
# 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()],
|
||||||
|
});
|
||||||
|
|
@ -1,2 +0,0 @@
|
||||||
import "./src/css/reset.scss"
|
|
||||||
import "./src/css/style.scss"
|
|
||||||
|
|
@ -1,51 +0,0 @@
|
||||||
import type {GatsbyConfig} from "gatsby";
|
|
||||||
|
|
||||||
const config: GatsbyConfig = {
|
|
||||||
siteMetadata: {
|
|
||||||
title: 'Lume Web Web3 Extension',
|
|
||||||
description: 'Get the browser extension that will give you free, open access into the user-owned Web3 Internet',
|
|
||||||
siteUrl: 'https://web3extension.com',
|
|
||||||
twitter: '@lumeweb3',
|
|
||||||
siteLanguage: 'en',
|
|
||||||
ogLanguage: 'en-US',
|
|
||||||
},
|
|
||||||
plugins: ["gatsby-plugin-sass", "gatsby-plugin-image", "gatsby-plugin-react-helmet", {
|
|
||||||
resolve: 'gatsby-plugin-manifest',
|
|
||||||
options: {
|
|
||||||
"icon": "src/images/icon.png"
|
|
||||||
}
|
|
||||||
}, {
|
|
||||||
resolve: 'gatsby-source-filesystem',
|
|
||||||
options: {
|
|
||||||
"name": "images",
|
|
||||||
"path": "./src/images/"
|
|
||||||
},
|
|
||||||
__key: "images"
|
|
||||||
},
|
|
||||||
`gatsby-plugin-offline`,
|
|
||||||
"gatsby-plugin-sharp",
|
|
||||||
`gatsby-transformer-sharp`,
|
|
||||||
{
|
|
||||||
resolve: `gatsby-plugin-web-font-loader`,
|
|
||||||
options: {
|
|
||||||
google: {
|
|
||||||
families: ['Roboto']
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
resolve: 'gatsby-plugin-matomo',
|
|
||||||
options: {
|
|
||||||
siteId: '2',
|
|
||||||
matomoUrl: 'https://piwiki.lumeweb.com',
|
|
||||||
siteUrl: 'https://web3extension.com',
|
|
||||||
enableJSErrorTracking: true,
|
|
||||||
exclude: ['/offline-plugin-app-shell-fallback/'],
|
|
||||||
cookieDomain: '*.web3extension.com',
|
|
||||||
}
|
|
||||||
}
|
|
||||||
],
|
|
||||||
|
|
||||||
};
|
|
||||||
|
|
||||||
export default config;
|
|
||||||
50
package.json
50
package.json
|
|
@ -1,42 +1,22 @@
|
||||||
{
|
{
|
||||||
"name": "web3-extension",
|
"name": "lume-web3extension",
|
||||||
"version": "1.0.0",
|
"type": "module",
|
||||||
|
"version": "0.0.1",
|
||||||
"private": true,
|
"private": true,
|
||||||
"description": "web3-extension",
|
|
||||||
"author": "Derrick Hammer",
|
|
||||||
"keywords": [
|
|
||||||
"gatsby"
|
|
||||||
],
|
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"develop": "gatsby develop",
|
"dev": "TAILWIND_MODE=watch astro dev",
|
||||||
"start": "gatsby develop",
|
"start": "astro dev",
|
||||||
"build": "gatsby build",
|
"build": "astro build",
|
||||||
"serve": "gatsby serve",
|
"preview": "astro preview",
|
||||||
"clean": "gatsby clean",
|
"astro": "astro"
|
||||||
"typecheck": "tsc --noEmit"
|
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"gatsby": "^4.15.1",
|
"@astrojs/image": "^0.16.6",
|
||||||
"gatsby-plugin-image": "^2.15.0",
|
"@astrojs/react": "^2.1.1",
|
||||||
"gatsby-plugin-manifest": "^4.15.0",
|
"@astrojs/tailwind": "^3.1.1",
|
||||||
"gatsby-plugin-matomo": "^0.13.0",
|
"astro": "^2.3.2",
|
||||||
"gatsby-plugin-offline": "^5.15.0",
|
"autoprefixer": "^10.4.14",
|
||||||
"gatsby-plugin-react-helmet": "^5.15.0",
|
"sass": "^1.62.1",
|
||||||
"gatsby-plugin-sass": "^5.15.0",
|
"tailwindcss": "^3.3.2"
|
||||||
"gatsby-plugin-sharp": "^4.15.0",
|
|
||||||
"gatsby-plugin-web-font-loader": "^1.0.4",
|
|
||||||
"gatsby-source-filesystem": "^4.15.0",
|
|
||||||
"gatsby-transformer-sharp": "^4.15.0",
|
|
||||||
"react": "^17.0.1",
|
|
||||||
"react-dom": "^17.0.1",
|
|
||||||
"react-helmet": "^6.1.0",
|
|
||||||
"sass": "^1.52.1"
|
|
||||||
},
|
|
||||||
"devDependencies": {
|
|
||||||
"@types/node": "^17.0.35",
|
|
||||||
"@types/react": "^18.0.9",
|
|
||||||
"@types/react-dom": "^18.0.4",
|
|
||||||
"@types/react-helmet": "^6.1.5",
|
|
||||||
"typescript": "^4.6.4"
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -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 |
|
|
@ -0,0 +1,2 @@
|
||||||
|
User-Agent: *
|
||||||
|
Allow: /
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 1.1 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 262 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 544 KiB |
|
|
@ -0,0 +1,3 @@
|
||||||
|
<svg viewBox="0 0 127.14 96.36" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path fill="currentcolor" d="M107.7,8.07A105.15,105.15,0,0,0,81.47,0a72.06,72.06,0,0,0-3.36,6.83A97.68,97.68,0,0,0,49,6.83,72.37,72.37,0,0,0,45.64,0,105.89,105.89,0,0,0,19.39,8.09C2.79,32.65-1.71,56.6.54,80.21h0A105.73,105.73,0,0,0,32.71,96.36,77.7,77.7,0,0,0,39.6,85.25a68.42,68.42,0,0,1-10.85-5.18c.91-.66,1.8-1.34,2.66-2a75.57,75.57,0,0,0,64.32,0c.87.71,1.76,1.39,2.66,2a68.68,68.68,0,0,1-10.87,5.19,77,77,0,0,0,6.89,11.1A105.25,105.25,0,0,0,126.6,80.22h0C129.24,52.84,122.09,29.11,107.7,8.07ZM42.45,65.69C36.18,65.69,31,60,31,53s5-12.74,11.43-12.74S54,46,53.89,53,48.84,65.69,42.45,65.69Zm42.24,0C78.41,65.69,73.25,60,73.25,53s5-12.74,11.44-12.74S96.23,46,96.12,53,91.08,65.69,84.69,65.69Z"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 773 B |
|
|
@ -0,0 +1,4 @@
|
||||||
|
<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>
|
||||||
|
After Width: | Height: | Size: 391 B |
Binary file not shown.
|
After Width: | Height: | Size: 5.6 KiB |
|
|
@ -0,0 +1,3 @@
|
||||||
|
<svg viewBox="0 0 98 96" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path fill="currentcolor" fill-rule="evenodd" clip-rule="evenodd" d="M48.854 0C21.839 0 0 22 0 49.217c0 21.756 13.993 40.172 33.405 46.69 2.427.49 3.316-1.059 3.316-2.362 0-1.141-.08-5.052-.08-9.127-13.59 2.934-16.42-5.867-16.42-5.867-2.184-5.704-5.42-7.17-5.42-7.17-4.448-3.015.324-3.015.324-3.015 4.934.326 7.523 5.052 7.523 5.052 4.367 7.496 11.404 5.378 14.235 4.074.404-3.178 1.699-5.378 3.074-6.6-10.839-1.141-22.243-5.378-22.243-24.283 0-5.378 1.94-9.778 5.014-13.2-.485-1.222-2.184-6.275.486-13.038 0 0 4.125-1.304 13.426 5.052a46.97 46.97 0 0 1 12.214-1.63c4.125 0 8.33.571 12.213 1.63 9.302-6.356 13.427-5.052 13.427-5.052 2.67 6.763.97 11.816.485 13.038 3.155 3.422 5.015 7.822 5.015 13.2 0 18.905-11.404 23.06-22.324 24.283 1.78 1.548 3.316 4.481 3.316 9.126 0 6.6-.08 11.897-.08 13.526 0 1.304.89 2.853 3.316 2.364 19.412-6.52 33.405-24.935 33.405-46.691C97.707 22 75.788 0 48.854 0z"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 969 B |
|
|
@ -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 |
Binary file not shown.
|
After Width: | Height: | Size: 252 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 26 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 19 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 9.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 8.0 KiB |
|
|
@ -0,0 +1,26 @@
|
||||||
|
<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>
|
||||||
|
After Width: | Height: | Size: 13 KiB |
|
|
@ -0,0 +1,5 @@
|
||||||
|
<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>
|
||||||
|
After Width: | Height: | Size: 1.2 KiB |
|
|
@ -0,0 +1,3 @@
|
||||||
|
<svg version="1.1" viewBox="0 0 400 400" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path fill="currentcolor" d="M400,200c0,110.5-89.5,200-200,200S0,310.5,0,200S89.5,0,200,0S400,89.5,400,200z M163.4,305.5 c88.7,0,137.2-73.5,137.2-137.2c0-2.1,0-4.2-0.1-6.2c9.4-6.8,17.6-15.3,24.1-25c-8.6,3.8-17.9,6.4-27.7,7.6 c10-6,17.6-15.4,21.2-26.7c-9.3,5.5-19.6,9.5-30.6,11.7c-8.8-9.4-21.3-15.2-35.2-15.2c-26.6,0-48.2,21.6-48.2,48.2 c0,3.8,0.4,7.5,1.3,11c-40.1-2-75.6-21.2-99.4-50.4c-4.1,7.1-6.5,15.4-6.5,24.2c0,16.7,8.5,31.5,21.5,40.1c-7.9-0.2-15.3-2.4-21.8-6 c0,0.2,0,0.4,0,0.6c0,23.4,16.6,42.8,38.7,47.3c-4,1.1-8.3,1.7-12.7,1.7c-3.1,0-6.1-0.3-9.1-0.9c6.1,19.2,23.9,33.1,45,33.5 c-16.5,12.9-37.3,20.6-59.9,20.6c-3.9,0-7.7-0.2-11.5-0.7C110.8,297.5,136.2,305.5,163.4,305.5"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 764 B |
|
|
@ -0,0 +1,19 @@
|
||||||
|
---
|
||||||
|
import './Difference.scss';
|
||||||
|
---
|
||||||
|
|
||||||
|
<section id="difference" class="tilted-bg-r">
|
||||||
|
<div>
|
||||||
|
<div class="feature-group">
|
||||||
|
<h2>
|
||||||
|
Powered by you
|
||||||
|
</h2>
|
||||||
|
<h3>
|
||||||
|
How we’re different
|
||||||
|
</h3>
|
||||||
|
<p>
|
||||||
|
The .com boom/bubble/bust was a gold rush for VC's and everyone looking to get rich. We've entered that era again with crypto, web3, and the "metaverse". The metaverse is PR hype and not worth pursuing. Lume Web has no VC equity and will never give out equity to investment companies since their interests go against a user-owned internet.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
@ -0,0 +1,64 @@
|
||||||
|
@import "/src/styles/mixins.scss";
|
||||||
|
@import "/src/styles/vars.scss";
|
||||||
|
|
||||||
|
#difference {
|
||||||
|
padding: 12em 7.5% 7em;
|
||||||
|
max-width: 192em;
|
||||||
|
margin: 0 auto;
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
bottom: -12%;
|
||||||
|
}
|
||||||
|
|
||||||
|
> div {
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-end;
|
||||||
|
align-items: center;
|
||||||
|
min-height: 34em;
|
||||||
|
margin: 0 auto;
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
bottom: 0;
|
||||||
|
left: min(0em, calc((100% - 68.9em) / 2));
|
||||||
|
width: calc(100% - 72em - 7.5%);
|
||||||
|
min-width: calc(68.9em);
|
||||||
|
background-image: url("/src/assets/difference-bg.png");
|
||||||
|
background-position: 50% 50%;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-size: contain;
|
||||||
|
z-index: -1;
|
||||||
|
}
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
bottom: 0;
|
||||||
|
left: min(0em, calc((100% - 68.9em) / 2));
|
||||||
|
width: calc(100% - 72em - 7.5%);
|
||||||
|
min-width: calc(68.9em);
|
||||||
|
background: radial-gradient(50% 50% at 50% 50%, rgba($color-blue-charcoal, 0) 48.31%, $color-blue-charcoal 100%);
|
||||||
|
z-index: -1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.feature-group {
|
||||||
|
margin: 2em 0;
|
||||||
|
max-width: 72em;
|
||||||
|
|
||||||
|
h3 {
|
||||||
|
font-weight: 400;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
padding: 0.3em 0.5em;
|
||||||
|
margin: -0.3em -0.5em;
|
||||||
|
background: rgba($color-blue-charcoal-2, 0.8);
|
||||||
|
border-radius: 0.5em;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,12 @@
|
||||||
|
---
|
||||||
|
import './HowToSupport.scss';
|
||||||
|
---
|
||||||
|
|
||||||
|
<section id="how-to-support">
|
||||||
|
<h2>
|
||||||
|
How to support Lume Web
|
||||||
|
</h2>
|
||||||
|
<p>
|
||||||
|
We aren't picky 😉. If there is a way you want to pay us, we are happy to take it. The project is funded through Hammer Technologies LLC, in the USA, and so crypto, FOSS platforms, and traditional payment methods are all accepted! Just click donate at the top to see your options, and to contact us if needed.
|
||||||
|
</p>
|
||||||
|
</section>
|
||||||
|
|
@ -0,0 +1,23 @@
|
||||||
|
@import "/src/styles/mixins.scss";
|
||||||
|
@import "/src/styles/vars.scss";
|
||||||
|
|
||||||
|
#how-to-support {
|
||||||
|
padding: 5em 7.5%;
|
||||||
|
background: $color-brand;
|
||||||
|
color: $color-blue-charcoal-2;
|
||||||
|
|
||||||
|
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: 165%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,54 @@
|
||||||
|
---
|
||||||
|
import './Purposes.scss';
|
||||||
|
---
|
||||||
|
|
||||||
|
<section id="purposes" class="feature-grid">
|
||||||
|
<div class="purpose-development">
|
||||||
|
<div>
|
||||||
|
<img src="/src/assets/icon-development.png" />
|
||||||
|
</div>
|
||||||
|
<div class="feature-group">
|
||||||
|
<h2>
|
||||||
|
Community Services
|
||||||
|
</h2>
|
||||||
|
<h3>
|
||||||
|
Development Spending
|
||||||
|
</h3>
|
||||||
|
<p>
|
||||||
|
All donations are spent on active development of Lume Web and maintaining community services.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="purpose-pioneering">
|
||||||
|
<div>
|
||||||
|
<img src="/src/assets/icon-pioneering.png" />
|
||||||
|
</div>
|
||||||
|
<div class="feature-group">
|
||||||
|
<h2>
|
||||||
|
Build what you want
|
||||||
|
</h2>
|
||||||
|
<h3>
|
||||||
|
Help pioneer Web3
|
||||||
|
</h3>
|
||||||
|
<p>
|
||||||
|
The Web3 is taking back the internet to be the user-owned internet. If we, the users, don't fund and build what we want, it will be again, decided for us, and benefit others and become centralized to a few, not decentralized for the many.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="purpose-growth">
|
||||||
|
<div>
|
||||||
|
<img src="/src/assets/icon-growth.png" />
|
||||||
|
</div>
|
||||||
|
<div class="feature-group">
|
||||||
|
<h2>
|
||||||
|
Open gateway
|
||||||
|
</h2>
|
||||||
|
<h3>
|
||||||
|
Help us grow
|
||||||
|
</h3>
|
||||||
|
<p>
|
||||||
|
We need the communities voice and hands. Lume Web is your open gateway and platform, so it must be built by those who are going to use it the most.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
@ -0,0 +1,18 @@
|
||||||
|
@import "/src/styles/mixins.scss";
|
||||||
|
@import "/src/styles/vars.scss";
|
||||||
|
|
||||||
|
#purposes {
|
||||||
|
background: $color-black;
|
||||||
|
|
||||||
|
.purpose-development img {
|
||||||
|
@include fluid-width(3.4375rem);
|
||||||
|
}
|
||||||
|
|
||||||
|
.purpose-pioneering img {
|
||||||
|
@include fluid-width(3.4375rem);
|
||||||
|
}
|
||||||
|
|
||||||
|
.purpose-growth img {
|
||||||
|
@include fluid-width(3.4375rem);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,39 @@
|
||||||
|
---
|
||||||
|
import './Support.scss';
|
||||||
|
import svgSia from '/src/assets/sia.svg?raw';
|
||||||
|
import svgHns from '/src/assets/hns.svg?raw';
|
||||||
|
import svgOsi from '/src/assets/osi.svg?raw';
|
||||||
|
---
|
||||||
|
|
||||||
|
<section id="support">
|
||||||
|
<div>
|
||||||
|
<div class="powered-by">
|
||||||
|
<a href="https://sia.tech" title="Sia" class="sia-logo">
|
||||||
|
<Fragment set:html={svgSia} />
|
||||||
|
</a>
|
||||||
|
<a href="https://handshake.org" title="Handshake" class="hns-logo">
|
||||||
|
<Fragment set:html={svgHns} />
|
||||||
|
</a>
|
||||||
|
<a href="https://opensource.org/osd/" title="Open Source Initiative" class="osi-logo">
|
||||||
|
<Fragment set:html={svgOsi} />
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div class="feature-group">
|
||||||
|
<h2>
|
||||||
|
Access Web3
|
||||||
|
</h2>
|
||||||
|
<h3>
|
||||||
|
Support Lume Web, help us build
|
||||||
|
</h3>
|
||||||
|
<p>
|
||||||
|
There's a lot of hype around "Web3" and "The Metaverse" as people see money in it, similar to the second .com boom. However, many platforms claiming to be "Web3" are just trying to make money off you and aren't truly secure or decentralized.
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
While some services have technology that can be building blocks for the next internet, many become centralized "SaaS" services that aim to sell something, creating another walled garden with blockchain technology mixed in.
|
||||||
|
</p>
|
||||||
|
<div>
|
||||||
|
<a href="https://lumeweb.com/donation" class="btn-main">Make a donation</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
@ -0,0 +1,70 @@
|
||||||
|
@import "/src/styles/mixins.scss";
|
||||||
|
@import "/src/styles/vars.scss";
|
||||||
|
|
||||||
|
#support {
|
||||||
|
padding: 10.6em 7.5%;
|
||||||
|
|
||||||
|
> div {
|
||||||
|
display: flex;
|
||||||
|
gap: 7.5%;
|
||||||
|
max-width: 152em;
|
||||||
|
margin: 0 auto;
|
||||||
|
|
||||||
|
@media screen and (max-width: 47.99999rem) {
|
||||||
|
flex-direction: column;
|
||||||
|
flex-flow: column-reverse;
|
||||||
|
align-items: flex-end;
|
||||||
|
gap: 4em;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.powered-by {
|
||||||
|
flex-grow: 1;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 4em;
|
||||||
|
|
||||||
|
@media screen and (min-width: 48rem) and (max-width: 56rem) {
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: $color-alto;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: $color-white;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.sia-logo svg {
|
||||||
|
@include fluid-width(7.5rem);
|
||||||
|
}
|
||||||
|
|
||||||
|
.hns-logo svg {
|
||||||
|
@include fluid-width(5.5rem);
|
||||||
|
}
|
||||||
|
|
||||||
|
.osi-logo svg {
|
||||||
|
@include fluid-width(5.5rem);
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 47.99999rem) {
|
||||||
|
.sia-logo svg {
|
||||||
|
@include fluid-width(3.75rem);
|
||||||
|
}
|
||||||
|
|
||||||
|
.hns-logo svg {
|
||||||
|
@include fluid-width(2.75rem);
|
||||||
|
}
|
||||||
|
|
||||||
|
.osi-logo svg {
|
||||||
|
@include fluid-width(2.75rem);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.feature-group {
|
||||||
|
max-width: 80em;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,38 @@
|
||||||
|
---
|
||||||
|
import './Why.scss';
|
||||||
|
|
||||||
|
import svgGithub from '/src/assets/github.svg?raw';
|
||||||
|
import svgDiscord from '/src/assets/discord.svg?raw';
|
||||||
|
import svgTwitter from '/src/assets/twitter.svg?raw';
|
||||||
|
import svgFacebook from '/src/assets/facebook.svg?raw';
|
||||||
|
---
|
||||||
|
|
||||||
|
<section id="why">
|
||||||
|
<div>
|
||||||
|
<div class="feature-group">
|
||||||
|
<h2>
|
||||||
|
Powered by you
|
||||||
|
</h2>
|
||||||
|
<h3>
|
||||||
|
Why we ask for your donations
|
||||||
|
</h3>
|
||||||
|
<p>
|
||||||
|
Lume Web is a small initiative with big ideas and a unique vision. We rely on the community and crypto whales to support us in building technology that empowers internet users. The current internet is controlled by a few, turning users into products in exchange for "free" services, making us batteries in the matrix.
|
||||||
|
</p>
|
||||||
|
<div class="socials">
|
||||||
|
<a href="#" title="GitHub" class="github-logo">
|
||||||
|
<Fragment set:html={svgGithub} />
|
||||||
|
</a>
|
||||||
|
<a href="#" title="Discord" class="discord-logo">
|
||||||
|
<Fragment set:html={svgDiscord} />
|
||||||
|
</a>
|
||||||
|
<a href="#" title="Twitter" class="twitter-logo">
|
||||||
|
<Fragment set:html={svgTwitter} />
|
||||||
|
</a>
|
||||||
|
<a href="#" title="Facebook" class="facebook-logo">
|
||||||
|
<Fragment set:html={svgFacebook} />
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
@ -0,0 +1,79 @@
|
||||||
|
@import "/src/styles/mixins.scss";
|
||||||
|
@import "/src/styles/vars.scss";
|
||||||
|
|
||||||
|
#why {
|
||||||
|
padding: 8em 7.5% 7em;
|
||||||
|
max-width: 192em;
|
||||||
|
margin: 0 auto;
|
||||||
|
|
||||||
|
> div {
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
min-height: 42em;
|
||||||
|
margin: 0 auto;
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
bottom: 0;
|
||||||
|
right: min(0em, calc((100% - 56em) / 2));
|
||||||
|
width: calc(100% - 72em - 7.5%);
|
||||||
|
min-width: calc(56em);
|
||||||
|
background-image: url("/src/assets/astronaut.png");
|
||||||
|
background-position: 50% 50%;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-size: contain;
|
||||||
|
z-index: -1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.socials {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 2em;
|
||||||
|
margin: 4em -0.5em -0.5em;
|
||||||
|
|
||||||
|
a {
|
||||||
|
padding: 0.5em;
|
||||||
|
color: $color-alto;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: $color-brand;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.github-logo svg {
|
||||||
|
@include fluid-width(2.75rem);
|
||||||
|
}
|
||||||
|
|
||||||
|
.discord-logo svg {
|
||||||
|
@include fluid-width(2.75rem);
|
||||||
|
}
|
||||||
|
|
||||||
|
.twitter-logo svg {
|
||||||
|
@include fluid-width(2.75rem);
|
||||||
|
}
|
||||||
|
|
||||||
|
.facebook-logo svg {
|
||||||
|
@include fluid-width(2.75rem);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.feature-group {
|
||||||
|
margin: 2em 0;
|
||||||
|
max-width: 72em;
|
||||||
|
|
||||||
|
h3 {
|
||||||
|
font-weight: 400;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
padding: 0.3em 0.5em;
|
||||||
|
margin: -0.3em -0.5em;
|
||||||
|
background: rgba($color-blue-charcoal-2, 0.8);
|
||||||
|
border-radius: 0.5em;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -1,31 +0,0 @@
|
||||||
import React from "react"
|
|
||||||
import {Link} from "gatsby"
|
|
||||||
import PropTypes from "prop-types"
|
|
||||||
import {StaticImage} from "gatsby-plugin-image";
|
|
||||||
|
|
||||||
const Header = () => (
|
|
||||||
<div className="header">
|
|
||||||
<Link to={"/"}><StaticImage src={"../images/logo.png"} alt={"Lume Web"} className={"logo"}/> </Link>
|
|
||||||
<div className={"header-buttons"}>
|
|
||||||
<Link to={"/donate"}>
|
|
||||||
<button className="donate-btn">Donate</button>
|
|
||||||
</Link>
|
|
||||||
<a href="https://lumeweb.com/vision" target="_blank">
|
|
||||||
<button className="donate-btn">Project Vision</button>
|
|
||||||
</a>
|
|
||||||
<a href="https://discord.gg/3fe4KZhZ9y" target="_blank">
|
|
||||||
<button className="donate-btn">Discord</button>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
|
|
||||||
Header.propTypes = {
|
|
||||||
siteTitle: PropTypes.string,
|
|
||||||
}
|
|
||||||
|
|
||||||
Header.defaultProps = {
|
|
||||||
siteTitle: ``,
|
|
||||||
}
|
|
||||||
|
|
||||||
export default Header
|
|
||||||
|
|
@ -0,0 +1,22 @@
|
||||||
|
---
|
||||||
|
import './Access.scss';
|
||||||
|
---
|
||||||
|
|
||||||
|
<section id="access" class="tilted-bg">
|
||||||
|
<div>
|
||||||
|
<div class="feature-group">
|
||||||
|
<h2>
|
||||||
|
Access Web3
|
||||||
|
</h2>
|
||||||
|
<h3>
|
||||||
|
Lume Web grants you access to Web3
|
||||||
|
</h3>
|
||||||
|
<p>
|
||||||
|
There's a lot of hype around "Web3" and "The Metaverse" as people see money in it, similar to the second .com boom. However, many platforms claiming to be "Web3" are just trying to make money off you and aren't truly secure or decentralized.
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
While some services have technology that can be building blocks for the next internet, many become centralized "SaaS" services that aim to sell something, creating another walled garden with blockchain technology mixed in.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
@ -0,0 +1,88 @@
|
||||||
|
@import "/src/styles/vars.scss";
|
||||||
|
|
||||||
|
#access {
|
||||||
|
position: relative;
|
||||||
|
padding: 10em 0;
|
||||||
|
z-index: -1;
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
top: -47.5em;
|
||||||
|
left: 0;
|
||||||
|
width: 52.11em;
|
||||||
|
height: 117.1em;
|
||||||
|
background-image: url("/src/assets/home-left-bg.png");
|
||||||
|
background-position: 0 0;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-size: contain;
|
||||||
|
}
|
||||||
|
|
||||||
|
> div {
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-end;
|
||||||
|
align-items: center;
|
||||||
|
max-width: 152em;
|
||||||
|
min-height: 45.2em;
|
||||||
|
margin: 0 auto;
|
||||||
|
z-index: 1;
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
bottom: 0;
|
||||||
|
left: min(0em, calc((100% - 45.2em) / 2));
|
||||||
|
width: calc(100% - 80em - 7.5%);
|
||||||
|
min-width: 45.2em;
|
||||||
|
background-image: url("/src/assets/access-bg.png");
|
||||||
|
background-position: 50% 50%;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-size: contain;
|
||||||
|
animation: spin 7s infinite linear;
|
||||||
|
z-index: -1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.feature-group {
|
||||||
|
box-sizing: content-box;
|
||||||
|
margin: 2em 7.5%;
|
||||||
|
max-width: 80em;
|
||||||
|
|
||||||
|
p {
|
||||||
|
padding: 0.3em 0.5em;
|
||||||
|
margin: -0.3em -0.5em;
|
||||||
|
background: rgba($color-black, 0.8);
|
||||||
|
border-radius: 0.5em;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 56rem) {
|
||||||
|
&::after {
|
||||||
|
top: -56em;
|
||||||
|
height: 78em;
|
||||||
|
}
|
||||||
|
|
||||||
|
> div {
|
||||||
|
&::before {
|
||||||
|
top: 0;
|
||||||
|
bottom: auto;
|
||||||
|
left: calc((100% - 45.2em) / 2);
|
||||||
|
width: 45.2em;
|
||||||
|
height: 45.2em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.feature-group {
|
||||||
|
margin-top: 52.2em;
|
||||||
|
max-width: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes spin {
|
||||||
|
0% {
|
||||||
|
transform: rotate(359deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,54 @@
|
||||||
|
---
|
||||||
|
import './Features.scss';
|
||||||
|
---
|
||||||
|
|
||||||
|
<section id="features" class="feature-grid">
|
||||||
|
<div class="feature-private">
|
||||||
|
<div>
|
||||||
|
<img src="/src/assets/icon-private.png" />
|
||||||
|
</div>
|
||||||
|
<div class="feature-group">
|
||||||
|
<h2>
|
||||||
|
Encrypted Data
|
||||||
|
</h2>
|
||||||
|
<h3>
|
||||||
|
It’s private
|
||||||
|
</h3>
|
||||||
|
<p>
|
||||||
|
There is no sign-up required to browse web3. You do not even need to provide an email for basic use. Additionally, if you do create an account, all data is encrypted with your password.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="feature-personal">
|
||||||
|
<div>
|
||||||
|
<img src="/src/assets/icon-personal.png" />
|
||||||
|
</div>
|
||||||
|
<div class="feature-group">
|
||||||
|
<h2>
|
||||||
|
Owned by You
|
||||||
|
</h2>
|
||||||
|
<h3>
|
||||||
|
It’s personal
|
||||||
|
</h3>
|
||||||
|
<p>
|
||||||
|
Everything you do is owned by you. Your data is not controlled or owned by others. You are free to share copies to let others own a version or keep encrypted in your account.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="feature-gateway">
|
||||||
|
<div>
|
||||||
|
<img src="/src/assets/icon-gateway.png" />
|
||||||
|
</div>
|
||||||
|
<div class="feature-group">
|
||||||
|
<h2>
|
||||||
|
Privacy Built-in
|
||||||
|
</h2>
|
||||||
|
<h3>
|
||||||
|
It’s your gateway
|
||||||
|
</h3>
|
||||||
|
<p>
|
||||||
|
Gain freedom on a new web, owned by its users, and with privacy and control built-in.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
@ -0,0 +1,15 @@
|
||||||
|
@import "/src/styles/mixins.scss";
|
||||||
|
|
||||||
|
#features {
|
||||||
|
.feature-private img {
|
||||||
|
@include fluid-width(3.4375rem);
|
||||||
|
}
|
||||||
|
|
||||||
|
.feature-personal img {
|
||||||
|
@include fluid-width(3.4375rem);
|
||||||
|
}
|
||||||
|
|
||||||
|
.feature-gateway img {
|
||||||
|
@include fluid-width(3.4375rem);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,64 @@
|
||||||
|
---
|
||||||
|
import './Install.scss';
|
||||||
|
|
||||||
|
import svgSia from '/src/assets/sia.svg?raw';
|
||||||
|
import svgHns from '/src/assets/hns.svg?raw';
|
||||||
|
import svgOsi from '/src/assets/osi.svg?raw';
|
||||||
|
|
||||||
|
import svgGithub from '/src/assets/github.svg?raw';
|
||||||
|
import svgDiscord from '/src/assets/discord.svg?raw';
|
||||||
|
import svgTwitter from '/src/assets/twitter.svg?raw';
|
||||||
|
import svgFacebook from '/src/assets/facebook.svg?raw';
|
||||||
|
---
|
||||||
|
|
||||||
|
<section id="install">
|
||||||
|
<div>
|
||||||
|
<h1>
|
||||||
|
Introducing the private <span class="larger">gateway to <span class="highlight">Web3.</span></span>
|
||||||
|
</h1>
|
||||||
|
<p>
|
||||||
|
Gain freedom on a new web, owned by its users, and with <span class="highlight">privacy</span> and <span class="highlight">control</span> built-in.
|
||||||
|
</p>
|
||||||
|
<div class="install">
|
||||||
|
<a href="#" class="btn-main">Install Web3 Extension</a>
|
||||||
|
<div class="powered-by">
|
||||||
|
<a href="https://sia.tech" title="Sia" class="sia-logo">
|
||||||
|
<Fragment set:html={svgSia} />
|
||||||
|
</a>
|
||||||
|
<a href="https://handshake.org" title="Handshake" class="hns-logo">
|
||||||
|
<Fragment set:html={svgHns} />
|
||||||
|
</a>
|
||||||
|
<a href="https://opensource.org/osd/" title="Open Source Initiative" class="osi-logo">
|
||||||
|
<Fragment set:html={svgOsi} />
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="resources">
|
||||||
|
<ul class="links">
|
||||||
|
<li>
|
||||||
|
<a href="#">View on GitHub</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="https://lumeweb.com">Learn more about Lume</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="/donate">Donate</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<div class="socials">
|
||||||
|
<a href="#" title="GitHub" class="github-logo">
|
||||||
|
<Fragment set:html={svgGithub} />
|
||||||
|
</a>
|
||||||
|
<a href="#" title="Discord" class="discord-logo">
|
||||||
|
<Fragment set:html={svgDiscord} />
|
||||||
|
</a>
|
||||||
|
<a href="#" title="Twitter" class="twitter-logo">
|
||||||
|
<Fragment set:html={svgTwitter} />
|
||||||
|
</a>
|
||||||
|
<a href="#" title="Facebook" class="facebook-logo">
|
||||||
|
<Fragment set:html={svgFacebook} />
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
@ -0,0 +1,191 @@
|
||||||
|
@import "/src/styles/mixins.scss";
|
||||||
|
@import "/src/styles/vars.scss";
|
||||||
|
|
||||||
|
#install {
|
||||||
|
padding: 7em 7.5% 12.5em;
|
||||||
|
|
||||||
|
> div:first-child {
|
||||||
|
max-width: 120em;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
margin-left: -0.1em;
|
||||||
|
@include fluid-font-size-s(5.6875rem);
|
||||||
|
font-weight: 300;
|
||||||
|
line-height: 122%;
|
||||||
|
letter-spacing: -0.06em;
|
||||||
|
|
||||||
|
.larger {
|
||||||
|
@include fluid-font-size-s(6.8125rem);
|
||||||
|
font-weight: 400;
|
||||||
|
}
|
||||||
|
|
||||||
|
.highlight {
|
||||||
|
color: $color-brand;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
margin: 0.8em 0 1.6em;
|
||||||
|
padding-right: 2.5em;
|
||||||
|
font-family: $font-family-jaldi;
|
||||||
|
@include fluid-font-size(2.4375rem);
|
||||||
|
line-height: 108%;
|
||||||
|
color: rgba($color-white, 0.5);
|
||||||
|
|
||||||
|
.highlight {
|
||||||
|
color: $color-white;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.install {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 5em;
|
||||||
|
|
||||||
|
.btn-main {
|
||||||
|
padding: 1.2em 2em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.powered-by {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 2.5em;
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: #4e5b5d;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: $color-white;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.sia-logo svg {
|
||||||
|
@include fluid-width(3.75rem);
|
||||||
|
}
|
||||||
|
|
||||||
|
.hns-logo svg {
|
||||||
|
@include fluid-width(2.75rem);
|
||||||
|
}
|
||||||
|
|
||||||
|
.osi-logo svg {
|
||||||
|
@include fluid-width(2.75rem);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.resources {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
gap: 5.5em;
|
||||||
|
margin-top: 5em;
|
||||||
|
|
||||||
|
.links {
|
||||||
|
font-family: $font-family-jaldi;
|
||||||
|
@include fluid-font-size(1.5rem);
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: rgba(169, 169, 169, 0.5);
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: $color-white;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.socials {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 2em;
|
||||||
|
margin: -0.5em;
|
||||||
|
|
||||||
|
a {
|
||||||
|
padding: 0.5em;
|
||||||
|
color: $color-alto;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: $color-brand;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.github-logo svg {
|
||||||
|
@include fluid-width(2.75rem);
|
||||||
|
}
|
||||||
|
|
||||||
|
.discord-logo svg {
|
||||||
|
@include fluid-width(2.75rem);
|
||||||
|
}
|
||||||
|
|
||||||
|
.twitter-logo svg {
|
||||||
|
@include fluid-width(2.75rem);
|
||||||
|
}
|
||||||
|
|
||||||
|
.facebook-logo svg {
|
||||||
|
@include fluid-width(2.75rem);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 67rem) {
|
||||||
|
h1 {
|
||||||
|
font-weight: 400;
|
||||||
|
|
||||||
|
.larger {
|
||||||
|
@include fluid-font-size-s(5.6875rem);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 56rem) {
|
||||||
|
padding-top: 14em;
|
||||||
|
padding-bottom: 10em;
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
line-height: 155%;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
line-height: 145%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 47.99999rem) {
|
||||||
|
.install {
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: flex-start;
|
||||||
|
gap: 7.5em;
|
||||||
|
|
||||||
|
.btn-main {
|
||||||
|
padding: 1.2em 1.6em;
|
||||||
|
letter-spacing: -0.01em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.powered-by {
|
||||||
|
gap: 4em;
|
||||||
|
|
||||||
|
.sia-logo svg {
|
||||||
|
@include fluid-width(6.75rem);
|
||||||
|
}
|
||||||
|
|
||||||
|
.hns-logo svg {
|
||||||
|
@include fluid-width(4.95rem);
|
||||||
|
}
|
||||||
|
|
||||||
|
.osi-logo svg {
|
||||||
|
@include fluid-width(4.95rem);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.resources {
|
||||||
|
.socials {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,12 @@
|
||||||
|
---
|
||||||
|
import './Message.scss';
|
||||||
|
---
|
||||||
|
|
||||||
|
<section id="message">
|
||||||
|
<h2>
|
||||||
|
Free Yourself
|
||||||
|
</h2>
|
||||||
|
<p>
|
||||||
|
We have had decentralized internet for a while now (decades) in various forms, so consider Web3 an upgrade that combines many of these attempts + blockchain, into an evolution for the user-owned internet, rather than us, the user, becoming batteries in the matrix.
|
||||||
|
</p>
|
||||||
|
</section>
|
||||||
|
|
@ -0,0 +1,23 @@
|
||||||
|
@import "/src/styles/mixins.scss";
|
||||||
|
@import "/src/styles/vars.scss";
|
||||||
|
|
||||||
|
#message {
|
||||||
|
padding: 5em 7.5%;
|
||||||
|
background: $color-brand;
|
||||||
|
color: $color-blue-charcoal-2;
|
||||||
|
|
||||||
|
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: 165%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,25 @@
|
||||||
|
---
|
||||||
|
import './Socials.scss';
|
||||||
|
|
||||||
|
import svgGithub from '/src/assets/github.svg?raw';
|
||||||
|
import svgDiscord from '/src/assets/discord.svg?raw';
|
||||||
|
import svgTwitter from '/src/assets/twitter.svg?raw';
|
||||||
|
import svgFacebook from '/src/assets/facebook.svg?raw';
|
||||||
|
---
|
||||||
|
|
||||||
|
<section id="socials">
|
||||||
|
<div>
|
||||||
|
<a href="#" title="GitHub" class="github-logo">
|
||||||
|
<Fragment set:html={svgGithub} />
|
||||||
|
</a>
|
||||||
|
<a href="#" title="Discord" class="discord-logo">
|
||||||
|
<Fragment set:html={svgDiscord} />
|
||||||
|
</a>
|
||||||
|
<a href="#" title="Twitter" class="twitter-logo">
|
||||||
|
<Fragment set:html={svgTwitter} />
|
||||||
|
</a>
|
||||||
|
<a href="#" title="Facebook" class="facebook-logo">
|
||||||
|
<Fragment set:html={svgFacebook} />
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
@ -0,0 +1,46 @@
|
||||||
|
@import "/src/styles/mixins.scss";
|
||||||
|
@import "/src/styles/vars.scss";
|
||||||
|
|
||||||
|
#socials {
|
||||||
|
display: none;
|
||||||
|
padding: 12em 7.5% 0;
|
||||||
|
@include fluid-font-size(0.625rem);
|
||||||
|
background: $color-blue-charcoal;
|
||||||
|
|
||||||
|
@media screen and (max-width: 47.99999rem) {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
> div {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 3em;
|
||||||
|
margin: -0.5em;
|
||||||
|
|
||||||
|
a {
|
||||||
|
padding: 0.5em;
|
||||||
|
color: $color-alto;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: $color-brand;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.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);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -1,49 +0,0 @@
|
||||||
import React from "react"
|
|
||||||
import {graphql, StaticQuery} from "gatsby";
|
|
||||||
import Header from "./Header";
|
|
||||||
import {StaticImage} from "gatsby-plugin-image";
|
|
||||||
import SEO from "./SEO";
|
|
||||||
// @ts-ignore
|
|
||||||
export default function Layout({children}) {
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<SEO/>
|
|
||||||
<div className={"content-container"}>
|
|
||||||
<StaticQuery
|
|
||||||
query={graphql`
|
|
||||||
query SiteTitleQuery {
|
|
||||||
site {
|
|
||||||
siteMetadata {
|
|
||||||
title
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
`}
|
|
||||||
render={data => (
|
|
||||||
<>
|
|
||||||
<Header siteTitle={data.site.siteMetadata.title}/>
|
|
||||||
{children}
|
|
||||||
<section className="section-footer">
|
|
||||||
<div className="footer-divider">
|
|
||||||
<a href="https://lumeweb.com"><StaticImage src={"../images/icon-footer.png"}
|
|
||||||
className="logo"
|
|
||||||
alt="Lume Web"/></a>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<footer>
|
|
||||||
<div className="company">
|
|
||||||
<p>Hammer Technologies LLC</p>
|
|
||||||
</div>
|
|
||||||
<div className="github">
|
|
||||||
<StaticImage src={"../images/icon-github.png"} alt="Github icon"/>
|
|
||||||
<a href="https://github.com/LumeWeb/web3extension.com" target="_blank">View on
|
|
||||||
Github</a>
|
|
||||||
</div>
|
|
||||||
</footer>
|
|
||||||
</section>
|
|
||||||
</>
|
|
||||||
)}/>
|
|
||||||
</div>
|
|
||||||
</>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
@ -0,0 +1,32 @@
|
||||||
|
---
|
||||||
|
import "./Footer.scss";
|
||||||
|
|
||||||
|
import logo from "/src/assets/lume-logo.png";
|
||||||
|
import icon from "/src/assets/footer-icon.png";
|
||||||
|
---
|
||||||
|
|
||||||
|
<footer>
|
||||||
|
<div>
|
||||||
|
<div class="logo">
|
||||||
|
<a href="/">
|
||||||
|
<img src={logo.src} alt="Lume"/>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div class="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>
|
||||||
|
<div class="gateway-icon">
|
||||||
|
<img src={icon.src}/>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="phrase">
|
||||||
|
Freedom. Privacy. Ownership.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
|
@ -0,0 +1,112 @@
|
||||||
|
@import "/src/styles/mixins.scss";
|
||||||
|
@import "/src/styles/vars.scss";
|
||||||
|
|
||||||
|
footer {
|
||||||
|
display: flex;
|
||||||
|
padding: 7em 7.5% 8em;
|
||||||
|
font-family: $font-family-jaldi;
|
||||||
|
@include fluid-font-size(0.625rem);
|
||||||
|
background: $color-blue-charcoal;
|
||||||
|
|
||||||
|
> div {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
@include fluid-font-size(1.375rem);
|
||||||
|
|
||||||
|
&:first-child {
|
||||||
|
flex-grow: 1;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: flex-start;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:last-child {
|
||||||
|
flex-grow: 1;
|
||||||
|
justify-content: flex-end;
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo {
|
||||||
|
a {
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
img {
|
||||||
|
@include fluid-width(8.4375rem);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.contact {
|
||||||
|
margin-top: 0.25em;
|
||||||
|
color: $color-cloud;
|
||||||
|
|
||||||
|
a {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: $color-white;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
svg {
|
||||||
|
@include fluid-width-height(1.375rem, 1.375rem);
|
||||||
|
margin-right: 0.5em;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.gateway-icon img {
|
||||||
|
@include fluid-width-height(5rem, 5rem);
|
||||||
|
}
|
||||||
|
|
||||||
|
.phrase {
|
||||||
|
width: 7em;
|
||||||
|
font-family: $font-family-jetbrains-mono;
|
||||||
|
font-weight: 700;
|
||||||
|
line-height: 140%;
|
||||||
|
color: $color-brand;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 47.99999rem) {
|
||||||
|
footer {
|
||||||
|
flex-direction: column;
|
||||||
|
padding-top: 5rem;
|
||||||
|
padding-bottom: 5rem;
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
|
> div {
|
||||||
|
justify-content: center;
|
||||||
|
font-size: 1.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
> div:first-child {
|
||||||
|
align-items: center;
|
||||||
|
margin-top: 4rem;
|
||||||
|
order: 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
> div:last-child {
|
||||||
|
justify-content: center;
|
||||||
|
margin-top: 1.25rem;
|
||||||
|
order: 3;
|
||||||
|
}
|
||||||
|
|
||||||
|
img {
|
||||||
|
width: 8.4375rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contact {
|
||||||
|
margin-top: 1.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gateway-icon img {
|
||||||
|
@include fluid-width-height(2.75rem, 2.75rem);
|
||||||
|
}
|
||||||
|
|
||||||
|
.phrase {
|
||||||
|
width: auto;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,73 @@
|
||||||
|
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 >= 768) {
|
||||||
|
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="/donate" className={view === 'donate' ? 'current' : undefined} aria-current={view === 'donate' ? 'page' : undefined}>Donate</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="https://lumeweb.com" className="lume">
|
||||||
|
LumeWeb
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth="2.5" stroke="currentColor">
|
||||||
|
<path strokeLinecap="round" strokeLinejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" />
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
</menu>
|
||||||
|
<button className="hamburger" onClick={toggleNav}>☰</button>
|
||||||
|
</nav>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Navbar
|
||||||
|
|
@ -0,0 +1,113 @@
|
||||||
|
@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;
|
||||||
|
|
||||||
|
a {
|
||||||
|
display: block;
|
||||||
|
padding: 0.55em 0.9em;
|
||||||
|
@include fluid-font-size(1.375rem);
|
||||||
|
font-weight: 700;
|
||||||
|
text-decoration: underline;
|
||||||
|
text-decoration-color: transparent;
|
||||||
|
transition: text-decoration-color $transition-duration;
|
||||||
|
|
||||||
|
&.current, &:hover, &:active {
|
||||||
|
text-decoration-color: inherit;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.lume {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.25em;
|
||||||
|
color: $color-brand;
|
||||||
|
}
|
||||||
|
|
||||||
|
svg {
|
||||||
|
@include fluid-width-height(1.5rem, 1.5rem);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.hamburger {
|
||||||
|
display: none;
|
||||||
|
font-size: 2rem;
|
||||||
|
cursor: pointer;
|
||||||
|
z-index: 1;
|
||||||
|
margin: 0 3.75% 0 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 47.9999rem) {
|
||||||
|
nav {
|
||||||
|
position: sticky;
|
||||||
|
top: 0;
|
||||||
|
background: rgba($color-blue-charcoal-2, 0.8);
|
||||||
|
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.8);
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
font-size: 1.25rem;
|
||||||
|
margin: 0 2.2em 0 1em;
|
||||||
|
padding: inherit 0.8em;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.hamburger {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes bg-opacity {
|
||||||
|
0% {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
opacity: 0.8;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -1,34 +0,0 @@
|
||||||
import PropTypes from 'prop-types'
|
|
||||||
import React from 'react'
|
|
||||||
import { Helmet } from 'react-helmet'
|
|
||||||
|
|
||||||
// @ts-ignore
|
|
||||||
const Facebook = ({ url, name, type, title, desc, image, locale }) => (
|
|
||||||
<Helmet>
|
|
||||||
{name && <meta property="og:site_name" content={name} />}
|
|
||||||
<meta property="og:locale" content={locale} />
|
|
||||||
<meta property="og:url" content={url} />
|
|
||||||
<meta property="og:type" content={type} />
|
|
||||||
<meta property="og:title" content={title} />
|
|
||||||
<meta property="og:description" content={desc} />
|
|
||||||
<meta property="og:image" content={image} />
|
|
||||||
<meta property="og:image:alt" content={desc} />
|
|
||||||
</Helmet>
|
|
||||||
)
|
|
||||||
|
|
||||||
export default Facebook
|
|
||||||
|
|
||||||
Facebook.propTypes = {
|
|
||||||
url: PropTypes.string.isRequired,
|
|
||||||
locale: PropTypes.string.isRequired,
|
|
||||||
type: PropTypes.string,
|
|
||||||
title: PropTypes.string.isRequired,
|
|
||||||
desc: PropTypes.string.isRequired,
|
|
||||||
image: PropTypes.string.isRequired,
|
|
||||||
name: PropTypes.string,
|
|
||||||
}
|
|
||||||
|
|
||||||
Facebook.defaultProps = {
|
|
||||||
type: 'website',
|
|
||||||
name: null,
|
|
||||||
}
|
|
||||||
|
|
@ -1,90 +0,0 @@
|
||||||
import React from 'react'
|
|
||||||
import {Helmet} from "react-helmet"
|
|
||||||
import PropTypes from 'prop-types'
|
|
||||||
import {useStaticQuery, graphql} from 'gatsby'
|
|
||||||
import Facebook from './Facebook'
|
|
||||||
import Twitter from './Twitter'
|
|
||||||
|
|
||||||
// @ts-ignore
|
|
||||||
const SEO = ({title, desc, banner, pathname}) => {
|
|
||||||
const {site, file} = useStaticQuery(query)
|
|
||||||
|
|
||||||
const {
|
|
||||||
siteMetadata: {
|
|
||||||
siteUrl,
|
|
||||||
defaultTitle,
|
|
||||||
defaultDescription,
|
|
||||||
siteLanguage,
|
|
||||||
ogLanguage,
|
|
||||||
twitter,
|
|
||||||
},
|
|
||||||
} = site
|
|
||||||
|
|
||||||
const seo = {
|
|
||||||
title: title || defaultTitle,
|
|
||||||
description: desc || defaultDescription,
|
|
||||||
image: `${siteUrl}${banner || file.childImageSharp.resize.src}`,
|
|
||||||
url: `${siteUrl}${pathname || ''}`,
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<Helmet title={seo.title}>
|
|
||||||
<html lang={siteLanguage}/>
|
|
||||||
<meta name="description" content={seo.description}/>
|
|
||||||
<meta name="image" content={seo.image}/>
|
|
||||||
<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-6291a28498423e20"></script>
|
|
||||||
</Helmet>
|
|
||||||
<Facebook
|
|
||||||
desc={seo.description}
|
|
||||||
image={seo.image}
|
|
||||||
title={seo.title}
|
|
||||||
type={'website'}
|
|
||||||
url={seo.url}
|
|
||||||
locale={ogLanguage}
|
|
||||||
/>
|
|
||||||
<Twitter title={seo.title} image={seo.image} desc={seo.description} username={twitter}/>
|
|
||||||
</>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
export default SEO
|
|
||||||
|
|
||||||
SEO.propTypes = {
|
|
||||||
title: PropTypes.string,
|
|
||||||
desc: PropTypes.string,
|
|
||||||
banner: PropTypes.string,
|
|
||||||
pathname: PropTypes.string,
|
|
||||||
article: PropTypes.bool,
|
|
||||||
node: PropTypes.object,
|
|
||||||
}
|
|
||||||
|
|
||||||
SEO.defaultProps = {
|
|
||||||
title: null,
|
|
||||||
desc: null,
|
|
||||||
banner: null,
|
|
||||||
pathname: null,
|
|
||||||
article: false,
|
|
||||||
node: null,
|
|
||||||
}
|
|
||||||
|
|
||||||
const query = graphql`
|
|
||||||
query {
|
|
||||||
site {
|
|
||||||
siteMetadata {
|
|
||||||
siteUrl
|
|
||||||
defaultTitle: title
|
|
||||||
defaultDescription: description
|
|
||||||
siteLanguage
|
|
||||||
ogLanguage
|
|
||||||
twitter
|
|
||||||
}
|
|
||||||
}
|
|
||||||
file(relativePath: { eq: "logo.png" }) {
|
|
||||||
childImageSharp {
|
|
||||||
resize {
|
|
||||||
src
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}`
|
|
||||||
|
|
@ -1,29 +0,0 @@
|
||||||
import PropTypes from 'prop-types'
|
|
||||||
import React from 'react'
|
|
||||||
import { Helmet } from 'react-helmet'
|
|
||||||
|
|
||||||
const Twitter = ({ type, username, title, desc, image }) => (
|
|
||||||
<Helmet>
|
|
||||||
{username && <meta name="twitter:creator" content={username} />}
|
|
||||||
<meta name="twitter:card" content={type} />
|
|
||||||
<meta name="twitter:title" content={title} />
|
|
||||||
<meta name="twitter:description" content={desc} />
|
|
||||||
<meta name="twitter:image" content={image} />
|
|
||||||
<meta name="twitter:image:alt" content={desc} />
|
|
||||||
</Helmet>
|
|
||||||
)
|
|
||||||
|
|
||||||
export default Twitter
|
|
||||||
|
|
||||||
Twitter.propTypes = {
|
|
||||||
type: PropTypes.string,
|
|
||||||
username: PropTypes.string,
|
|
||||||
title: PropTypes.string.isRequired,
|
|
||||||
desc: PropTypes.string.isRequired,
|
|
||||||
image: PropTypes.string.isRequired,
|
|
||||||
}
|
|
||||||
|
|
||||||
Twitter.defaultProps = {
|
|
||||||
type: 'summary_large_image',
|
|
||||||
username: null,
|
|
||||||
}
|
|
||||||
|
|
@ -1,7 +0,0 @@
|
||||||
import SEO from "./SEO"
|
|
||||||
import Facebook from "./Facebook"
|
|
||||||
import Twitter from "./Twitter"
|
|
||||||
|
|
||||||
export { Facebook, Twitter }
|
|
||||||
|
|
||||||
export default SEO
|
|
||||||
|
|
@ -1,43 +0,0 @@
|
||||||
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
border: 0;
|
|
||||||
font-size: 100%;
|
|
||||||
font: inherit;
|
|
||||||
vertical-align: baseline;
|
|
||||||
}
|
|
||||||
|
|
||||||
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
body {
|
|
||||||
line-height: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
ol, ul {
|
|
||||||
list-style: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
blockquote, q {
|
|
||||||
quotes: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
blockquote {
|
|
||||||
&:before, &:after {
|
|
||||||
content: "";
|
|
||||||
content: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
q {
|
|
||||||
&:before, &:after {
|
|
||||||
content: "";
|
|
||||||
content: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
table {
|
|
||||||
border-collapse: collapse;
|
|
||||||
border-spacing: 0;
|
|
||||||
}
|
|
||||||
|
|
@ -1,928 +0,0 @@
|
||||||
/* Colors primary*/
|
|
||||||
$primary-green: #10E260;
|
|
||||||
$primary-blue: #2A82DE;
|
|
||||||
$dark: #151515;
|
|
||||||
$white: #ffffff;
|
|
||||||
$background-grey: #F9F9F9;
|
|
||||||
|
|
||||||
|
|
||||||
/* Base preferences*/
|
|
||||||
html {
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
html *,
|
|
||||||
html :before,
|
|
||||||
html :after {
|
|
||||||
-webkit-box-sizing: border-box;
|
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
|
||||||
|
|
||||||
body {
|
|
||||||
background-color: $background-grey;
|
|
||||||
background-image: url('../images/background-lume-installer.png');
|
|
||||||
background-repeat: no-repeat;
|
|
||||||
background-size: cover;
|
|
||||||
background-position: bottom;
|
|
||||||
font-family: "Roboto", 'Arial', serif;
|
|
||||||
}
|
|
||||||
|
|
||||||
em {
|
|
||||||
font-style: italic;
|
|
||||||
}
|
|
||||||
|
|
||||||
strong {
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
|
|
||||||
h1 {
|
|
||||||
font-size: 65px;
|
|
||||||
font-weight: 600;
|
|
||||||
line-height: 1.1;
|
|
||||||
color: $dark;
|
|
||||||
text-align: center;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
@media only screen and (max-width: 680px) {
|
|
||||||
h1 {
|
|
||||||
font-size: 48px;
|
|
||||||
line-height: 1.1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media only screen and (max-width: 480px) {
|
|
||||||
h1 {
|
|
||||||
font-size: 32px;
|
|
||||||
line-height: 1.1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
h2 {
|
|
||||||
font-size: 26px;
|
|
||||||
font-weight: 600;
|
|
||||||
line-height: 1.025;
|
|
||||||
color: $dark;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
h3 {
|
|
||||||
color: $dark;
|
|
||||||
text-align: center;
|
|
||||||
line-height: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media only screen and (max-width: 480px) {
|
|
||||||
h2 {
|
|
||||||
font-size: 22px;
|
|
||||||
line-height: 1.2;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
h3 {
|
|
||||||
font-size: 32px;
|
|
||||||
font-weight: 600;
|
|
||||||
line-height: 1.025;
|
|
||||||
color: $dark;
|
|
||||||
margin: 0 0 24px 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
p {
|
|
||||||
font-size: 18px;
|
|
||||||
line-height: 1.7;
|
|
||||||
font-weight: 300;
|
|
||||||
color: $dark;
|
|
||||||
}
|
|
||||||
|
|
||||||
p + p {
|
|
||||||
margin-top: 30px;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/* Content container*/
|
|
||||||
.content-container {
|
|
||||||
max-width: 1280px;
|
|
||||||
padding: 10px 50px 12px 50px;
|
|
||||||
margin: 0 auto;
|
|
||||||
position: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media only screen and (max-width: 860px) {
|
|
||||||
.content-container {
|
|
||||||
padding: 20px 30px 12px 30px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media only screen and (max-width: 480px) {
|
|
||||||
.content-container {
|
|
||||||
padding: 10px 20px 12px 20px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/* Header */
|
|
||||||
.header {
|
|
||||||
display: -webkit-box;
|
|
||||||
display: -ms-flexbox;
|
|
||||||
display: flex;
|
|
||||||
-webkit-box-pack: justify;
|
|
||||||
-ms-flex-pack: justify;
|
|
||||||
justify-content: space-between;
|
|
||||||
margin-bottom: 8px;
|
|
||||||
|
|
||||||
.header-buttons {
|
|
||||||
justify-content: space-evenly;
|
|
||||||
|
|
||||||
a {
|
|
||||||
margin: 0.5em;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.logo {
|
|
||||||
width: 150px;
|
|
||||||
margin: 0 0 0 2px;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media only screen and (max-width: 480px) {
|
|
||||||
.header {
|
|
||||||
margin-bottom: 0px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.logo {
|
|
||||||
width: 100px;
|
|
||||||
margin: 0 0 0 2px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.donate-btn {
|
|
||||||
margin-top: 8px;
|
|
||||||
background-color: #ff005e;
|
|
||||||
padding: 12px 28px 14px 28px;
|
|
||||||
display: inline-block;
|
|
||||||
border: 0;
|
|
||||||
border-radius: 50px;
|
|
||||||
cursor: pointer;
|
|
||||||
color: #fff;
|
|
||||||
text-decoration: none;
|
|
||||||
font-size: 16px;
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
|
|
||||||
.donate-btn:hover {
|
|
||||||
background-color: $primary-green;
|
|
||||||
color: $dark;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media only screen and (max-width: 480px) {
|
|
||||||
.donate-btn {
|
|
||||||
margin-top: 0px;
|
|
||||||
padding: 10px 20px 12px 20px;
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/* Heading and portal */
|
|
||||||
.section-introduction {
|
|
||||||
display: -ms-grid;
|
|
||||||
display: grid;
|
|
||||||
-webkit-box-pack: center;
|
|
||||||
-ms-flex-pack: center;
|
|
||||||
justify-content: center;
|
|
||||||
-webkit-box-align: center;
|
|
||||||
-ms-flex-align: center;
|
|
||||||
align-items: center;
|
|
||||||
margin: 150px 0 0 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.download-card {
|
|
||||||
background-color: rgba(255, 255, 255, 0.4);
|
|
||||||
border: 0.5px solid rgba(16, 226, 96, 0.3);
|
|
||||||
border-radius: 8px;
|
|
||||||
-webkit-box-shadow: 0px 0px 50px 15px rgba(16, 226, 96, 0.10);
|
|
||||||
box-shadow: 0px 0px 50px 15px rgba(16, 226, 96, 0.10);
|
|
||||||
padding: 24px;
|
|
||||||
margin: 56px 0 0 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.heading-introduction {
|
|
||||||
z-index: 2;
|
|
||||||
margin: 0 0 0 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media only screen and (max-width: 400px) {
|
|
||||||
.section-introduction {
|
|
||||||
margin: 90px 0 0 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.section-portal {
|
|
||||||
margin-top: -300px;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media only screen and (max-width: 940px) {
|
|
||||||
.section-portal {
|
|
||||||
margin-top: -350px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media only screen and (max-width: 350px) {
|
|
||||||
.section-introduction {
|
|
||||||
z-index: 2;
|
|
||||||
margin: 70px 0 0 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media only screen and (max-width: 680px) {
|
|
||||||
.section-portal {
|
|
||||||
margin-top: -320px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media only screen and (max-width: 480px) {
|
|
||||||
.section-portal {
|
|
||||||
margin-top: -240px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media only screen and (max-width: 400px) {
|
|
||||||
.section-portal {
|
|
||||||
margin-top: -215px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media only screen and (max-width: 350px) {
|
|
||||||
.section-portal {
|
|
||||||
margin-top: -200px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@-webkit-keyframes portal-spin {
|
|
||||||
0% {
|
|
||||||
-webkit-transform: rotate(359deg);
|
|
||||||
transform: rotate(359deg);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes portal-spin {
|
|
||||||
0% {
|
|
||||||
-webkit-transform: rotate(359deg);
|
|
||||||
transform: rotate(359deg);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.portal-frame {
|
|
||||||
--portal-color: #2A82DE;
|
|
||||||
max-width: 500px;
|
|
||||||
aspect-ratio: 1;
|
|
||||||
--portal-browserbugfix: perspective(2077px) translateZ(-0.1px);
|
|
||||||
-webkit-transform: var(--portal-browserbugfix,) scaleX(1);
|
|
||||||
-ms-transform: var(--portal-browserbugfix,) scaleX(1);
|
|
||||||
transform: var(--portal-browserbugfix,) scaleX(1);
|
|
||||||
-webkit-filter: contrast(1.75);
|
|
||||||
filter: contrast(1.75);
|
|
||||||
overflow: hidden;
|
|
||||||
margin: 0 auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.portal, .portal::before {
|
|
||||||
position: absolute;
|
|
||||||
inset: 0;
|
|
||||||
-webkit-animation: portal-spin 7s infinite linear;
|
|
||||||
animation: portal-spin 7s infinite linear;
|
|
||||||
}
|
|
||||||
|
|
||||||
.portal {
|
|
||||||
--portal-img: url('../images/portal.png');
|
|
||||||
--portal-mask: var(--portal-img) top left / 100% 100% no-repeat;
|
|
||||||
-webkit-mask: var(--portal-mask);
|
|
||||||
mask: var(--portal-mask);
|
|
||||||
}
|
|
||||||
|
|
||||||
.portal::before {
|
|
||||||
content: "";
|
|
||||||
animation-direction: reverse;
|
|
||||||
background: -webkit-gradient(
|
|
||||||
linear, left top, left bottom, color-stop(25%, #10E260), color-stop(125%, transparent), color-stop(25%, #2A82DE)
|
|
||||||
), var(--portal-color);
|
|
||||||
background: -o-linear-gradient(
|
|
||||||
#10E260 25%, transparent 125%, #2A82DE 25%
|
|
||||||
), var(--portal-color);
|
|
||||||
background: linear-gradient(
|
|
||||||
#10E260 25%, transparent 125%, #2A82DE 25%
|
|
||||||
), var(--portal-color);
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
.background-1 {
|
|
||||||
background-color: #fff;
|
|
||||||
border: 0.5px solid rgba(16, 226, 96, 0.3);
|
|
||||||
-webkit-box-shadow: 0px 0px 50px 15px rgba(16, 226, 96, 0.10);
|
|
||||||
box-shadow: 0px 0px 50px 15px rgba(16, 226, 96, 0.10);
|
|
||||||
border-radius: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/* Download component*/
|
|
||||||
.section-download {
|
|
||||||
margin-top: 24px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.download-title span {
|
|
||||||
display: block;
|
|
||||||
font-size: 16px;
|
|
||||||
font-weight: 300;
|
|
||||||
color: $dark;
|
|
||||||
text-align: center;
|
|
||||||
margin: 16px 0 0 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.platform span {
|
|
||||||
display: block;
|
|
||||||
margin: 8px 0 16px 0;
|
|
||||||
font-size: 14px;
|
|
||||||
font-weight: 400;
|
|
||||||
color: $dark;
|
|
||||||
}
|
|
||||||
|
|
||||||
.download-button {
|
|
||||||
display: -webkit-box;
|
|
||||||
display: -ms-flexbox;
|
|
||||||
display: flex;
|
|
||||||
-webkit-box-pack: center;
|
|
||||||
-ms-flex-pack: center;
|
|
||||||
justify-content: center;
|
|
||||||
margin: 24px 0 16px 0;
|
|
||||||
|
|
||||||
& a {
|
|
||||||
margin-right: 1em;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn img {
|
|
||||||
display: inline-block;
|
|
||||||
vertical-align: middle;
|
|
||||||
margin: -3px 6px 0 0;
|
|
||||||
width: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn {
|
|
||||||
display: inline-block;
|
|
||||||
border: 0;
|
|
||||||
border-radius: 6px;
|
|
||||||
background: -o-linear-gradient(left, #10E260 0%, #2A82DE 80%);
|
|
||||||
background: -webkit-gradient(linear, left top, right top, from(#10E260), color-stop(80%, #2A82DE));
|
|
||||||
background: linear-gradient(to right, #10E260 0%, #2A82DE 80%);
|
|
||||||
padding: 10px 30px 12px 30px;
|
|
||||||
font-family: "Roboto", 'Arial', sans-serif;
|
|
||||||
font-weight: 500;
|
|
||||||
font-size: 18px;
|
|
||||||
line-height: 1.6;
|
|
||||||
color: #FFFFFF;
|
|
||||||
text-align: center;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn:hover {
|
|
||||||
background: #10E260;
|
|
||||||
color: #151515;
|
|
||||||
}
|
|
||||||
|
|
||||||
.os-options span {
|
|
||||||
display: block;
|
|
||||||
margin: 16px 0 0 0;
|
|
||||||
font-size: 12px;
|
|
||||||
font-weight: 300;
|
|
||||||
color: #000000;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media only screen and (max-width: 480px) {
|
|
||||||
.section-download {
|
|
||||||
margin-top: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.download-title {
|
|
||||||
margin: -6px 0 16px 0;
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.download-button {
|
|
||||||
margin: 20px 0 12px 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn {
|
|
||||||
font-size: 16px;
|
|
||||||
padding: 8px 20px 10px 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.os-options span {
|
|
||||||
margin: 2px 0 0 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.section-share {
|
|
||||||
margin-top: 24px;
|
|
||||||
|
|
||||||
p {
|
|
||||||
margin-bottom: 1em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.addthis_inline_share_toolbox {
|
|
||||||
text-align: center;
|
|
||||||
margin: auto;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media only screen and (max-width: 480px) {
|
|
||||||
.section-share {
|
|
||||||
margin-top: 10px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/* Advantages*/
|
|
||||||
.section-advantages {
|
|
||||||
display: -webkit-box;
|
|
||||||
display: -ms-flexbox;
|
|
||||||
display: flex;
|
|
||||||
-webkit-box-orient: horizontal;
|
|
||||||
-webkit-box-direction: normal;
|
|
||||||
-ms-flex-direction: row;
|
|
||||||
flex-direction: row;
|
|
||||||
-ms-flex-pack: distribute;
|
|
||||||
justify-content: space-around;
|
|
||||||
gap: 80px;
|
|
||||||
margin: 80px 60px 0 60px;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media only screen and (max-width: 960px) {
|
|
||||||
.section-advantages {
|
|
||||||
gap: 40px;
|
|
||||||
margin: 60px 0px 0 0px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media only screen and (max-width: 680px) {
|
|
||||||
.section-advantages {
|
|
||||||
-webkit-box-orient: vertical;
|
|
||||||
-webkit-box-direction: normal;
|
|
||||||
-ms-flex-direction: column;
|
|
||||||
flex-direction: column;
|
|
||||||
-webkit-box-pack: end;
|
|
||||||
-ms-flex-pack: end;
|
|
||||||
justify-content: flex-end;
|
|
||||||
gap: 30px;
|
|
||||||
margin: 60px 0px 0 0px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media only screen and (max-width: 400px) {
|
|
||||||
.section-advantages {
|
|
||||||
margin: 45px 0px 0 0px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.advantage-card {
|
|
||||||
width: 100%;
|
|
||||||
margin: 0 auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media only screen and (max-width: 680px) {
|
|
||||||
.advantage-card {
|
|
||||||
width: 70%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media only screen and (max-width: 480px) {
|
|
||||||
.advantage-card {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.advantage-card span {
|
|
||||||
display: block;
|
|
||||||
font-size: 20px;
|
|
||||||
font-weight: 600;
|
|
||||||
color: $primary-blue;
|
|
||||||
margin: 10px 0 14px 0;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.advantage-card p {
|
|
||||||
font-size: 14px;
|
|
||||||
font-weight: 400;
|
|
||||||
line-height: 1.4;
|
|
||||||
font-weight: 400;
|
|
||||||
color: $dark;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.advantage-card img {
|
|
||||||
display: block;
|
|
||||||
height: 24px;
|
|
||||||
margin: 0 auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/* Text image component */
|
|
||||||
.text-image {
|
|
||||||
margin: 80px 0 0 0;
|
|
||||||
display: -webkit-box;
|
|
||||||
display: -ms-flexbox;
|
|
||||||
display: flex;
|
|
||||||
-webkit-box-orient: horizontal;
|
|
||||||
-webkit-box-direction: normal;
|
|
||||||
-ms-flex-direction: row;
|
|
||||||
flex-direction: row;
|
|
||||||
-webkit-box-pack: justify;
|
|
||||||
-ms-flex-pack: justify;
|
|
||||||
justify-content: space-between;
|
|
||||||
-webkit-box-align: center;
|
|
||||||
-ms-flex-align: center;
|
|
||||||
align-items: center;
|
|
||||||
gap: 5%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.content-body {
|
|
||||||
max-width: 50%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.content-body p {
|
|
||||||
font-size: 18px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.content-img {
|
|
||||||
max-width: 40%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.content-img img {
|
|
||||||
max-width: 100%;
|
|
||||||
margin: 0 0 0 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
@media only screen and (max-width: 768px) {
|
|
||||||
.text-image {
|
|
||||||
margin: 80px 0 0 0;
|
|
||||||
display: -webkit-box;
|
|
||||||
display: -ms-flexbox;
|
|
||||||
display: flex;
|
|
||||||
-webkit-box-orient: vertical;
|
|
||||||
-webkit-box-direction: normal;
|
|
||||||
-ms-flex-direction: column;
|
|
||||||
flex-direction: column;
|
|
||||||
-webkit-box-pack: start;
|
|
||||||
-ms-flex-pack: start;
|
|
||||||
justify-content: flex-start;
|
|
||||||
gap: 20%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.content-body {
|
|
||||||
max-width: 80%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.content-img {
|
|
||||||
max-width: 80%;
|
|
||||||
margin: 0 0 24px 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.column-reverse {
|
|
||||||
-webkit-box-orient: vertical;
|
|
||||||
-webkit-box-direction: reverse;
|
|
||||||
-ms-flex-direction: column-reverse;
|
|
||||||
flex-direction: column-reverse;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media only screen and (max-width: 480px) {
|
|
||||||
.text-image {
|
|
||||||
margin: 50px 0 0 0;
|
|
||||||
gap: 20%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.content-body {
|
|
||||||
max-width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.content-body p {
|
|
||||||
font-size: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.content-img {
|
|
||||||
max-width: 100%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/* Text component */
|
|
||||||
.text {
|
|
||||||
margin: 80px 0 0 0;
|
|
||||||
display: -webkit-box;
|
|
||||||
display: -ms-flexbox;
|
|
||||||
display: flex;
|
|
||||||
-webkit-box-orient: horizontal;
|
|
||||||
-webkit-box-direction: normal;
|
|
||||||
-ms-flex-direction: row;
|
|
||||||
flex-direction: row;
|
|
||||||
-webkit-box-pack: justify;
|
|
||||||
-ms-flex-pack: justify;
|
|
||||||
justify-content: space-between;
|
|
||||||
-webkit-box-align: center;
|
|
||||||
-ms-flex-align: center;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.text-body {
|
|
||||||
max-width: 95%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.text-body p {
|
|
||||||
font-size: 18px;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media only screen and (max-width: 768px) {
|
|
||||||
.text {
|
|
||||||
margin: 80px 0 0 0;
|
|
||||||
display: -webkit-box;
|
|
||||||
display: -ms-flexbox;
|
|
||||||
display: flex;
|
|
||||||
-webkit-box-orient: vertical;
|
|
||||||
-webkit-box-direction: normal;
|
|
||||||
-ms-flex-direction: column;
|
|
||||||
flex-direction: column;
|
|
||||||
-webkit-box-pack: start;
|
|
||||||
-ms-flex-pack: start;
|
|
||||||
justify-content: flex-start;
|
|
||||||
gap: 20%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.text-body {
|
|
||||||
max-width: 80%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media only screen and (max-width: 480px) {
|
|
||||||
.text {
|
|
||||||
margin: 50px 0 0 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.text-body {
|
|
||||||
max-width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.text-body p {
|
|
||||||
font-size: 16px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/* Donations */
|
|
||||||
.section-donate {
|
|
||||||
margin-top: 56px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.section-donate h1 {
|
|
||||||
font-size: 40px;
|
|
||||||
font-weight: 600;
|
|
||||||
line-height: 1.1;
|
|
||||||
color: $dark;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.section-donate .btn {
|
|
||||||
margin: 32px 0 0 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media only screen and (max-width: 680px) {
|
|
||||||
.section-donate h1 {
|
|
||||||
font-size: 36px;
|
|
||||||
line-height: 1.2;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media only screen and (max-width: 480px) {
|
|
||||||
.section-donate h1 {
|
|
||||||
font-size: 30px;
|
|
||||||
line-height: 1.2;
|
|
||||||
}
|
|
||||||
|
|
||||||
.section-donate {
|
|
||||||
margin-top: 40px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.donate-heading {
|
|
||||||
margin: 0 0 32px 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.section-donate .btn {
|
|
||||||
margin: 8px 0 0 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/* Modal box*/
|
|
||||||
.modal-box {
|
|
||||||
position: fixed;
|
|
||||||
background-color: rgba(42, 130, 222, 0.95);
|
|
||||||
top: 0;
|
|
||||||
right: 0;
|
|
||||||
bottom: 0;
|
|
||||||
left: 0;
|
|
||||||
z-index: 999;
|
|
||||||
visibility: hidden;
|
|
||||||
opacity: 0;
|
|
||||||
pointer-events: none;
|
|
||||||
transition: all 0.3s;
|
|
||||||
|
|
||||||
&:target {
|
|
||||||
visibility: visible;
|
|
||||||
opacity: 1;
|
|
||||||
pointer-events: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
& > div {
|
|
||||||
width: 500px;
|
|
||||||
position: absolute;
|
|
||||||
top: 50%;
|
|
||||||
left: 50%;
|
|
||||||
-webkit-transform: translate(-50%, -50%);
|
|
||||||
-ms-transform: translate(-50%, -50%);
|
|
||||||
transform: translate(-50%, -50%);
|
|
||||||
transform: translate(-50%, -50%);
|
|
||||||
padding: 20px 40px 20px 40px;
|
|
||||||
background: white;
|
|
||||||
border-radius: 16px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.modal-box h4 {
|
|
||||||
font-size: 26px;
|
|
||||||
font-weight: 600;
|
|
||||||
line-height: 1.025;
|
|
||||||
color: $dark;
|
|
||||||
text-align: left;
|
|
||||||
margin: 20px 0 20px 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.modal-box .btn {
|
|
||||||
margin: 16px 0 0 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.modal-box ol {
|
|
||||||
display: block;
|
|
||||||
font-size: 16px;
|
|
||||||
line-height: 1.6;
|
|
||||||
font-weight: 300;
|
|
||||||
color: $dark;
|
|
||||||
margin-top: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.modal-close {
|
|
||||||
color: $dark;
|
|
||||||
font-size: 14px;
|
|
||||||
position: absolute;
|
|
||||||
right: 40px;
|
|
||||||
text-align: right;
|
|
||||||
top: 20px;
|
|
||||||
width: 70px;
|
|
||||||
text-decoration: underline;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
color: $primary-blue;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media only screen and (max-width: 680px) {
|
|
||||||
.modal-box {
|
|
||||||
|
|
||||||
&:target {
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
& > div {
|
|
||||||
width: 90%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media only screen and (max-width: 480px) {
|
|
||||||
.modal-box h4 {
|
|
||||||
font-size: 22px;
|
|
||||||
line-height: 1.2;
|
|
||||||
}
|
|
||||||
|
|
||||||
.modal-box {
|
|
||||||
|
|
||||||
&:target {
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
& > div {
|
|
||||||
padding: 20px 24px 20px 24px;
|
|
||||||
border-radius: 16px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.modal-box ol {
|
|
||||||
font-size: 14px;
|
|
||||||
margin: 20px 0 16px 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/* Footer */
|
|
||||||
.section-footer {
|
|
||||||
margin: 80px 0 0 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.footer-divider {
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.footer-divider .gatsby-image-wrapper img {
|
|
||||||
width: 50px;
|
|
||||||
margin: 0 auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
footer {
|
|
||||||
margin: 16px 0 0 0;
|
|
||||||
display: -webkit-box;
|
|
||||||
display: -ms-flexbox;
|
|
||||||
display: flex;
|
|
||||||
-webkit-box-pack: center;
|
|
||||||
-ms-flex-pack: center;
|
|
||||||
justify-content: center;
|
|
||||||
-webkit-box-orient: horizontal;
|
|
||||||
-webkit-box-direction: normal;
|
|
||||||
-ms-flex-direction: row;
|
|
||||||
flex-direction: row;
|
|
||||||
vertical-align: middle;
|
|
||||||
gap: 30px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.company p {
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.github a {
|
|
||||||
font-size: 14px;
|
|
||||||
color: $primary-blue;
|
|
||||||
text-decoration: underline;
|
|
||||||
vertical-align: middle;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
.github .gatsby-image-wrapper img {
|
|
||||||
width: 18px;
|
|
||||||
vertical-align: middle;
|
|
||||||
margin: 2px 2px 0 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media only screen and (max-width: 580px) {
|
|
||||||
.section-footer {
|
|
||||||
margin-top: 60px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.footer-divider {
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
footer {
|
|
||||||
margin: 16px 0 0 0;
|
|
||||||
display: -webkit-box;
|
|
||||||
display: -ms-flexbox;
|
|
||||||
display: flex;
|
|
||||||
-webkit-box-pack: center;
|
|
||||||
-ms-flex-pack: center;
|
|
||||||
justify-content: center;
|
|
||||||
-webkit-box-orient: vertical;
|
|
||||||
-webkit-box-direction: normal;
|
|
||||||
-ms-flex-direction: column;
|
|
||||||
flex-direction: column;
|
|
||||||
text-align: center;
|
|
||||||
gap: 6px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
blockquote {
|
|
||||||
background: #f9f9f9;
|
|
||||||
border-left: 10px solid #ccc;
|
|
||||||
margin: 1.5em 10px;
|
|
||||||
padding: 0.5em 10px;
|
|
||||||
quotes: "\201C""\201D""\2018""\2019";
|
|
||||||
}
|
|
||||||
|
|
||||||
blockquote:before {
|
|
||||||
color: #ccc;
|
|
||||||
content: open-quote;
|
|
||||||
font-size: 4em;
|
|
||||||
line-height: 0.1em;
|
|
||||||
margin-right: 0.25em;
|
|
||||||
vertical-align: -0.4em;
|
|
||||||
}
|
|
||||||
|
|
||||||
blockquote p {
|
|
||||||
display: inline;
|
|
||||||
}
|
|
||||||
|
|
@ -0,0 +1 @@
|
||||||
|
/// <reference types="@astrojs/image/client" />
|
||||||
Binary file not shown.
|
Before Width: | Height: | Size: 74 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 13 KiB |
|
|
@ -1 +0,0 @@
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" viewBox="0 0 24 24"><path fill="#2A82DE" d="M20,16c-0.8,0-1.6,0.3-2.1,0.9l-2.2-1.3c0.2-0.5,0.3-1,0.3-1.6c0-2-1.5-3.7-3.5-3.9V7.9C13.9,7.7,15,6.5,15,5c0-1.7-1.3-3-3-3S9,3.3,9,5c0,1.5,1.1,2.7,2.5,2.9v2.1C9.5,10.3,8,12,8,14c0,0.6,0.1,1.1,0.3,1.6l-2.2,1.3C5.6,16.3,4.8,16,4,16c-1.7,0-3,1.3-3,3s1.3,3,3,3c1.7,0,3-1.3,3-3c0-0.5-0.1-0.9-0.3-1.3l2.2-1.3C9.6,17.4,10.7,18,12,18c1.3,0,2.4-0.6,3.1-1.6l2.2,1.3C17.1,18.1,17,18.5,17,19c0,1.7,1.3,3,3,3c1.7,0,3-1.3,3-3C23,17.3,21.7,16,20,16z M4,21c-1.1,0-2-0.9-2-2s0.9-2,2-2c1.1,0,2,0.9,2,2C6,20.1,5.1,21,4,21z M10,5c0-1.1,0.9-2,2-2c1.1,0,2,0.9,2,2c0,1.1-0.9,2-2,2S10,6.1,10,5z M12,17c-1.7,0-3-1.3-3-3s1.3-3,3-3c1.7,0,3,1.3,3,3C15,15.7,13.7,17,12,17z M20,21c-1.1,0-2-0.9-2-2s0.9-2,2-2c1.1,0,2,0.9,2,2C22,20.1,21.1,21,20,21z"/></svg>
|
|
||||||
|
Before Width: | Height: | Size: 842 B |
|
|
@ -1 +0,0 @@
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" viewBox="0 0 24 24"><path fill="#2A82DE" d="M6,9V5.5C6,4.1,7.1,3,8.5,3C8.8,3,9,2.8,9,2.5S8.8,2,8.5,2C6.6,2,5,3.6,5,5.5V9c0,1.4-1.1,2.5-2.5,2.5C2.2,11.5,2,11.7,2,12s0.2,0.5,0.5,0.5C3.9,12.5,5,13.6,5,15v3.5C5,20.4,6.6,22,8.5,22C8.8,22,9,21.8,9,21.5S8.8,21,8.5,21C7.1,21,6,19.9,6,18.5V15c0-1.3-0.7-2.4-1.7-3C5.3,11.4,6,10.3,6,9z M21.5,11.5c-1.4,0-2.5-1.1-2.5-2.5V5.5C19,3.6,17.4,2,15.5,2C15.2,2,15,2.2,15,2.5S15.2,3,15.5,3C16.9,3,18,4.1,18,5.5V9c0,1.3,0.7,2.4,1.7,3c-1,0.6-1.7,1.7-1.7,3v3.5c0,1.4-1.1,2.5-2.5,2.5c-0.3,0-0.5,0.2-0.5,0.5s0.2,0.5,0.5,0.5c1.9,0,3.5-1.6,3.5-3.5V15c0-1.4,1.1-2.5,2.5-2.5c0.3,0,0.5-0.2,0.5-0.5S21.8,11.5,21.5,11.5z"/></svg>
|
|
||||||
|
Before Width: | Height: | Size: 721 B |
|
|
@ -1 +0,0 @@
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" viewBox="0 0 24 24"><path fill="#2A82DE" d="M21,8v1.5c0,0.276123,0.223877,0.5,0.5,0.5S22,9.776123,22,9.5V8c-0.0018311-1.6561279-1.3438721-2.9981689-3-3h-6.1396484l-0.3163452-0.9492188C12.1364746,2.8253784,10.989624,1.9989014,9.6982422,2H5C3.3438721,2.0018311,2.0018311,3.3438721,2,5v13c0.0018311,1.6561279,1.3438721,2.9981689,3,3h6.5c0.276123,0,0.5-0.223877,0.5-0.5S11.776123,20,11.5,20H5c-1.1040039-0.0014038-1.9985962-0.8959961-2-2V5c0.0014038-1.1040039,0.8959961-1.9985962,2-2h4.6982422c0.8607788-0.0007324,1.6251831,0.550293,1.8964844,1.3671875l0.4306641,1.2910156C12.09375,5.8622437,12.28479,5.9998169,12.5,6H19C20.1040039,6.0014038,20.9985962,6.8959961,21,8z M22,16.0508423V14.5c0-1.3807373-1.1192627-2.5-2.5-2.5S17,13.1192627,17,14.5v1.5508423C15.8594971,16.2832642,15.0010986,17.2910767,15,18.5v2c0.0012817,1.380188,1.119812,2.4987183,2.5,2.5h4c1.380188-0.0012817,2.4987183-1.119812,2.5-2.5v-2C23.9989014,17.2910767,23.1405029,16.2832642,22,16.0508423z M18,14.5c0-0.8284302,0.6715698-1.5,1.5-1.5s1.5,0.6715698,1.5,1.5V16h-3V14.5z M23,20.5c-0.0009155,0.828064-0.671936,1.4990845-1.5,1.5h-4c-0.828064-0.0009155-1.4990845-0.671936-1.5-1.5v-2c0.0009155-0.828064,0.671936-1.4990845,1.5-1.5h4c0.828064,0.0009155,1.4990845,0.671936,1.5,1.5V20.5z"/></svg>
|
|
||||||
|
Before Width: | Height: | Size: 1.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 38 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 8.4 KiB |
|
|
@ -1 +0,0 @@
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" viewBox="0 0 24 24"><path fill="#2A82DE" d="M21.5,13h-8.0005493C13.2234497,13.0001831,12.9998169,13.223999,13,13.5v8.0005493C13.0001831,21.7765503,13.223999,22.0001831,13.5,22h8.0006104C21.7765503,21.9998169,22.0001831,21.776001,22,21.5v-8.0006104C21.9998169,13.2234497,21.776001,12.9998169,21.5,13z M21,21h-7v-7h7V21z M10.5,2H2.4993896C2.2234497,2.0001831,1.9998169,2.223999,2,2.5v8.0005493C2.0001831,10.7765503,2.223999,11.0001831,2.5,11h8.0006104C10.7765503,10.9998169,11.0001831,10.776001,11,10.5V2.4993896C10.9998169,2.2234497,10.776001,1.9998169,10.5,2z M10,10H3V3h7V10z M10.5,13H2.4993896C2.2234497,13.0001831,1.9998169,13.223999,2,13.5v8.0005493C2.0001831,21.7765503,2.223999,22.0001831,2.5,22h8.0006104C10.7765503,21.9998169,11.0001831,21.776001,11,21.5v-8.0006104C10.9998169,13.2234497,10.776001,12.9998169,10.5,13z M10,21H3v-7h7V21z M21.5,2h-8.0005493C13.2234497,2.0001831,12.9998169,2.223999,13,2.5v8.0005493C13.0001831,10.7765503,13.223999,11.0001831,13.5,11h8.0006104C21.7765503,10.9998169,22.0001831,10.776001,22,10.5V2.4993896C21.9998169,2.2234497,21.776001,1.9998169,21.5,2z M21,10h-7V3h7V10z"/></svg>
|
|
||||||
|
Before Width: | Height: | Size: 1.2 KiB |
|
|
@ -1 +0,0 @@
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" viewBox="0 0 24 24"><path fill="#2A82DE" d="M17,9V7c0-2.7614136-2.2385864-5-5-5S7,4.2385864,7,7v2c-1.6561279,0.0018311-2.9981689,1.3438721-3,3v7c0.0018311,1.6561279,1.3438721,2.9981689,3,3h10c1.6561279-0.0018311,2.9981689-1.3438721,3-3v-7C19.9981689,10.3438721,18.6561279,9.0018311,17,9z M8,7c0-2.2091675,1.7908325-4,4-4s4,1.7908325,4,4v2H8V7z M19,19c-0.0014038,1.1040039-0.8959961,1.9985962-2,2H7c-1.1040039-0.0014038-1.9985962-0.8959961-2-2v-7c0.0014038-1.1040039,0.8959961-1.9985962,2-2h10c1.1040039,0.0014038,1.9985962,0.8959961,2,2V19z M12,13c-0.276123,0-0.5,0.223877-0.5,0.5v4.0005493C11.5001831,17.7765503,11.723999,18.0001831,12,18h0.0006104c0.2759399-0.0001831,0.4995728-0.223999,0.4993896-0.5v-4C12.5,13.223877,12.276123,13,12,13z"/></svg>
|
|
||||||
|
Before Width: | Height: | Size: 823 B |
|
|
@ -1 +0,0 @@
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" viewBox="0 0 24 24"><path fill="#2A82DE" d="M19.9894409,3.753418c-0.0565796-0.2703857-0.3215942-0.4437256-0.59198-0.387207c-2.4692383,0.5215454-5.0441284-0.0050659-7.1103516-1.4541016c-0.1722412-0.1210938-0.4019775-0.1210938-0.5742188,0C9.6466064,3.361084,7.0717773,3.8876343,4.6025391,3.3662109C4.5689697,3.3591919,4.53479,3.3556519,4.5004883,3.3556519C4.2242432,3.3554688,4.0001831,3.5792236,4,3.8554688v8.0185547c0.0016479,2.9362183,1.4152222,5.6925659,3.7988281,7.4072266l3.9101562,2.8037109C11.7937622,22.1459961,11.8955688,22.178833,12,22.1787109c0.1044312,0.0001221,0.2062378-0.0326538,0.2910156-0.093689l3.9101562-2.803772C18.5847778,17.5665894,19.9983521,14.8102417,20,11.8740234V3.8554688C20,3.821167,19.99646,3.7869873,19.9894409,3.753418z M19,11.8740234c-0.0010986,2.6139526-1.2591553,5.0679321-3.3808594,6.5947266L12,21.0634766L8.3808594,18.46875C6.2591553,16.9418945,5.0010986,14.4879761,5,11.8740234V4.453125c2.4417725,0.3648682,4.9324951-0.1789551,7-1.5283203c2.067627,1.348999,4.5582275,1.8928223,7,1.5283203V11.8740234z"/></svg>
|
|
||||||
|
Before Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.0 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 40 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 56 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 286 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 9.5 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 18 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 267 KiB |
|
|
@ -1 +0,0 @@
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><defs><radialGradient id="b" cx="161.8" cy="68.9" r="95.4" gradientTransform="matrix(1 0 0 -.95 0 248.8)" gradientUnits="userSpaceOnUse"><stop offset=".7" stop-opacity="0"/><stop offset=".9" stop-opacity=".5"/><stop offset="1"/></radialGradient><radialGradient id="d" cx="-340.3" cy="63" r="143.2" gradientTransform="matrix(.15 -.99 -.8 -.12 176.6 -125.4)" gradientUnits="userSpaceOnUse"><stop offset=".8" stop-opacity="0"/><stop offset=".9" stop-opacity=".5"/><stop offset="1"/></radialGradient><radialGradient id="e" cx="113.4" cy="570.2" r="202.4" gradientTransform="matrix(-.04 1 2.13 .08 -1179.5 -106.7)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#35c1f1"/><stop offset=".1" stop-color="#34c1ed"/><stop offset=".2" stop-color="#2fc2df"/><stop offset=".3" stop-color="#2bc3d2"/><stop offset=".7" stop-color="#36c752"/></radialGradient><radialGradient id="f" cx="376.5" cy="568" r="97.3" gradientTransform="matrix(.28 .96 .78 -.23 -303.8 -148.5)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#66eb6e"/><stop offset="1" stop-color="#66eb6e" stop-opacity="0"/></radialGradient><linearGradient id="a" x1="63.3" y1="84" x2="241.7" y2="84" gradientTransform="matrix(1 0 0 -1 0 266)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#0c59a4"/><stop offset="1" stop-color="#114a8b"/></linearGradient><linearGradient id="c" x1="157.3" y1="161.4" x2="46" y2="40.1" gradientTransform="matrix(1 0 0 -1 0 266)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#1b9de2"/><stop offset=".2" stop-color="#1595df"/><stop offset=".7" stop-color="#0680d7"/><stop offset="1" stop-color="#0078d4"/></linearGradient></defs><path d="M235.7 195.5a93.7 93.7 0 0 1-10.6 4.7 101.9 101.9 0 0 1-35.9 6.4c-47.3 0-88.5-32.5-88.5-74.3a31.5 31.5 0 0 1 16.4-27.3c-42.8 1.8-53.8 46.4-53.8 72.5 0 74 68.1 81.4 82.8 81.4 7.9 0 19.8-2.3 27-4.6l1.3-.4a128.3 128.3 0 0 0 66.6-52.8 4 4 0 0 0-5.3-5.6Z" transform="translate(-4.6 -5)" style="fill:url(#a)"/><path d="M235.7 195.5a93.7 93.7 0 0 1-10.6 4.7 101.9 101.9 0 0 1-35.9 6.4c-47.3 0-88.5-32.5-88.5-74.3a31.5 31.5 0 0 1 16.4-27.3c-42.8 1.8-53.8 46.4-53.8 72.5 0 74 68.1 81.4 82.8 81.4 7.9 0 19.8-2.3 27-4.6l1.3-.4a128.3 128.3 0 0 0 66.6-52.8 4 4 0 0 0-5.3-5.6Z" transform="translate(-4.6 -5)" style="isolation:isolate;opacity:.35;fill:url(#b)"/><path d="M110.3 246.3A79.2 79.2 0 0 1 87.6 225a80.7 80.7 0 0 1 29.5-120c3.2-1.5 8.5-4.1 15.6-4a32.4 32.4 0 0 1 25.7 13 31.9 31.9 0 0 1 6.3 18.7c0-.2 24.5-79.6-80-79.6-43.9 0-80 41.6-80 78.2a130.2 130.2 0 0 0 12.1 56 128 128 0 0 0 156.4 67 75.5 75.5 0 0 1-62.8-8Z" transform="translate(-4.6 -5)" style="fill:url(#c)"/><path d="M110.3 246.3A79.2 79.2 0 0 1 87.6 225a80.7 80.7 0 0 1 29.5-120c3.2-1.5 8.5-4.1 15.6-4a32.4 32.4 0 0 1 25.7 13 31.9 31.9 0 0 1 6.3 18.7c0-.2 24.5-79.6-80-79.6-43.9 0-80 41.6-80 78.2a130.2 130.2 0 0 0 12.1 56 128 128 0 0 0 156.4 67 75.5 75.5 0 0 1-62.8-8Z" transform="translate(-4.6 -5)" style="opacity:.41;fill:url(#d);isolation:isolate"/><path d="M157 153.8c-.9 1-3.4 2.5-3.4 5.6 0 2.6 1.7 5.2 4.8 7.3 14.3 10 41.4 8.6 41.5 8.6a59.6 59.6 0 0 0 30.3-8.3 61.4 61.4 0 0 0 30.4-52.9c.3-22.4-8-37.3-11.3-43.9C228 28.8 182.3 5 132.6 5a128 128 0 0 0-128 126.2c.5-36.5 36.8-66 80-66 3.5 0 23.5.3 42 10a72.6 72.6 0 0 1 30.9 29.3c6.1 10.6 7.2 24.1 7.2 29.5s-2.7 13.3-7.8 19.9Z" transform="translate(-4.6 -5)" style="fill:url(#e)"/><path d="M157 153.8c-.9 1-3.4 2.5-3.4 5.6 0 2.6 1.7 5.2 4.8 7.3 14.3 10 41.4 8.6 41.5 8.6a59.6 59.6 0 0 0 30.3-8.3 61.4 61.4 0 0 0 30.4-52.9c.3-22.4-8-37.3-11.3-43.9C228 28.8 182.3 5 132.6 5a128 128 0 0 0-128 126.2c.5-36.5 36.8-66 80-66 3.5 0 23.5.3 42 10a72.6 72.6 0 0 1 30.9 29.3c6.1 10.6 7.2 24.1 7.2 29.5s-2.7 13.3-7.8 19.9Z" transform="translate(-4.6 -5)" style="fill:url(#f)"/></svg>
|
|
||||||
|
Before Width: | Height: | Size: 3.7 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 83 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 170 KiB |
|
|
@ -0,0 +1,26 @@
|
||||||
|
---
|
||||||
|
import '../styles/global.scss';
|
||||||
|
import Navbar from '../components/Layout/Navbar/Navbar.jsx';
|
||||||
|
import Footer from '../components/Layout/Footer/Footer.astro';
|
||||||
|
|
||||||
|
export interface Props {
|
||||||
|
view: string;
|
||||||
|
title: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
const { view, title } = Astro.props;
|
||||||
|
---
|
||||||
|
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<title>{title}</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<Navbar view={view} client:load />
|
||||||
|
<main class={view}>
|
||||||
|
<slot />
|
||||||
|
</main>
|
||||||
|
<Footer />
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -1,54 +0,0 @@
|
||||||
import * as React from "react"
|
|
||||||
import { Link } from "gatsby"
|
|
||||||
|
|
||||||
// styles
|
|
||||||
const pageStyles = {
|
|
||||||
color: "#232129",
|
|
||||||
padding: "96px",
|
|
||||||
fontFamily: "-apple-system, Roboto, sans-serif, serif",
|
|
||||||
}
|
|
||||||
const headingStyles = {
|
|
||||||
marginTop: 0,
|
|
||||||
marginBottom: 64,
|
|
||||||
maxWidth: 320,
|
|
||||||
}
|
|
||||||
|
|
||||||
const paragraphStyles = {
|
|
||||||
marginBottom: 48,
|
|
||||||
}
|
|
||||||
const codeStyles = {
|
|
||||||
color: "#8A6534",
|
|
||||||
padding: 4,
|
|
||||||
backgroundColor: "#FFF4DB",
|
|
||||||
fontSize: "1.25rem",
|
|
||||||
borderRadius: 4,
|
|
||||||
}
|
|
||||||
|
|
||||||
// markup
|
|
||||||
const NotFoundPage = () => {
|
|
||||||
return (
|
|
||||||
<main style={pageStyles}>
|
|
||||||
<title>Not found</title>
|
|
||||||
<h1 style={headingStyles}>Page not found</h1>
|
|
||||||
<p style={paragraphStyles}>
|
|
||||||
Sorry{" "}
|
|
||||||
<span role="img" aria-label="Pensive emoji">
|
|
||||||
😔
|
|
||||||
</span>{" "}
|
|
||||||
we couldn’t find what you were looking for.
|
|
||||||
<br />
|
|
||||||
{process.env.NODE_ENV === "development" ? (
|
|
||||||
<>
|
|
||||||
<br />
|
|
||||||
Try creating a page in <code style={codeStyles}>src/pages/</code>.
|
|
||||||
<br />
|
|
||||||
</>
|
|
||||||
) : null}
|
|
||||||
<br />
|
|
||||||
<Link to="/">Go home</Link>.
|
|
||||||
</p>
|
|
||||||
</main>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
export default NotFoundPage
|
|
||||||
|
|
@ -0,0 +1,16 @@
|
||||||
|
---
|
||||||
|
import Layout from '../layouts/Layout.astro';
|
||||||
|
import Support from '../components/Donate/Support/Support.astro';
|
||||||
|
import Purposes from '../components/Donate/Purposes/Purposes.astro';
|
||||||
|
import Why from '../components/Donate/Why/Why.astro';
|
||||||
|
import Difference from '../components/Donate/Difference/Difference.astro';
|
||||||
|
import HowToSupport from '../components/Donate/HowToSupport/HowToSupport.astro';
|
||||||
|
---
|
||||||
|
|
||||||
|
<Layout view="donate" title="Donate - Web3Extension">
|
||||||
|
<Support />
|
||||||
|
<Purposes />
|
||||||
|
<Why />
|
||||||
|
<Difference />
|
||||||
|
<HowToSupport />
|
||||||
|
</Layout>
|
||||||
|
|
@ -1,72 +0,0 @@
|
||||||
import * as React from "react"
|
|
||||||
import Layout from "../components/Layout";
|
|
||||||
import {StaticImage} from "gatsby-plugin-image";
|
|
||||||
|
|
||||||
const DonatePage = () => {
|
|
||||||
return <Layout>
|
|
||||||
<section className="section-donate">
|
|
||||||
<h1>Support Lume Web, help us build an open, decentralized web for humanity</h1>
|
|
||||||
<div className="download">
|
|
||||||
<div className="download-button">
|
|
||||||
<a href="https://lumeweb.com/donate" target="_blank">
|
|
||||||
<button className="btn">Make a donation</button>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
|
|
||||||
<section className="section-advantages">
|
|
||||||
<div className="advantage-card">
|
|
||||||
<StaticImage src={"../images/icon-code.svg"} alt="Icon code"/>
|
|
||||||
<span>Development spending</span>
|
|
||||||
<p>All donations are spent on active development of Lume Web and maintaining community services.</p>
|
|
||||||
</div>
|
|
||||||
<div className="advantage-card">
|
|
||||||
<StaticImage src={"../images/icon-shield.svg"} alt="Icon shield"/>
|
|
||||||
<span>Help pioneer Web3</span>
|
|
||||||
<p>The Web3 is taking back the internet to be the user-owned internet. If we, the users, don't fund and build what we want, it will be again, decided for us, and benefit others and become centralized to a few, not decentralized for the many.</p>
|
|
||||||
</div>
|
|
||||||
<div className="advantage-card">
|
|
||||||
<StaticImage src={"../images/icon-grid.svg"} alt="Icon grid"/>
|
|
||||||
<span>Help us grow</span>
|
|
||||||
<p>We need the communities voice and hands. Lume Web is your open gateway and platform, so it must be built by those who are going to use it the most.</p>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
|
|
||||||
<section className="text-image">
|
|
||||||
<div className="content-img">
|
|
||||||
<StaticImage src={"../images/image-roadmap.jpg"} alt="Roadmap image"/>
|
|
||||||
</div>
|
|
||||||
<div className="content-body">
|
|
||||||
<h3>Why we ask for your donations</h3>
|
|
||||||
<p>At this time, Lume Web is a one-person show and frankly... a speck of dust on the internet, but with large ideas and a unique vision. We are relying on the community, and crypto whales to support this initiative to build the technology the internet needs to be owned by the users its serves.</p>
|
|
||||||
<p>The current internet is controlled by a few for them to make money with you as the product, in exchange for all the "free" stuff you get in return. If you think on it, you will find a pattern here, and it turns us to becoming batteries in the matrix.</p>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
|
|
||||||
<section className="text">
|
|
||||||
<div className="text-body">
|
|
||||||
<h3>$$ How to support $$</h3>
|
|
||||||
<p>We aren't picky 😉. If there is a way you want to pay us, we are happy to take it. The project is funded through Hammer Technologies LLC, in the USA, and so crypto, FOSS platforms, and traditional payment methods are all accepted! Just click donate at the top to see your options, and to contact us if needed.</p>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
|
|
||||||
<section className="text-image column-reverse">
|
|
||||||
<div className="content-body">
|
|
||||||
<h3>The way we are different</h3>
|
|
||||||
<p>First understand the .com boom/bubble/bust in the 1990's to 2000's was a gold rush for VC's to get rich or die trying. Outside VC's... everyone seemed to be smoking something and was looking to get rich too!</p>
|
|
||||||
<p>We have entered that era again, but this time with crypto, web3 and the "metaverse". Crypto is the money-arm of the web, web3 is to be the next internet, and at this time the "metaverse" is PR-filled hype and per the wolf of wallstreet.. <blockquote>It's a whazy. It's a woozie. It's fairy dust.</blockquote> If you want the metaverse, look at MMORPG, VR or just... real life 😝</p>
|
|
||||||
<p>The Lume Web project has no VC equity and will never give out equity in any form to investment companies since their motive is to make a profit usually by being a walled garden and centralizing. VC's interests broadly go against the interest of a user-owned internet.</p>
|
|
||||||
</div>
|
|
||||||
<div className="content-img">
|
|
||||||
<StaticImage src={"../images/image-development-race.png"} alt="Roadmap image"/>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
</Layout>
|
|
||||||
};
|
|
||||||
|
|
||||||
export default DonatePage;
|
|
||||||
|
|
@ -0,0 +1,16 @@
|
||||||
|
---
|
||||||
|
import Layout from '../layouts/Layout.astro';
|
||||||
|
import Install from '../components/Home/Install/Install.astro';
|
||||||
|
import Access from '../components/Home/Access/Access.astro';
|
||||||
|
import Features from '../components/Home/Features/Features.astro';
|
||||||
|
import Message from '../components/Home/Message/Message.astro';
|
||||||
|
import Socials from '../components/Home/Socials/Socials.astro';
|
||||||
|
---
|
||||||
|
|
||||||
|
<Layout view="home" title="Web3Extension - Gateway to Web3">
|
||||||
|
<Install />
|
||||||
|
<Access />
|
||||||
|
<Features />
|
||||||
|
<Message />
|
||||||
|
<Socials />
|
||||||
|
</Layout>
|
||||||
|
|
@ -1,97 +0,0 @@
|
||||||
import * as React from "react"
|
|
||||||
import Layout from "../components/Layout";
|
|
||||||
import {StaticImage} from "gatsby-plugin-image";
|
|
||||||
|
|
||||||
// markup
|
|
||||||
const IndexPage = () => {
|
|
||||||
return <Layout>
|
|
||||||
<div className="section-introduction">
|
|
||||||
<div className="heading-introduction">
|
|
||||||
<h1>Lume Web, your personal and private gateway to web3</h1>
|
|
||||||
</div>
|
|
||||||
<div className="section-portal">
|
|
||||||
<div className="portal-frame">
|
|
||||||
<div className="portal"/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<section className="section-download">
|
|
||||||
<div>
|
|
||||||
<h2>Download the Web3 Extension by Lume Web</h2>
|
|
||||||
</div>
|
|
||||||
<div className="download">
|
|
||||||
<div className="download-button">
|
|
||||||
<a href="https://addons.mozilla.org/en-US/firefox/addon/lume-web/" target="_blank"><StaticImage
|
|
||||||
src={"../images/firefox.svg"} alt={"Firefox Extension Download"} width={50}/></a>
|
|
||||||
<a href="https://microsoftedge.microsoft.com/addons/detail/lume-web/iknceiggnffomcchipaclfnjfkbkppof"
|
|
||||||
target="_blank"><StaticImage
|
|
||||||
src={"../images/msedge.svg"} alt={"Microsoft Edge Extension Download"} width={50}/></a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
<section className="section-share">
|
|
||||||
<h3>Share</h3>
|
|
||||||
<div>
|
|
||||||
<p>Outside upgrading to web3, or supporting with $ if you can, the best way to support this initiative is by sharing and blue pilling your social network, friends and family. If orange is for bitcoin, then blue must represent web3, and both represent 2 sides of a bitcoin for freedom!</p>
|
|
||||||
<div className="addthis_inline_share_toolbox" />
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<section className="section-advantages">
|
|
||||||
<div className="advantage-card">
|
|
||||||
<StaticImage src={"../images/icon-lock.svg"} alt="Icon lock"/>
|
|
||||||
<span>It's private</span>
|
|
||||||
<p>There is no sign-up required to browse web3. You do not even need to provide an email for basic use.
|
|
||||||
Additionally, if you do create an account, all data is encrypted with your password</p>
|
|
||||||
</div>
|
|
||||||
<div className="advantage-card">
|
|
||||||
<StaticImage src={"../images/icon-folder-lock.svg"} alt="Icon folder lock"/>
|
|
||||||
<span>It's personal</span>
|
|
||||||
<p>Everything you do is owned by you. Your data is not controlled or owned by others. You are free to
|
|
||||||
share copies to let others own a version or keep encrypted in your account.</p>
|
|
||||||
</div>
|
|
||||||
<div className="advantage-card">
|
|
||||||
<StaticImage src={"../images/icon-channel.svg"} alt="Icon channel"/>
|
|
||||||
<span>It's your gateway</span>
|
|
||||||
<p>Gain freedom on a new web, owned by its users, and with privacy and control built-in.</p>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<section className="text-image">
|
|
||||||
<div className="content-img">
|
|
||||||
<StaticImage src={"../images/portal-image.jpg"} alt="Portal"/>
|
|
||||||
</div>
|
|
||||||
<div className="content-body">
|
|
||||||
<h3>Lume Web grants your access to web3</h3>
|
|
||||||
<p>Currently, there is a lot of marketing and hype around "Web3", because frankly most don't have a clue
|
|
||||||
on what Web3 is, just that there is money in it! It is the second .com boom. Similar can be said for
|
|
||||||
"The Metaverse", but many will love to pitch and sell otherwise. Most things claiming to "be" Web3
|
|
||||||
are
|
|
||||||
really just another platform trying to make money off you, but not really being on a secure,
|
|
||||||
decentralized web that is intended for your freedom.</p>
|
|
||||||
<p>Now many of the services have technology that are "building blocks" for the next internet, but the
|
|
||||||
owners have other ideas as well, which makes them into what they were marketed to not be. That is...
|
|
||||||
centralized "SaaS" services that want to sell you something, but only achieve becoming another
|
|
||||||
internet walled garden, with some "blockchain" technology mixed in.</p>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<section className="text-image">
|
|
||||||
<div className="content-body">
|
|
||||||
<h3>Free Yourself</h3>
|
|
||||||
<p>We have had decentralized internet for a while now (decades) in various forms, so consider Web3 an upgrade that
|
|
||||||
combines many of these attempts + blockchain, into an evolution for the user-owned internet, rather than us, the
|
|
||||||
user, becoming batteries in
|
|
||||||
the matrix.</p>
|
|
||||||
</div>
|
|
||||||
<div className="content-img">
|
|
||||||
<StaticImage src={"../images/matrix.jpg"} alt="Matrix Pods"/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</section>
|
|
||||||
</Layout>
|
|
||||||
}
|
|
||||||
|
|
||||||
export default IndexPage
|
|
||||||
|
|
@ -0,0 +1,199 @@
|
||||||
|
@import "./mixins.scss";
|
||||||
|
@import "./vars.scss";
|
||||||
|
|
||||||
|
@import url("https://fonts.googleapis.com/css?family=Jaldi:400|JetBrains+Mono:300,400,700");
|
||||||
|
|
||||||
|
@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: $font-family-jetbrains-mono;
|
||||||
|
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 2em;
|
||||||
|
@include fluid-font-size(1.375rem);
|
||||||
|
color: $color-black;
|
||||||
|
background: $color-brand;
|
||||||
|
border: 0.05em solid $color-brand;
|
||||||
|
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.5rem);
|
||||||
|
font-weight: 700;
|
||||||
|
line-height: 100%;
|
||||||
|
text-transform: uppercase;
|
||||||
|
color: $color-brand;
|
||||||
|
}
|
||||||
|
|
||||||
|
h3 {
|
||||||
|
margin-bottom: 0.65em;
|
||||||
|
@include fluid-font-size(2.8125rem);
|
||||||
|
font-weight: 700;
|
||||||
|
line-height: 109%;
|
||||||
|
}
|
||||||
|
|
||||||
|
h2, h3 {
|
||||||
|
text-shadow: 0.017em 0.017em 0.034em rgba($color-black, 0.65);
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
@include fluid-font-size(1.5rem);
|
||||||
|
font-family: $font-family-jaldi;
|
||||||
|
line-height: 148%;
|
||||||
|
color: $color-cloud;
|
||||||
|
transition: background $transition-duration;
|
||||||
|
}
|
||||||
|
|
||||||
|
p + p {
|
||||||
|
margin-top: 0.78em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-main {
|
||||||
|
font-family: $font-family-jaldi;
|
||||||
|
margin-top: 1.57em;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.feature-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(1, 1fr);
|
||||||
|
gap: 6em;
|
||||||
|
padding: 11em 7.5% 10em;
|
||||||
|
|
||||||
|
@media screen and (min-width: 56rem) {
|
||||||
|
grid-template-columns: repeat(3, 1fr);
|
||||||
|
grid-auto-rows: 1fr;
|
||||||
|
gap: 5%;
|
||||||
|
}
|
||||||
|
|
||||||
|
> div {
|
||||||
|
display: flex;
|
||||||
|
|
||||||
|
> div:first-child {
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
img {
|
||||||
|
margin: 4em 2.5em 0 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (min-width: 56rem) and (max-width: 67rem) {
|
||||||
|
flex-direction: column;
|
||||||
|
|
||||||
|
img {
|
||||||
|
margin: 0 0 2em;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
h3 {
|
||||||
|
@include fluid-font-size(2.25rem);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.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 {
|
||||||
|
&::before {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
right: min(0em, calc((100% - 96.3em) / 2));
|
||||||
|
width: 96.3em;
|
||||||
|
height: 93.9em;
|
||||||
|
background: url("/src/assets/home-bg.png");
|
||||||
|
background-position: top right;
|
||||||
|
background-size: contain;
|
||||||
|
z-index: -1;
|
||||||
|
min-width: 20rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
main.donate {
|
||||||
|
&::before {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
right: min(0em, calc((100% - 96.3em) / 2));
|
||||||
|
width: 96.3em;
|
||||||
|
height: 93.9em;
|
||||||
|
background: url("/src/assets/home-bg.png");
|
||||||
|
background-position: top right;
|
||||||
|
background-size: contain;
|
||||||
|
z-index: -1;
|
||||||
|
min-width: 20rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,199 @@
|
||||||
|
@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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -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;
|
||||||
|
$color-brand: #fc8a7a;
|
||||||
|
|
||||||
|
$font-family-jaldi: "Jaldi", sans-serif;
|
||||||
|
$font-family-jetbrains-mono: "JetBrains Mono", sans-serif;
|
||||||
|
|
||||||
|
$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: { }
|
||||||
|
}
|
||||||
101
tsconfig.json
101
tsconfig.json
|
|
@ -1,102 +1,3 @@
|
||||||
{
|
{
|
||||||
"compilerOptions": {
|
"extends": "astro/tsconfigs/base"
|
||||||
/* Visit https://aka.ms/tsconfig.json to read more about this file */
|
|
||||||
|
|
||||||
/* Projects */
|
|
||||||
// "incremental": true, /* Enable incremental compilation */
|
|
||||||
// "composite": true, /* Enable constraints that allow a TypeScript project to be used with project references. */
|
|
||||||
// "tsBuildInfoFile": "./", /* Specify the folder for .tsbuildinfo incremental compilation files. */
|
|
||||||
// "disableSourceOfProjectReferenceRedirect": true, /* Disable preferring source files instead of declaration files when referencing composite projects */
|
|
||||||
// "disableSolutionSearching": true, /* Opt a project out of multi-project reference checking when editing. */
|
|
||||||
// "disableReferencedProjectLoad": true, /* Reduce the number of projects loaded automatically by TypeScript. */
|
|
||||||
|
|
||||||
/* Language and Environment */
|
|
||||||
"target": "esnext", /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */
|
|
||||||
"lib": ["dom", "esnext"], /* Specify a set of bundled library declaration files that describe the target runtime environment. */
|
|
||||||
"jsx": "react", /* Specify what JSX code is generated. */
|
|
||||||
// "experimentalDecorators": true, /* Enable experimental support for TC39 stage 2 draft decorators. */
|
|
||||||
// "emitDecoratorMetadata": true, /* Emit design-type metadata for decorated declarations in source files. */
|
|
||||||
// "jsxFactory": "", /* Specify the JSX factory function used when targeting React JSX emit, e.g. 'React.createElement' or 'h' */
|
|
||||||
// "jsxFragmentFactory": "", /* Specify the JSX Fragment reference used for fragments when targeting React JSX emit e.g. 'React.Fragment' or 'Fragment'. */
|
|
||||||
// "jsxImportSource": "", /* Specify module specifier used to import the JSX factory functions when using `jsx: react-jsx*`.` */
|
|
||||||
// "reactNamespace": "", /* Specify the object invoked for `createElement`. This only applies when targeting `react` JSX emit. */
|
|
||||||
// "noLib": true, /* Disable including any library files, including the default lib.d.ts. */
|
|
||||||
// "useDefineForClassFields": true, /* Emit ECMAScript-standard-compliant class fields. */
|
|
||||||
|
|
||||||
/* Modules */
|
|
||||||
"module": "esnext", /* Specify what module code is generated. */
|
|
||||||
// "rootDir": "./", /* Specify the root folder within your source files. */
|
|
||||||
"moduleResolution": "node", /* Specify how TypeScript looks up a file from a given module specifier. */
|
|
||||||
// "baseUrl": "./", /* Specify the base directory to resolve non-relative module names. */
|
|
||||||
// "paths": {}, /* Specify a set of entries that re-map imports to additional lookup locations. */
|
|
||||||
// "rootDirs": [], /* Allow multiple folders to be treated as one when resolving modules. */
|
|
||||||
// "typeRoots": [], /* Specify multiple folders that act like `./node_modules/@types`. */
|
|
||||||
// "types": [], /* Specify type package names to be included without being referenced in a source file. */
|
|
||||||
// "allowUmdGlobalAccess": true, /* Allow accessing UMD globals from modules. */
|
|
||||||
// "resolveJsonModule": true, /* Enable importing .json files */
|
|
||||||
// "noResolve": true, /* Disallow `import`s, `require`s or `<reference>`s from expanding the number of files TypeScript should add to a project. */
|
|
||||||
|
|
||||||
/* JavaScript Support */
|
|
||||||
// "allowJs": true, /* Allow JavaScript files to be a part of your program. Use the `checkJS` option to get errors from these files. */
|
|
||||||
// "checkJs": true, /* Enable error reporting in type-checked JavaScript files. */
|
|
||||||
// "maxNodeModuleJsDepth": 1, /* Specify the maximum folder depth used for checking JavaScript files from `node_modules`. Only applicable with `allowJs`. */
|
|
||||||
|
|
||||||
/* Emit */
|
|
||||||
// "declaration": true, /* Generate .d.ts files from TypeScript and JavaScript files in your project. */
|
|
||||||
// "declarationMap": true, /* Create sourcemaps for d.ts files. */
|
|
||||||
// "emitDeclarationOnly": true, /* Only output d.ts files and not JavaScript files. */
|
|
||||||
// "sourceMap": true, /* Create source map files for emitted JavaScript files. */
|
|
||||||
// "outFile": "./", /* Specify a file that bundles all outputs into one JavaScript file. If `declaration` is true, also designates a file that bundles all .d.ts output. */
|
|
||||||
// "outDir": "./", /* Specify an output folder for all emitted files. */
|
|
||||||
// "removeComments": true, /* Disable emitting comments. */
|
|
||||||
// "noEmit": true, /* Disable emitting files from a compilation. */
|
|
||||||
// "importHelpers": true, /* Allow importing helper functions from tslib once per project, instead of including them per-file. */
|
|
||||||
// "importsNotUsedAsValues": "remove", /* Specify emit/checking behavior for imports that are only used for types */
|
|
||||||
// "downlevelIteration": true, /* Emit more compliant, but verbose and less performant JavaScript for iteration. */
|
|
||||||
// "sourceRoot": "", /* Specify the root path for debuggers to find the reference source code. */
|
|
||||||
// "mapRoot": "", /* Specify the location where debugger should locate map files instead of generated locations. */
|
|
||||||
// "inlineSourceMap": true, /* Include sourcemap files inside the emitted JavaScript. */
|
|
||||||
// "inlineSources": true, /* Include source code in the sourcemaps inside the emitted JavaScript. */
|
|
||||||
// "emitBOM": true, /* Emit a UTF-8 Byte Order Mark (BOM) in the beginning of output files. */
|
|
||||||
// "newLine": "crlf", /* Set the newline character for emitting files. */
|
|
||||||
// "stripInternal": true, /* Disable emitting declarations that have `@internal` in their JSDoc comments. */
|
|
||||||
// "noEmitHelpers": true, /* Disable generating custom helper functions like `__extends` in compiled output. */
|
|
||||||
// "noEmitOnError": true, /* Disable emitting files if any type checking errors are reported. */
|
|
||||||
// "preserveConstEnums": true, /* Disable erasing `const enum` declarations in generated code. */
|
|
||||||
// "declarationDir": "./", /* Specify the output directory for generated declaration files. */
|
|
||||||
// "preserveValueImports": true, /* Preserve unused imported values in the JavaScript output that would otherwise be removed. */
|
|
||||||
|
|
||||||
/* Interop Constraints */
|
|
||||||
// "isolatedModules": true, /* Ensure that each file can be safely transpiled without relying on other imports. */
|
|
||||||
// "allowSyntheticDefaultImports": true, /* Allow 'import x from y' when a module doesn't have a default export. */
|
|
||||||
"esModuleInterop": true, /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables `allowSyntheticDefaultImports` for type compatibility. */
|
|
||||||
// "preserveSymlinks": true, /* Disable resolving symlinks to their realpath. This correlates to the same flag in node. */
|
|
||||||
"forceConsistentCasingInFileNames": true, /* Ensure that casing is correct in imports. */
|
|
||||||
|
|
||||||
/* Type Checking */
|
|
||||||
"strict": true, /* Enable all strict type-checking options. */
|
|
||||||
// "noImplicitAny": true, /* Enable error reporting for expressions and declarations with an implied `any` type.. */
|
|
||||||
// "strictNullChecks": true, /* When type checking, take into account `null` and `undefined`. */
|
|
||||||
// "strictFunctionTypes": true, /* When assigning functions, check to ensure parameters and the return values are subtype-compatible. */
|
|
||||||
// "strictBindCallApply": true, /* Check that the arguments for `bind`, `call`, and `apply` methods match the original function. */
|
|
||||||
// "strictPropertyInitialization": true, /* Check for class properties that are declared but not set in the constructor. */
|
|
||||||
// "noImplicitThis": true, /* Enable error reporting when `this` is given the type `any`. */
|
|
||||||
// "useUnknownInCatchVariables": true, /* Type catch clause variables as 'unknown' instead of 'any'. */
|
|
||||||
// "alwaysStrict": true, /* Ensure 'use strict' is always emitted. */
|
|
||||||
// "noUnusedLocals": true, /* Enable error reporting when a local variables aren't read. */
|
|
||||||
// "noUnusedParameters": true, /* Raise an error when a function parameter isn't read */
|
|
||||||
// "exactOptionalPropertyTypes": true, /* Interpret optional property types as written, rather than adding 'undefined'. */
|
|
||||||
// "noImplicitReturns": true, /* Enable error reporting for codepaths that do not explicitly return in a function. */
|
|
||||||
// "noFallthroughCasesInSwitch": true, /* Enable error reporting for fallthrough cases in switch statements. */
|
|
||||||
// "noUncheckedIndexedAccess": true, /* Include 'undefined' in index signature results */
|
|
||||||
// "noImplicitOverride": true, /* Ensure overriding members in derived classes are marked with an override modifier. */
|
|
||||||
// "noPropertyAccessFromIndexSignature": true, /* Enforces using indexed accessors for keys declared using an indexed type */
|
|
||||||
// "allowUnusedLabels": true, /* Disable error reporting for unused labels. */
|
|
||||||
// "allowUnreachableCode": true, /* Disable error reporting for unreachable code. */
|
|
||||||
|
|
||||||
/* Completeness */
|
|
||||||
// "skipDefaultLibCheck": true, /* Skip type checking .d.ts files that are included with TypeScript. */
|
|
||||||
"skipLibCheck": true /* Skip type checking all .d.ts files. */
|
|
||||||
},
|
|
||||||
"include": ["./src/**/*", "./gatsby-node.ts", "./gatsby-config.ts", "./plugins/**/*"]
|
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue