tristonarmstrong/XeNote
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add email page for people to sign up to my email list

Browse Source
This commit is contained in:
Triston 2024-01-28 14:06:04 -06:00
parent 01959f7cb1
commit dc0ec48db4
4 changed files with 136 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
pages/_document.tsx
View File

@ -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 { } interface DocProps extends DocumentProps { }
export default function Document(props: DocProps) { export default function Document(props: DocProps) {
const pageProps = props?.__NEXT_DATA__?.props?.['pageProps'] const pageProps = props?.__NEXT_DATA__?.props?.["pageProps"];
return ( return (
<Html> <Html>
<Head> <Head>
<link rel="stylesheet" href="https://rsms.me/inter/inter.css" /> <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> </Head>
<body className={`bg-gradient ${pageProps.body_class_name}`}> <body className={`bg-gradient ${pageProps.body_class_name ?? ""}`}>
<Main /> <Main />
<NextScript /> <NextScript />
</body> </body>
</Html> </Html>
) );
} }

43
pages/email/index.tsx Normal file
View 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'
}
}
}

1
pages/notes/index.tsx
View File

@ -48,7 +48,6 @@ export function getStaticProps() {
flattenNodes, flattenNodes,
backLinks, backLinks,
body_class_name: 'm-0 p-0' body_class_name: 'm-0 p-0'
} }
} }
} }

97
styles/global.css
View File

@ -2,11 +2,15 @@
/* PUT OVERRIDES HERE */ /* PUT OVERRIDES HERE */
/*--links: #ff0000 !important;*/ /*--links: #ff0000 !important;*/
--elevated: #ffffff0a; --elevated: #ffffff0a;
--background-transparent: #161b22aa;
} }
* { * {
transition: all .1s ease-in-out; transition: all 0.1s ease-in-out;
}
html {
overflow-x: hidden;
} }
.flex-row { .flex-row {
@ -24,7 +28,7 @@
} }
.flex-1 { .flex-1 {
flex: 1 flex: 1;
} }
.wrap { .wrap {
@ -32,11 +36,14 @@
} }
.bg-gradient { .bg-gradient {
background: radial-gradient(circle at top right, background: radial-gradient(
var(--background) 0%, var(--background-body) 50%, var(--background-body) 90%) circle at top right,
var(--background) 0%,
var(--background-body) 50%,
var(--background-body) 90%
);
} }
/* WIDTH HEIGHT ---------------------------------*/ /* WIDTH HEIGHT ---------------------------------*/
.sm { .sm {
width: 1rem; width: 1rem;
@ -91,7 +98,7 @@
} }
.gap-05 { .gap-05 {
gap: .5rem; gap: 0.5rem;
} }
.gap-1 { .gap-1 {
@ -144,8 +151,6 @@
font-weight: bold; font-weight: bold;
} }
/* BORDER ---------------------------------- */ /* BORDER ---------------------------------- */
.border-dashed { .border-dashed {
border-style: dashed; border-style: dashed;
@ -176,7 +181,6 @@
margin: 0; margin: 0;
} }
/* HOVER ----------------------------------*/ /* HOVER ----------------------------------*/
.hover-scale:hover { .hover-scale:hover {
transform: scale(1.2); transform: scale(1.2);
@ -190,24 +194,23 @@
cursor: pointer; cursor: pointer;
} }
/* BACKGROUND ----------------------------------*/ /* BACKGROUND ----------------------------------*/
.bg-elevated { .bg-elevated {
background-color: var(--elevated); background-color: var(--elevated);
} }
/* OVERRIDES ----------------------------------*/ /* OVERRIDES ----------------------------------*/
article { article {
padding-top: .8rem; padding-top: 0.8rem;
padding-bottom: .8rem; padding-bottom: 0.8rem;
background-color: var(--elevated); background-color: var(--elevated);
background: radial-gradient(circle at top right, background: radial-gradient(
var(--elevated) 0%, var(--background) 90%) circle at top right,
var(--elevated) 0%,
var(--background) 90%
);
} }
;
body nav:first-of-type::before { body nav:first-of-type::before {
backdrop-filter: unset; backdrop-filter: unset;
-webkit-backdrop-filter: unset; -webkit-backdrop-filter: unset;
@ -262,3 +265,61 @@ body nav:first-of-type ul li ul {
backdrop-filter: unset !important; backdrop-filter: unset !important;
-webkit-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);
}
}