Compare commits
8 Commits
v0.2.3
...
v0.2.4-dev
| Author | SHA1 | Date |
|---|---|---|
semantic-release-bot
|
b55aa890ba | |
 Derrick Hammer
|
95444fa6a4
|
|
|
semantic-release-bot
|
1ab2ae421f | |
Juan Di Toro
|
ccc873d547 | |
|
Juan Di Toro
|
994278f77d | |
|
Derrick Hammer
|
9a87fdb41b
|
|
|
semantic-release-bot
|
9d2d563139 | |
|
Juan Di Toro
|
f9362fa577 |
|
|
@ -1,3 +1,11 @@
|
|||
## [0.2.4-develop.1](https://git.lumeweb.com/LumeWeb/lumeweb.com/compare/v0.2.3...v0.2.4-develop.1) (2023-08-14)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* bring back ibm font ([ccc873d](https://git.lumeweb.com/LumeWeb/lumeweb.com/commit/ccc873d547de3e9cd8ba1067d95d5ab5cfd8a9f4))
|
||||
* overall improvements of the responsive layout ([f9362fa](https://git.lumeweb.com/LumeWeb/lumeweb.com/commit/f9362fa577172a017c8df26aefc88abba042b092))
|
||||
|
||||
## [0.2.3](https://git.lumeweb.com/LumeWeb/lumeweb.com/compare/v0.2.2...v0.2.3) (2023-08-14)
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -1,12 +1,12 @@
|
|||
{
|
||||
"name": "@lumeweb/lumeweb.com",
|
||||
"version": "0.2.3",
|
||||
"version": "0.2.4-develop.1",
|
||||
"lockfileVersion": 3,
|
||||
"requires": true,
|
||||
"packages": {
|
||||
"": {
|
||||
"name": "@lumeweb/lumeweb.com",
|
||||
"version": "0.2.3",
|
||||
"version": "0.2.4-develop.1",
|
||||
"dependencies": {
|
||||
"@astrojs/react": "^2.1.1",
|
||||
"@astrojs/tailwind": "^3.1.1",
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
{
|
||||
"name": "@lumeweb/lumeweb.com",
|
||||
"type": "module",
|
||||
"version": "0.2.3",
|
||||
"version": "0.2.4-develop.1",
|
||||
"private": true,
|
||||
"repository": {
|
||||
"type": "git",
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
import mulletMeme from "/src/assets/centralized-mullet-meme.png";
|
||||
---
|
||||
|
||||
<section id="meme" class="tilted-bg">
|
||||
<section id="meme" class="tilted-bgs">
|
||||
<div class="flex flex-col-reverse lg:flex-row gap-10 mx-10 sm:mx-20 xl:mx-40">
|
||||
<div class="space-y-10">
|
||||
<h2
|
||||
|
|
|
|||
|
|
@ -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 svgOsi from '/src/assets/icons/osi.svg?raw';
|
||||
import svgSia from "/src/assets/icons/sia.svg?raw";
|
||||
import svgHns from "/src/assets/icons/hns.svg?raw";
|
||||
import svgOsi from "/src/assets/icons/osi.svg?raw";
|
||||
---
|
||||
|
||||
<section id="powered-by">
|
||||
<h2>Powered By</h2>
|
||||
<div>
|
||||
<a href="https://sia.tech" title="Sia" class="sia-logo">
|
||||
<section
|
||||
id="powered-by"
|
||||
class="flex flex-col md:flex-row gap-16 items-center justify-center"
|
||||
>
|
||||
<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} />
|
||||
</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} />
|
||||
</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} />
|
||||
</a>
|
||||
</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 svgDiscord from '/src/assets/icons/discord.svg?raw';
|
||||
import svgTwitter from '/src/assets/icons/twitter.svg?raw';
|
||||
import svgGit from "/src/assets/icons/git.svg?raw";
|
||||
import svgGithub from "/src/assets/icons/github.svg?raw";
|
||||
import svgDiscord from "/src/assets/icons/discord.svg?raw";
|
||||
import svgTwitter from "/src/assets/icons/twitter.svg?raw";
|
||||
---
|
||||
|
||||
<section id="socials">
|
||||
<h2>Get in touch</h2>
|
||||
<div>
|
||||
<a href="https://git.lumeweb.com" title="Git" class="git-logo">
|
||||
<Fragment set:html={svgGit} />
|
||||
</a>
|
||||
<a href="https://github.com/LumeWeb" title="GitHub" class="github-logo">
|
||||
<Fragment set:html={svgGithub} />
|
||||
</a>
|
||||
<a href="https://discord.gg/qpC8ADp3rS" title="Discord" class="discord-logo">
|
||||
<Fragment set:html={svgDiscord} />
|
||||
</a>
|
||||
<a href="https://twitter.com/lumeweb3" title="Twitter" class="twitter-logo">
|
||||
<Fragment set:html={svgTwitter} />
|
||||
</a>
|
||||
</div>
|
||||
<section id="socials" class="flex flex-col items-center">
|
||||
<h2 class="text-xl md:text-3xl font-display text-primary uppercase font-bold">
|
||||
Get in touch
|
||||
</h2>
|
||||
<div class="flex flex-row items-center justify-center gap-8 mt-10">
|
||||
<a
|
||||
href="https://git.lumeweb.com"
|
||||
title="Git"
|
||||
class="w-10 h-10 -mt-1 text-gray-300 hover:text-primary transition-all ease-in"
|
||||
>
|
||||
<Fragment set:html={svgGit} />
|
||||
</a>
|
||||
<a
|
||||
href="https://github.com/LumeWeb"
|
||||
title="GitHub"
|
||||
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>
|
||||
|
|
|
|||
|
|
@ -1,21 +1,13 @@
|
|||
---
|
||||
import bg from "../../../assets/home-hero-bg.webp"
|
||||
import TypewriterContent from "./TypewriterContent.jsx";
|
||||
---
|
||||
|
||||
<div class="absolute -z-10 -right-[250px] top-[250px] w-[1250px]">
|
||||
<img
|
||||
class="object-contain w-[1250px]"
|
||||
src={bg.src}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<section
|
||||
id="typewriter"
|
||||
class="w-full overflow-hidden flex flex-row items-center justify-center"
|
||||
class="w-full flex flex-row items-center justify-center"
|
||||
>
|
||||
<h1
|
||||
class="text-7xl md:text-9xl mt-10 mb-10 min-h-[375px] max-w-full px-10 text-center"
|
||||
class="text-6xl md:text-9xl mb-10 min-h-[375px] px-10 text-center break-words"
|
||||
>
|
||||
<TypewriterContent client:load />
|
||||
</h1>
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ const HeaderContent = () => {
|
|||
var
|
||||
headerStrings = [
|
||||
'Access to the web <br /> for the masses',
|
||||
'An open web for business',
|
||||
'An open web <br /> for business',
|
||||
'Web3 for the masses',
|
||||
'Web3 for you'
|
||||
],
|
||||
|
|
|
|||
|
|
@ -6,8 +6,10 @@ import gfxLeft from "../../../assets/home-gfx-left.png";
|
|||
id="web3"
|
||||
class="flex flex-col lg:flex-row lg:bg-transparent lg:p-0 gap-10 mx-10 sm:mx-20 xl:mx-40"
|
||||
>
|
||||
<div class="flex-1 -ml-10 -mr-20 lg:-ml-40 lg:mr-0">
|
||||
<img src={gfxLeft.src} class="w-full" />
|
||||
<div class="flex-1 max-w-[calc(100% + 20px)] overflow-hidden -mx-10">
|
||||
<div class="flex-1 -ml-10 -mr-10 lg:-ml-40 lg:mr-0">
|
||||
<img src={gfxLeft.src} class="w-full" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-1 -mt-40 space-y-10 flex flex-col justify-center">
|
||||
<h2
|
||||
|
|
|
|||
|
|
@ -75,6 +75,15 @@ function getActiveClass(linkView) {
|
|||
const hamburgerEl = document.getElementById("hamburger");
|
||||
const menuEl = document.querySelector("menu");
|
||||
|
||||
function toggleScrollBlock() {
|
||||
// When not hidden, should block scroll
|
||||
if (!navbarOverlayEl.classList.contains("hidden")) {
|
||||
document.body.style.overflow = "hidden";
|
||||
} else {
|
||||
document.body.style.overflow = null;
|
||||
}
|
||||
}
|
||||
|
||||
function handleMenuClick() {
|
||||
// Toggle menu open/closed
|
||||
["hidden", "flex"].forEach((className) => {
|
||||
|
|
@ -82,6 +91,7 @@ function getActiveClass(linkView) {
|
|||
});
|
||||
|
||||
navbarOverlayEl.classList.toggle("hidden");
|
||||
toggleScrollBlock();
|
||||
}
|
||||
|
||||
function handleOverlayClick() {
|
||||
|
|
@ -91,6 +101,7 @@ function getActiveClass(linkView) {
|
|||
});
|
||||
|
||||
navbarOverlayEl.classList.toggle("hidden");
|
||||
toggleScrollBlock();
|
||||
}
|
||||
|
||||
hamburgerEl.addEventListener("click", handleMenuClick);
|
||||
|
|
|
|||
|
|
@ -5,53 +5,56 @@ import Footer from "../components/Layout/Footer/Footer.astro";
|
|||
import JoinCommunity from "../components/Layout/JoinCommunity/JoinCommunity.astro";
|
||||
|
||||
export interface Props {
|
||||
view: string;
|
||||
title: string;
|
||||
view: string;
|
||||
title: string;
|
||||
}
|
||||
|
||||
const {view, title} = Astro.props;
|
||||
const { view, title } = Astro.props;
|
||||
---
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<head>
|
||||
<title>{title}</title>
|
||||
<meta charset="utf-8"/>
|
||||
<meta charset="utf-8" />
|
||||
<meta
|
||||
name="viewport"
|
||||
content="width=device-width, initial-scale=1.0, minimum-scale=1.0"
|
||||
name="viewport"
|
||||
content="width=device-width, initial-scale=1.0, minimum-scale=1.0"
|
||||
/>
|
||||
<meta
|
||||
name="description"
|
||||
content="A platform, network and experience that allows you to control and own your online web, and access all of the possibilities Web3 has to offer. Join the open web."
|
||||
name="description"
|
||||
content="A platform, network and experience that allows you to control and own your online web, and access all of the possibilities Web3 has to offer. Join the open web."
|
||||
/>
|
||||
<meta
|
||||
name="keywords"
|
||||
content="Web3 Extension, web3 browser, Lume Web, Web3, dWeb, p2p, handshake, eth, ethereum, ipfs, open web, privacy, decentralization, blockchain"
|
||||
/>
|
||||
<meta name="keywords"
|
||||
content="Web3 Extension, web3 browser, Lume Web, Web3, dWeb, p2p, handshake, eth, ethereum, ipfs, open web, privacy, decentralization, blockchain"/>
|
||||
<!-- Matomo -->
|
||||
<script is:inline>
|
||||
var _paq = window._paq = window._paq || [];
|
||||
/* tracker methods like "setCustomDimension" should be called before "trackPageView" */
|
||||
_paq.push(['trackPageView']);
|
||||
_paq.push(['enableLinkTracking']);
|
||||
(function () {
|
||||
var u = "//piwiki.lumeweb.com/";
|
||||
_paq.push(['setTrackerUrl', u + 'matomo.php']);
|
||||
_paq.push(['setSiteId', '1']);
|
||||
var d = document, g = d.createElement('script'), s = d.getElementsByTagName('script')[0];
|
||||
g.async = true;
|
||||
g.src = u + 'matomo.js';
|
||||
s.parentNode.insertBefore(g, s);
|
||||
})();
|
||||
var _paq = (window._paq = window._paq || []);
|
||||
/* tracker methods like "setCustomDimension" should be called before "trackPageView" */
|
||||
_paq.push(["trackPageView"]);
|
||||
_paq.push(["enableLinkTracking"]);
|
||||
(function () {
|
||||
var u = "//piwiki.lumeweb.com/";
|
||||
_paq.push(["setTrackerUrl", u + "matomo.php"]);
|
||||
_paq.push(["setSiteId", "1"]);
|
||||
var d = document,
|
||||
g = d.createElement("script"),
|
||||
s = d.getElementsByTagName("script")[0];
|
||||
g.async = true;
|
||||
g.src = u + "matomo.js";
|
||||
s.parentNode.insertBefore(g, s);
|
||||
})();
|
||||
</script>
|
||||
<!-- End Matomo Code -->
|
||||
</head>
|
||||
<body class="max-w-[1600px] mx-auto">
|
||||
<Navbar view={view}/>
|
||||
<main class={view + " space-y-40"}>
|
||||
<slot/>
|
||||
</main>
|
||||
{view !== "home" &&
|
||||
<JoinCommunity/>}
|
||||
<Footer/>
|
||||
</body>
|
||||
</head>
|
||||
<body class="max-w-[1600px] mx-auto">
|
||||
<Navbar view={view} />
|
||||
<main class={view + " space-y-40 overflow-x-hidden relative "}>
|
||||
<slot />
|
||||
</main>
|
||||
{view !== "home" && <JoinCommunity />}
|
||||
<Footer />
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -9,9 +9,14 @@ import WebComparison from "../components/Home/WebComparison/WebComparison.astro"
|
|||
import Socials from "../components/Home/Socials/Socials.astro";
|
||||
import CTO from "../components/Home/CTO/CTO.astro";
|
||||
import Message from "../components/Home/Message/Message.astro";
|
||||
import bg from "../assets/home-hero-bg.webp";
|
||||
---
|
||||
|
||||
<Layout view="home" title="Lume Web - Your Open Web">
|
||||
<img
|
||||
class="absolute -z-10 -right-[250px] top-[250px] object-contain w-[1250px] max-w-none"
|
||||
src={bg.src}
|
||||
/>
|
||||
<Typewriter />
|
||||
<Vision />
|
||||
<Web3 />
|
||||
|
|
|
|||
|
|
@ -66,120 +66,6 @@ body {
|
|||
}
|
||||
}
|
||||
|
||||
main {
|
||||
@include fluid-font-size(0.625rem);
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
a, button {
|
||||
transition: color $transition-duration;
|
||||
}
|
||||
|
||||
.btn-main {
|
||||
display: inline-block;
|
||||
padding: 0.5em 0.8em;
|
||||
color: $color-black;
|
||||
background: $color-aquamarine;
|
||||
border: 0.05em solid $color-aquamarine;
|
||||
border-radius: 0.25em;
|
||||
transition: color $transition-duration, background $transition-duration;
|
||||
white-space: nowrap;
|
||||
|
||||
&:hover {
|
||||
color: $color-white;
|
||||
background: $color-blue-charcoal;
|
||||
}
|
||||
}
|
||||
|
||||
.feature-group {
|
||||
h2 {
|
||||
margin-bottom: 1em;
|
||||
@include fluid-font-size(1.5625rem);
|
||||
font-weight: 700;
|
||||
line-height: 100%;
|
||||
text-transform: uppercase;
|
||||
color: $color-aquamarine;
|
||||
}
|
||||
|
||||
h3 {
|
||||
margin-bottom: 0.65em;
|
||||
@include fluid-font-size(2.8125rem);
|
||||
line-height: 109%;
|
||||
}
|
||||
|
||||
h2, h3 {
|
||||
text-shadow: 0.017em 0.017em 0.034em rgba($color-blue-charcoal, 0.65);
|
||||
}
|
||||
|
||||
p, ul {
|
||||
@include fluid-font-size(1.375rem);
|
||||
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.5em 2em;
|
||||
background: $color-blue-charcoal;
|
||||
border: 0.05em solid transparent;
|
||||
border-radius: 0.5em;
|
||||
font-family: $font-family-jaldi;
|
||||
transition: border-color $transition-duration;
|
||||
|
||||
&:hover {
|
||||
border-color: $color-aquamarine;
|
||||
}
|
||||
}
|
||||
|
||||
h3 {
|
||||
@include fluid-font-size(2rem);
|
||||
line-height: 109%;
|
||||
}
|
||||
|
||||
p {
|
||||
@include fluid-font-size(1.375rem);
|
||||
margin-top: 0.67em;
|
||||
line-height: 124%;
|
||||
color: $color-cloud;
|
||||
}
|
||||
}
|
||||
|
||||
.tilted-bg {
|
||||
position: relative;
|
||||
|
||||
|
|
@ -212,55 +98,4 @@ a, button {
|
|||
transform: matrix(1, 0.04, -0.04, 1, 0, 0);
|
||||
z-index: -1;
|
||||
}
|
||||
}
|
||||
|
||||
main.home {
|
||||
.feature-group h3 {
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
|
||||
main.vision {
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: -0.5em;
|
||||
left: 50%;
|
||||
width: 132.9em;
|
||||
height: 94.63334em;
|
||||
transform: translate(-50%, 0);
|
||||
background: url("/src/assets/main-vision-bg.png");
|
||||
background-size: contain;
|
||||
z-index: -1;
|
||||
}
|
||||
}
|
||||
|
||||
main.what {
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: -2em;
|
||||
left: 50%;
|
||||
width: 151.3em;
|
||||
height: 122.4em;
|
||||
background: url("/src/assets/main-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/main-donate-bg.png");
|
||||
background-size: contain;
|
||||
transform: translate(-50%, 0);
|
||||
z-index: -1;
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue