nicd/scriptorium
1
0
Fork 0
Code Issues 2 Pull requests Projects Releases Packages Wiki Activity Actions

Fix code blocks, make layout better

Browse source
This commit is contained in:
Mikko Ahlroth 2024-04-19 23:48:35 +03:00
parent dca56d1053
commit fd2a376387
1 changed files with 59 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

69
priv/assets/css/custom.css
View file

@ -3,22 +3,29 @@
:root { :root {
--bg: #fbfaf5; --bg: #fbfaf5;
--fg: #2c2c2c; --fg: #2c2c2c;
--sidebar-size: minmax(min-content, 1fr);
--sidebar-max-size: 35rem;
--sidebar-min-size: 30rem;
--main-size: auto;
} }
body { body {
display: grid; display: grid;
grid-template: "title main" min-content "sidebar main" 1fr "sidebar footer" auto / 350px auto; grid-template:
} "title main ." min-content
"sidebar main ." 1fr
@media (max-width: 900px) { "sidebar footer ." auto
body { / var(--sidebar-size) var(--main-size) var(--sidebar-size);
grid-template: "title" "main" "sidebar" "footer";
}
} }
#title { #title {
grid-area: title; grid-area: title;
justify-self: end;
width: 100%;
max-width: var(--sidebar-max-size);
min-width: var(--sidebar-min-size);
margin: 0; margin: 0;
padding: 0; padding: 0;
@ -37,17 +44,22 @@ body > main {
#sidebar { #sidebar {
grid-area: sidebar; grid-area: sidebar;
justify-self: end;
width: 100%;
max-width: var(--sidebar-max-size);
min-width: var(--sidebar-min-size);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 2rem; gap: 2rem;
margin: 0;
} }
body > header > nav { #title > nav {
padding: 0.7rem; padding: 0.7rem;
} }
body > header > nav > ul { #title > nav > ul {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: space-around; justify-content: space-around;
@ -56,7 +68,7 @@ body > header > nav > ul {
gap: 1rem; gap: 1rem;
} }
body > header > nav > ul > li { #title > nav > ul > li {
display: inline-block; display: inline-block;
margin: 0; margin: 0;
} }
@ -142,3 +154,40 @@ body > footer {
padding-left: 0; padding-left: 0;
padding-right: 0; padding-right: 0;
} }
/* Fix code blocks making the page wide */
pre {
white-space: pre-wrap;
tab-size: 4;
}
@media (max-width: 900px) {
body {
grid-template: "title" "main" "sidebar" "footer";
}
#title {
justify-self: stretch;
max-width: unset;
min-width: unset;
}
#sidebar {
justify-self: stretch;
max-width: unset;
min-width: unset;
padding-left: 2rem;
padding-right: 2rem;
}
}
@media (max-width: 600px) {
main {
padding: 0.5rem;
}
#sidebar {
padding-left: 0.7rem;
padding-right: 0.7rem;
}
}