updates
parent
64d53d4289
commit
cb0381ff4e
@ -1,258 +0,0 @@
|
||||
#root {
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.section {
|
||||
height: 100vh;
|
||||
text-align: center;
|
||||
/* scroll-snap-align: start; */
|
||||
}
|
||||
|
||||
.sec2Text {
|
||||
width: 75%;
|
||||
margin: 0 auto;
|
||||
padding-bottom: 1em;
|
||||
}
|
||||
|
||||
.subtext {
|
||||
font-size: .8em;
|
||||
}
|
||||
|
||||
.scrollContainer {
|
||||
height: 100vh;
|
||||
/* overflow-y: scroll; */
|
||||
/* scroll-snap-type: y mandatory; */
|
||||
}
|
||||
|
||||
|
||||
.mainPanel {
|
||||
backdrop-filter: blur(3px);
|
||||
background-color: rgba(255,255,255,0.6);
|
||||
height: 60%;
|
||||
width: 60%;
|
||||
border-radius: 10px;
|
||||
margin: 0 auto;
|
||||
margin-top: 10%;
|
||||
padding-top: 5%;
|
||||
padding-bottom: 5%;
|
||||
left: 0;
|
||||
right: 0;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
#heroText {
|
||||
padding-top: 20vh;
|
||||
font-size: 4em;
|
||||
width: 80%;
|
||||
text-align: center;
|
||||
margin: 2em auto .5em auto;
|
||||
}
|
||||
|
||||
.wrap {
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.buttons {
|
||||
position: absolute;
|
||||
right: 1em;
|
||||
top: 1em;
|
||||
}
|
||||
|
||||
.aws-btn {
|
||||
--button-default-height: 55px;
|
||||
--button-default-font-size: 14px;
|
||||
--button-default-border-radius: 6px;
|
||||
--button-horizontal-padding: 20px;
|
||||
--button-raise-level: 6px;
|
||||
--button-hover-pressure: 1;
|
||||
--transform-speed: 0.185s;
|
||||
--button-primary-color: #3a3a3a;
|
||||
--button-primary-color-dark: #141414;
|
||||
--button-primary-color-light: #fbfbfb;
|
||||
--button-primary-color-hover: #2d2d2d;
|
||||
--button-primary-color-active: #212121;
|
||||
--button-primary-border: 2px solid #3a3a3a;
|
||||
--button-secondary-color: #fbfbfb;
|
||||
--button-secondary-color-dark: #3a3a3a;
|
||||
--button-secondary-color-light: #3a3a3a;
|
||||
--button-secondary-color-hover: #eeeeee;
|
||||
--button-secondary-color-active: #e2e2e2;
|
||||
--button-secondary-border: 2px solid #3a3a3a;
|
||||
--button-anchor-color: #ffe727;
|
||||
--button-anchor-color-dark: #212121;
|
||||
--button-anchor-color-light: #97735d;
|
||||
--button-anchor-color-hover: #ffe727;
|
||||
--button-anchor-color-active: #ffe727;
|
||||
--button-anchor-border: 2px solid #876753;
|
||||
--button-danger-color: #733086;
|
||||
--button-danger-color-dark: #431c4e;
|
||||
--button-danger-color-light: #77cd38;
|
||||
--button-danger-color-hover: #6d2d7e;
|
||||
--button-danger-color-active: #632973;
|
||||
--button-danger-border: none;
|
||||
}
|
||||
|
||||
body {
|
||||
--black: #000000;
|
||||
--ash-black: #222;
|
||||
--white: #fafafa;
|
||||
--sky: #00ccff;
|
||||
--green: #22dddd;
|
||||
--blue: #1300ff;
|
||||
--dusk: #6600ff;
|
||||
--purple: #9900ff;
|
||||
--pink: #ff0066;
|
||||
--red: #fe0222;
|
||||
--orange: #fd7702;
|
||||
--yellow: #ffbb00;
|
||||
|
||||
--background: var(--white);
|
||||
--accent: var(--black);
|
||||
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background-color: var(--background);
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
.particles-bg-canvas-self {
|
||||
height: 90%;
|
||||
}
|
||||
|
||||
* {
|
||||
font-family: input-mono, monospace;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 36px;
|
||||
font-weight: 700;
|
||||
letter-spacing: -1px;
|
||||
line-height: 1.2;
|
||||
text-align: center;
|
||||
margin: 100px 0 40px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0 0 30px 0;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
footer {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
padding: 20px;
|
||||
background-image: radial-gradient(
|
||||
rgba(0, 0, 0, 0) 1px,
|
||||
var(--background) 1px
|
||||
);
|
||||
background-size: 4px 4px;
|
||||
backdrop-filter: blur(3px);
|
||||
-webkit-backdrop-filter: blur(3px);
|
||||
-moz-backdrop-filter: blur(3px);
|
||||
font-size: 14px;
|
||||
line-height: 14px;
|
||||
}
|
||||
|
||||
footer::before {
|
||||
display: block;
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: -1px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 1px;
|
||||
background: var(--accent);
|
||||
opacity: 0.2;
|
||||
}
|
||||
|
||||
footer svg {
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
footer a {
|
||||
text-decoration: none;
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
nav {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
padding: 40px;
|
||||
background-image: radial-gradient(
|
||||
rgba(0, 0, 0, 0) 1px,
|
||||
var(--background) 1px
|
||||
);
|
||||
background-size: 4px 4px;
|
||||
backdrop-filter: blur(3px);
|
||||
-webkit-backdrop-filter: blur(3px);
|
||||
-moz-backdrop-filter: blur(3px);
|
||||
font-size: 14px;
|
||||
line-height: 14px;
|
||||
z-index: 999;
|
||||
}
|
||||
|
||||
nav::before {
|
||||
display: block;
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: -1px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 1px;
|
||||
background: var(--accent);
|
||||
opacity: 0.2;
|
||||
}
|
||||
|
||||
code {
|
||||
font-family: input-mono, monospace;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
height: 12px;
|
||||
width: 5px;
|
||||
background: var(--background);
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: var(--accent);
|
||||
-webkit-border-radius: 1ex;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-corner {
|
||||
background: var(--background);
|
||||
}
|
||||
|
||||
.container {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
canvas {
|
||||
image-rendering: -moz-crisp-edges;
|
||||
image-rendering: -webkit-optimize-contrast;
|
||||
image-rendering: pixelated;
|
||||
image-rendering: optimize-contrast;
|
||||
position: inherit;
|
||||
}
|
||||
|
@ -0,0 +1,39 @@
|
||||
.walletButtons {
|
||||
position: absolute;
|
||||
right: 1em;
|
||||
top: 1em;
|
||||
}
|
||||
|
||||
.aws-btn {
|
||||
--button-default-height: 55px;
|
||||
--button-default-font-size: 14px;
|
||||
--button-default-border-radius: 6px;
|
||||
--button-horizontal-padding: 20px;
|
||||
--button-raise-level: 6px;
|
||||
--button-hover-pressure: 1;
|
||||
--transform-speed: 0.185s;
|
||||
--button-primary-color: #3a3a3a;
|
||||
--button-primary-color-dark: #141414;
|
||||
--button-primary-color-light: #fbfbfb;
|
||||
--button-primary-color-hover: #2d2d2d;
|
||||
--button-primary-color-active: #212121;
|
||||
--button-primary-border: 2px solid #3a3a3a;
|
||||
--button-secondary-color: #fbfbfb;
|
||||
--button-secondary-color-dark: #3a3a3a;
|
||||
--button-secondary-color-light: #3a3a3a;
|
||||
--button-secondary-color-hover: #eeeeee;
|
||||
--button-secondary-color-active: #e2e2e2;
|
||||
--button-secondary-border: 2px solid #3a3a3a;
|
||||
--button-anchor-color: #ffe727;
|
||||
--button-anchor-color-dark: #212121;
|
||||
--button-anchor-color-light: #97735d;
|
||||
--button-anchor-color-hover: #ffe727;
|
||||
--button-anchor-color-active: #ffe727;
|
||||
--button-anchor-border: 2px solid #876753;
|
||||
--button-danger-color: #733086;
|
||||
--button-danger-color-dark: #431c4e;
|
||||
--button-danger-color-light: #77cd38;
|
||||
--button-danger-color-hover: #6d2d7e;
|
||||
--button-danger-color-active: #632973;
|
||||
--button-danger-border: none;
|
||||
}
|
@ -0,0 +1,99 @@
|
||||
* {
|
||||
font-family: 'Times New Roman', Times, serif;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
body {
|
||||
--black: #000000;
|
||||
--ash-black: #222;
|
||||
--white: #fafafa;
|
||||
--sky: #00ccff;
|
||||
--green: #22dddd;
|
||||
--blue: #1300ff;
|
||||
--dusk: #6600ff;
|
||||
--purple: #9900ff;
|
||||
--pink: #ff0066;
|
||||
--red: #fe0222;
|
||||
--orange: #fd7702;
|
||||
--yellow: #ffbb00;
|
||||
|
||||
--background: var(--white);
|
||||
--accent: var(--black);
|
||||
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background-color: var(--background);
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 36px;
|
||||
font-weight: 700;
|
||||
letter-spacing: -1px;
|
||||
line-height: 1.2;
|
||||
text-align: center;
|
||||
margin: 100px 0 40px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0 0 30px 0;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
nav {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
padding: 40px;
|
||||
background-image: radial-gradient(
|
||||
rgba(0, 0, 0, 0) 1px,
|
||||
var(--background) 1px
|
||||
);
|
||||
background-size: 4px 4px;
|
||||
backdrop-filter: blur(3px);
|
||||
-webkit-backdrop-filter: blur(3px);
|
||||
-moz-backdrop-filter: blur(3px);
|
||||
font-size: 14px;
|
||||
line-height: 14px;
|
||||
z-index: 999;
|
||||
}
|
||||
|
||||
nav::before {
|
||||
display: block;
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: -1px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 1px;
|
||||
background: var(--accent);
|
||||
opacity: 0.2;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
height: 12px;
|
||||
width: 5px;
|
||||
background: var(--background);
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: var(--accent);
|
||||
-webkit-border-radius: 1ex;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-corner {
|
||||
background: var(--background);
|
||||
}
|
||||
|
||||
.wrap {
|
||||
word-break: break-word;
|
||||
}
|
@ -0,0 +1,14 @@
|
||||
.mainPanel {
|
||||
backdrop-filter: blur(3px);
|
||||
background-color: rgba(255,255,255,0.6);
|
||||
height: 60%;
|
||||
width: 60%;
|
||||
border-radius: 10px;
|
||||
margin: 0 auto;
|
||||
margin-top: 10%;
|
||||
padding-top: 5%;
|
||||
padding-bottom: 5%;
|
||||
left: 0;
|
||||
right: 0;
|
||||
position: absolute;
|
||||
}
|
@ -0,0 +1,34 @@
|
||||
/* #root {
|
||||
height: 100vh;
|
||||
} */
|
||||
|
||||
.section {
|
||||
height: 100vh;
|
||||
text-align: center;
|
||||
/* scroll-snap-align: start; */
|
||||
}
|
||||
|
||||
.sec2Text {
|
||||
width: 75%;
|
||||
margin: 0 auto;
|
||||
padding-bottom: 1em;
|
||||
}
|
||||
|
||||
.subtext {
|
||||
font-size: .8em;
|
||||
}
|
||||
|
||||
.scrollContainer {
|
||||
height: 100vh;
|
||||
/* overflow-y: scroll; */
|
||||
/* scroll-snap-type: y mandatory; */
|
||||
}
|
||||
|
||||
#heroText {
|
||||
padding-top: 20vh;
|
||||
font-size: 4em;
|
||||
width: 80%;
|
||||
text-align: center;
|
||||
margin: 2em auto .5em auto;
|
||||
}
|
||||
|
@ -1,24 +0,0 @@
|
||||
import Typewriter from 'react-ts-typewriter';
|
||||
import { Logo } from "./Logo";
|
||||
|
||||
export function Footer() {
|
||||
return (
|
||||
<footer>
|
||||
<Logo />
|
||||
<code>
|
||||
<Typewriter
|
||||
text={[
|
||||
"world builders, story tellers, and artists",
|
||||
"shaping the future of web3 and metaverse",
|
||||
"we are con artists",
|
||||
"send us your money you gullible loser",
|
||||
"we hate you"
|
||||
]}
|
||||
loop={true}
|
||||
delay={2500}
|
||||
random={0}
|
||||
/>
|
||||
</code>
|
||||
</footer>
|
||||
);
|
||||
}
|
@ -1,16 +0,0 @@
|
||||
export function Logo() {
|
||||
return (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="2 8 16 24"
|
||||
width="16"
|
||||
height="24"
|
||||
>
|
||||
<path
|
||||
d="M 10 32 L 10 24 L 18 24 L 2 8 L 18 8 L 18 16 L 2 16 L 2 24 L 10 32 L 10 24 L 2 24"
|
||||
fill="var(--accent)"
|
||||
></path>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
Loading…
Reference in New Issue