add email page for people to sign up to my email list
This commit is contained in:
Triston
parent
01959f7cb1
commit
dc0ec48db4
@ -1,21 +1,30 @@
|
||||
import { Html, Head, Main, NextScript, type DocumentProps } from 'next/document'
|
||||
import {
|
||||
Html,
|
||||
Head,
|
||||
Main,
|
||||
NextScript,
|
||||
type DocumentProps,
|
||||
} from "next/document";
|
||||
|
||||
interface DocProps extends DocumentProps { }
|
||||
|
||||
export default function Document(props: DocProps) {
|
||||
const pageProps = props?.__NEXT_DATA__?.props?.['pageProps']
|
||||
const pageProps = props?.__NEXT_DATA__?.props?.["pageProps"];
|
||||
|
||||
return (
|
||||
<Html>
|
||||
<Head>
|
||||
<link rel="stylesheet" href="https://rsms.me/inter/inter.css" />
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/kimeiga/bahunya/dist/bahunya.min.css" />
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://cdn.jsdelivr.net/gh/kimeiga/bahunya/dist/bahunya.min.css"
|
||||
/>
|
||||
</Head>
|
||||
|
||||
<body className={`bg-gradient ${pageProps.body_class_name}`}>
|
||||
<body className={`bg-gradient ${pageProps.body_class_name ?? ""}`}>
|
||||
<Main />
|
||||
<NextScript />
|
||||
</body>
|
||||
</Html>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
43
pages/email/index.tsx
Normal file
43
pages/email/index.tsx
Normal file
@ -0,0 +1,43 @@
|
||||
import Layout from "components/Layout";
|
||||
import Head from "next/head";
|
||||
|
||||
export default function EmailPageRoot() {
|
||||
return (
|
||||
<>
|
||||
<Head>
|
||||
<title>Email Signup</title>
|
||||
</Head>
|
||||
<Layout>
|
||||
|
||||
<div style={{ maxWidth: 500, margin: 'auto', minWidth: 0 }}>
|
||||
<h4 style={{ textAlign: 'center' }}>Please provide your Name & Email</h4>
|
||||
|
||||
<br />
|
||||
|
||||
<div className="bg-elevated p-lg rounded-sm frosted">
|
||||
<form className="flex-col">
|
||||
<label htmlFor="name">Name</label>
|
||||
<input type="text" name="Name" id="name" placeholder="John Doe" />
|
||||
<label htmlFor="email">Email</label>
|
||||
<input type="email" name="Email" id="email" placeholder="johndoe@email.com" />
|
||||
<br />
|
||||
<button className="flex-1 p-md">Add Me!</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</Layout >
|
||||
|
||||
<div className="bubble" />
|
||||
<div className="bubble" />
|
||||
<div className="bubble" />
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export function getStaticProps() {
|
||||
return {
|
||||
props: {
|
||||
body_class_name: 'h-full'
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -48,7 +48,6 @@ export function getStaticProps() {
|
||||
flattenNodes,
|
||||
backLinks,
|
||||
body_class_name: 'm-0 p-0'
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -2,11 +2,15 @@
|
||||
/* PUT OVERRIDES HERE */
|
||||
/*--links: #ff0000 !important;*/
|
||||
--elevated: #ffffff0a;
|
||||
--background-transparent: #161b22aa;
|
||||
}
|
||||
|
||||
|
||||
* {
|
||||
transition: all .1s ease-in-out;
|
||||
transition: all 0.1s ease-in-out;
|
||||
}
|
||||
|
||||
html {
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.flex-row {
|
||||
@ -24,7 +28,7 @@
|
||||
}
|
||||
|
||||
.flex-1 {
|
||||
flex: 1
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.wrap {
|
||||
@ -32,11 +36,14 @@
|
||||
}
|
||||
|
||||
.bg-gradient {
|
||||
background: radial-gradient(circle at top right,
|
||||
var(--background) 0%, var(--background-body) 50%, var(--background-body) 90%)
|
||||
background: radial-gradient(
|
||||
circle at top right,
|
||||
var(--background) 0%,
|
||||
var(--background-body) 50%,
|
||||
var(--background-body) 90%
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
/* WIDTH HEIGHT ---------------------------------*/
|
||||
.sm {
|
||||
width: 1rem;
|
||||
@ -91,7 +98,7 @@
|
||||
}
|
||||
|
||||
.gap-05 {
|
||||
gap: .5rem;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.gap-1 {
|
||||
@ -144,8 +151,6 @@
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* BORDER ---------------------------------- */
|
||||
.border-dashed {
|
||||
border-style: dashed;
|
||||
@ -176,7 +181,6 @@
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
|
||||
/* HOVER ----------------------------------*/
|
||||
.hover-scale:hover {
|
||||
transform: scale(1.2);
|
||||
@ -190,24 +194,23 @@
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
|
||||
/* BACKGROUND ----------------------------------*/
|
||||
.bg-elevated {
|
||||
background-color: var(--elevated);
|
||||
}
|
||||
|
||||
|
||||
/* OVERRIDES ----------------------------------*/
|
||||
article {
|
||||
padding-top: .8rem;
|
||||
padding-bottom: .8rem;
|
||||
padding-top: 0.8rem;
|
||||
padding-bottom: 0.8rem;
|
||||
background-color: var(--elevated);
|
||||
background: radial-gradient(circle at top right,
|
||||
var(--elevated) 0%, var(--background) 90%)
|
||||
background: radial-gradient(
|
||||
circle at top right,
|
||||
var(--elevated) 0%,
|
||||
var(--background) 90%
|
||||
);
|
||||
}
|
||||
|
||||
;
|
||||
|
||||
body nav:first-of-type::before {
|
||||
backdrop-filter: unset;
|
||||
-webkit-backdrop-filter: unset;
|
||||
@ -262,3 +265,61 @@ body nav:first-of-type ul li ul {
|
||||
backdrop-filter: unset !important;
|
||||
-webkit-backdrop-filter: unset !important;
|
||||
}
|
||||
|
||||
.frosted {
|
||||
backdrop-filter: blur(20px);
|
||||
border-right: 1px solid #fff1;
|
||||
border-top: 1px solid #fff1;
|
||||
border-left: 1px solid var(--background-transparent);
|
||||
border-bottom: 1px solid var(--background-transparent);
|
||||
}
|
||||
|
||||
.bubble {
|
||||
background-color: white;
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
opacity: 0.3;
|
||||
z-index: -1;
|
||||
background: radial-gradient(
|
||||
circle at top right,
|
||||
white 0%,
|
||||
grey 50%,
|
||||
var(--background-body) 90%
|
||||
);
|
||||
}
|
||||
|
||||
div.bubble {
|
||||
width: 400px;
|
||||
height: 400px;
|
||||
bottom: calc(50vh - 220px);
|
||||
right: calc(50vw - 0px);
|
||||
animation: myAnim 5s ease-in-out 0s infinite normal forwards;
|
||||
}
|
||||
div.bubble:nth-of-type(2) {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
bottom: calc(50vh - -200px);
|
||||
right: calc(50vw - 300px);
|
||||
animation: myAnim 4s ease-in-out 0s infinite normal forwards;
|
||||
}
|
||||
div.bubble:nth-of-type(3) {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
bottom: calc(50vh - 0px);
|
||||
right: calc(50vw - 200px);
|
||||
animation: myAnim 3s ease-in-out 0s infinite normal forwards;
|
||||
}
|
||||
|
||||
@keyframes myAnim {
|
||||
0% {
|
||||
transform: scale(0.9);
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: scale(0.9);
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user