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 {
--bg: #fbfaf5;
--fg: #2c2c2c;
--sidebar-size: minmax(min-content, 1fr);
--sidebar-max-size: 35rem;
--sidebar-min-size: 30rem;
--main-size: auto;
}
body {
display: grid;
grid-template: "title main" min-content "sidebar main" 1fr "sidebar footer" auto / 350px auto;
}
@media (max-width: 900px) {
body {
grid-template: "title" "main" "sidebar" "footer";
}
grid-template:
"title main ." min-content
"sidebar main ." 1fr
"sidebar footer ." auto
/ var(--sidebar-size) var(--main-size) var(--sidebar-size);
}
#title {
grid-area: title;
justify-self: end;
width: 100%;
max-width: var(--sidebar-max-size);
min-width: var(--sidebar-min-size);
margin: 0;
padding: 0;
@ -37,17 +44,22 @@ body > main {
#sidebar {
grid-area: sidebar;
justify-self: end;
width: 100%;
max-width: var(--sidebar-max-size);
min-width: var(--sidebar-min-size);
display: flex;
flex-direction: column;
gap: 2rem;
margin: 0;
}
body > header > nav {
#title > nav {
padding: 0.7rem;
}
body > header > nav > ul {
#title > nav > ul {
display: flex;
flex-direction: row;
justify-content: space-around;
@ -56,7 +68,7 @@ body > header > nav > ul {
gap: 1rem;
}
body > header > nav > ul > li {
#title > nav > ul > li {
display: inline-block;
margin: 0;
}
@ -142,3 +154,40 @@ body > footer {
padding-left: 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;
}
}