git fire

app/layout.tsx

@@ -4,6 +4,7 @@ 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 "../styles/global.css"
 import React from "react"
 
 

app/page.tsx

@@ -6,20 +6,39 @@ export default function Page() {
 	return (
 		<Layout 
 			heading="Unisteffo"
-			main={
+			main={<>
 				<Chapter heading="Dove sono?" columns={1}>
 					<Topic heading="Su Unisteffo!">
 						<p>
-							Il mio sito di appunti.
+							Il mio sito di appunti aggiornato sperimentale.
 						</p>
 					</Topic>
 				</Chapter>
-			}
+				<Chapter heading="Perchè ci sono?" columns={1}>
+					<Topic heading="Si vede?">
+						<p>
+							idk magari hai una qualche configurazione strana del browser e si vede tutto rotto
+						</p>
+					</Topic>
+					<Topic heading="Come si vede?">
+						<p>
+							idk magari fa schifissimo
+						</p>
+					</Topic>
+					<Topic heading="Sfondo">
+						<p>
+							lo sfondo è wip perchè è overused
+						</p>
+					</Topic>
+				</Chapter>
+			</>}
 			sidebar={
 				<Chapter heading="Indice" columns={1}>
-					<div className="panel box" style={{height: "200vh"}}>
+					<Topic heading="Glossario molto lungo">
-						sus
+						<ol>
-					</div>
+							{[...Array(1000).keys()].map((n) => <li key={n}>ඞ</li>)}
+						</ol>
+					</Topic>
 				</Chapter>
 			}
 		/>

components/Layout.module.css

@@ -1,17 +1,30 @@
 .layout {
-	padding: 8px;
+	height: 100vh;
-	height: calc(100vh - 16px);
 	overflow: hidden;
 
 	display: grid;
 	grid-template-areas: 
-		"heading empty"
+		"heading side"
 		"main side"
 	;
-	grid-template-rows: auto 1fr;
+	grid-template-rows: 68px 1fr;
 	grid-template-columns: 1fr 320px;
 	align-content: stretch;
-	column-gap: 8px;
+}
+
+@media screen and (max-width: 1328px) {
+
+	.layout {
+		grid-template-areas: 
+			"heading"
+			"main"
+		;
+		grid-template-columns: 1fr;
+	}
+	
+	.layout > .sidebar {
+		display: none;
+	}
 }
 
 .layout > .heading {
@@ -21,14 +34,25 @@
 .layout > .main {
 	grid-area: main;
 	overflow-y: scroll;
+
+	padding: 8px;
+	padding-right: 7px;
 }
 
 .layout > .sidebar {
 	grid-area: side;
 	overflow-y: scroll;
+
+	padding: 8px;
+	padding-top: 68px;
+	padding-left: 1px;
 }
 
-.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 {
+.layout > .main > :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)) > :global(.panel) {
+	max-width: 500px;
+}
+
+.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, .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 :where(h1, h2, h3, h4, h5, h6) {
 	margin-top: 0;
 }
 

styles/global.css

@@ -1,7 +1,5 @@
 body {
-    margin: 0;
+	background-image: url("https://www.steffo.eu/space_default.jpg");
+	background-attachment: fixed;
+	background-size: cover;
 }
-
-#root {
-    min-height: 100vh;
-}