Mid
/
invesvpo
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

make the two other pages invisible while they're not finished

Browse Source
main
Midnight 2 years ago
parent e1f92aa150
commit 7f35efeb17
16 changed files with 7429 additions and 4713 deletions
Show Stats Download Patch File Download Diff File

68
.gitignore vendored
Unescape View File

@ -1,34 +1,34 @@
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
# dependencies
/node_modules
/.pnp
.pnp.js
# testing
/coverage
# next.js
/.next/
/out/
# production
/build
# misc
.DS_Store
*.pem
# debug
npm-debug.log*
yarn-debug.log*
yarn-error.log*
# local env files
.env.local
.env.development.local
.env.test.local
.env.production.local
# vercel
.vercel
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
# dependencies
/node_modules
/.pnp
.pnp.js
# testing
/coverage
# next.js
/.next/
/out/
# production
/build
# misc
.DS_Store
*.pem
# debug
npm-debug.log*
yarn-debug.log*
yarn-error.log*
# local env files
.env.local
.env.development.local
.env.test.local
.env.production.local
# vercel
.vercel

68
README.md
Unescape View File

@ -1,34 +1,34 @@
This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
## Getting Started
First, run the development server:
```bash
npm run dev
# or
yarn dev
```
Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
You can start editing the page by modifying `pages/index.js`. The page auto-updates as you edit the file.
[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.js`.
The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.
## Learn More
To learn more about Next.js, take a look at the following resources:
- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
## Deploy on Vercel
The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/import?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
## Getting Started
First, run the development server:
```bash
npm run dev
# or
yarn dev
```
Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
You can start editing the page by modifying `pages/index.js`. The page auto-updates as you edit the file.
[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.js`.
The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.
## Learn More
To learn more about Next.js, take a look at the following resources:
- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
## Deploy on Vercel
The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/import?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.

20
components/head.js
Unescape View File

@ -1,11 +1,11 @@
import Head from 'next/head'
export default function HeadComponent() {
return (
<section>
<Head>
<link rel="icon" href="/logo.png" />
</Head>
</section>
)
import Head from 'next/head'
export default function HeadComponent() {
return (
<section>
<Head>
<link rel="icon" href="/logo.png" />
</Head>
</section>
)
}

40
components/menu.js
Unescape View File

@ -1,21 +1,21 @@
export default function Menu() {
return (
<section>
<style jsx>{`
div {
padding: var(--padding) 0;
display: inline-flex;
gap: var(--padding-lg);
}
`}</style>
<div>
<a href="#">Home</a>
<span>//</span>
<a href="/music">Music Feed</a>
<span>//</span>
<a href="/models">Models</a>
</div>
</section>
)
export default function Menu() {
return (
<section>
<style jsx>{`
div {
padding: var(--padding) 0;
display: inline-flex;
gap: var(--padding-lg);
}
`}</style>
<div>
<a href="#">Home</a>
<span>//</span>
<a href="#">Music Feed {`<<soon>>`}</a>
<span>//</span>
<a href="#">Models {`<<soon>>`}</a>
</div>
</section>
)
}

6925
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

40
package.json
Unescape View File

@ -1,20 +1,20 @@
{
"name": "nextjs",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start"
},
"dependencies": {
"@fortawesome/fontawesome-free": "^5.15.3",
"@fortawesome/fontawesome-svg-core": "^1.2.35",
"@fortawesome/free-brands-svg-icons": "^5.15.3",
"@fortawesome/free-solid-svg-icons": "^5.15.3",
"@fortawesome/react-fontawesome": "^0.1.14",
"next": "10.x",
"react": "17.x",
"react-dom": "17.x"
}
}
{
"name": "nextjs",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start"
},
"dependencies": {
"@fortawesome/fontawesome-free": "^5.15.3",
"@fortawesome/fontawesome-svg-core": "^1.2.35",
"@fortawesome/free-brands-svg-icons": "^5.15.3",
"@fortawesome/free-solid-svg-icons": "^5.15.3",
"@fortawesome/react-fontawesome": "^0.1.14",
"next": "10.x",
"react": "17.x",
"react-dom": "17.x"
}
}

22
pages/_app.js
Unescape View File

@ -1,11 +1,11 @@
import '../styles/globals.css'
import '@fortawesome/fontawesome-svg-core/styles.css';
import { config } from '@fortawesome/fontawesome-svg-core';
config.autoAddCss = false; /* eslint-disable import/first */
function MyApp({ Component, pageProps }) {
return <Component {...pageProps} />
}
export default MyApp
import '../styles/globals.css'
import '@fortawesome/fontawesome-svg-core/styles.css';
import { config } from '@fortawesome/fontawesome-svg-core';
config.autoAddCss = false; /* eslint-disable import/first */
function MyApp({ Component, pageProps }) {
return <Component {...pageProps} />
}
export default MyApp

12
pages/api/hello.js
Unescape View File

@ -1,6 +1,6 @@
// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
export default (req, res) => {
res.statusCode = 200
res.json({ name: 'John Doe' })
}
// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
export default (req, res) => {
res.statusCode = 200
res.json({ name: 'John Doe' })
}

130
pages/home.js
Unescape View File

@ -1,65 +1,65 @@
import Head from 'next/head'
import styles from '../styles/Home.module.css'
export default function Home() {
return (
<div className={styles.container}>
<Head>
<title>Create Next App</title>
<link rel="icon" href="/favicon.ico" />
</Head>
<main className={styles.main}>
<h1 className={styles.title}>
Welcome to <a href="https://nextjs.org">Next.js!</a>
</h1>
<p className={styles.description}>
Get started by editing{' '}
<code className={styles.code}>pages/index.js</code>
</p>
<div className={styles.grid}>
<a href="https://nextjs.org/docs" className={styles.card}>
<h3>Documentation &rarr;</h3>
<p>Find in-depth information about Next.js features and API.</p>
</a>
<a href="https://nextjs.org/learn" className={styles.card}>
<h3>Learn &rarr;</h3>
<p>Learn about Next.js in an interactive course with quizzes!</p>
</a>
<a
href="https://github.com/vercel/next.js/tree/master/examples"
className={styles.card}
>
<h3>Examples &rarr;</h3>
<p>Discover and deploy boilerplate example Next.js projects.</p>
</a>
<a
href="https://vercel.com/import?filter=next.js&utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
className={styles.card}
>
<h3>Deploy &rarr;</h3>
<p>
Instantly deploy your Next.js site to a public URL with Vercel.
</p>
</a>
</div>
</main>
<footer className={styles.footer}>
<a
href="https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
target="_blank"
rel="noopener noreferrer"
>
Powered by{' '}
<img src="/vercel.svg" alt="Vercel Logo" className={styles.logo} />
</a>
</footer>
</div>
)
}
import Head from 'next/head'
import styles from '../styles/Home.module.css'
export default function Home() {
return (
<div className={styles.container}>
<Head>
<title>Create Next App</title>
<link rel="icon" href="/favicon.ico" />
</Head>
<main className={styles.main}>
<h1 className={styles.title}>
Welcome to <a href="https://nextjs.org">Next.js!</a>
</h1>
<p className={styles.description}>
Get started by editing{' '}
<code className={styles.code}>pages/index.js</code>
</p>
<div className={styles.grid}>
<a href="https://nextjs.org/docs" className={styles.card}>
<h3>Documentation &rarr;</h3>
<p>Find in-depth information about Next.js features and API.</p>
</a>
<a href="https://nextjs.org/learn" className={styles.card}>
<h3>Learn &rarr;</h3>
<p>Learn about Next.js in an interactive course with quizzes!</p>
</a>
<a
href="https://github.com/vercel/next.js/tree/master/examples"
className={styles.card}
>
<h3>Examples &rarr;</h3>
<p>Discover and deploy boilerplate example Next.js projects.</p>
</a>
<a
href="https://vercel.com/import?filter=next.js&utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
className={styles.card}
>
<h3>Deploy &rarr;</h3>
<p>
Instantly deploy your Next.js site to a public URL with Vercel.
</p>
</a>
</div>
</main>
<footer className={styles.footer}>
<a
href="https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
target="_blank"
rel="noopener noreferrer"
>
Powered by{' '}
<img src="/vercel.svg" alt="Vercel Logo" className={styles.logo} />
</a>
</footer>
</div>
)
}

182
pages/index.js
Unescape View File

@ -1,92 +1,92 @@
import Head from 'next/head'
import HeadComponent from '../components/head.js'
import Menu from '../components/menu.js'
import Image from 'next/image'
import styles from '../styles/Index.module.css'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faDiscord } from '@fortawesome/free-brands-svg-icons'
import { faTwitter } from '@fortawesome/free-brands-svg-icons'
import { faSpotify } from '@fortawesome/free-brands-svg-icons'
import { faSteam } from '@fortawesome/free-brands-svg-icons'
import { faSoundcloud } from '@fortawesome/free-brands-svg-icons'
import { faEnvelope } from '@fortawesome/free-solid-svg-icons'
export default function Index() {
return (
<div className={styles.page}>
<HeadComponent/>
<Head>
<title>Invesvpo | Landing Page</title>
</Head>
<section className={styles.leftsidetint + " slide-in-down"}>
<a href="/"><img src="/logo.png"/></a>
<footer>
<a href="https://dubbelnull.com/" target="_blank">Made by DubbelNull</a> with NextJS and Vercel
</footer>
</section>
<section className={styles.content}>
<div className={styles.topcontainerbackg + " slide-in-right"}></div>
<div className={styles.topcontainer + " slide-in-left"}>
<Menu/>
<div>
<h1>INVESVPO</h1>
<p><div className="badge"><span>aka</span></div> Fuhz — Elikas — C2RW</p>
</div>
</div>
<div className={styles.bottomcontainer + " slide-in-up"}>
<div>
<h3>
{`Hey I'm Invesvpo, I make some cool 3d models including guns and I'm trying to learn more about it.`} <br/>
{`I also make music, so check out my Spotify and SoundCloud below. `}<br/>
{`A lot of my songs are made to be downtempo ambient songs.`}
</h3>
</div>
<div className={styles.topcontent + " " + styles.links}>
<div>
<a target="_blank" href="https://twitter.com/invesvpo">
<span>
<p>Twitter</p>
<FontAwesomeIcon icon={faTwitter} />
</span>
</a>
<a target="_blank" href="https://discord.com/users/221984151161667585">
<span>
<p>Discord</p>
<FontAwesomeIcon icon={faDiscord} />
</span>
</a>
<a target="_blank" href="https://soundcloud.com/invesvpo">
<span>
<p>SoundCloud</p>
<FontAwesomeIcon icon={faSoundcloud} />
</span>
</a>
<a target="_blank" href="mailto:">
<span>
<p>Email</p>
<FontAwesomeIcon icon={faEnvelope} />
</span>
</a>
<a target="_blank" href="https://steamcommunity.com/id/Invesvpo/">
<span>
<p>Steam</p>
<FontAwesomeIcon icon={faSteam} />
</span>
</a>
</div>
</div>
</div>
</section>
</div>
)
import Head from 'next/head'
import HeadComponent from '../components/head.js'
import Menu from '../components/menu.js'
import Image from 'next/image'
import styles from '../styles/Index.module.css'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faDiscord } from '@fortawesome/free-brands-svg-icons'
import { faTwitter } from '@fortawesome/free-brands-svg-icons'
import { faSpotify } from '@fortawesome/free-brands-svg-icons'
import { faSteam } from '@fortawesome/free-brands-svg-icons'
import { faSoundcloud } from '@fortawesome/free-brands-svg-icons'
import { faEnvelope } from '@fortawesome/free-solid-svg-icons'
export default function Index() {
return (
<div className={styles.page}>
<HeadComponent/>
<Head>
<title>Invesvpo | Landing Page</title>
</Head>
<section className={styles.leftsidetint + " slide-in-down"}>
<a href="/"><img src="/logo.png"/></a>
<footer>
<a href="https://dubbelnull.com/" target="_blank">Made by DubbelNull</a> with NextJS and Vercel
</footer>
</section>
<section className={styles.content}>
<div className={styles.topcontainerbackg + " slide-in-right"}></div>
<div className={styles.topcontainer + " slide-in-left"}>
<Menu/>
<div>
<h1>INVESVPO</h1>
<p><div className="badge"><span>aka</span></div> Fuhz — Elikas — C2RW</p>
</div>
</div>
<div className={styles.bottomcontainer + " slide-in-up"}>
<div>
<h3>
{`Hey I'm Invesvpo, I make some cool 3d models including guns and I'm trying to learn more about it.`} <br/>
{`I also make music, so check out my Spotify and SoundCloud below. `}<br/>
{`A lot of my songs are made to be downtempo ambient songs.`}
</h3>
</div>
<div className={styles.topcontent + " " + styles.links}>
<div>
<a target="_blank" href="https://twitter.com/invesvpo">
<span>
<p>Twitter</p>
<FontAwesomeIcon icon={faTwitter} />
</span>
</a>
<a target="_blank" href="https://discord.com/users/221984151161667585">
<span>
<p>Discord</p>
<FontAwesomeIcon icon={faDiscord} />
</span>
</a>
<a target="_blank" href="https://soundcloud.com/invesvpo">
<span>
<p>SoundCloud</p>
<FontAwesomeIcon icon={faSoundcloud} />
</span>
</a>
<a target="_blank" href="mailto:">
<span>
<p>Email</p>
<FontAwesomeIcon icon={faEnvelope} />
</span>
</a>
<a target="_blank" href="https://steamcommunity.com/id/Invesvpo/">
<span>
<p>Steam</p>
<FontAwesomeIcon icon={faSteam} />
</span>
</a>
</div>
</div>
</div>
</section>
</div>
)
}

