Resume
/
subman-nextjs
2
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

install color themes, tweak styling

This commit is contained in:
andrzej 2024-06-21 00:31:48 +02:00
parent f3d221e517
commit 0670fe87ea
8 changed files with 315 additions and 156 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
package-lock.json generated
View File

@ -25,6 +25,7 @@
"date-fns": "^3.6.0",
"lucide-react": "^0.394.0",
"next": "14.2.3",
"next-themes": "^0.3.0",
"react": "^18",
"react-day-picker": "^8.10.1",
"react-dom": "^18",
@ -4724,6 +4725,15 @@
}
}
},
"node_modules/next-themes": {
"version": "0.3.0",
"resolved": "https://registry.npmjs.org/next-themes/-/next-themes-0.3.0.tgz",
"integrity": "sha512-/QHIrsYpd6Kfk7xakK4svpDI5mmXP0gfvCoJdGpZQ2TOrQZmsW0QxjaiLn8wbIKjtm4BTSqLoix4lxYYOnLJ/w==",
"peerDependencies": {
"react": "^16.8 || ^17 || ^18",
"react-dom": "^16.8 || ^17 || ^18"
}
},
"node_modules/next/node_modules/postcss": {
"version": "8.4.31",
"resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz",

1
package.json
View File

@ -27,6 +27,7 @@
"date-fns": "^3.6.0",
"lucide-react": "^0.394.0",
"next": "14.2.3",
"next-themes": "^0.3.0",
"react": "^18",
"react-day-picker": "^8.10.1",
"react-dom": "^18",

144
src/app/globals.css
View File

@ -2,70 +2,104 @@
@tailwind components;
@tailwind utilities;
@import "rose-pine.css";
/* @layer base { */
/* :root { */
/* --background: 43 62% 98%; */
/* --foreground: 43 73% 2%; */
/* --muted: 43 24% 85%; */
/* --muted-foreground: 43 10% 37%; */
/* --popover: 43 62% 98%; */
/* --popover-foreground: 43 73% 2%; */
/* --card: 43 62% 98%; */
/* --card-foreground: 43 73% 2%; */
/* --border: 43 15% 91%; */
/* --input: 43 15% 91%; */
/* --primary: 43 50% 69%; */
/* --primary-foreground: 43 50% 9%; */
/* --secondary: 43 6% 92%; */
/* --secondary-foreground: 43 6% 32%; */
/* --accent: 43 13% 83%; */
/* --accent-foreground: 43 13% 23%; */
/* --destructive: 8 84% 20%; */
/* --destructive-foreground: 8 84% 80%; */
/* --ring: 43 50% 69%; */
/* --radius: 0.5rem; */
/* } */
/* */
/* .dark { */
/* --background: 43 48% 4%; */
/* --foreground: 43 26% 97%; */
/* --muted: 43 24% 15%; */
/* --muted-foreground: 43 10% 63%; */
/* --popover: 43 48% 4%; */
/* --popover-foreground: 43 26% 97%; */
/* --card: 43 48% 4%; */
/* --card-foreground: 43 26% 97%; */
/* --border: 43 15% 13%; */
/* --input: 43 15% 13%; */
/* --primary: 43 50% 69%; */
/* --primary-foreground: 43 50% 9%; */
/* --secondary: 43 8% 18%; */
/* --secondary-foreground: 43 8% 78%; */
/* --accent: 43 14% 23%; */
/* --accent-foreground: 43 14% 83%; */
/* --destructive: 8 84% 52%; */
/* --destructive-foreground: 0 0% 100%; */
/* --ring: 43 50% 69%; */
/* } */
/* } */
@layer base {
:root {
--background: 0 0% 100%;
--foreground: 222.2 84% 4.9%;
--card: 0 0% 100%;
--card-foreground: 222.2 84% 4.9%;
--popover: 0 0% 100%;
--popover-foreground: 222.2 84% 4.9%;
--primary: 222.2 47.4% 11.2%;
--primary-foreground: 210 40% 98%;
--secondary: 210 40% 96.1%;
--secondary-foreground: 222.2 47.4% 11.2%;
--muted: 210 40% 96.1%;
--muted-foreground: 215.4 16.3% 46.9%;
--accent: 210 40% 96.1%;
--accent-foreground: 222.2 47.4% 11.2%;
--destructive: 0 84.2% 60.2%;
--destructive-foreground: 210 40% 98%;
--border: 214.3 31.8% 91.4%;
--input: 214.3 31.8% 91.4%;
--ring: 222.2 84% 4.9%;
--background: 258 70% 100%;
--foreground: 258 77% 0%;
--muted: 258 29% 85%;
--muted-foreground: 258 10% 40%;
--popover: 258 70% 100%;
--popover-foreground: 258 77% 0%;
--card: 258 70% 100%;
--card-foreground: 258 77% 0%;
--border: 220 13% 91%;
--input: 220 13% 91%;
--primary: 258 58% 37%;
--primary-foreground: 258 58% 97%;
--secondary: 258 19% 81%;
--secondary-foreground: 258 19% 21%;
--accent: 258 19% 81%;
--accent-foreground: 258 19% 21%;
--destructive: 19 98% 27%;
--destructive-foreground: 19 98% 87%;
--ring: 258 58% 37%;
--radius: 0.5rem;
}
.dark {
--background: 222.2 84% 4.9%;
--foreground: 210 40% 98%;
--card: 222.2 84% 4.9%;
--card-foreground: 210 40% 98%;
--popover: 222.2 84% 4.9%;
--popover-foreground: 210 40% 98%;
--primary: 210 40% 98%;
--primary-foreground: 222.2 47.4% 11.2%;
--secondary: 217.2 32.6% 17.5%;
--secondary-foreground: 210 40% 98%;
--muted: 217.2 32.6% 17.5%;
--muted-foreground: 215 20.2% 65.1%;
--accent: 217.2 32.6% 17.5%;
--accent-foreground: 210 40% 98%;
--destructive: 0 62.8% 30.6%;
--destructive-foreground: 210 40% 98%;
--border: 217.2 32.6% 17.5%;
--input: 217.2 32.6% 17.5%;
--ring: 212.7 26.8% 83.9%;
--background: 258 53% 3%;
--foreground: 258 40% 97%;
--muted: 258 29% 15%;
--muted-foreground: 258 10% 60%;
--popover: 258 53% 3%;
--popover-foreground: 258 40% 97%;
--card: 258 53% 3%;
--card-foreground: 258 40% 97%;
--border: 215 27.9% 16.9%;
--input: 215 27.9% 16.9%;
--primary: 258 58% 37%;
--primary-foreground: 258 58% 97%;
--secondary: 258 15% 10%;
--secondary-foreground: 258 15% 70%;
--accent: 258 15% 10%;
--accent-foreground: 258 15% 70%;
--destructive: 19 98% 46%;
--destructive-foreground: 0 0% 100%;
--ring: 258 58% 37%;
}
}
@layer base {
* {
@apply border-border;

39
src/app/layout.tsx
View File

@ -1,6 +1,7 @@
import type { Metadata } from "next";
import { Inter } from "next/font/google";
import { ThemeProvider } from "./ui/theme";
import { Toaster } from "@/components/ui/toaster";
import "./tailwind.css";
import Link from "next/link";
@ -15,11 +16,6 @@ export const metadata: Metadata = {
description: "A self-hosted literary submission tracker."
};
function NavLink(props: ComponentProps<"div"> & { href: string }) {
return (
<Link href={props.href}><h1 className="text-4xl font-black my-2">{props.children}</h1></Link>
)
}
export default function RootLayout({
@ -30,21 +26,28 @@ export default function RootLayout({
return (
<html lang="en">
<body className={inter.className}>
<div id="layout-container" className="p-4 w-screen mt-6 flex justify-center">
<div className="grid grid-cols-6 w-5/6">
<div id="sidebar" className="col-start-1 col-end-2">
<header className="">
<h1 className="font-black text-4xl antialiased inline">SubMan</h1>
<p className="font-bold text-m antialiased">The self-hosted literary submission tracker.</p>
</header>
<Navlinks />
</div>
<div className="col-start-2 col-span-full">
{children}
<ThemeProvider
attribute="class"
defaultTheme="system"
enableSystem
disableTransitionOnChange
>
<div id="layout-container" className="p-4 w-screen mt-6 flex justify-center">
<div className="grid grid-cols-6 w-5/6">
<div id="sidebar" className="col-start-1 col-end-2">
<header className="">
<h1 className="font-black text-5xl antialiased inline">SubMan</h1>
<p className="font-bold text-m antialiased">The self-hosted literary submission tracker.</p>
</header>
<Navlinks />
</div>
<div className="col-start-2 col-span-full">
{children}
</div>
</div>
</div>
</div>
<Toaster />
<Toaster />
</ThemeProvider>
</body>
</html >
);

53
src/app/rose-pine.css Normal file
View File

@ -0,0 +1,53 @@
.theme-rp {
--rp-base: 249 22 12;
--rp-surface: 247 23 15;
--rp-overlay: 248 25 18;
--rp-muted: 249 12 47;
--rp-subtle: 248 15 61;
--rp-text: 245 50 91;
--rp-love: 343 76 68;
--rp-gold: 35 88 72;
--rp-rose: 2 55 83;
--rp-pine: 197 49 38;
--rp-foam: 189 43 73;
--rp-iris: 267 57 78;
--rp-highlight-low: 244 18 15;
--rp-highlight-med: 249 15 28;
--rp-highlight-high: 248 13 36;
}
.theme-rp-moon {
--rp-base: 246 24 17;
--rp-surface: 248 24 20;
--rp-overlay: 248 21 26;
--rp-muted: 249 12 47;
--rp-subtle: 248 15 61;
--rp-text: 245 50 91;
--rp-love: 343 76 68;
--rp-gold: 35 88 72;
--rp-rose: 2 66 75;
--rp-pine: 197 48 47;
--rp-foam: 189 43 73;
--rp-iris: 267 57 78;
--rp-highlight-low: 245 22 20;
--rp-highlight-med: 247 16 30;
--rp-highlight-high: 249 15 38;
}
.theme-rp-dawn {
--rp-base: 32 57 95;
--rp-surface: 35 100 98;
--rp-overlay: 33 43 91;
--rp-muted: 257 9 61;
--rp-subtle: 248 12 52;
--rp-text: 248 19 40;
--rp-love: 343 35 55;
--rp-gold: 35 81 56;
--rp-rose: 3 53 67;
--rp-pine: 197 53 34;
--rp-foam: 189 30 48;
--rp-iris: 268 21 57;
--rp-highlight-low: 25 35 93;
--rp-highlight-med: 10 9 86;
--rp-highlight-high: 315 4 80;
}

210
src/app/tailwind.css
View File

@ -447,25 +447,25 @@ video {
}
:root {
--background: 0 0% 100%;
--foreground: 222.2 84% 4.9%;
--card: 0 0% 100%;
--card-foreground: 222.2 84% 4.9%;
--popover: 0 0% 100%;
--popover-foreground: 222.2 84% 4.9%;
--primary: 222.2 47.4% 11.2%;
--primary-foreground: 210 40% 98%;
--secondary: 210 40% 96.1%;
--secondary-foreground: 222.2 47.4% 11.2%;
--muted: 210 40% 96.1%;
--muted-foreground: 215.4 16.3% 46.9%;
--accent: 210 40% 96.1%;
--accent-foreground: 222.2 47.4% 11.2%;
--destructive: 0 84.2% 60.2%;
--destructive-foreground: 210 40% 98%;
--border: 214.3 31.8% 91.4%;
--input: 214.3 31.8% 91.4%;
--ring: 222.2 84% 4.9%;
--background: 258 70% 100%;
--foreground: 258 77% 0%;
--muted: 258 29% 85%;
--muted-foreground: 258 10% 40%;
--popover: 258 70% 100%;
--popover-foreground: 258 77% 0%;
--card: 258 70% 100%;
--card-foreground: 258 77% 0%;
--border: 220 13% 91%;
--input: 220 13% 91%;
--primary: 258 58% 37%;
--primary-foreground: 258 58% 97%;
--secondary: 258 19% 81%;
--secondary-foreground: 258 19% 21%;
--accent: 258 19% 81%;
--accent-foreground: 258 19% 21%;
--destructive: 19 98% 27%;
--destructive-foreground: 19 98% 87%;
--ring: 258 58% 37%;
--radius: 0.5rem;
}
@ -700,10 +700,6 @@ body {
grid-column-end: 2;
}
.col-end-3 {
grid-column-end: 3;
}
.-mx-1 {
margin-left: -0.25rem;
margin-right: -0.25rem;
@ -733,10 +729,6 @@ body {
margin-bottom: 1rem;
}
.mb-6 {
margin-bottom: 1.5rem;
}
.ml-2 {
margin-left: 0.5rem;
}
@ -761,10 +753,6 @@ body {
margin-top: 1.5rem;
}
.mt-8 {
margin-top: 2rem;
}
.inline {
display: inline;
}
@ -878,6 +866,10 @@ body {
width: 1rem;
}
.w-5\/6 {
width: 83.333333%;
}
.w-7 {
width: 1.75rem;
}
@ -915,14 +907,6 @@ body {
width: 100vw;
}
.w-3\/5 {
width: 60%;
}
.w-5\/6 {
width: 83.333333%;
}
.min-w-\[8rem\] {
min-width: 8rem;
}
@ -994,18 +978,6 @@ body {
user-select: none;
}
.grid-cols-\[1fr_4fr\] {
grid-template-columns: 1fr 4fr;
}
.grid-cols-5 {
grid-template-columns: repeat(5, minmax(0, 1fr));
}
.grid-cols-12 {
grid-template-columns: repeat(12, minmax(0, 1fr));
}
.grid-cols-6 {
grid-template-columns: repeat(6, minmax(0, 1fr));
}
@ -1124,14 +1096,6 @@ body {
margin-bottom: calc(2rem * var(--tw-space-y-reverse));
}
.place-self-center {
place-self: center;
}
.self-stretch {
align-self: stretch;
}
.justify-self-end {
justify-self: end;
}
@ -1302,11 +1266,6 @@ body {
padding-bottom: 0.375rem;
}
.py-10 {
padding-top: 2.5rem;
padding-bottom: 2.5rem;
}
.py-2 {
padding-top: 0.5rem;
padding-bottom: 0.5rem;
@ -1354,13 +1313,8 @@ body {
line-height: 2.25rem;
}
.text-4xl {
font-size: 2.25rem;
line-height: 2.5rem;
}
.text-6xl {
font-size: 3.75rem;
.text-5xl {
font-size: 3rem;
line-height: 1;
}
@ -1393,16 +1347,6 @@ body {
line-height: 1rem;
}
.text-5xl {
font-size: 3rem;
line-height: 1;
}
.text-2xl {
font-size: 1.5rem;
line-height: 2rem;
}
.font-black {
font-weight: 900;
}
@ -1488,6 +1432,18 @@ body {
color: rgb(255 255 255 / var(--tw-text-opacity));
}
.text-secondary {
color: hsl(var(--secondary));
}
.text-accent {
color: hsl(var(--accent));
}
.text-popover {
color: hsl(var(--popover));
}
.underline {
text-decoration-line: underline;
}
@ -1590,6 +1546,98 @@ body {
animation-duration: 200ms;
}
/* @layer base { */
/* :root { */
/* --background: 43 62% 98%; */
/* --foreground: 43 73% 2%; */
/* --muted: 43 24% 85%; */
/* --muted-foreground: 43 10% 37%; */
/* --popover: 43 62% 98%; */
/* --popover-foreground: 43 73% 2%; */
/* --card: 43 62% 98%; */
/* --card-foreground: 43 73% 2%; */
/* --border: 43 15% 91%; */
/* --input: 43 15% 91%; */
/* --primary: 43 50% 69%; */
/* --primary-foreground: 43 50% 9%; */
/* --secondary: 43 6% 92%; */
/* --secondary-foreground: 43 6% 32%; */
/* --accent: 43 13% 83%; */
/* --accent-foreground: 43 13% 23%; */
/* --destructive: 8 84% 20%; */
/* --destructive-foreground: 8 84% 80%; */
/* --ring: 43 50% 69%; */
/* --radius: 0.5rem; */
/* } */
/* */
/* .dark { */
/* --background: 43 48% 4%; */
/* --foreground: 43 26% 97%; */
/* --muted: 43 24% 15%; */
/* --muted-foreground: 43 10% 63%; */
/* --popover: 43 48% 4%; */
/* --popover-foreground: 43 26% 97%; */
/* --card: 43 48% 4%; */
/* --card-foreground: 43 26% 97%; */
/* --border: 43 15% 13%; */
/* --input: 43 15% 13%; */
/* --primary: 43 50% 69%; */
/* --primary-foreground: 43 50% 9%; */
/* --secondary: 43 8% 18%; */
/* --secondary-foreground: 43 8% 78%; */
/* --accent: 43 14% 23%; */
/* --accent-foreground: 43 14% 83%; */
/* --destructive: 8 84% 52%; */
/* --destructive-foreground: 0 0% 100%; */
/* --ring: 43 50% 69%; */
/* } */
/* } */
.file\:border-0::file-selector-button {
border-width: 0px;
}

4
src/app/ui/navLinks.tsx
View File

@ -20,9 +20,9 @@ export default function Navlinks(props: ComponentProps<"div">) {
return (
<>
{links.map(e => (<NavLink key={e.link} href={e.link}
className={clsx("text-2xl font-black my-2",
className={clsx("text-3xl font-black my-2",
{
"text-destructive": pathname === e.link
"text-primary": pathname === e.link
}
)}
>{e.label}</NavLink >))

10
src/app/ui/theme.tsx Normal file
View File

@ -0,0 +1,10 @@
"use client"
import * as React from "react"
import { ThemeProvider as NextThemesProvider } from "next-themes"
import { type ThemeProviderProps } from "next-themes/dist/types"
export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
return <NextThemesProvider {...props}>{children}</NextThemesProvider>
}