StepanovPlaton/torrent_frontend
1
0
Fork 0
mirror of https://github.com/StepanovPlaton/torrent_frontend.git synced 2026-04-04 04:40:50 +04:00
Code Issues Packages Projects Releases Wiki Activity

Add header and themes

Browse Source
This commit is contained in:
Степанов Платон
2024-05-08 22:50:44 +04:00
parent 9a3d900d1b
commit a634c194fe
19 changed files with 255 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
src/app/globals.css
View File

@@ -3,31 +3,41 @@
@tailwind utilities;
:root {
--foreground-rgb: 0, 0, 0;
--background-start-rgb: 214, 219, 220;
--background-end-rgb: 255, 255, 255;
--color-bg0: #fbf1c7;
--color-bg1: #ebdbb2;
--color-bg4: #a89984;
--color-fg0: #282828;
--color-fg1: #3c3836;
--color-fg4: #7c6f64;
--app-width: 70%;
font-size: calc((100vh / 1080) * 24);
}
@media (prefers-color-scheme: dark) {
:root {
--foreground-rgb: 255, 255, 255;
--background-start-rgb: 0, 0, 0;
--background-end-rgb: 0, 0, 0;
}
[data-theme="dark"] {
--color-bg0: #282828;
--color-bg1: #3c3836;
--color-bg4: #7c6f64;
--color-fg0: #fbf1c7;
--color-fg1: #ebdbb2;
--color-fg4: #a89984;
}
html,
body {
padding: 0;
margin: 0;
width: 100%;
height: 100%;
}
body {
color: rgb(var(--foreground-rgb));
background: linear-gradient(
to bottom,
transparent,
rgb(var(--background-end-rgb))
)
rgb(var(--background-start-rgb));
}
transition-property: color, background-color, border-color;
transition-duration: 0.3s;
@layer utilities {
.text-balance {
text-wrap: balance;
}
overflow: hidden;
color: var(--color-fg1);
background-color: var(--color-bg0);
}

16
src/app/layout.tsx
View File

@@ -1,12 +1,14 @@
import type { Metadata } from "next";
import { Inter } from "next/font/google";
import "./globals.css";
import { ThemeProvider } from "next-themes";
import { Header } from "@/widgets/header";
const inter = Inter({ subsets: ["latin"] });
export const metadata: Metadata = {
title: "Create Next App",
description: "Generated by create next app",
title: ".Torrent",
description: ".torrent file sharing service",
};
export default function RootLayout({
@@ -15,8 +17,14 @@ export default function RootLayout({
children: React.ReactNode;
}>) {
return (
<html lang="en">
<body className={inter.className}>{children}</body>
// suppressHydrationWarning only for html for theme support
<html lang="ru" suppressHydrationWarning>
<body className={inter.className}>
<ThemeProvider enableSystem={false} defaultTheme="light">
<Header />
{children}
</ThemeProvider>
</body>
</html>
);
}

8
src/app/page.tsx
View File

@@ -1,3 +1,9 @@
import { Section } from "@/widgets/section";
export default function Home() {
return <></>;
return (
<div className="w-full max-w-[var(--app-width)] m-auto">
<Section name="Игры">a</Section>
</div>
);
}