root
3 years ago
parent
3b2b92c4bc
commit
9c5b8778ea
@ -1,35 +1,35 @@
|
||||
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
|
||||
secrets.json
|
||||
|
||||
# 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.
|
||||
secrets.json
|
||||
|
||||
# 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
|
||||
|
||||
@ -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.
|
||||
|
||||
@ -1,57 +1,57 @@
|
||||
import styles from '../styles/components/Footer.module.css'
|
||||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
|
||||
import { faHeart } from '@fortawesome/free-solid-svg-icons'
|
||||
|
||||
export default function Footer() {
|
||||
return (
|
||||
<div>
|
||||
<div className={styles.footer}>
|
||||
<div className="container">
|
||||
<p>
|
||||
<b>
|
||||
Made with <FontAwesomeIcon icon={faHeart} style={{color: "#63C5DA"}} size="1x" id="clickMeow" onClick={() => updateMeowCount()} /> by <a href="https://dubbelnull.com" className="link" target="_blank">DubbelNull</a>
|
||||
</b>
|
||||
<br/>
|
||||
NextJS // Vercel // Airtable
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<script src="js/meow.js"></script>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
async function updateMeowCount() {
|
||||
const getMeow = await fetch("https://api.airtable.com/v0/appQnOyKBnBVQXLUM/Meows", {
|
||||
method: "GET",
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
"Authorization": "Bearer " + process.env.AIRTABLE,
|
||||
}
|
||||
});
|
||||
|
||||
let meowCount = await getMeow.json();
|
||||
meowCount = parseInt(meowCount['records'][0]['fields']['count']);
|
||||
meowCount++;
|
||||
|
||||
const updateMeow = {
|
||||
"records": [
|
||||
{
|
||||
"id": "recR9RbScmJUPGQem",
|
||||
"fields": {
|
||||
"count": meowCount + ""
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
await fetch("https://api.airtable.com/v0/appQnOyKBnBVQXLUM/Meows", {
|
||||
method: "PATCH",
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
"Authorization": "Bearer " + process.env.AIRTABLE,
|
||||
"accept": "application/json",
|
||||
},
|
||||
body: JSON.stringify(updateMeow)
|
||||
});
|
||||
import styles from '../styles/components/Footer.module.css'
|
||||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
|
||||
import { faHeart } from '@fortawesome/free-solid-svg-icons'
|
||||
|
||||
export default function Footer() {
|
||||
return (
|
||||
<div>
|
||||
<div className={styles.footer}>
|
||||
<div className="container">
|
||||
<p>
|
||||
<b>
|
||||
Made with <FontAwesomeIcon icon={faHeart} style={{color: "#63C5DA"}} size="1x" id="clickMeow" onClick={() => updateMeowCount()} /> by <a href="https://dubbelnull.com" className="link" target="_blank">DubbelNull</a>
|
||||
</b>
|
||||
<br/>
|
||||
NextJS // Vercel // Airtable
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<script src="js/meow.js"></script>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
async function updateMeowCount() {
|
||||
const getMeow = await fetch("https://api.airtable.com/v0/appQnOyKBnBVQXLUM/Meows", {
|
||||
method: "GET",
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
"Authorization": "Bearer " + process.env.AIRTABLE,
|
||||
}
|
||||
});
|
||||
|
||||
let meowCount = await getMeow.json();
|
||||
meowCount = parseInt(meowCount['records'][0]['fields']['count']);
|
||||
meowCount++;
|
||||
|
||||
const updateMeow = {
|
||||
"records": [
|
||||
{
|
||||
"id": "recR9RbScmJUPGQem",
|
||||
"fields": {
|
||||
"count": meowCount + ""
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
await fetch("https://api.airtable.com/v0/appQnOyKBnBVQXLUM/Meows", {
|
||||
method: "PATCH",
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
"Authorization": "Bearer " + process.env.AIRTABLE,
|
||||
"accept": "application/json",
|
||||
},
|
||||
body: JSON.stringify(updateMeow)
|
||||
});
|
||||
}
|
||||
@ -1,27 +1,27 @@
|
||||
import Head from 'next/head'
|
||||
import styles from '../styles/components/Header.module.css'
|
||||
|
||||
const Header = () => (
|
||||
<div>
|
||||
<Head>
|
||||
<link rel="icon" href="/sign.png" />
|
||||
</Head>
|
||||
|
||||
<div className={styles.colorfulbar}></div>
|
||||
|
||||
<div className={styles.menu}>
|
||||
<div className="container">
|
||||
<a href="/" className={styles.title}><img src="/sign.png"></img> <h2>Trick The Fox</h2></a>
|
||||
|
||||
<div className={styles.items}>
|
||||
{/* <a href="/">Home</a> */}
|
||||
<a href="/commissions">Commissions</a>
|
||||
<a href="/gallery">Gallery</a>
|
||||
<a href="/contact">Contact</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
|
||||
import Head from 'next/head'
|
||||
import styles from '../styles/components/Header.module.css'
|
||||
|
||||
const Header = () => (
|
||||
<div>
|
||||
<Head>
|
||||
<link rel="icon" href="/sign.png" />
|
||||
</Head>
|
||||
|
||||
<div className={styles.colorfulbar}></div>
|
||||
|
||||
<div className={styles.menu}>
|
||||
<div className="container">
|
||||
<a href="/" className={styles.title}><img src="/sign.png"></img> <h2>Trick The Fox</h2></a>
|
||||
|
||||
<div className={styles.items}>
|
||||
{/* <a href="/">Home</a> */}
|
||||
<a href="/commissions">Commissions</a>
|
||||
<a href="/gallery">Gallery</a>
|
||||
<a href="/contact">Contact</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
|
||||
export default Header
|
||||
@ -1,17 +1,17 @@
|
||||
import styles from '../styles/components/Socials.module.css'
|
||||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
|
||||
import { faTwitter } from '@fortawesome/free-brands-svg-icons'
|
||||
import { faTwitch } from '@fortawesome/free-brands-svg-icons'
|
||||
import { faTrello } from '@fortawesome/free-brands-svg-icons'
|
||||
import { faMugHot } from '@fortawesome/free-solid-svg-icons'
|
||||
|
||||
const Socials = () => (
|
||||
<section className={styles.buttons}>
|
||||
<a href="https://twitter.com/Trick_the_fox" target="_blank"><FontAwesomeIcon icon={faTwitter} size="1x" /> Twitter</a>
|
||||
<a href="https://www.twitch.tv/trick_the_fox" target="_blank"><FontAwesomeIcon icon={faTwitch} size="1x" /> Twitch</a>
|
||||
<a href="https://trello.com/b/cMyTLWYd" target="_blank"><FontAwesomeIcon icon={faTrello} size="1x" /> Trello</a>
|
||||
<a href="https://ko-fi.com/trick_the_fox" target="_blank"><FontAwesomeIcon icon={faMugHot} size="1x" /> Ko-fi</a>
|
||||
</section>
|
||||
)
|
||||
|
||||
import styles from '../styles/components/Socials.module.css'
|
||||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
|
||||
import { faTwitter } from '@fortawesome/free-brands-svg-icons'
|
||||
import { faTwitch } from '@fortawesome/free-brands-svg-icons'
|
||||
import { faTrello } from '@fortawesome/free-brands-svg-icons'
|
||||
import { faPatreon } from '@fortawesome/free-brands-svg-icons'
|
||||
|
||||
const Socials = () => (
|
||||
<section className={styles.buttons}>
|
||||
<a href="https://twitter.com/Trick_the_fox" target="_blank"><FontAwesomeIcon icon={faTwitter} size="1x" /> Twitter</a>
|
||||
<a href="https://www.twitch.tv/trick_the_fox" target="_blank"><FontAwesomeIcon icon={faTwitch} size="1x" /> Twitch</a>
|
||||
<a href="https://trello.com/b/cMyTLWYd" target="_blank"><FontAwesomeIcon icon={faTrello} size="1x" /> Trello</a>
|
||||
<a href="https://www.patreon.com/trickthefox" target="_blank"><FontAwesomeIcon icon={faPatreon} size="1x" /> Patreon</a>
|
||||
</section>
|
||||
)
|
||||
|
||||
export default Socials
|
||||
@ -1,18 +1,18 @@
|
||||
import styles from '../styles/components/TwitchPopup.module.css'
|
||||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
|
||||
import { faTwitch } from '@fortawesome/free-brands-svg-icons'
|
||||
import { faMicrophoneAlt } from '@fortawesome/free-solid-svg-icons'
|
||||
import { TwitchEmbed } from 'react-twitch-embed';
|
||||
|
||||
export default function TwitchPopup({ show }) {
|
||||
if(show == true) {
|
||||
return (
|
||||
<div className="card" style={{ backgroundColor: "rgba(79,79,255,1)", marginBottom: "1em" }}>
|
||||
<h1 className={styles.h1}><FontAwesomeIcon icon={faTwitch} size="1x" /> I'm currently live on Twitch! <FontAwesomeIcon icon={faMicrophoneAlt} size="1x" /></h1>
|
||||
<TwitchEmbed id="trick_the_fox" channel="trick_the_fox" theme="dark" autoplay="true" width="100%" withChat={false} />
|
||||
</div>
|
||||
)
|
||||
} else {
|
||||
return ( <span></span> )
|
||||
}
|
||||
import styles from '../styles/components/TwitchPopup.module.css'
|
||||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
|
||||
import { faTwitch } from '@fortawesome/free-brands-svg-icons'
|
||||
import { faMicrophoneAlt } from '@fortawesome/free-solid-svg-icons'
|
||||
import { TwitchEmbed } from 'react-twitch-embed';
|
||||
|
||||
export default function TwitchPopup({ show }) {
|
||||
if(show == true) {
|
||||
return (
|
||||
<div className="card" style={{ backgroundColor: "rgba(79,79,255,1)", marginBottom: "1em" }}>
|
||||
<h1 className={styles.h1}><FontAwesomeIcon icon={faTwitch} size="1x" /> I'm currently live on Twitch! <FontAwesomeIcon icon={faMicrophoneAlt} size="1x" /></h1>
|
||||
<TwitchEmbed id="trick_the_fox" channel="trick_the_fox" theme="dark" autoplay="true" width="100%" withChat={false} />
|
||||
</div>
|
||||
)
|
||||
} else {
|
||||
return ( <span></span> )
|
||||
}
|
||||
}
|
||||
@ -1,2 +1,2 @@
|
||||
/// <reference types="next" />
|
||||
/// <reference types="next/types/global" />
|
||||
/// <reference types="next" />
|
||||
/// <reference types="next/types/global" />
|
||||
|
||||
@ -1,14 +1,14 @@
|
||||
module.exports = {
|
||||
webpack: (config, options) => {
|
||||
config.module.rules.push(
|
||||
{
|
||||
test: /\.(jpe?g|png|jpg|gif|woff|woff2|eot|ttf|svg)(\?[a-z0-9=.]+)?$/,
|
||||
loader: 'url-loader?limit=100000'
|
||||
}
|
||||
)
|
||||
return config
|
||||
},
|
||||
env: {
|
||||
AIRTABLE: "keygkEz5Bp89HsIJt",
|
||||
},
|
||||
module.exports = {
|
||||
webpack: (config, options) => {
|
||||
config.module.rules.push(
|
||||
{
|
||||
test: /\.(jpe?g|png|jpg|gif|woff|woff2|eot|ttf|svg)(\?[a-z0-9=.]+)?$/,
|
||||
loader: 'url-loader?limit=100000'
|
||||
}
|
||||
)
|
||||
return config
|
||||
},
|
||||
env: {
|
||||
AIRTABLE: "keygkEz5Bp89HsIJt",
|
||||
},
|
||||
}
|
||||
@ -1,29 +1,29 @@
|
||||
{
|
||||
"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",
|
||||
"@types/react": "^17.0.11",
|
||||
"airtable": "^0.11.1",
|
||||
"googleapis": "^78.0.0",
|
||||
"next": "10.x",
|
||||
"next-images": "^1.8.1",
|
||||
"react": "17.x",
|
||||
"react-dom": "17.x",
|
||||
"react-twitch-embed": "^2.1.0",
|
||||
"typescript": "^4.3.4"
|
||||
},
|
||||
"devDependencies": {
|
||||
"url-loader": "^4.1.1"
|
||||
}
|
||||
}
|
||||
{
|
||||
"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",
|
||||
"@types/react": "^17.0.11",
|
||||
"airtable": "^0.11.1",
|
||||
"googleapis": "^78.0.0",
|
||||
"next": "10.x",
|
||||
"next-images": "^1.8.1",
|
||||
"react": "17.x",
|
||||
"react-dom": "17.x",
|
||||
"react-twitch-embed": "^2.1.0",
|
||||
"typescript": "^4.3.4"
|
||||
},
|
||||
"devDependencies": {
|
||||
"url-loader": "^4.1.1"
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,19 +1,19 @@
|
||||
import Head from 'next/head'
|
||||
import styles from '../styles/Gallery.module.css'
|
||||
import Header from '../components/header';
|
||||
import Footer from '../components/footer';
|
||||
|
||||
export default function Custom404() {
|
||||
return (
|
||||
<div style={{ width: "100vw", height: "100vh" }}>
|
||||
<Header />
|
||||
|
||||
<section style={{ color: "white", display: "flex", height: "50vh", margin: "unset", justifyContent: "center", alignItems: "center", gap: "2em" }}>
|
||||
<h1>404</h1> <h4>|</h4> <h1>Page Not Found</h1>
|
||||
</section>
|
||||
|
||||
<Footer />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
import Head from 'next/head'
|
||||
import styles from '../styles/Gallery.module.css'
|
||||
import Header from '../components/header';
|
||||
import Footer from '../components/footer';
|
||||
|
||||
export default function Custom404() {
|
||||
return (
|
||||
<div style={{ width: "100vw", height: "100vh" }}>
|
||||
<Header />
|
||||
|
||||
<section style={{ color: "white", display: "flex", height: "50vh", margin: "unset", justifyContent: "center", alignItems: "center", gap: "2em" }}>
|
||||
<h1>404</h1> <h4>|</h4> <h1>Page Not Found</h1>
|
||||
</section>
|
||||
|
||||
<Footer />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@ -1,18 +1,18 @@
|
||||
import Head from 'next/head'
|
||||
import styles from '../styles/Gallery.module.css'
|
||||
import Header from '../components/header';
|
||||
import Footer from '../components/footer';
|
||||
|
||||
export default function Custom500() {
|
||||
return (
|
||||
<div style={{ width: "100vw", height: "100vh" }}>
|
||||
<Header />
|
||||
|
||||
<section style={{ color: "white", display: "flex", height: "50vh", margin: "unset", justifyContent: "center", alignItems: "center", gap: "2em" }}>
|
||||
<h1>500</h1> <h4>|</h4> <h1>Internal Server Error</h1>
|
||||
</section>
|
||||
|
||||
<Footer />
|
||||
</div>
|
||||
)
|
||||
import Head from 'next/head'
|
||||
import styles from '../styles/Gallery.module.css'
|
||||
import Header from '../components/header';
|
||||
import Footer from '../components/footer';
|
||||
|
||||
export default function Custom500() {
|
||||
return (
|
||||
<div style={{ width: "100vw", height: "100vh" }}>
|
||||
<Header />
|
||||
|
||||
<section style={{ color: "white", display: "flex", height: "50vh", margin: "unset", justifyContent: "center", alignItems: "center", gap: "2em" }}>
|
||||
<h1>500</h1> <h4>|</h4> <h1>Internal Server Error</h1>
|
||||
</section>
|
||||
|
||||
<Footer />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@ -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
|
||||
|
||||
@ -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' })
|
||||
}
|
||||
|
||||
@ -1,128 +1,128 @@
|
||||
import Head from 'next/head'
|
||||
import styles from '../styles/Commissions.module.css'
|
||||
import Header from '../components/header';
|
||||
import Footer from '../components/footer';
|
||||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
|
||||
import { faPoundSign } from '@fortawesome/free-solid-svg-icons'
|
||||
|
||||
export default function Commissions() {
|
||||
return (
|
||||
<div className="page">
|
||||
<Head>
|
||||
<title>Trick - Commissions</title>
|
||||
|
||||
<meta property="og:type" content="website" />
|
||||
<meta property="og:url" content="https://trickthefox.com/commissions" />
|
||||
<meta property="og:title" content="Trick - Commissions" />
|
||||
<meta property="og:description" content="Trick's commission sheet!" />
|
||||
<meta property="og:image" content="/trick.jpg" />
|
||||
|
||||
<meta property="twitter:card" content="summary_large_image" />
|
||||
<meta property="twitter:url" content="https://trickthefox.com/commissions" />
|
||||
<meta property="twitter:title" content="Trick - Commissions" />
|
||||
<meta property="twitter:description" content="Trick's commission sheet!" />
|
||||
<meta property="twitter:image" content="/trick.jpg" />
|
||||
|
||||
<meta name="theme-color" content="#4f4fff" />
|
||||
</Head>
|
||||
|
||||
<Header />
|
||||
|
||||
<div className="container">
|
||||
<article className="content">
|
||||
|
||||
<div className="card">
|
||||
<h1 className="h-unset">Commission sheet</h1>
|
||||
<h4 className="h-unset"><a href="/contact" className="link">Contact me</a> for more information.</h4>
|
||||
|
||||
<hr />
|
||||
|
||||
<section className={styles.row}>
|
||||
<div>
|
||||
<h2>Headshot Icon</h2>
|
||||
<p><FontAwesomeIcon icon={faPoundSign} size="1x" /> 15+</p>
|
||||
</div>
|
||||
|
||||
<div className={styles.gapped}>
|
||||
<div>
|
||||
<img src="/vulpirius_foxx_headshot.png"></img>
|
||||
</div>
|
||||
<div>
|
||||
<img src="/trickdounut.png"></img>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr />
|
||||
|
||||
<section className={styles.row}>
|
||||
<div>
|
||||
<h2>Full body artworks</h2>
|
||||
<p><FontAwesomeIcon icon={faPoundSign} size="1x" /> 25+ for one peep</p>
|
||||
</div>
|
||||
|
||||
<div className={styles.gapped}>
|
||||
<div>
|
||||
<img src="/!wow.png"></img>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr />
|
||||
|
||||
<section className={styles.row}>
|
||||
<div>
|
||||
<h2>Ref sheets</h2>
|
||||
<p><FontAwesomeIcon icon={faPoundSign} size="1x" /> 30+ extras</p>
|
||||
</div>
|
||||
|
||||
<div className={styles.gapped}>
|
||||
<div>
|
||||
<img src="/trick_ref_3.png"></img>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr />
|
||||
|
||||
<section className={styles.row}>
|
||||
<div>
|
||||
<h2>NSFW Commissions</h2>
|
||||
<p><FontAwesomeIcon icon={faPoundSign} size="1x" /> 30+ per peep</p>
|
||||
</div>
|
||||
|
||||
<div className={styles.gapped}>
|
||||
<div>
|
||||
<img src="/owwwo.png"></img>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr />
|
||||
|
||||
<section className={styles.row}>
|
||||
<div>
|
||||
<h2>Large Group Artworks</h2>
|
||||
<p>
|
||||
<FontAwesomeIcon icon={faPoundSign} size="1x" /> 100+ for 8 peeps <br />
|
||||
<FontAwesomeIcon icon={faPoundSign} size="1x" /> 15+ per extra peep
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className={styles.gapped}>
|
||||
<div>
|
||||
<img src="/puppsden.png"></img>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
</article>
|
||||
</div>
|
||||
|
||||
<Footer />
|
||||
|
||||
|
||||
</div>
|
||||
)
|
||||
}
|
||||
import Head from 'next/head'
|
||||
import styles from '../styles/Commissions.module.css'
|
||||
import Header from '../components/header';
|
||||
import Footer from '../components/footer';
|
||||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
|
||||
import { faPoundSign } from '@fortawesome/free-solid-svg-icons'
|
||||
|
||||
export default function Commissions() {
|
||||
return (
|
||||
<div className="page">
|
||||
<Head>
|
||||
<title>Trick - Commissions</title>
|
||||
|
||||
<meta property="og:type" content="website" />
|
||||
<meta property="og:url" content="https://trickthefox.com/commissions" />
|
||||
<meta property="og:title" content="Trick - Commissions" />
|
||||
<meta property="og:description" content="Trick's commission sheet!" />
|
||||
<meta property="og:image" content="/trick.jpg" />
|
||||
|
||||
<meta property="twitter:card" content="summary_large_image" />
|
||||
<meta property="twitter:url" content="https://trickthefox.com/commissions" />
|
||||
<meta property="twitter:title" content="Trick - Commissions" />
|
||||
<meta property="twitter:description" content="Trick's commission sheet!" />
|
||||
<meta property="twitter:image" content="/trick.jpg" />
|
||||
|
||||
<meta name="theme-color" content="#4f4fff" />
|
||||
</Head>
|
||||
|
||||
<Header />
|
||||
|
||||
<div className="container">
|
||||
<article className="content">
|
||||
|
||||
<div className="card">
|
||||
<h1 className="h-unset">Commission sheet</h1>
|
||||
<h4 className="h-unset"><a href="/contact" className="link">Contact me</a> for more information.</h4>
|
||||
|
||||
<hr />
|
||||
|
||||
<section className={styles.row}>
|
||||
<div>
|
||||
<h2>Headshot Icon</h2>
|
||||
<p><FontAwesomeIcon icon={faPoundSign} size="1x" /> 15+</p>
|
||||
</div>
|
||||
|
||||
<div className={styles.gapped}>
|
||||
<div>
|
||||
<img src="/vulpirius_foxx_headshot.png"></img>
|
||||
</div>
|
||||
<div>
|
||||
<img src="/trickdounut.png"></img>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr />
|
||||
|
||||
<section className={styles.row}>
|
||||
<div>
|
||||
<h2>Full body artworks</h2>
|
||||
<p><FontAwesomeIcon icon={faPoundSign} size="1x" /> 25+ for one peep</p>
|
||||
</div>
|
||||
|
||||
<div className={styles.gapped}>
|
||||
<div>
|
||||
<img src="/!wow.png"></img>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr />
|
||||
|
||||
<section className={styles.row}>
|
||||
<div>
|
||||
<h2>Ref sheets</h2>
|
||||
<p><FontAwesomeIcon icon={faPoundSign} size="1x" /> 30+ extras</p>
|
||||
</div>
|
||||
|
||||
<div className={styles.gapped}>
|
||||
<div>
|
||||
<img src="/trick_ref_3.png"></img>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr />
|
||||
|
||||
<section className={styles.row}>
|
||||
<div>
|
||||
<h2>NSFW Commissions</h2>
|
||||
<p><FontAwesomeIcon icon={faPoundSign} size="1x" /> 30+ per peep</p>
|
||||
</div>
|
||||
|
||||
<div className={styles.gapped}>
|
||||
<div>
|
||||
<img src="/owwwo.png"></img>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr />
|
||||
|
||||
<section className={styles.row}>
|
||||
<div>
|
||||
<h2>Large Group Artworks</h2>
|
||||
<p>
|
||||
<FontAwesomeIcon icon={faPoundSign} size="1x" /> 100+ for 8 peeps <br />
|
||||
<FontAwesomeIcon icon={faPoundSign} size="1x" /> 15+ per extra peep
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className={styles.gapped}>
|
||||
<div>
|
||||
<img src="/puppsden.png"></img>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
</article>
|
||||
</div>
|
||||
|
||||
<Footer />
|
||||
|
||||
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@ -1,48 +1,48 @@
|
||||
import Head from 'next/head'
|
||||
import styles from '../styles/Contact.module.css'
|
||||
import Header from '../components/header';
|
||||
import Footer from '../components/footer';
|
||||
import Socials from '../components/socials';
|
||||
|
||||
export default function Contact() {
|
||||
return (
|
||||
<div className="page">
|
||||
<Head>
|
||||
<title>Trick - Contact</title>
|
||||
|
||||
<meta property="og:type" content="website" />
|
||||
<meta property="og:url" content="https://trickthefox.com/contact" />
|
||||
<meta property="og:title" content="Trick - Contact" />
|
||||
<meta property="og:description" content="Contact me via one of my social medias or by email." />
|
||||
<meta property="og:image" content="/trick.jpg" />
|
||||
|
||||
<meta property="twitter:card" content="summary_large_image" />
|
||||
<meta property="twitter:url" content="https://trickthefox.com/contact" />
|
||||
<meta property="twitter:title" content="Trick - Contact" />
|
||||
<meta property="twitter:description" content="Contact me via one of my social medias or by email." />
|
||||
<meta property="twitter:image" content="/trick.jpg" />
|
||||
|
||||
<meta name="theme-color" content="#4f4fff" />
|
||||
</Head>
|
||||
|
||||
<Header />
|
||||
|
||||
<div className="container">
|
||||
<article className="content">
|
||||
|
||||
<section className="card">
|
||||
<h1 className="h-unset">Contact</h1>
|
||||
<p>You can contact me through one of the methods displayed below, or by emailing me at <a href="mailto:trick@trickthefox.com" className="link">trick@trickthefox.com</a>.</p>
|
||||
</section>
|
||||
|
||||
<Socials />
|
||||
|
||||
</article>
|
||||
</div>
|
||||
|
||||
<Footer />
|
||||
|
||||
|
||||
</div>
|
||||
)
|
||||
}
|
||||
import Head from 'next/head'
|
||||
import styles from '../styles/Contact.module.css'
|
||||
import Header from '../components/header';
|
||||
import Footer from '../components/footer';
|
||||
import Socials from '../components/socials';
|
||||
|
||||
export default function Contact() {
|
||||
return (
|
||||
<div className="page">
|
||||
<Head>
|
||||
<title>Trick - Contact</title>
|
||||
|
||||
<meta property="og:type" content="website" />
|
||||
<meta property="og:url" content="https://trickthefox.com/contact" />
|
||||
<meta property="og:title" content="Trick - Contact" />
|
||||
<meta property="og:description" content="Contact me via one of my social medias or by email." />
|
||||
<meta property="og:image" content="/trick.jpg" />
|
||||
|
||||
<meta property="twitter:card" content="summary_large_image" />
|
||||
<meta property="twitter:url" content="https://trickthefox.com/contact" />
|
||||
<meta property="twitter:title" content="Trick - Contact" />
|
||||
<meta property="twitter:description" content="Contact me via one of my social medias or by email." />
|
||||
<meta property="twitter:image" content="/trick.jpg" />
|
||||
|
||||
<meta name="theme-color" content="#4f4fff" />
|
||||
</Head>
|
||||
|
||||
<Header />
|
||||
|
||||
<div className="container">
|
||||
<article className="content">
|
||||
|
||||
<section className="card">
|
||||
<h1 className="h-unset">Contact</h1>
|
||||
<p>You can contact me through one of the methods displayed below, or by emailing me at <a href="mailto:trick@trickthefox.com" className="link">trick@trickthefox.com</a>.</p>
|
||||
</section>
|
||||
|
||||
<Socials />
|
||||
|
||||
</article>
|
||||
</div>
|
||||
|
||||
<Footer />
|
||||
|
||||
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@ -1,82 +1,82 @@
|
||||
import Head from 'next/head'
|
||||
import styles from '../styles/Gallery.module.css'
|
||||
import Header from '../components/header';
|
||||
import Footer from '../components/footer';
|
||||
|
||||
export default function Gallery({ response }) {
|
||||
let images = [];
|
||||
for(const key in response) {
|
||||
let item = response[key];
|
||||
if(item['fields']['image'] != null) item['fields']['link'] = item['fields']['image'][0]['url'];
|
||||
images.push(item['fields']);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="page">
|
||||
<Head>
|
||||
<title>Trick - Gallery</title>
|
||||
|
||||
<meta property="og:type" content="website" />
|
||||
<meta property="og:url" content="https://trickthefox.com/gallery" />
|
||||
<meta property="og:title" content="Trick - Gallery" />
|
||||
<meta property="og:description" content="Gallery of art I made." />
|
||||
<meta property="og:image" content="/trick.jpg" />
|
||||
|
||||
<meta property="twitter:card" content="summary_large_image" />
|
||||
<meta property="twitter:url" content="https://trickthefox.com/gallery" />
|
||||
<meta property="twitter:title" content="Trick - Gallery" />
|
||||
<meta property="twitter:description" content="Gallery of art I made." />
|
||||
<meta property="twitter:image" content="/trick.jpg" />
|
||||
|
||||
<meta name="theme-color" content="#4f4fff" />
|
||||
</Head>
|
||||
|
||||
<Header />
|
||||
|
||||
<div className="container">
|
||||
<article className="content">
|
||||
|
||||
<section className="card">
|
||||
<h1 className="h-unset">Gallery</h1>
|
||||
|
||||
<div className={styles.gallery}>
|
||||
{images.map((image) => (
|
||||
<div key={image.link.toString()}>
|
||||
<img src={image.link}></img>
|
||||
<div className={styles.overlay}>
|
||||
<h4 style={{ textAlign: "center", margin: "unset" }}>{image.name}</h4>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
</article>
|
||||
</div>
|
||||
|
||||
<Footer />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
async function getGallery() {
|
||||
const req = await fetch("https://api.airtable.com/v0/appQnOyKBnBVQXLUM/Gallery", {
|
||||
method: "GET",
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
"Authorization": "Bearer " + process.env.AIRTABLE,
|
||||
}
|
||||
});
|
||||
|
||||
const data = await req.json();
|
||||
return data['records'];
|
||||
}
|
||||
|
||||
export async function getServerSideProps() {
|
||||
return {
|
||||
props: {
|
||||
response: await getGallery()
|
||||
}
|
||||
}
|
||||
import Head from 'next/head'
|
||||
import styles from '../styles/Gallery.module.css'
|
||||
import Header from '../components/header';
|
||||
import Footer from '../components/footer';
|
||||
|
||||
export default function Gallery({ response }) {
|
||||
let images = [];
|
||||
for(const key in response) {
|
||||
let item = response[key];
|
||||
if(item['fields']['image'] != null) item['fields']['link'] = item['fields']['image'][0]['url'];
|
||||
images.push(item['fields']);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="page">
|
||||
<Head>
|
||||
<title>Trick - Gallery</title>
|
||||
|
||||
<meta property="og:type" content="website" />
|
||||
<meta property="og:url" content="https://trickthefox.com/gallery" />
|
||||
<meta property="og:title" content="Trick - Gallery" />
|
||||
<meta property="og:description" content="Gallery of art I made." />
|
||||
<meta property="og:image" content="/trick.jpg" />
|
||||
|
||||
<meta property="twitter:card" content="summary_large_image" />
|
||||
<meta property="twitter:url" content="https://trickthefox.com/gallery" />
|
||||
<meta property="twitter:title" content="Trick - Gallery" />
|
||||
<meta property="twitter:description" content="Gallery of art I made." />
|
||||
<meta property="twitter:image" content="/trick.jpg" />
|
||||
|
||||
<meta name="theme-color" content="#4f4fff" />
|
||||
</Head>
|
||||
|
||||
<Header />
|
||||
|
||||
<div className="container">
|
||||
<article className="content">
|
||||
|
||||
<section className="card">
|
||||
<h1 className="h-unset">Gallery</h1>
|
||||
|
||||
<div className={styles.gallery}>
|
||||
{images.map((image) => (
|
||||
<div key={image.link.toString()}>
|
||||
<img src={image.link}></img>
|
||||
<div className={styles.overlay}>
|
||||
<h4 style={{ textAlign: "center", margin: "unset" }}>{image.name}</h4>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
</article>
|
||||
</div>
|
||||
|
||||
<Footer />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
async function getGallery() {
|
||||
const req = await fetch("https://api.airtable.com/v0/appQnOyKBnBVQXLUM/Gallery", {
|
||||
method: "GET",
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
"Authorization": "Bearer " + process.env.AIRTABLE,
|
||||
}
|
||||
});
|
||||
|
||||
const data = await req.json();
|
||||
return data['records'];
|
||||
}
|
||||
|
||||
export async function getServerSideProps() {
|
||||
return {
|
||||
props: {
|
||||
response: await getGallery()
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,158 +1,158 @@
|
||||
import Head from 'next/head'
|
||||
import styles from '../styles/Index.module.css'
|
||||
import Header from '../components/header';
|
||||
import Footer from '../components/footer';
|
||||
import Socials from '../components/socials';
|
||||
import TwitchPopup from '../components/twitchpopup';
|
||||
|
||||
const client_id = "edpx4oisrkpnrlx47b7a2p3govy6qm";
|
||||
const client_secret = "dqr2glvdhr7uyn3bf3biu48977rfwo";
|
||||
|
||||
export default function Index({ motto, twitch_online, about }) {
|
||||
return (
|
||||
<div className="page">
|
||||
<Head>
|
||||
<title>Trick - Homepage</title>
|
||||
<meta name="description" content={about.toString()} />
|
||||
|
||||
<meta property="og:type" content="website" />
|
||||
<meta property="og:url" content="https://trickthefox.com/" />
|
||||
<meta property="og:title" content="Trick - Homepage" />
|
||||
<meta property="og:description" content={about.toString()} />
|
||||
<meta property="og:image" content="/trick.jpg" />
|
||||
|
||||
<meta property="twitter:card" content="summary_large_image" />
|
||||
<meta property="twitter:url" content="https://trickthefox.com/" />
|
||||
<meta property="twitter:title" content="Trick - Homepage" />
|
||||
<meta property="twitter:description" content={about.toString()} />
|
||||
<meta property="twitter:image" content="/trick.jpg" />
|
||||
|
||||
<meta name="theme-color" content="#4f4fff" />
|
||||
</Head>
|
||||
|
||||
<Header />
|
||||
|
||||
<div className="container">
|
||||
<article className="content">
|
||||
|
||||
<div>
|
||||
<TwitchPopup show={twitch_online} />
|
||||
|
||||
<section className="card">
|
||||
<div className={styles.avatar}>
|
||||
<div>
|
||||
<img src="/trickwow.png"></img>
|
||||
</div>
|
||||
<div>
|
||||
<h1>Hi, I'm Trick!</h1>
|
||||
<h4>{motto}</h4>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3>About me</h3>
|
||||
<div className="flex">
|
||||
<p>
|
||||
{about}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<Socials />
|
||||
|
||||
</article>
|
||||
</div>
|
||||
|
||||
<Footer />
|
||||
|
||||
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
async function getAboutText() {
|
||||
const req = await fetch("https://api.airtable.com/v0/appQnOyKBnBVQXLUM/Locale", {
|
||||
method: "GET",
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
"Authorization": "Bearer " + process.env.AIRTABLE,
|
||||
}
|
||||
});
|
||||
|
||||
const data = await req.json();
|
||||
for(const key in data['records']) {
|
||||
if(data['records'][key]['fields']['field'] == "about") {
|
||||
return data['records'][key]['fields']['value'];
|
||||
}
|
||||
};
|
||||
|
||||
return "";
|
||||
}
|
||||
|
||||
async function getMottos() {
|
||||
const req = await fetch("https://api.airtable.com/v0/appQnOyKBnBVQXLUM/Mottos", {
|
||||
method: "GET",
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
"Authorization": "Bearer " + process.env.AIRTABLE,
|
||||
}
|
||||
});
|
||||
|
||||
const data = await req.json();
|
||||
|
||||
let mottoArray = [];
|
||||
for(const key in data['records']) {
|
||||
mottoArray.push(data['records'][key]['fields']['motto']);
|
||||
}
|
||||
|
||||
return mottoArray;
|
||||
}
|
||||
|
||||
async function getAccessToken() {
|
||||
const req = await fetch("https://id.twitch.tv/oauth2/token?client_id=" + client_id + "&client_secret=" + client_secret + "&grant_type=client_credentials", {
|
||||
method: "POST",
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
}
|
||||
})
|
||||
const data = await req.json();
|
||||
return data['access_token'];
|
||||
}
|
||||
|
||||
async function getIsUserLive() {
|
||||
const access_token = await getAccessToken();
|
||||
let userId = 268280947; // trick_the_fox;
|
||||
|
||||
const req = await fetch("https://api.twitch.tv/helix/streams?user_id=" + userId, {
|
||||
method: "GET",
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
"Authorization": "Bearer " + access_token,
|
||||
"Client-ID": client_id,
|
||||
}
|
||||
});
|
||||
const data = await req.json();
|
||||
if(data['data'].length > 0) {
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
async function RandomMotto() {
|
||||
const Mottos = await getMottos();
|
||||
const randomNumber = Math.floor(Math.random() * Mottos.length);
|
||||
return Mottos[randomNumber];
|
||||
}
|
||||
|
||||
export async function getServerSideProps() {
|
||||
return {
|
||||
props: {
|
||||
motto: await RandomMotto(),
|
||||
twitch_online: await getIsUserLive(),
|
||||
about: await getAboutText()
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
import Head from 'next/head'
|
||||
import styles from '../styles/Index.module.css'
|
||||
import Header from '../components/header';
|
||||
import Footer from '../components/footer';
|
||||
import Socials from '../components/socials';
|
||||
import TwitchPopup from '../components/twitchpopup';
|
||||
|
||||
const client_id = "edpx4oisrkpnrlx47b7a2p3govy6qm";
|
||||
const client_secret = "dqr2glvdhr7uyn3bf3biu48977rfwo";
|
||||
|
||||
export default function Index({ motto, twitch_online, about }) {
|
||||
return (
|
||||
<div className="page">
|
||||
<Head>
|
||||
<title>Trick - Homepage</title>
|
||||
<meta name="description" content={about.toString()} />
|
||||
|
||||
<meta property="og:type" content="website" />
|
||||
<meta property="og:url" content="https://trickthefox.com/" />
|
||||
<meta property="og:title" content="Trick - Homepage" />
|
||||
<meta property="og:description" content={about.toString()} />
|
||||
<meta property="og:image" content="/trick.jpg" />
|
||||
|
||||
<meta property="twitter:card" content="summary_large_image" />
|
||||
<meta property="twitter:url" content="https://trickthefox.com/" />
|
||||
<meta property="twitter:title" content="Trick - Homepage" />
|
||||
<meta property="twitter:description" content={about.toString()} />
|
||||
<meta property="twitter:image" content="/trick.jpg" />
|
||||
|
||||
<meta name="theme-color" content="#4f4fff" />
|
||||
</Head>
|
||||
|
||||
<Header />
|
||||
|
||||
<div className="container">
|
||||
<article className="content">
|
||||
|
||||
<div>
|
||||
<TwitchPopup show={twitch_online} />
|
||||
|
||||
<section className="card">
|
||||
<div className={styles.avatar}>
|
||||
<div>
|
||||
<img src="/trickwow.png"></img>
|
||||
</div>
|
||||
<div>
|
||||
<h1>Hi, I'm Trick!</h1>
|
||||
<h4>{motto}</h4>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3>About me</h3>
|
||||
<div className="flex">
|
||||
<p>
|
||||
{about}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<Socials />
|
||||
|
||||
</article>
|
||||
</div>
|
||||
|
||||
<Footer />
|
||||
|
||||
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
async function getAboutText() {
|
||||
const req = await fetch("https://api.airtable.com/v0/appQnOyKBnBVQXLUM/Locale", {
|
||||
method: "GET",
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
"Authorization": "Bearer " + process.env.AIRTABLE,
|
||||
}
|
||||
});
|
||||
|
||||
const data = await req.json();
|
||||
for(const key in data['records']) {
|
||||
if(data['records'][key]['fields']['field'] == "about") {
|
||||
return data['records'][key]['fields']['value'];
|
||||
}
|
||||
};
|
||||
|
||||
return "";
|
||||
}
|
||||
|
||||
async function getMottos() {
|
||||
const req = await fetch("https://api.airtable.com/v0/appQnOyKBnBVQXLUM/Mottos", {
|
||||
method: "GET",
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
"Authorization": "Bearer " + process.env.AIRTABLE,
|
||||
}
|
||||
});
|
||||
|
||||
const data = await req.json();
|
||||
|
||||
let mottoArray = [];
|
||||
for(const key in data['records']) {
|
||||
mottoArray.push(data['records'][key]['fields']['motto']);
|
||||
}
|
||||
|
||||
return mottoArray;
|
||||
}
|
||||
|
||||
async function getAccessToken() {
|
||||
const req = await fetch("https://id.twitch.tv/oauth2/token?client_id=" + client_id + "&client_secret=" + client_secret + "&grant_type=client_credentials", {
|
||||
method: "POST",
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
}
|
||||
})
|
||||
const data = await req.json();
|
||||
return data['access_token'];
|
||||
}
|
||||
|
||||
async function getIsUserLive() {
|
||||
const access_token = await getAccessToken();
|
||||
let userId = 268280947; // trick_the_fox;
|
||||
|
||||
const req = await fetch("https://api.twitch.tv/helix/streams?user_id=" + userId, {
|
||||
method: "GET",
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
"Authorization": "Bearer " + access_token,
|
||||
"Client-ID": client_id,
|
||||
}
|
||||
});
|
||||
const data = await req.json();
|
||||
if(data['data'].length > 0) {
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
async function RandomMotto() {
|
||||
const Mottos = await getMottos();
|
||||
const randomNumber = Math.floor(Math.random() * Mottos.length);
|
||||
return Mottos[randomNumber];
|
||||
}
|
||||
|
||||
export async function getServerSideProps() {
|
||||
return {
|
||||
props: {
|
||||
motto: await RandomMotto(),
|
||||
twitch_online: await getIsUserLive(),
|
||||
about: await getAboutText()
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
const soundBtn = document.querySelector('#clickMeow');
|
||||
soundBtn.addEventListener('click',() => {
|
||||
let meow = new Audio("/sounds/meow.mp3");
|
||||
meow.volume = 0.1;
|
||||
meow.play();
|
||||
const soundBtn = document.querySelector('#clickMeow');
|
||||
soundBtn.addEventListener('click',() => {
|
||||
let meow = new Audio("/sounds/meow.mp3");
|
||||
meow.volume = 0.1;
|
||||
meow.play();
|
||||
});
|
||||
@ -1,33 +1,33 @@
|
||||
.row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
flex-direction: row;
|
||||
gap: 2em;
|
||||
}
|
||||
|
||||
.row img {
|
||||
border-radius: 10px;
|
||||
box-shadow: var(--box-shadow);
|
||||
}
|
||||
|
||||
.gapped {
|
||||
width: 500px;
|
||||
display: flex;
|
||||
gap: 1em;
|
||||
}
|
||||
|
||||
.price {
|
||||
background-color: var(--theme-color);
|
||||
padding: 0.3em 0.7em;
|
||||
}
|
||||
|
||||
/* mobile */
|
||||
@media (max-aspect-ratio: 5/6) {
|
||||
.row {
|
||||
flex-direction: column;
|
||||
}
|
||||
.gapped {
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
}
|
||||
.row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
flex-direction: row;
|
||||
gap: 2em;
|
||||
}
|
||||
|
||||
.row img {
|
||||
border-radius: 10px;
|
||||
box-shadow: var(--box-shadow);
|
||||
}
|
||||
|
||||
.gapped {
|
||||
width: 500px;
|
||||
display: flex;
|
||||
gap: 1em;
|
||||
}
|
||||
|
||||
.price {
|
||||
background-color: var(--theme-color);
|
||||
padding: 0.3em 0.7em;
|
||||
}
|
||||
|
||||
/* mobile */
|
||||
@media (max-aspect-ratio: 5/6) {
|
||||
.row {
|
||||
flex-direction: column;
|
||||
}
|
||||
.gapped {
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
@ -1,50 +1,50 @@
|
||||
.gallery {
|
||||
column-count: 4;
|
||||
column-gap: 1em;
|
||||
}
|
||||
|
||||
.gallery > div {
|
||||
margin-bottom: 1em;
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.gallery > div > img {
|
||||
margin-bottom: -5px;
|
||||
}
|
||||
|
||||
.overlay {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
opacity: 0;
|
||||
transition: .5s ease;
|
||||
background-color: rgba(0, 0, 0, 0.8);
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.gallery > div:hover .overlay {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* mobile */
|
||||
@media (max-aspect-ratio: 1/1) {
|
||||
.gallery {
|
||||
column-count: 2;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-aspect-ratio: 5/7) {
|
||||
.gallery {
|
||||
column-count: 1;
|
||||
}
|
||||
.gallery {
|
||||
column-count: 4;
|
||||
column-gap: 1em;
|
||||
}
|
||||
|
||||
.gallery > div {
|
||||
margin-bottom: 1em;
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.gallery > div > img {
|
||||
margin-bottom: -5px;
|
||||
}
|
||||
|
||||
.overlay {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
opacity: 0;
|
||||
transition: .5s ease;
|
||||
background-color: rgba(0, 0, 0, 0.8);
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.gallery > div:hover .overlay {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* mobile */
|
||||
@media (max-aspect-ratio: 1/1) {
|
||||
.gallery {
|
||||
column-count: 2;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-aspect-ratio: 5/7) {
|
||||
.gallery {
|
||||
column-count: 1;
|
||||
}
|
||||
}
|
||||
@ -1,59 +1,59 @@
|
||||
.avatar {
|
||||
display: flex;
|
||||
gap: 2em;
|
||||
}
|
||||
|
||||
.avatar div:last-child {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
gap: 0.5em;
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
.avatar div:last-child > * {
|
||||
margin: unset;
|
||||
}
|
||||
|
||||
.avatar h1 {
|
||||
font-size: 2em;
|
||||
}
|
||||
|
||||
.avatar h4 {
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.avatar > div:first-child {
|
||||
min-width: 100px;
|
||||
max-width: 200px;
|
||||
transition-duration: 0.3s;
|
||||
}
|
||||
|
||||
.avatar > div:first-child > img {
|
||||
box-shadow: var(--box-shadow);
|
||||
border-radius: 100%;
|
||||
}
|
||||
|
||||
.avatar > div:first-child:hover {
|
||||
transition-duration: 0.3s;
|
||||
transform: scale(1.1) rotate(-20deg);
|
||||
}
|
||||
|
||||
|
||||
/* mobile */
|
||||
@media (max-aspect-ratio: 4/5) {
|
||||
.avatar {
|
||||
flex-direction: column;
|
||||
height: unset;
|
||||
text-align: center;
|
||||
gap: unset;
|
||||
}
|
||||
|
||||
.avatar > div:first-child {
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.avatar h1 {
|
||||
font-size: 1.5em;
|
||||
}
|
||||
.avatar {
|
||||
display: flex;
|
||||
gap: 2em;
|
||||
}
|
||||
|
||||
.avatar div:last-child {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
gap: 0.5em;
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
.avatar div:last-child > * {
|
||||
margin: unset;
|
||||
}
|
||||
|
||||
.avatar h1 {
|
||||
font-size: 2em;
|
||||
}
|
||||
|
||||
.avatar h4 {
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.avatar > div:first-child {
|
||||
min-width: 100px;
|
||||
max-width: 200px;
|
||||
transition-duration: 0.3s;
|
||||
}
|
||||
|
||||
.avatar > div:first-child > img {
|
||||
box-shadow: var(--box-shadow);
|
||||
border-radius: 100%;
|
||||
}
|
||||
|
||||
.avatar > div:first-child:hover {
|
||||
transition-duration: 0.3s;
|
||||
transform: scale(1.1) rotate(-20deg);
|
||||
}
|
||||
|
||||
|
||||
/* mobile */
|
||||
@media (max-aspect-ratio: 4/5) {
|
||||
.avatar {
|
||||
flex-direction: column;
|
||||
height: unset;
|
||||
text-align: center;
|
||||
gap: unset;
|
||||
}
|
||||
|
||||
.avatar > div:first-child {
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.avatar h1 {
|
||||
font-size: 1.5em;
|
||||
}
|
||||
}
|
||||
@ -1,4 +1,4 @@
|
||||
.footer {
|
||||
text-align: center;
|
||||
color: white;
|
||||
.footer {
|
||||
text-align: center;
|
||||
color: white;
|
||||
}
|
||||
@ -1,90 +1,90 @@
|
||||
.menu {
|
||||
box-shadow: 2px 2px 10px rgba(0,0,0,0.2);
|
||||
background: #25262C;
|
||||
color: white;
|
||||
padding: 1em 2em;
|
||||
}
|
||||
|
||||
.menu > div {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.menu .items {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.menu a {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0.3em 1.3em;
|
||||
border-radius: 5px;
|
||||
transition-duration: 0.2s;
|
||||
}
|
||||
|
||||
.menu .items a:hover {
|
||||
transition-duration: 0.2s;
|
||||
background-color: rgba(79,79,255,1);
|
||||
}
|
||||
|
||||
.menu .title > img {
|
||||
height: 3em;
|
||||
animation-name: idle-img;
|
||||
animation-duration: 4s;
|
||||
animation-iteration-count: infinite;
|
||||
animation-timing-function: ease-in-out;
|
||||
}
|
||||
|
||||
.menu .title {
|
||||
margin: -20px 0;
|
||||
gap: 5px;
|
||||
font-size: 0.8em;
|
||||
}
|
||||
|
||||
@keyframes idle-img {
|
||||
0% {
|
||||
margin-top: -10px;
|
||||
}
|
||||
50% {
|
||||
margin-top: 10px;
|
||||
}
|
||||
100% {
|
||||
margin-top: -10px;
|
||||
}
|
||||
}
|
||||
|
||||
.colorfulbar {
|
||||
box-shadow: -2px -2px 10px rgba(0,0,0,0.2);
|
||||
background: linear-gradient(to left, rgba(255,85,200,1) 0%, rgba(79,79,255,1) 100%, rgba(0,212,255,1) 100%);
|
||||
background-size: 200% 100%;
|
||||
height: 8px;
|
||||
animation-name: colorbar-anim;
|
||||
animation-duration: 5s;
|
||||
animation-iteration-count: infinite;
|
||||
animation-timing-function: ease-in-out;
|
||||
}
|
||||
|
||||
@keyframes colorbar-anim {
|
||||
0% {
|
||||
background-position: 0%;
|
||||
}
|
||||
50% {
|
||||
background-position: 100%;
|
||||
}
|
||||
100% {
|
||||
background-position: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* mobile */
|
||||
@media(max-aspect-ratio: 4/3) {
|
||||
.menu > div {
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.menu {
|
||||
padding: 0.5em;
|
||||
}
|
||||
.menu {
|
||||
box-shadow: 2px 2px 10px rgba(0,0,0,0.2);
|
||||
background: #25262C;
|
||||
color: white;
|
||||
padding: 1em 2em;
|
||||
}
|
||||
|
||||
.menu > div {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.menu .items {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.menu a {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0.3em 1.3em;
|
||||
border-radius: 5px;
|
||||
transition-duration: 0.2s;
|
||||
}
|
||||
|
||||
.menu .items a:hover {
|
||||
transition-duration: 0.2s;
|
||||
background-color: rgba(79,79,255,1);
|
||||
}
|
||||
|
||||
.menu .title > img {
|
||||
height: 3em;
|
||||
animation-name: idle-img;
|
||||
animation-duration: 4s;
|
||||
animation-iteration-count: infinite;
|
||||
animation-timing-function: ease-in-out;
|
||||
}
|
||||
|
||||
.menu .title {
|
||||
margin: -20px 0;
|
||||
gap: 5px;
|
||||
font-size: 0.8em;
|
||||
}
|
||||
|
||||
@keyframes idle-img {
|
||||
0% {
|
||||
margin-top: -10px;
|
||||
}
|
||||
50% {
|
||||
margin-top: 10px;
|
||||
}
|
||||
100% {
|
||||
margin-top: -10px;
|
||||
}
|
||||
}
|
||||
|
||||
.colorfulbar {
|
||||
box-shadow: -2px -2px 10px rgba(0,0,0,0.2);
|
||||
background: linear-gradient(to left, rgba(255,85,200,1) 0%, rgba(79,79,255,1) 100%, rgba(0,212,255,1) 100%);
|
||||
background-size: 200% 100%;
|
||||
height: 8px;
|
||||
animation-name: colorbar-anim;
|
||||
animation-duration: 5s;
|
||||
animation-iteration-count: infinite;
|
||||
animation-timing-function: ease-in-out;
|
||||
}
|
||||
|
||||
@keyframes colorbar-anim {
|
||||
0% {
|
||||
background-position: 0%;
|
||||
}
|
||||
50% {
|
||||
background-position: 100%;
|
||||
}
|
||||
100% {
|
||||
background-position: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* mobile */
|
||||
@media(max-aspect-ratio: 4/3) {
|
||||
.menu > div {
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.menu {
|
||||
padding: 0.5em;
|
||||
}
|
||||
}
|
||||
@ -1,33 +1,33 @@
|
||||
.buttons {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1em;
|
||||
}
|
||||
|
||||
.buttons > a {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 1em;
|
||||
border-radius: 10px;
|
||||
padding: 0.4em 2em;
|
||||
font-size: 1.3em;
|
||||
box-shadow: var(--box-shadow);
|
||||
background-color: var(--theme-color);
|
||||
color: white;
|
||||
transition-duration: 0.1s;
|
||||
font-family: 'Dela Gothic One', cursive;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.buttons > a:hover {
|
||||
transform: scale(0.95);
|
||||
transition-duration: 0.1s;
|
||||
}
|
||||
|
||||
/* mobile */
|
||||
/* @media(max-aspect-ratio: 4/3) {
|
||||
.buttons > a {
|
||||
width: 100%;
|
||||
}
|
||||
.buttons {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1em;
|
||||
}
|
||||
|
||||
.buttons > a {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 1em;
|
||||
border-radius: 10px;
|
||||
padding: 0.4em 2em;
|
||||
font-size: 1.3em;
|
||||
box-shadow: var(--box-shadow);
|
||||
background-color: var(--theme-color);
|
||||
color: white;
|
||||
transition-duration: 0.1s;
|
||||
font-family: 'Dela Gothic One', cursive;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.buttons > a:hover {
|
||||
transform: scale(0.95);
|
||||
transition-duration: 0.1s;
|
||||
}
|
||||
|
||||
/* mobile */
|
||||
/* @media(max-aspect-ratio: 4/3) {
|
||||
.buttons > a {
|
||||
width: 100%;
|
||||
}
|
||||
} */
|
||||
@ -1,3 +1,3 @@
|
||||
.h1 {
|
||||
text-align: center;
|
||||
.h1 {
|
||||
text-align: center;
|
||||
}
|
||||
@ -1,111 +1,111 @@
|
||||
@import url('https://fonts.googleapis.com/css2?family=Dela+Gothic+One&display=swap');
|
||||
|
||||
html,
|
||||
body {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
|
||||
Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
|
||||
font-size: 1.1em;
|
||||
background-color: #1B1C22;
|
||||
}
|
||||
|
||||
:root {
|
||||
--box-shadow: 2px 2px 10px rgba(0,0,0,0.2);
|
||||
--theme-color: rgba(79,79,255,1);
|
||||
}
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
h1, h2, h3 {
|
||||
font-family: 'Dela Gothic One', cursive;
|
||||
}
|
||||
|
||||
.link:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
hr {
|
||||
width: 100%;
|
||||
margin: 1em 0;
|
||||
}
|
||||
|
||||
.h-unset {
|
||||
margin: unset;
|
||||
}
|
||||
|
||||
|
||||
/* page structure */
|
||||
.page {
|
||||
min-height: 100vh;
|
||||
background-color: #1B1C22;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.container {
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.content {
|
||||
padding: 2em 0;
|
||||
gap: 2em;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.flex {
|
||||
display: flex;
|
||||
gap: 1em;
|
||||
}
|
||||
|
||||
|
||||
/* page elements */
|
||||
.card {
|
||||
border-radius: 10px;
|
||||
box-shadow: var(--box-shadow);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1em;
|
||||
padding: 2em;
|
||||
color: white;
|
||||
background-color: #25262C;
|
||||
width: 100%;
|
||||
flex-grow: 3;
|
||||
}
|
||||
|
||||
|
||||
/* mobile */
|
||||
@media(max-aspect-ratio: 5/4) {
|
||||
.content {
|
||||
flex-direction: column;
|
||||
}
|
||||
.container {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@media(max-aspect-ratio: 3/4) {
|
||||
.card {
|
||||
padding: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
@media(min-width: 1200px) {
|
||||
.container {
|
||||
max-width: 1200px;
|
||||
}
|
||||
@import url('https://fonts.googleapis.com/css2?family=Dela+Gothic+One&display=swap');
|
||||
|
||||
html,
|
||||
body {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
|
||||
Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
|
||||
font-size: 1.1em;
|
||||
background-color: #1B1C22;
|
||||
}
|
||||
|
||||
:root {
|
||||
--box-shadow: 2px 2px 10px rgba(0,0,0,0.2);
|
||||
--theme-color: rgba(79,79,255,1);
|
||||
}
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
h1, h2, h3 {
|
||||
font-family: 'Dela Gothic One', cursive;
|
||||
}
|
||||
|
||||
.link:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
hr {
|
||||
width: 100%;
|
||||
margin: 1em 0;
|
||||
}
|
||||
|
||||
.h-unset {
|
||||
margin: unset;
|
||||
}
|
||||
|
||||
|
||||
/* page structure */
|
||||
.page {
|
||||
min-height: 100vh;
|
||||
background-color: #1B1C22;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.container {
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.content {
|
||||
padding: 2em 0;
|
||||
gap: 2em;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.flex {
|
||||
display: flex;
|
||||
gap: 1em;
|
||||
}
|
||||
|
||||
|
||||
/* page elements */
|
||||
.card {
|
||||
border-radius: 10px;
|
||||
box-shadow: var(--box-shadow);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1em;
|
||||
padding: 2em;
|
||||
color: white;
|
||||
background-color: #25262C;
|
||||
width: 100%;
|
||||
flex-grow: 3;
|
||||
}
|
||||
|
||||
|
||||
/* mobile */
|
||||
@media(max-aspect-ratio: 5/4) {
|
||||
.content {
|
||||
flex-direction: column;
|
||||
}
|
||||
.container {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@media(max-aspect-ratio: 3/4) {
|
||||
.card {
|
||||
padding: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
@media(min-width: 1200px) {
|
||||
.container {
|
||||
max-width: 1200px;
|
||||
}
|
||||
}
|
||||
Loading…
Reference in new issue