16
pages/models.js
Unescape View File

@ -1,9 +1,9 @@
import Head from 'next/head'
export default function Models() {
return (
<div>
</div>
)
import Head from 'next/head'
export default function Models() {
return (
<div>
</div>
)
}

16
pages/music.js
Unescape View File

@ -1,9 +1,9 @@
import Head from 'next/head'
export default function Music() {
return (
<div>
</div>
)
import Head from 'next/head'
export default function Music() {
return (
<div>
</div>
)
}

244
styles/Home.module.css
Unescape View File

@ -1,122 +1,122 @@
.container {
min-height: 100vh;
padding: 0 0.5rem;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.main {
padding: 5rem 0;
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.footer {
width: 100%;
height: 100px;
border-top: 1px solid #eaeaea;
display: flex;
justify-content: center;
align-items: center;
}
.footer img {
margin-left: 0.5rem;
}
.footer a {
display: flex;
justify-content: center;
align-items: center;
}
.title a {
color: #0070f3;
text-decoration: none;
}
.title a:hover,
.title a:focus,
.title a:active {
text-decoration: underline;
}
.title {
margin: 0;
line-height: 1.15;
font-size: 4rem;
}
.title,
.description {
text-align: center;
}
.description {
line-height: 1.5;
font-size: 1.5rem;
}
.code {
background: #fafafa;
border-radius: 5px;
padding: 0.75rem;
font-size: 1.1rem;
font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono,
Bitstream Vera Sans Mono, Courier New, monospace;
}
.grid {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
max-width: 800px;
margin-top: 3rem;
}
.card {
margin: 1rem;
flex-basis: 45%;
padding: 1.5rem;
text-align: left;
color: inherit;
text-decoration: none;
border: 1px solid #eaeaea;
border-radius: 10px;
transition: color 0.15s ease, border-color 0.15s ease;
}
.card:hover,
.card:focus,
.card:active {
color: #0070f3;
border-color: #0070f3;
}
.card h3 {
margin: 0 0 1rem 0;
font-size: 1.5rem;
}
.card p {
margin: 0;
font-size: 1.25rem;
line-height: 1.5;
}
.logo {
height: 1em;
}
@media (max-width: 600px) {
.grid {
width: 100%;
flex-direction: column;
}
}
.container {
min-height: 100vh;
padding: 0 0.5rem;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.main {
padding: 5rem 0;
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.footer {
width: 100%;
height: 100px;
border-top: 1px solid #eaeaea;
display: flex;
justify-content: center;
align-items: center;
}
.footer img {
margin-left: 0.5rem;
}
.footer a {
display: flex;
justify-content: center;
align-items: center;
}
.title a {
color: #0070f3;
text-decoration: none;
}
.title a:hover,
.title a:focus,
.title a:active {
text-decoration: underline;
}
.title {
margin: 0;
line-height: 1.15;
font-size: 4rem;
}
.title,
.description {
text-align: center;
}
.description {
line-height: 1.5;
font-size: 1.5rem;
}
.code {
background: #fafafa;
border-radius: 5px;
padding: 0.75rem;
font-size: 1.1rem;
font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono,
Bitstream Vera Sans Mono, Courier New, monospace;
}
.grid {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
max-width: 800px;
margin-top: 3rem;
}
.card {
margin: 1rem;
flex-basis: 45%;
padding: 1.5rem;
text-align: left;
color: inherit;
text-decoration: none;
border: 1px solid #eaeaea;
border-radius: 10px;
transition: color 0.15s ease, border-color 0.15s ease;
}
.card:hover,
.card:focus,
.card:active {
color: #0070f3;
border-color: #0070f3;
}
.card h3 {
margin: 0 0 1rem 0;
font-size: 1.5rem;
}
.card p {
margin: 0;
font-size: 1.25rem;
line-height: 1.5;
}
.logo {
height: 1em;
}
@media (max-width: 600px) {
.grid {
width: 100%;
flex-direction: column;
}
}

376
styles/Index.module.css
Unescape View File

@ -1,189 +1,189 @@
/* page specific overwrites css */
.page h1 {
font-size: var(--font-xl);
}
.page h3 {
font-size: var(--font-lg);
font-weight: normal;
}
/* page layout */
.page {
display: flex;
}
.page .content {
flex-grow: 1;
}
.content {
position: relative;
width: 100%;
}
.topcontainerbackg {
height: 40vh;
z-index: 0;
background-color: #2940D3;
-ms-transform: skewX(-20deg);
-webkit-transform: skewX(-20deg);
transform: skewX(-20deg);
}
.topcontainer {
padding: 0 var(--padding-xl);
top: 0;
right: 0;
left: 0;
bottom: 0;
position: absolute;
height: 40vh;
display: flex;
flex-direction: column;
align-items: start;
justify-content: space-between;
color: white;
background-image: url('/gun.png');
background-size: contain;
background-repeat: no-repeat;
background-position: right center;
}
.topcontainer h1 {
margin: unset;
}
.topcontainer p {
opacity: 50%;
margin-top: - var(--padding-sm);
}
.bottomcontainer {
padding: 0 var(--padding-xl);
height: 60vh;
background-color: #232323;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: start;
color: white;
padding-bottom: var(--padding);
}
.leftsidetint {
z-index: 1;
width: 10vw;
background-color: #1a1a1a;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.leftsidetint footer {
font-size: var(--font-sm);
padding: var(--padding-lg);
}
/* items */
.links {
width: 100%;
display: flex;
flex-grow: 1;
align-items: center;
}
.links div {
width: 100%;
font-size: 1.5em;
display: grid;
grid-template-columns: 25% 25% 25%;
gap: var(--padding-lg);
}
.links div a {
text-align: center;
padding: var(--padding) var(--padding-xl);
transition-duration: var(--transition-speed);
background-color: #2940D3;
-ms-transform: skewX(-20deg);
-webkit-transform: skewX(-20deg);
transform: skewX(-20deg);
}
.links div a:hover {
-ms-transform: skewX(0deg);
-webkit-transform: skewX(0deg);
transform: skewX(0deg);
transition-duration: var(--transition-speed);
}
.links div a:hover span {
-ms-transform: skewX(0deg);
-webkit-transform: skewX(0deg);
transform: skewX(0deg);
transition-duration: var(--transition-speed);
}
.links div p {
margin: unset;
}
.links div a span {
transition-duration: var(--transition-speed);
-ms-transform: skewX(20deg);
-webkit-transform: skewX(20deg);
transform: skewX(20deg);
display: inline-flex;
align-items: center;
justify-content: space-between;
width: 100%;
}
.links div a:hover {
transition-duration: 0.3s;
background-color: #1f309e;
}
/* mobile responsivity */
@media (max-aspect-ratio: 1/1) {
.topcontent {
width: 100%;
padding: var(--padding);
}
.links a {
padding: 0 var(--padding-lg);
}
.page h1 {
font-size: var(--font-lg);
}
.page h3 {
font-size: var(--font-lg);
font-weight: normal;
}
.links div {
font-size: var(--font);
display: flex;
flex-wrap: wrap;
justify-content: center;
}
}
@media (max-aspect-ratio: 5/4) {
.leftsidetint {
display: none;
}
/* page specific overwrites css */
.page h1 {
font-size: var(--font-xl);
}
.page h3 {
font-size: var(--font-lg);
font-weight: normal;
}
/* page layout */
.page {
display: flex;
}
.page .content {
flex-grow: 1;
}
.content {
position: relative;
width: 100%;
}
.topcontainerbackg {
height: 40vh;
z-index: 0;
background-color: #2940D3;
-ms-transform: skewX(-20deg);
-webkit-transform: skewX(-20deg);
transform: skewX(-20deg);
}
.topcontainer {
padding: 0 var(--padding-xl);
top: 0;
right: 0;
left: 0;
bottom: 0;
position: absolute;
height: 40vh;
display: flex;
flex-direction: column;
align-items: start;
justify-content: space-between;
color: white;
background-image: url('/gun.png');
background-size: contain;
background-repeat: no-repeat;
background-position: right center;
}
.topcontainer h1 {
margin: unset;
}
.topcontainer p {
opacity: 50%;
margin-top: - var(--padding-sm);
}
.bottomcontainer {
padding: 0 var(--padding-xl);
height: 60vh;
background-color: #232323;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: start;
color: white;
padding-bottom: var(--padding);
}
.leftsidetint {
z-index: 1;
width: 10vw;
background-color: #1a1a1a;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.leftsidetint footer {
font-size: var(--font-sm);
padding: var(--padding-lg);
}
/* items */
.links {
width: 100%;
display: flex;
flex-grow: 1;
align-items: center;
}
.links div {
width: 100%;
font-size: 1.5em;
display: grid;
grid-template-columns: 25% 25% 25%;
gap: var(--padding-lg);
}
.links div a {
text-align: center;
padding: var(--padding) var(--padding-xl);
transition-duration: var(--transition-speed);
background-color: #2940D3;
-ms-transform: skewX(-20deg);
-webkit-transform: skewX(-20deg);
transform: skewX(-20deg);
}
.links div a:hover {
-ms-transform: skewX(0deg);
-webkit-transform: skewX(0deg);
transform: skewX(0deg);
transition-duration: var(--transition-speed);
}
.links div a:hover span {
-ms-transform: skewX(0deg);
-webkit-transform: skewX(0deg);
transform: skewX(0deg);
transition-duration: var(--transition-speed);
}
.links div p {
margin: unset;
}
.links div a span {
transition-duration: var(--transition-speed);
-ms-transform: skewX(20deg);
-webkit-transform: skewX(20deg);
transform: skewX(20deg);
display: inline-flex;
align-items: center;
justify-content: space-between;
width: 100%;
}
.links div a:hover {
transition-duration: 0.3s;
background-color: #1f309e;
}
/* mobile responsivity */
@media (max-aspect-ratio: 1/1) {
.topcontent {
width: 100%;
padding: var(--padding);
}
.links a {
padding: 0 var(--padding-lg);
}
.page h1 {
font-size: var(--font-lg);
}
.page h3 {
font-size: var(--font-lg);
font-weight: normal;
}
.links div {
font-size: var(--font);
display: flex;
flex-wrap: wrap;
justify-content: center;
}
}
@media (max-aspect-ratio: 5/4) {
.leftsidetint {
display: none;
}
}

330
styles/globals.css
Unescape View File

@ -1,166 +1,166 @@
:root {
--padding-sm: 5px;
--padding: 10px;
--padding-lg: 20px;
--padding-xl: 50px;
--padding-xxl: 100px;
--font-xl: 5em;
--font-lg: 1.5em;
--font: 1em;
--font-sm: 0.8em;
--page-width: 1200px;
--transition-speed: 0.3s;
}
@font-face {
font-family: 'Dual';
src: url('/fonts/Dual-300.otf');
src: url('/fonts/Dual-300.ttf') format('truetype');
}
@font-face {
font-family: 'Anurati';
src: url('/fonts/Anurati-Regular.otf');
}
html,
body {
padding: 0;
margin: 0;
font-family: 'Dual', sans-serif;
background-color: #232323;
overflow: hidden;
color: white;
}
h1, h2 {
font-family: 'Anurati', sans-serif;
letter-spacing: 0.5em;
}
footer {
opacity: 50%;
}
footer a:hover {
text-decoration: underline;
}
a {
color: inherit;
text-decoration: none;
}
* {
box-sizing: border-box;
}
img {
max-width: 100%;
}
/* help classes */
.text-center {
text-align: center;
}
.badge {
display: inline-block;
background-color: rgba(35,35,35,0.5);
padding: var(--padding-sm) var(--padding);
margin: 0 var(--padding-sm);
-ms-transform: skewX(-20deg);
-webkit-transform: skewX(-20deg);
transform: skewX(-20deg);
}
.badge span {
-ms-transform: skewX(20deg);
-webkit-transform: skewX(20deg);
transform: skewX(20deg);
display: inline-block;
}
/* animations */
.slide-in-right {
animation-name: slide-in-right;
animation-duration: 1s;
margin-right: var(--padding-xxl);
margin-left: -50vw;
animation-timing-function: ease-in-out;
}
@keyframes slide-in-right {
0% {
margin-right: 150vw;
}
25% {
margin-right: 150vw;
}
100% {
margin-right: var(--padding-xxl);
}
}
.slide-in-left {
animation-name: slide-in-left;
animation-duration: 1.2s;
margin-left: 0vw;
animation-timing-function: ease-in-out;
}
@keyframes slide-in-left {
0% {
margin-left: 100vw;
}
25% {
margin-left: 100vw;
}
100% {
margin-left: 0vw;
}
}
.slide-in-up {
animation-name: slide-in-up;
animation-duration: 1.4s;
margin-top: 0vh;
animation-timing-function: ease-in-out;
}
@keyframes slide-in-up {
0% {
margin-top: 100vh;
}
25% {
margin-top: 100vh;
}
100% {
margin-top: 0vh;
}
}
.slide-in-down {
animation-name: slide-in-down;
animation-duration: 0.4s;
overflow-y: hidden;
margin-top: 0vh;
animation-timing-function: ease-in-out;
}
@keyframes slide-in-down {
0% {
margin-top: 100vh;
}
100% {
margin-top: 0vh;
}
:root {
--padding-sm: 5px;
--padding: 10px;
--padding-lg: 20px;
--padding-xl: 50px;
--padding-xxl: 100px;
--font-xl: 5em;
--font-lg: 1.5em;
--font: 1em;
--font-sm: 0.8em;
--page-width: 1200px;
--transition-speed: 0.3s;
}
@font-face {
font-family: 'Dual';
src: url('/fonts/Dual-300.otf');
src: url('/fonts/Dual-300.ttf') format('truetype');
}
@font-face {
font-family: 'Anurati';
src: url('/fonts/Anurati-Regular.otf');
}
html,
body {
padding: 0;
margin: 0;
font-family: 'Dual', sans-serif;
background-color: #232323;
overflow: hidden;
color: white;
}
h1, h2 {
font-family: 'Anurati', sans-serif;
letter-spacing: 0.5em;
}
footer {
opacity: 50%;
}
footer a:hover {
text-decoration: underline;
}
a {
color: inherit;
text-decoration: none;
}
* {
box-sizing: border-box;
}
img {
max-width: 100%;
}
/* help classes */
.text-center {
text-align: center;
}
.badge {
display: inline-block;
background-color: rgba(35,35,35,0.5);
padding: var(--padding-sm) var(--padding);
margin: 0 var(--padding-sm);
-ms-transform: skewX(-20deg);
-webkit-transform: skewX(-20deg);
transform: skewX(-20deg);
}
.badge span {
-ms-transform: skewX(20deg);
-webkit-transform: skewX(20deg);
transform: skewX(20deg);
display: inline-block;
}
/* animations */
.slide-in-right {
animation-name: slide-in-right;
animation-duration: 1s;
margin-right: var(--padding-xxl);
margin-left: -50vw;
animation-timing-function: ease-in-out;
}
@keyframes slide-in-right {
0% {
margin-right: 150vw;
}
25% {
margin-right: 150vw;
}
100% {
margin-right: var(--padding-xxl);
}
}
.slide-in-left {
animation-name: slide-in-left;
animation-duration: 1.2s;
margin-left: 0vw;
animation-timing-function: ease-in-out;
}
@keyframes slide-in-left {
0% {
margin-left: 100vw;
}
25% {
margin-left: 100vw;
}
100% {
margin-left: 0vw;
}
}
.slide-in-up {
animation-name: slide-in-up;
animation-duration: 1.4s;
margin-top: 0vh;
animation-timing-function: ease-in-out;
}
@keyframes slide-in-up {
0% {
margin-top: 100vh;
}
25% {
margin-top: 100vh;
}
100% {
margin-top: 0vh;
}
}
.slide-in-down {
animation-name: slide-in-down;
animation-duration: 0.4s;
overflow-y: hidden;
margin-top: 0vh;
animation-timing-function: ease-in-out;
}
@keyframes slide-in-down {
0% {
margin-top: 100vh;
}
100% {
margin-top: 0vh;
}
}

3653
yarn.lock
View File

File diff suppressed because it is too large Load Diff
Write Preview
Loading…
Cancel
Save