pihkaal/pihkaal-me
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(layout): implement global layout

Browse Source
This commit is contained in:
Pihkaal
2024-01-11 23:34:19 +01:00
parent 01ed9437fa
commit 9e75d6b8bb
6 changed files with 56 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@@ -35,6 +35,7 @@
"@typescript-eslint/eslint-plugin": "^6.11.0",
"@typescript-eslint/parser": "^6.11.0",
"autoprefixer": "^10.4.14",
"clsx": "^2.1.0",
"drizzle-kit": "^0.20.9",
"eslint": "^8.54.0",
"eslint-config-next": "^14.0.4",

8
pnpm-lock.yaml generated
View File

@@ -67,6 +67,9 @@ devDependencies:
autoprefixer:
specifier: ^10.4.14
version: 10.4.16(postcss@8.4.33)
clsx:
specifier: ^2.1.0
version: 2.1.0
drizzle-kit:
specifier: ^0.20.9
version: 0.20.10
@@ -1363,6 +1366,11 @@ packages:
resolution: {integrity: sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==}
dev: false
/clsx@2.1.0:
resolution: {integrity: sha512-m3iNNWpd9rl3jvvcBnu70ylMdrXt8Vlq4HYadnU5fwcOtvkSQWPmj7amUcDT2qYI7risszBjI5AUIUox9D16pg==}
engines: {node: '>=6'}
dev: true
/color-convert@2.0.1:
resolution: {integrity: sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==}
engines: {node: '>=7.0.0'}

BIN
public/wallpaper.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 491 KiB

20
src/components/Terminal.tsx Normal file
View File

@@ -0,0 +1,20 @@
import { type FunctionComponent, type PropsWithChildren } from "react";
import clsx from "clsx";
type TerminalProps = PropsWithChildren<{
className?: string;
}>;
export const Terminal: FunctionComponent<TerminalProps> = ({
children,
className,
}) => (
<div
className={clsx(
"rounded-lg border-2 border-[#595959] bg-[#1e1e2e] bg-opacity-95 px-1 text-[#cdd6f4] shadow-window transition-colors duration-[500ms] ease-out hover:border-[#cdd6f4] hover:duration-[200ms]",
className,
)}
>
{children}
</div>
);

25
src/pages/index.tsx
View File

@@ -1,4 +1,12 @@
import Head from "next/head";
import { JetBrains_Mono } from "next/font/google";
import clsx from "clsx";
import { Terminal } from "~/components/Terminal";
const text = JetBrains_Mono({
subsets: ["latin"],
weight: ["400"],
});
export default function Home() {
return (
@@ -6,7 +14,22 @@ export default function Home() {
<Head>
<title>pihkaal</title>
</Head>
<main></main>
<main
className={clsx(
"insets-0 fixed flex h-screen w-screen flex-col gap-3 bg-[url(/wallpaper.jpg)] bg-cover p-3",
text.className,
)}
>
<nav className="border border-red-500">toolbar</nav>
<Terminal className="flex-1">nvim</Terminal>
<div className="flex h-[15%] gap-3">
<Terminal className="flex-1">console</Terminal>
<Terminal className="flex-1">cava</Terminal>
</div>
</main>
</>
);
}

3
tailwind.config.ts
View File

@@ -8,6 +8,9 @@ const config: Config = {
fontFamily: {
sans: ["var(--font-sans)", ...fontFamily.sans],
},
boxShadow: {
window: "0 0 1px 1px #1a1a1a",
},
},
},
plugins: [],