1
Fork 0
mirror of https://github.com/Steffo99/unisteffo.git synced 2024-11-21 15:34:21 +00:00
This commit is contained in:
Steffo 2023-03-20 14:15:31 +00:00 committed by GitHub
parent 6e7f6e93a0
commit 2e790950c7
Signed by: github
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 59 additions and 17 deletions

View file

@ -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"

View file

@ -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"}}>
sus
</div>
<Topic heading="Glossario molto lungo">
<ol>
{[...Array(1000).keys()].map((n) => <li key={n}></li>)}
</ol>
</Topic>
</Chapter>
}
/>

View file

@ -1,17 +1,30 @@
.layout {
padding: 8px;
height: calc(100vh - 16px);
height: 100vh;
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;
}

View file

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