HexFlagGen
This commit is contained in:
MeowcaTheoRange
parent
3908efb2df
commit
0af761772f
16 changed files with 323 additions and 4262 deletions
|
|
@ -1,3 +0,0 @@
|
|||
{
|
||||
"extends": "next/core-web-vitals"
|
||||
}
|
||||
36
.gitignore
vendored
36
.gitignore
vendored
|
|
@ -1,36 +0,0 @@
|
|||
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
|
||||
|
||||
# dependencies
|
||||
/node_modules
|
||||
/.pnp
|
||||
.pnp.js
|
||||
.yarn/install-state.gz
|
||||
|
||||
# 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
|
||||
|
||||
# vercel
|
||||
.vercel
|
||||
|
||||
# typescript
|
||||
*.tsbuildinfo
|
||||
next-env.d.ts
|
||||
36
README.md
36
README.md
|
|
@ -1,36 +0,0 @@
|
|||
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
|
||||
# or
|
||||
pnpm dev
|
||||
# or
|
||||
bun dev
|
||||
```
|
||||
|
||||
Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
|
||||
|
||||
You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
|
||||
|
||||
This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
|
||||
|
||||
## 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/new?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.
|
||||
57
index.html
Normal file
57
index.html
Normal file
|
|
@ -0,0 +1,57 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<link rel="stylesheet" href="styles/globals.css" />
|
||||
</head>
|
||||
<body>
|
||||
<section>
|
||||
<h1>HexFlagGen</h1>
|
||||
<p>by <a href="https://abtmtr.link/">MeowcaTheoRange</a></p>
|
||||
<p>
|
||||
Welcome, here you can make a flag out of the hexadecimal bytes of your
|
||||
choice!
|
||||
</p>
|
||||
</section>
|
||||
<section>
|
||||
<label for="data">Generator string</label><br />
|
||||
<input
|
||||
type="text"
|
||||
id="data"
|
||||
value="FF400000C0FF8000FF80FF00FF"
|
||||
style="width: 100%"
|
||||
/><br />
|
||||
<button id="generateButton">Generate!</button>
|
||||
</section>
|
||||
<section>
|
||||
<label for="size_width">Size</label><br />
|
||||
<input
|
||||
type="number"
|
||||
id="size_width"
|
||||
style="width: 8ch"
|
||||
min="0"
|
||||
max="3000"
|
||||
value="300"
|
||||
/>
|
||||
<label for="size_width">Width (px)</label><br />
|
||||
<input
|
||||
type="number"
|
||||
id="size_height"
|
||||
style="width: 8ch"
|
||||
min="0"
|
||||
max="3000"
|
||||
value="200"
|
||||
/>
|
||||
<label for="size_height">Height (px)</label><br />
|
||||
<label for="flag_type">Flag type</label><br />
|
||||
<select id="flag_type">
|
||||
<option value="horiz" selected>Horizontal</option>
|
||||
<option value="vert">Vertical</option>
|
||||
</select>
|
||||
</section>
|
||||
<section>
|
||||
<p>Hex: <span class="monospace" id="hexdisplay">...</span></p>
|
||||
<canvas id="canvas" width="300" height="200"></canvas>
|
||||
</section>
|
||||
<script src="scripts/index.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,4 +0,0 @@
|
|||
/** @type {import('next').NextConfig} */
|
||||
const nextConfig = {}
|
||||
|
||||
module.exports = nextConfig
|
||||
3679
package-lock.json
generated
3679
package-lock.json
generated
File diff suppressed because it is too large
Load diff
24
package.json
24
package.json
|
|
@ -1,24 +0,0 @@
|
|||
{
|
||||
"name": "hex-flag-gen",
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"dev": "next dev",
|
||||
"build": "next build",
|
||||
"start": "next start",
|
||||
"lint": "next lint"
|
||||
},
|
||||
"dependencies": {
|
||||
"react": "^18",
|
||||
"react-dom": "^18",
|
||||
"next": "14.0.3"
|
||||
},
|
||||
"devDependencies": {
|
||||
"typescript": "^5",
|
||||
"@types/node": "^20",
|
||||
"@types/react": "^18",
|
||||
"@types/react-dom": "^18",
|
||||
"eslint": "^8",
|
||||
"eslint-config-next": "14.0.3"
|
||||
}
|
||||
}
|
||||
115
scripts/index.js
Normal file
115
scripts/index.js
Normal file
|
|
@ -0,0 +1,115 @@
|
|||
const canvas = document.getElementById("canvas");
|
||||
const data = document.getElementById("data");
|
||||
const generateButton = document.getElementById("generateButton");
|
||||
const hexdisplay = document.getElementById("hexdisplay");
|
||||
|
||||
const size_width = document.getElementById("size_width");
|
||||
const size_height = document.getElementById("size_height");
|
||||
const flag_type = document.getElementById("flag_type");
|
||||
|
||||
const root = document.querySelector(":root");
|
||||
|
||||
const ctx = canvas.getContext("2d");
|
||||
|
||||
function getData() {
|
||||
data.value = data.value.toUpperCase().replace(/[^0-9A-F]*/g, "");
|
||||
|
||||
var hexValue = data.value.match(/.{1,2}/g).map((x) => x.padStart(2, "0"));
|
||||
|
||||
hexdisplay.innerHTML = hexValue.join(" ");
|
||||
|
||||
createFlag(
|
||||
hexValue.join("").match(/.{1,6}/g),
|
||||
size_width.value,
|
||||
size_height.value,
|
||||
flag_type.value
|
||||
);
|
||||
// var ac = averageColors(hexValue);
|
||||
// console.log(ac);
|
||||
// root.style.setProperty(
|
||||
// "--background-color",
|
||||
// arrayToColor(darkenColor(ac, 70))
|
||||
// );
|
||||
// root.style.setProperty("--color", arrayToColor(lightenColor(ac, 70)));
|
||||
// root.style.setProperty("--accent-color", arrayToColor(ac));
|
||||
// root.style.setProperty(
|
||||
// "--accent-color-fg",
|
||||
// arrayToColor(lightenColor(ac, 90))
|
||||
// );
|
||||
}
|
||||
generateButton.addEventListener("click", getData);
|
||||
|
||||
function averageColors(hex) {
|
||||
var averageSet = [[], [], []];
|
||||
hex.forEach((number, index) => {
|
||||
averageSet[index % 3].push(parseInt(number, 16));
|
||||
});
|
||||
return averageSet.map((array) =>
|
||||
Math.floor(array.reduce((a, b) => a + b) / array.length)
|
||||
);
|
||||
}
|
||||
|
||||
function createFlag(hex, w, h, type) {
|
||||
canvas.width = w;
|
||||
canvas.height = h;
|
||||
|
||||
// Initialize stuff
|
||||
|
||||
var width = ctx.canvas.width;
|
||||
var height = ctx.canvas.height;
|
||||
var textHeight = 24;
|
||||
ctx.font = `${textHeight}px "Lexend Deca"`;
|
||||
|
||||
ctx.clearRect(0, 0, width, height);
|
||||
|
||||
console.log(hex);
|
||||
|
||||
var hexColors = [];
|
||||
var excessHex = "";
|
||||
|
||||
hex.forEach((compound) => {
|
||||
if (compound.length < 6) excessHex = compound;
|
||||
else hexColors.push(compound);
|
||||
});
|
||||
|
||||
var rectWidth = width / hexColors.length;
|
||||
var rectHeight = height / hexColors.length;
|
||||
for (color in hexColors) {
|
||||
ctx.fillStyle = "#" + hexColors[color];
|
||||
if (type === "horiz") ctx.fillRect(rectWidth * color, 0, rectWidth, height);
|
||||
else if (type === "vert")
|
||||
ctx.fillRect(0, rectHeight * color, width, rectHeight);
|
||||
}
|
||||
if (excessHex.length > 0) {
|
||||
var text = "+ " + excessHex.match(/.{1,2}/g).join(" ");
|
||||
var textWidth = ctx.measureText(text).width;
|
||||
ctx.strokeStyle = "black";
|
||||
ctx.lineWidth = 4;
|
||||
ctx.fillStyle = "white";
|
||||
ctx.strokeText(text, width - (textWidth + 8), height - textHeight / 2);
|
||||
ctx.fillText(text, width - (textWidth + 8), height - textHeight / 2);
|
||||
}
|
||||
}
|
||||
|
||||
const clamp = (n, mi, ma) => Math.max(mi, Math.min(n, ma));
|
||||
|
||||
function lightenColor(color, mult) {
|
||||
return [
|
||||
clamp(color[0] + (mult / 100) * (255 - color[0]), 0, 255),
|
||||
clamp(color[1] + (mult / 100) * (255 - color[1]), 0, 255),
|
||||
clamp(color[2] + (mult / 100) * (255 - color[2]), 0, 255),
|
||||
];
|
||||
}
|
||||
function darkenColor(color, mult) {
|
||||
return [
|
||||
clamp(color[0] - (mult / 100) * color[0], 0, 255),
|
||||
clamp(color[1] - (mult / 100) * color[1], 0, 255),
|
||||
clamp(color[2] - (mult / 100) * color[2], 0, 255),
|
||||
];
|
||||
}
|
||||
|
||||
function arrayToColor(color) {
|
||||
return (
|
||||
"#" + color.map((x) => Math.floor(x).toString(16).padStart(2, "0")).join("")
|
||||
);
|
||||
}
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 25 KiB |
|
|
@ -1,107 +0,0 @@
|
|||
:root {
|
||||
--max-width: 1100px;
|
||||
--border-radius: 12px;
|
||||
--font-mono: ui-monospace, Menlo, Monaco, 'Cascadia Mono', 'Segoe UI Mono',
|
||||
'Roboto Mono', 'Oxygen Mono', 'Ubuntu Monospace', 'Source Code Pro',
|
||||
'Fira Mono', 'Droid Sans Mono', 'Courier New', monospace;
|
||||
|
||||
--foreground-rgb: 0, 0, 0;
|
||||
--background-start-rgb: 214, 219, 220;
|
||||
--background-end-rgb: 255, 255, 255;
|
||||
|
||||
--primary-glow: conic-gradient(
|
||||
from 180deg at 50% 50%,
|
||||
#16abff33 0deg,
|
||||
#0885ff33 55deg,
|
||||
#54d6ff33 120deg,
|
||||
#0071ff33 160deg,
|
||||
transparent 360deg
|
||||
);
|
||||
--secondary-glow: radial-gradient(
|
||||
rgba(255, 255, 255, 1),
|
||||
rgba(255, 255, 255, 0)
|
||||
);
|
||||
|
||||
--tile-start-rgb: 239, 245, 249;
|
||||
--tile-end-rgb: 228, 232, 233;
|
||||
--tile-border: conic-gradient(
|
||||
#00000080,
|
||||
#00000040,
|
||||
#00000030,
|
||||
#00000020,
|
||||
#00000010,
|
||||
#00000010,
|
||||
#00000080
|
||||
);
|
||||
|
||||
--callout-rgb: 238, 240, 241;
|
||||
--callout-border-rgb: 172, 175, 176;
|
||||
--card-rgb: 180, 185, 188;
|
||||
--card-border-rgb: 131, 134, 135;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--foreground-rgb: 255, 255, 255;
|
||||
--background-start-rgb: 0, 0, 0;
|
||||
--background-end-rgb: 0, 0, 0;
|
||||
|
||||
--primary-glow: radial-gradient(rgba(1, 65, 255, 0.4), rgba(1, 65, 255, 0));
|
||||
--secondary-glow: linear-gradient(
|
||||
to bottom right,
|
||||
rgba(1, 65, 255, 0),
|
||||
rgba(1, 65, 255, 0),
|
||||
rgba(1, 65, 255, 0.3)
|
||||
);
|
||||
|
||||
--tile-start-rgb: 2, 13, 46;
|
||||
--tile-end-rgb: 2, 5, 19;
|
||||
--tile-border: conic-gradient(
|
||||
#ffffff80,
|
||||
#ffffff40,
|
||||
#ffffff30,
|
||||
#ffffff20,
|
||||
#ffffff10,
|
||||
#ffffff10,
|
||||
#ffffff80
|
||||
);
|
||||
|
||||
--callout-rgb: 20, 20, 20;
|
||||
--callout-border-rgb: 108, 108, 108;
|
||||
--card-rgb: 100, 100, 100;
|
||||
--card-border-rgb: 200, 200, 200;
|
||||
}
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
max-width: 100vw;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
body {
|
||||
color: rgb(var(--foreground-rgb));
|
||||
background: linear-gradient(
|
||||
to bottom,
|
||||
transparent,
|
||||
rgb(var(--background-end-rgb))
|
||||
)
|
||||
rgb(var(--background-start-rgb));
|
||||
}
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
html {
|
||||
color-scheme: dark;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,22 +0,0 @@
|
|||
import type { Metadata } from 'next'
|
||||
import { Inter } from 'next/font/google'
|
||||
import './globals.css'
|
||||
|
||||
const inter = Inter({ subsets: ['latin'] })
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: 'Create Next App',
|
||||
description: 'Generated by create next app',
|
||||
}
|
||||
|
||||
export default function RootLayout({
|
||||
children,
|
||||
}: {
|
||||
children: React.ReactNode
|
||||
}) {
|
||||
return (
|
||||
<html lang="en">
|
||||
<body className={inter.className}>{children}</body>
|
||||
</html>
|
||||
)
|
||||
}
|
||||
|
|
@ -1,229 +0,0 @@
|
|||
.main {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 6rem;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.description {
|
||||
display: inherit;
|
||||
justify-content: inherit;
|
||||
align-items: inherit;
|
||||
font-size: 0.85rem;
|
||||
max-width: var(--max-width);
|
||||
width: 100%;
|
||||
z-index: 2;
|
||||
font-family: var(--font-mono);
|
||||
}
|
||||
|
||||
.description a {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.description p {
|
||||
position: relative;
|
||||
margin: 0;
|
||||
padding: 1rem;
|
||||
background-color: rgba(var(--callout-rgb), 0.5);
|
||||
border: 1px solid rgba(var(--callout-border-rgb), 0.3);
|
||||
border-radius: var(--border-radius);
|
||||
}
|
||||
|
||||
.code {
|
||||
font-weight: 700;
|
||||
font-family: var(--font-mono);
|
||||
}
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, minmax(25%, auto));
|
||||
max-width: 100%;
|
||||
width: var(--max-width);
|
||||
}
|
||||
|
||||
.card {
|
||||
padding: 1rem 1.2rem;
|
||||
border-radius: var(--border-radius);
|
||||
background: rgba(var(--card-rgb), 0);
|
||||
border: 1px solid rgba(var(--card-border-rgb), 0);
|
||||
transition: background 200ms, border 200ms;
|
||||
}
|
||||
|
||||
.card span {
|
||||
display: inline-block;
|
||||
transition: transform 200ms;
|
||||
}
|
||||
|
||||
.card h2 {
|
||||
font-weight: 600;
|
||||
margin-bottom: 0.7rem;
|
||||
}
|
||||
|
||||
.card p {
|
||||
margin: 0;
|
||||
opacity: 0.6;
|
||||
font-size: 0.9rem;
|
||||
line-height: 1.5;
|
||||
max-width: 30ch;
|
||||
}
|
||||
|
||||
.center {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
padding: 4rem 0;
|
||||
}
|
||||
|
||||
.center::before {
|
||||
background: var(--secondary-glow);
|
||||
border-radius: 50%;
|
||||
width: 480px;
|
||||
height: 360px;
|
||||
margin-left: -400px;
|
||||
}
|
||||
|
||||
.center::after {
|
||||
background: var(--primary-glow);
|
||||
width: 240px;
|
||||
height: 180px;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.center::before,
|
||||
.center::after {
|
||||
content: '';
|
||||
left: 50%;
|
||||
position: absolute;
|
||||
filter: blur(45px);
|
||||
transform: translateZ(0);
|
||||
}
|
||||
|
||||
.logo {
|
||||
position: relative;
|
||||
}
|
||||
/* Enable hover only on non-touch devices */
|
||||
@media (hover: hover) and (pointer: fine) {
|
||||
.card:hover {
|
||||
background: rgba(var(--card-rgb), 0.1);
|
||||
border: 1px solid rgba(var(--card-border-rgb), 0.15);
|
||||
}
|
||||
|
||||
.card:hover span {
|
||||
transform: translateX(4px);
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion) {
|
||||
.card:hover span {
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* Mobile */
|
||||
@media (max-width: 700px) {
|
||||
.content {
|
||||
padding: 4rem;
|
||||
}
|
||||
|
||||
.grid {
|
||||
grid-template-columns: 1fr;
|
||||
margin-bottom: 120px;
|
||||
max-width: 320px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.card {
|
||||
padding: 1rem 2.5rem;
|
||||
}
|
||||
|
||||
.card h2 {
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.center {
|
||||
padding: 8rem 0 6rem;
|
||||
}
|
||||
|
||||
.center::before {
|
||||
transform: none;
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
.description {
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.description a {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.description p,
|
||||
.description div {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.description p {
|
||||
align-items: center;
|
||||
inset: 0 0 auto;
|
||||
padding: 2rem 1rem 1.4rem;
|
||||
border-radius: 0;
|
||||
border: none;
|
||||
border-bottom: 1px solid rgba(var(--callout-border-rgb), 0.25);
|
||||
background: linear-gradient(
|
||||
to bottom,
|
||||
rgba(var(--background-start-rgb), 1),
|
||||
rgba(var(--callout-rgb), 0.5)
|
||||
);
|
||||
background-clip: padding-box;
|
||||
backdrop-filter: blur(24px);
|
||||
}
|
||||
|
||||
.description div {
|
||||
align-items: flex-end;
|
||||
pointer-events: none;
|
||||
inset: auto 0 0;
|
||||
padding: 2rem;
|
||||
height: 200px;
|
||||
background: linear-gradient(
|
||||
to bottom,
|
||||
transparent 0%,
|
||||
rgb(var(--background-end-rgb)) 40%
|
||||
);
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
|
||||
/* Tablet and Smaller Desktop */
|
||||
@media (min-width: 701px) and (max-width: 1120px) {
|
||||
.grid {
|
||||
grid-template-columns: repeat(2, 50%);
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.vercelLogo {
|
||||
filter: invert(1);
|
||||
}
|
||||
|
||||
.logo {
|
||||
filter: invert(1) drop-shadow(0 0 0.3rem #ffffff70);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes rotate {
|
||||
from {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
to {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
}
|
||||
|
|
@ -1,95 +0,0 @@
|
|||
import Image from 'next/image'
|
||||
import styles from './page.module.css'
|
||||
|
||||
export default function Home() {
|
||||
return (
|
||||
<main className={styles.main}>
|
||||
<div className={styles.description}>
|
||||
<p>
|
||||
Get started by editing
|
||||
<code className={styles.code}>src/app/page.tsx</code>
|
||||
</p>
|
||||
<div>
|
||||
<a
|
||||
href="https://vercel.com?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
By{' '}
|
||||
<Image
|
||||
src="/vercel.svg"
|
||||
alt="Vercel Logo"
|
||||
className={styles.vercelLogo}
|
||||
width={100}
|
||||
height={24}
|
||||
priority
|
||||
/>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className={styles.center}>
|
||||
<Image
|
||||
className={styles.logo}
|
||||
src="/next.svg"
|
||||
alt="Next.js Logo"
|
||||
width={180}
|
||||
height={37}
|
||||
priority
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className={styles.grid}>
|
||||
<a
|
||||
href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
|
||||
className={styles.card}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<h2>
|
||||
Docs <span>-></span>
|
||||
</h2>
|
||||
<p>Find in-depth information about Next.js features and API.</p>
|
||||
</a>
|
||||
|
||||
<a
|
||||
href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
|
||||
className={styles.card}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<h2>
|
||||
Learn <span>-></span>
|
||||
</h2>
|
||||
<p>Learn about Next.js in an interactive course with quizzes!</p>
|
||||
</a>
|
||||
|
||||
<a
|
||||
href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
|
||||
className={styles.card}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<h2>
|
||||
Templates <span>-></span>
|
||||
</h2>
|
||||
<p>Explore starter templates for Next.js.</p>
|
||||
</a>
|
||||
|
||||
<a
|
||||
href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
|
||||
className={styles.card}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<h2>
|
||||
Deploy <span>-></span>
|
||||
</h2>
|
||||
<p>
|
||||
Instantly deploy your Next.js site to a shareable URL with Vercel.
|
||||
</p>
|
||||
</a>
|
||||
</div>
|
||||
</main>
|
||||
)
|
||||
}
|
||||
11
styles/globals.css
Normal file
11
styles/globals.css
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
@import "normal.css";
|
||||
|
||||
.monospace {
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
.horiz {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
margin: 0 0.25em;
|
||||
}
|
||||
140
styles/normal.css
Normal file
140
styles/normal.css
Normal file
|
|
@ -0,0 +1,140 @@
|
|||
@import url("https://fonts.googleapis.com/css2?family=Lexend+Deca:wght@100;200;300;400;500;600;700;800;900&display=swap");
|
||||
|
||||
:root {
|
||||
--background-color: hsl(0, 0%, 15%);
|
||||
--color: hsl(0, 0%, 85%);
|
||||
--accent-color: #808080;
|
||||
--accent-color-fg: hsl(0, 0%, 95%);
|
||||
--font-size: 16px;
|
||||
--font-family: "Lexend Deca";
|
||||
}
|
||||
|
||||
/* Document form */
|
||||
|
||||
body {
|
||||
width: 100vw;
|
||||
max-width: 640px;
|
||||
margin: auto;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
/* Size and type normalize */
|
||||
|
||||
html {
|
||||
font-size: var(--font-size);
|
||||
background-color: var(--background-color);
|
||||
color: var(--color);
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2em;
|
||||
line-height: 1.5em;
|
||||
margin: 0;
|
||||
margin-bottom: 0.125em;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.5em;
|
||||
line-height: 1.25em;
|
||||
margin: 0;
|
||||
margin-bottom: 0.25em;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 1.1em;
|
||||
line-height: 1.25em;
|
||||
margin: 0;
|
||||
margin-bottom: 0.25em;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 1em;
|
||||
line-height: 1.25em;
|
||||
margin: 0.5em 0;
|
||||
}
|
||||
|
||||
small {
|
||||
font-size: 0.75em;
|
||||
}
|
||||
|
||||
/* Form normalize */
|
||||
|
||||
html {
|
||||
font-family: var(--font-family);
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
*:focus {
|
||||
outline: 2px solid var(--accent-color-fg);
|
||||
}
|
||||
|
||||
/* Interactive normalize */
|
||||
|
||||
a {
|
||||
color: var(--accent-color);
|
||||
}
|
||||
|
||||
a:hover,
|
||||
a:focus {
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
a:active {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
button,
|
||||
input[type="button"],
|
||||
input[type="submit"],
|
||||
input[type="reset"] {
|
||||
border: 1px solid var(--accent-color);
|
||||
padding: 0.25em 0.5em;
|
||||
margin: 0.25em 0;
|
||||
font-size: 1em;
|
||||
font-family: inherit;
|
||||
background-color: var(--accent-color);
|
||||
color: var(--accent-color-fg);
|
||||
}
|
||||
|
||||
button[data-outlined],
|
||||
input[type="button"][data-outlined],
|
||||
input[type="submit"][data-outlined],
|
||||
input[type="reset"][data-outlined] {
|
||||
border: 1px solid var(--accent-color);
|
||||
background-color: var(--background-color);
|
||||
color: var(--accent-color);
|
||||
}
|
||||
|
||||
button:hover,
|
||||
input[type="button"]:hover,
|
||||
input[type="submit"]:hover,
|
||||
input[type="reset"]:hover,
|
||||
button:focus,
|
||||
input[type="button"]:focus,
|
||||
input[type="submit"]:focus,
|
||||
input[type="reset"]:focus {
|
||||
opacity: 0.8;
|
||||
}
|
||||
button:active,
|
||||
input[type="button"]:active,
|
||||
input[type="submit"]:active,
|
||||
input[type="reset"]:active {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
input[type="text"],
|
||||
input[type="number"],
|
||||
input[type="email"],
|
||||
select,
|
||||
textarea {
|
||||
font-family: inherit;
|
||||
border: 1px solid var(--color);
|
||||
padding: 0.25em 0.5em;
|
||||
margin: 0.25em 0;
|
||||
font-size: 1em;
|
||||
background-color: var(--background-color);
|
||||
color: var(--color);
|
||||
}
|
||||
|
|
@ -1,27 +0,0 @@
|
|||
{
|
||||
"compilerOptions": {
|
||||
"target": "es5",
|
||||
"lib": ["dom", "dom.iterable", "esnext"],
|
||||
"allowJs": true,
|
||||
"skipLibCheck": true,
|
||||
"strict": true,
|
||||
"noEmit": true,
|
||||
"esModuleInterop": true,
|
||||
"module": "esnext",
|
||||
"moduleResolution": "bundler",
|
||||
"resolveJsonModule": true,
|
||||
"isolatedModules": true,
|
||||
"jsx": "preserve",
|
||||
"incremental": true,
|
||||
"plugins": [
|
||||
{
|
||||
"name": "next"
|
||||
}
|
||||
],
|
||||
"paths": {
|
||||
"@/*": ["./src/*"]
|
||||
}
|
||||
},
|
||||
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
|
||||
"exclude": ["node_modules"]
|
||||
}
|
||||
Loading…
Reference in a new issue