diff --git a/pages/_document.tsx b/pages/_document.tsx index 9071ec7..21c3729 100644 --- a/pages/_document.tsx +++ b/pages/_document.tsx @@ -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 ( - + - +
- ) + ); } diff --git a/pages/email/index.tsx b/pages/email/index.tsx new file mode 100644 index 0000000..0e8feef --- /dev/null +++ b/pages/email/index.tsx @@ -0,0 +1,43 @@ +import Layout from "components/Layout"; +import Head from "next/head"; + +export default function EmailPageRoot() { + return ( + <> + + Email Signup + + + +
+

Please provide your Name & Email

+ +
+ +
+
+ + + + +
+ +
+
+
+ + +
+
+
+ + ) +} + +export function getStaticProps() { + return { + props: { + body_class_name: 'h-full' + } + } +} diff --git a/pages/notes/index.tsx b/pages/notes/index.tsx index c8c3df4..04a3de3 100644 --- a/pages/notes/index.tsx +++ b/pages/notes/index.tsx @@ -48,7 +48,6 @@ export function getStaticProps() { flattenNodes, backLinks, body_class_name: 'm-0 p-0' - } } } diff --git a/styles/global.css b/styles/global.css index 0c23070..8cf1a20 100644 --- a/styles/global.css +++ b/styles/global.css @@ -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); + } +}