Skip to content

Instantly share code, notes, and snippets.

@PBillingsby
Created April 20, 2023 15:41
Show Gist options
  • Select an option

  • Save PBillingsby/de10fc51805ee7a0e88aaa60c63cb055 to your computer and use it in GitHub Desktop.

Select an option

Save PBillingsby/de10fc51805ee7a0e88aaa60c63cb055 to your computer and use it in GitHub Desktop.
html,
body {
background-color: #1E1E1E;
/* background-image: url('./src/arc.svg') !important; */
background-repeat: no-repeat;
background-position-y: bottom;
padding: 0;
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
}
a {
color: inherit;
text-decoration: none;
}
* {
box-sizing: border-box;
}
button {
cursor: pointer;
}
.main {
margin: 0 auto;
background-color: #111111;
background-image: url('/arc.svg');
background-repeat: no-repeat;
background-position-y: 0;
max-height: 100vh;
background-position: bottom center;
}
a {
border-bottom: solid .5px white;
text-underline-offset: 4px;
width: 12.5rem;
margin: 0 auto;
}
.content {
display: flex;
flex-direction: column;
justify-content: center;
height: 100vh;
letter-spacing: 1px;
}
.animation {
position: absolute;
margin-top: -10rem;
}
.overlay {
position: relative;
margin: 0 auto;
display: flex;
flex-direction: column;
margin-top: 15rem;
}
.overlay>p,
a {
text-align: center;
background: linear-gradient(to right, white, #616161);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.arc {
position: relative;
z-index: 1;
}
import Head from 'next/head';
import Spline from '@splinetool/react-spline';
export default function Home() {
return (
<div>
<Head>
<title>create-permaweb-app App</title>
<meta name="description" content="Generated by npx create-permaweb-app" />
<link rel="icon" href="/favicon.ico" />
</Head>
<div>
<div className="main">
<div className="content">
<Spline className="animation" scene="https://prod.spline.design/XLnDWYFfWJOD4Qlq/scene.splinecode" />
<div className="overlay">
<img src="./subtext.svg" alt="Logo" />
<p>Edit, save and reload</p>
<a href="https://cookbook.arweave.dev" target="_blank">Learn more how to build</a>
</div>
</div>
</div>
</div>
</div>
);
}
/** @type {import('next').NextConfig} */
const nextConfig = {
reactStrictMode: true,
assetPrefix: './',
basePath: '',
trailingSlash: true
}
module.exports = nextConfig
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment