unimore/triennale-appunti-steffo
unimore/triennale-appunti-steffo
1
Fork 0
mirror of https://github.com/Steffo99/unisteffo.git synced 2024-11-21 23:44:22 +00:00
Code Activity

Start working on the page layout

Browse source
This commit is contained in:
Steffo 2023-03-15 11:13:11 +00:00 committed by GitHub
parent 98882b643b
commit 6e7f6e93a0
Signed by: github
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 159 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

29
app/layout.tsx Normal file
View file

@ -0,0 +1,29 @@
import "@steffo/bluelib/dist/base.root.css"
import "@steffo/bluelib/dist/classic.root.css"
import "@steffo/bluelib/dist/glass.root.css"
import "@steffo/bluelib/dist/fun.root.css"
import "@steffo/bluelib/dist/colors-royalblue.root.css"
import "@steffo/bluelib/dist/fonts-fira-ghpages.root.css"
import React from "react"
export const metadata = {
title: 'Unisteffo',
description: 'Gli appunti liberi di Steffo',
}
export interface RootLayoutProps {
children: React.ReactNode,
}
export default function RootLayout(props: RootLayoutProps) {
return (
<html lang="it">
<body>
{props.children}
</body>
</html>
)
}

26
app/page.tsx
View file

@ -1,3 +1,27 @@
import { Chapter } from "../components/Chapter";
import { Topic } from "../components/Topic";
import { Layout } from "../components/Layout";
export default function Page() {
return <h1>Hello, Next.js!</h1>;
return (
<Layout
heading="Unisteffo"
main={
<Chapter heading="Dove sono?" columns={1}>
<Topic heading="Su Unisteffo!">
<p>
Il mio sito di appunti.
</p>
</Topic>
</Chapter>
}
sidebar={
<Chapter heading="Indice" columns={1}>
<div className="panel box" style={{height: "200vh"}}>
sus
</div>
</Chapter>
}
/>
)
}

20
components/Chapter.tsx Normal file
View file

@ -0,0 +1,20 @@
import React from "react"
export interface ChapterProps {
children: React.ReactNode,
heading: React.ReactNode,
columns: number,
}
export function Chapter(props: ChapterProps) {
return (
<section className={`chapter-${props.columns}`}>
<h2>
{props.heading}
</h2>
{props.children}
</section>
)
}

37
components/Layout.module.css Normal file
View file

@ -0,0 +1,37 @@
.layout {
padding: 8px;
height: calc(100vh - 16px);
overflow: hidden;
display: grid;
grid-template-areas:
"heading empty"
"main side"
;
grid-template-rows: auto 1fr;
grid-template-columns: 1fr 320px;
align-content: stretch;
column-gap: 8px;
}
.layout > .heading {
grid-area: heading;
}
.layout > .main {
grid-area: main;
overflow-y: scroll;
}
.layout > .sidebar {
grid-area: side;
overflow-y: scroll;
}
.layout :where(:global(.chapter-0), :global(.chapter-1), :global(.chapter-2), :global(.chapter-3), :global(.chapter-4), :global(.chapter-5), :global(.chapter-6), :global(.chapter-7), :global(.chapter-8), :global(.chapter-9)):first-child {
margin-top: 0;
}
.layout :where(:global(.chapter-0), :global(.chapter-1), :global(.chapter-2), :global(.chapter-3), :global(.chapter-4), :global(.chapter-5), :global(.chapter-6), :global(.chapter-7), :global(.chapter-8), :global(.chapter-9)):last-child {
margin-bottom: 0;
}

28
components/Layout.tsx Normal file
View file

@ -0,0 +1,28 @@
import style from "./Layout.module.css"
import Link from "next/link"
export interface LayoutProps {
heading: React.ReactNode,
main: React.ReactNode,
sidebar: React.ReactNode,
}
export function Layout(props: LayoutProps) {
return (
<div className={style.layout}>
<Link href={{pathname: "/"}} className={style.heading}>
<h1>
{props.heading}
</h1>
</Link>
<main className={style.main}>
{props.main}
</main>
<aside className={style.sidebar}>
{props.sidebar}
</aside>
</div>
)
}

19
components/Topic.tsx Normal file
View file

@ -0,0 +1,19 @@
import React from "react"
export interface TopicProps {
children: React.ReactNode,
heading: React.ReactNode,
}
export function Topic(props: TopicProps) {
return (
<section className="panel box">
<h3>
{props.heading}
</h3>
{props.children}
</section>
)
}