Merge branch 'develop'
# Conflicts: # CHANGELOG.md # npm-shrinkwrap.json # package.json
This commit is contained in:
commit
9152c08f80
GPG Key ID:
C997C339BE476FF2
Binary file not shown.
|
After Width: | Height: | Size: 50 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 90 KiB |
|
|
@ -1,21 +1,38 @@
|
||||||
---
|
---
|
||||||
import './PoweredBy.scss';
|
import svgSia from "/src/assets/icons/sia.svg?raw";
|
||||||
|
import svgHns from "/src/assets/icons/hns.svg?raw";
|
||||||
import svgSia from '/src/assets/icons/sia.svg?raw';
|
import svgOsi from "/src/assets/icons/osi.svg?raw";
|
||||||
import svgHns from '/src/assets/icons/hns.svg?raw';
|
|
||||||
import svgOsi from '/src/assets/icons/osi.svg?raw';
|
|
||||||
---
|
---
|
||||||
|
|
||||||
<section id="powered-by">
|
<section
|
||||||
<h2>Powered By</h2>
|
id="powered-by"
|
||||||
<div>
|
class="flex flex-col md:flex-row gap-16 items-center justify-center"
|
||||||
<a href="https://sia.tech" title="Sia" class="sia-logo">
|
>
|
||||||
|
<h2
|
||||||
|
class="font-display text-xl md:text-3xl text-primary uppercase font-bold mr-5"
|
||||||
|
>
|
||||||
|
Powered By
|
||||||
|
</h2>
|
||||||
|
<div class="flex flex-row items-center gap-x-10">
|
||||||
|
<a
|
||||||
|
href="https://sia.tech"
|
||||||
|
title="Sia"
|
||||||
|
class="w-28 h-28 text-gray-300 hover:text-white transition-all ease-in"
|
||||||
|
>
|
||||||
<Fragment set:html={svgSia} />
|
<Fragment set:html={svgSia} />
|
||||||
</a>
|
</a>
|
||||||
<a href="https://handshake.org" title="Handshake" class="hns-logo">
|
<a
|
||||||
|
href="https://handshake.org"
|
||||||
|
title="Handshake"
|
||||||
|
class="w-20 h-20 -mt-4 text-gray-300 hover:text-white transition-all ease-in"
|
||||||
|
>
|
||||||
<Fragment set:html={svgHns} />
|
<Fragment set:html={svgHns} />
|
||||||
</a>
|
</a>
|
||||||
<a href="https://opensource.org/osd/" title="Open Source Initiative" class="osi-logo">
|
<a
|
||||||
|
href="https://opensource.org/osd/"
|
||||||
|
title="Open Source Initiative"
|
||||||
|
class="w-20 h-20 -mt-6 text-gray-300 hover:text-white transition-all ease-in"
|
||||||
|
>
|
||||||
<Fragment set:html={svgOsi} />
|
<Fragment set:html={svgOsi} />
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -1,54 +0,0 @@
|
||||||
@import "/src/styles/mixins.scss";
|
|
||||||
@import "/src/styles/vars.scss";
|
|
||||||
|
|
||||||
#powered-by {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
gap: 4em;
|
|
||||||
margin: 12em 7.5%;
|
|
||||||
|
|
||||||
@media screen and (max-width: 47.99999rem) {
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 2.5em;
|
|
||||||
}
|
|
||||||
|
|
||||||
div {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 2.5em;
|
|
||||||
}
|
|
||||||
|
|
||||||
h2 {
|
|
||||||
@include fluid-font-size(1.5625rem);
|
|
||||||
font-weight: 700;
|
|
||||||
line-height: 100%;
|
|
||||||
text-transform: uppercase;
|
|
||||||
color: $color-aquamarine;
|
|
||||||
|
|
||||||
@media screen and (min-width: 48rem) {
|
|
||||||
margin-top: 0.75em;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
a {
|
|
||||||
padding: 0.5em;
|
|
||||||
color: $color-alto;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
color: $color-white;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.sia-logo svg {
|
|
||||||
@include fluid-width(5.5rem);
|
|
||||||
}
|
|
||||||
|
|
||||||
.hns-logo svg {
|
|
||||||
@include fluid-width(4.5rem);
|
|
||||||
}
|
|
||||||
|
|
||||||
.osi-logo svg {
|
|
||||||
@include fluid-width(4.5rem);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,26 +1,42 @@
|
||||||
---
|
---
|
||||||
import './Socials.scss';
|
import svgGit from "/src/assets/icons/git.svg?raw";
|
||||||
|
import svgGithub from "/src/assets/icons/github.svg?raw";
|
||||||
import svgGit from '/src/assets/icons/git.svg?raw';
|
import svgDiscord from "/src/assets/icons/discord.svg?raw";
|
||||||
import svgGithub from '/src/assets/icons/github.svg?raw';
|
import svgTwitter from "/src/assets/icons/twitter.svg?raw";
|
||||||
import svgDiscord from '/src/assets/icons/discord.svg?raw';
|
|
||||||
import svgTwitter from '/src/assets/icons/twitter.svg?raw';
|
|
||||||
---
|
---
|
||||||
|
|
||||||
<section id="socials">
|
<section id="socials" class="flex flex-col items-center">
|
||||||
<h2>Get in touch</h2>
|
<h2 class="text-xl md:text-3xl font-display text-primary uppercase font-bold">
|
||||||
<div>
|
Get in touch
|
||||||
<a href="https://git.lumeweb.com" title="Git" class="git-logo">
|
</h2>
|
||||||
<Fragment set:html={svgGit} />
|
<div class="flex flex-row items-center justify-center gap-8 mt-10">
|
||||||
</a>
|
<a
|
||||||
<a href="https://github.com/LumeWeb" title="GitHub" class="github-logo">
|
href="https://git.lumeweb.com"
|
||||||
<Fragment set:html={svgGithub} />
|
title="Git"
|
||||||
</a>
|
class="w-10 h-10 -mt-1 text-gray-300 hover:text-primary transition-all ease-in"
|
||||||
<a href="https://discord.gg/qpC8ADp3rS" title="Discord" class="discord-logo">
|
>
|
||||||
<Fragment set:html={svgDiscord} />
|
<Fragment set:html={svgGit} />
|
||||||
</a>
|
</a>
|
||||||
<a href="https://twitter.com/lumeweb3" title="Twitter" class="twitter-logo">
|
<a
|
||||||
<Fragment set:html={svgTwitter} />
|
href="https://github.com/LumeWeb"
|
||||||
</a>
|
title="GitHub"
|
||||||
</div>
|
class="w-10 h-10 text-gray-300 hover:text-primary transition-all ease-in"
|
||||||
|
>
|
||||||
|
<Fragment set:html={svgGithub} />
|
||||||
|
</a>
|
||||||
|
<a
|
||||||
|
href="https://discord.gg/qpC8ADp3rS"
|
||||||
|
title="Discord"
|
||||||
|
class="w-10 h-10 mt-3 text-gray-300 hover:text-primary transition-all ease-in"
|
||||||
|
>
|
||||||
|
<Fragment set:html={svgDiscord} />
|
||||||
|
</a>
|
||||||
|
<a
|
||||||
|
href="https://twitter.com/lumeweb3"
|
||||||
|
title="Twitter"
|
||||||
|
class="w-10 h-10 text-gray-300 hover:text-primary transition-all ease-in"
|
||||||
|
>
|
||||||
|
<Fragment set:html={svgTwitter} />
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
|
||||||
|
|
@ -1,29 +1,48 @@
|
||||||
---
|
---
|
||||||
import './Grid.scss';
|
// import "./Grid.scss";
|
||||||
|
import GridCell from "./GridCell.astro";
|
||||||
|
|
||||||
|
const features = [
|
||||||
|
{
|
||||||
|
title: "Decentralized Websites (Goal)",
|
||||||
|
description:
|
||||||
|
"You should be able to gain access to any website on any network, in a secure and decentralized way",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Decentralized Publishing (Idea)",
|
||||||
|
description:
|
||||||
|
"You should be able to easily publish a blog or any other basic website for personal or professional use",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Website Building Tools (Idea)",
|
||||||
|
description:
|
||||||
|
"You should be able to easily build a website that targets the decentralized web",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "eCommerce (Idea)",
|
||||||
|
description:
|
||||||
|
"You should be be able to buy or sell in a free market without censorship or politics blocking your ability to transact",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Earn a Living (Idea)",
|
||||||
|
description:
|
||||||
|
"You should be able to monetize your content or skills, without a middleman or gatekeeper. You should be able to be free to live your best life by having access to an open market so that you are never chained down or restricted",
|
||||||
|
},
|
||||||
|
];
|
||||||
---
|
---
|
||||||
|
|
||||||
<section id="grid" class="feature-grid">
|
<section
|
||||||
<div>
|
id="grid"
|
||||||
<h2>Freedom. Privacy. Ownership.</h2>
|
class="flex flex-col md:mx-20 lg:mx-40 justify-between items-start gap-y-10 md:flex-row md:flex-wrap"
|
||||||
</div>
|
>
|
||||||
<div>
|
<div class="w-[calc(33.33%-20px)] pl-12 pt-5 mx-[10px]">
|
||||||
<h3>Decentralized Websites (Goal)</h3>
|
<h2 class="text-primary font-display text-4xl leading-[1.6] font-bold">
|
||||||
<p>You should be able to gain access to any website on any network, in a secure and decentralized way</p>
|
Freedom. <br /> Privacy. Ownership.
|
||||||
</div>
|
</h2>
|
||||||
<div>
|
</div>
|
||||||
<h3>Decentralized Publishing (Idea)</h3>
|
{
|
||||||
<p>You should be able to easily publish a blog or any other basic website for personal or professional use</p>
|
features.map((feature) => (
|
||||||
</div>
|
<GridCell title={feature.title} description={feature.description} />
|
||||||
<div>
|
))
|
||||||
<h3>Website Building Tools (Idea)</h3>
|
}
|
||||||
<p>You should be able to easily build a website that targets the decentralized web</p>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<h3>eCommerce (Idea)</h3>
|
|
||||||
<p>You should be be able to buy or sell in a free market without censorship or politics blocking your ability to transact</p>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<h3>Earn a Living (Idea)</h3>
|
|
||||||
<p>You should be able to monetize your content or skills, without a middleman or gatekeeper. You should be able to be free to live your best life by having access to an open market so that you are never chained down or restricted</p>
|
|
||||||
</div>
|
|
||||||
</section>
|
</section>
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,17 @@
|
||||||
|
---
|
||||||
|
export interface Props {
|
||||||
|
title: string;
|
||||||
|
description: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
const { title, description } = Astro.props;
|
||||||
|
---
|
||||||
|
|
||||||
|
<div class="lg:w-[calc(33.33%-20px)] p-10 bg-black mx-[10px] space-y-5">
|
||||||
|
<h3 class="font-display text-xl md:text-2xl">
|
||||||
|
{title}
|
||||||
|
</h3>
|
||||||
|
<p class="text-lg md:text-xl text-body font-body">
|
||||||
|
{description}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
@ -1,9 +1,12 @@
|
||||||
---
|
---
|
||||||
import '../../../styles/jumbotron.scss';
|
import "../../../styles/jumbotron.scss";
|
||||||
|
import backgroundSrc from "/src/assets/vision-jumbotron-bg.png";
|
||||||
---
|
---
|
||||||
|
|
||||||
<section id="jumbotron">
|
<section id="jumbotron" class="relative">
|
||||||
<h1>
|
<img
|
||||||
Easy access to an open, user-owned web.
|
src={backgroundSrc.src}
|
||||||
</h1>
|
class="-z-10 absolute left-1/2 -translate-x-1/2 w-[100em] max-w-none"
|
||||||
|
/>
|
||||||
|
<h1 class="font-display2">Easy access to an open, user-owned web.</h1>
|
||||||
</section>
|
</section>
|
||||||
|
|
|
||||||
|
|
@ -1,28 +1,29 @@
|
||||||
---
|
---
|
||||||
import './NoVc.scss';
|
import Button from "../../ui/Button.astro";
|
||||||
|
import FeaturedGroup from "../../ui/FeaturedGroup.astro";
|
||||||
|
import background from "/src/assets/double-brand-bg.png";
|
||||||
---
|
---
|
||||||
|
|
||||||
<section id="no-vc">
|
<section
|
||||||
<div class="feature-group">
|
id="no-vc"
|
||||||
<h2>Community-Powered</h2>
|
class="relative flex flex-row pb-40 mx-10 md:mx-20 lg:mx-40"
|
||||||
<h3>All about the people, no VC here.</h3>
|
>
|
||||||
<p>
|
<img
|
||||||
Our vision is completely grass roots, and FOSS. The user needs to have a voice and be in control of their web. Due to our principles, we have not taken any VC money that might be able to strap a jetpack to the project, because the output would compromise the spirit and goals we are setting out to achieve.
|
src={background.src}
|
||||||
</p>
|
class="absolute top-0 right-0 md:static -mx-10 -md:mx-20 lg:-mx-40 w-[1000px] max-h-[650px]"
|
||||||
<p>
|
/>
|
||||||
We are <i>very</i> aware of the projects that have come before us and whom have made similar promises. We are also doing our best to learn from their mistakes and failures.
|
<div class="flex flex-col">
|
||||||
</p>
|
<FeaturedGroup
|
||||||
<p>
|
subtitle="Community-Powered"
|
||||||
The key difference that we see big picture is you need both an <b>economy</b> and <b>decentralized/P2P</b> networks, because running the internet is not free, and someone <i>always</i> has to foot the bill.
|
title="All about the people, no VC here."
|
||||||
</p>
|
text={[
|
||||||
<p>
|
"Our vision is completely grass roots, and FOSS. The user needs to have a voice and be in control of their web. Due to our principles, we have not taken any VC money that might be able to strap a jetpack to the project, because the output would compromise the spirit and goals we are setting out to achieve.",
|
||||||
Blockchain <b><i>finally</i></b> makes this possible.
|
"We are <i>very</i> aware of the projects that have come before us and whom have made similar promises. We are also doing our best to learn from their mistakes and failures.",
|
||||||
</p>
|
"The key difference that we see big picture is you need both an <b>economy</b> and <b>decentralized/P2P</b> networks, because running the internet is not free, and someone <i>always</i> has to foot the bill.",
|
||||||
<p>
|
"Blockchain <b><i>finally</i></b> makes this possible.",
|
||||||
Having a pragmatic view on mass adoption without compromising on principles is needed to make progress on a user-owned web.
|
"Having a pragmatic view on mass adoption without compromising on principles is needed to make progress on a user-owned web.",
|
||||||
</p>
|
]}
|
||||||
<div>
|
/>
|
||||||
<a href="/donate" class="btn-main">Contribute to our cause</a>
|
<Button label="Contribute to our cause" href="/donate" />
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
|
||||||
|
|
@ -1,23 +1,23 @@
|
||||||
---
|
---
|
||||||
import './Unify.scss';
|
import unifyBg from "/src/assets/unifying-bg.png";
|
||||||
|
import FeaturedGroup from "../../ui/FeaturedGroup.astro";
|
||||||
---
|
---
|
||||||
|
|
||||||
<section id="unify">
|
<section
|
||||||
<div class="custom-bg"></div>
|
id="unify"
|
||||||
<div class="feature-group">
|
class="mx-10 md:mx-20 lg:mx-40 flex flex-col-reverse md:flex-row gap-10"
|
||||||
<h2>Community-Powered</h2>
|
>
|
||||||
<h3>Unifying all the Networks</h3>
|
<FeaturedGroup
|
||||||
<p>
|
subtitle="Unifying all the Networks"
|
||||||
There are many, <i>many</i> "crypto", "defi", "web3", "P2P", and "dWeb" projects that have all taken hundreds
|
title="Community-Powered"
|
||||||
of different approaches to innovate. However, they all have the same broad ethos in common, and they all
|
text={[
|
||||||
need an easy means to access them in one place, but in a censorship-resistant way.
|
`There are many, <i class="mr-1">many</i> "crypto", "defi", "web3", "P2P", and "dWeb" projects
|
||||||
</p>
|
that have all taken hundreds of different approaches to innovate. However,
|
||||||
<p>
|
they all have the same broad ethos in common, and they all need an easy means
|
||||||
We have a very ambitious vision, and this requires all "tribes" to work together enough for the benefit of
|
to access them in one place, but in a censorship-resistant way.`,
|
||||||
the end user.
|
`We have a very ambitious vision, and this requires all "tribes" to work together enough for the benefit of the end user.`,
|
||||||
</p>
|
`Below are some of the ideas we are aiming for, and some we would like to tackle eventually.`,
|
||||||
<p>
|
]}
|
||||||
Below are some of the ideas we are aiming for, and some we would like to tackle eventually.
|
/>
|
||||||
</p>
|
<img src={unifyBg.src} class="float-right w-full max-h-[550px] -mr-40" />
|
||||||
</div>
|
|
||||||
</section>
|
</section>
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,16 @@
|
||||||
|
---
|
||||||
|
export interface Props {
|
||||||
|
label: string;
|
||||||
|
href: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
const { label, href } = Astro.props;
|
||||||
|
---
|
||||||
|
|
||||||
|
<div class="pt-10 w-full">
|
||||||
|
<a
|
||||||
|
href={href}
|
||||||
|
class="text-2xl w-full block text-center md:max-w-[350px] rounded-md bg-primary py-3 px-10 text-black font-body"
|
||||||
|
>{label}</a
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
|
@ -0,0 +1,28 @@
|
||||||
|
---
|
||||||
|
export interface Props {
|
||||||
|
title: string;
|
||||||
|
subtitle: string;
|
||||||
|
text: string[];
|
||||||
|
}
|
||||||
|
|
||||||
|
// Default props
|
||||||
|
const { title, subtitle, text } = Astro.props;
|
||||||
|
---
|
||||||
|
|
||||||
|
<div class="flex flex-col gap-10">
|
||||||
|
<h2 class="font-display text-primary font-bold text-xl md:text-2xl uppercase">
|
||||||
|
{title}
|
||||||
|
</h2>
|
||||||
|
|
||||||
|
<h3 class="font-display text-4xl md:text-6xl font-bold">
|
||||||
|
{subtitle}
|
||||||
|
</h3>
|
||||||
|
|
||||||
|
{
|
||||||
|
text.map((paragraph) => (
|
||||||
|
<p class="font-body text-xl md:text-3xl text-body">
|
||||||
|
<Fragment set:html={paragraph} />
|
||||||
|
</p>
|
||||||
|
))
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
|
@ -66,6 +66,40 @@ body {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.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 {
|
main {
|
||||||
@include fluid-font-size(0.625rem);
|
@include fluid-font-size(0.625rem);
|
||||||
flex-grow: 1;
|
flex-grow: 1;
|
||||||
|
|
@ -75,6 +109,111 @@ a, button {
|
||||||
transition: color $transition-duration;
|
transition: color $transition-duration;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.btn-main {
|
||||||
|
display: inline-block;
|
||||||
|
padding: 0.5em 0.8em;
|
||||||
|
color: $color-black;
|
||||||
|
background: $color-aquamarine;
|
||||||
|
border: 0.05em solid $color-aquamarine;
|
||||||
|
border-radius: 0.25em;
|
||||||
|
transition: color $transition-duration, background $transition-duration;
|
||||||
|
white-space: nowrap;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: $color-white;
|
||||||
|
background: $color-blue-charcoal;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.feature-group {
|
||||||
|
h2 {
|
||||||
|
margin-bottom: 1em;
|
||||||
|
@include fluid-font-size(1.5625rem);
|
||||||
|
font-weight: 700;
|
||||||
|
line-height: 100%;
|
||||||
|
text-transform: uppercase;
|
||||||
|
color: $color-aquamarine;
|
||||||
|
}
|
||||||
|
|
||||||
|
h3 {
|
||||||
|
margin-bottom: 0.65em;
|
||||||
|
@include fluid-font-size(2.8125rem);
|
||||||
|
line-height: 109%;
|
||||||
|
}
|
||||||
|
|
||||||
|
h2, h3 {
|
||||||
|
text-shadow: 0.017em 0.017em 0.034em rgba($color-blue-charcoal, 0.65);
|
||||||
|
}
|
||||||
|
|
||||||
|
p, ul {
|
||||||
|
@include fluid-font-size(1.5rem);
|
||||||
|
font-family: $font-family-jaldi;
|
||||||
|
line-height: 148%;
|
||||||
|
color: $color-cloud;
|
||||||
|
transition: background $transition-duration;
|
||||||
|
}
|
||||||
|
|
||||||
|
p + p, ul + p {
|
||||||
|
margin-top: 0.78em;
|
||||||
|
}
|
||||||
|
|
||||||
|
ul {
|
||||||
|
list-style-type: disc;
|
||||||
|
margin-left: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-main {
|
||||||
|
font-family: $font-family-jaldi;
|
||||||
|
@include fluid-font-size(1.5rem);
|
||||||
|
margin-top: 1.57em;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.feature-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(1, 1fr);
|
||||||
|
gap: 0.9em;
|
||||||
|
padding: 0 7.5%;
|
||||||
|
@include fluid-font-size(1.25rem);
|
||||||
|
|
||||||
|
@media screen and (min-width: 48rem) {
|
||||||
|
grid-template-columns: repeat(2, 1fr);
|
||||||
|
grid-auto-rows: 1fr;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (min-width: 64rem) {
|
||||||
|
grid-template-columns: repeat(3, 1fr);
|
||||||
|
}
|
||||||
|
|
||||||
|
div {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
padding: 2.95em 1.95em;
|
||||||
|
background: $color-blue-charcoal;
|
||||||
|
border: 0.05em solid transparent;
|
||||||
|
border-radius: 0.5em;
|
||||||
|
font-family: $font-family-jaldi;
|
||||||
|
transition: border-color $transition-duration;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
border-color: $color-aquamarine;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
h3 {
|
||||||
|
@include fluid-font-size(2rem);
|
||||||
|
line-height: 109%;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
@include fluid-font-size(1.375rem);
|
||||||
|
margin-top: 0.67em;
|
||||||
|
line-height: 124%;
|
||||||
|
color: $color-cloud;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.tilted-bg {
|
.tilted-bg {
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
|
|
@ -108,3 +247,33 @@ a, button {
|
||||||
z-index: -1;
|
z-index: -1;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
main.what {
|
||||||
|
&::before {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
top: -2em;
|
||||||
|
left: 50%;
|
||||||
|
width: 151.3em;
|
||||||
|
height: 122.4em;
|
||||||
|
background: url("/src/assets/what-bg.png");
|
||||||
|
background-size: contain;
|
||||||
|
transform: translate(-50%, 0);
|
||||||
|
z-index: -1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
main.donate {
|
||||||
|
&::before {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
top: -3em;
|
||||||
|
left: 50%;
|
||||||
|
width: 144em;
|
||||||
|
height: 93.3em;
|
||||||
|
background: url("/src/assets/donate-bg.png");
|
||||||
|
background-size: contain;
|
||||||
|
transform: translate(-50%, 0);
|
||||||
|
z-index: -1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -12,6 +12,7 @@ module.exports = {
|
||||||
fontFamily: {
|
fontFamily: {
|
||||||
'body': '"Jaldi", sans-serif',
|
'body': '"Jaldi", sans-serif',
|
||||||
'display': '"JetBrains Mono", monospace',
|
'display': '"JetBrains Mono", monospace',
|
||||||
|
'display2': '"IBM Plex Sans Devanagari", monospace',
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue