jutty/en
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity Actions

Improve layout responsiveness

Browse source
This commit is contained in:
Juno Takano 2026-01-15 16:39:42 -03:00
commit b408ce6f68
1 changed files with 80 additions and 11 deletions
Download patch file Download diff file Expand all files Collapse all files

91
static/style.css
View file

@ -1,18 +1,27 @@
:root {
--base-font-size: 1em;
}
html { html {
height: 100%; height: 100%;
font-family: sans-serif;
line-height: 1.5;
} }
body { body {
height: 100%; height: 100%;
margin: 0;
display: grid; display: grid;
grid-template-rows: auto 1fr auto; grid-template-rows: auto 1fr auto;
font-family: sans-serif;
font-size: var(--base-font-size);
line-height: 1.5;
} }
main { main {
width: 90vw; margin: 0 auto;
margin: 0 2.5vw; padding: 0 20px;
max-width: 1040px;
min-width: 600px;
box-sizing: border-box;
} }
pre { pre {
@ -20,7 +29,7 @@ pre {
overflow: auto; overflow: auto;
box-sizing: border-box; box-sizing: border-box;
padding: 10px; padding: 10px;
margin: 20px 2.5%; margin: 20px;
} }
@ -28,6 +37,7 @@ code {
padding: 3px 6px; padding: 3px 6px;
border-radius: 6px; border-radius: 6px;
margin-right: 2px; margin-right: 2px;
white-space: nowrap;
} }
pre, code { pre, code {
@ -77,7 +87,7 @@ span.label {
padding: 3px 6px; padding: 3px 6px;
border-radius: 6px; border-radius: 6px;
margin: 5px; margin: 5px;
font-size: 0.7em; font-size: calc(var(--base-font-size) * 0.7);
} }
span.root-label { span.root-label {
@ -111,13 +121,13 @@ h1.node-title {
} }
h3 { h3 {
font-size: 20px; font-size: calc(var(--base-font-size) * 1.2);
} }
footer div { footer div {
margin: 20px 0; margin: 20px 0;
text-align: center; text-align: center;
font-size: 0.8em; font-size: calc(var(--base-font-size) * 0.8);
} }
footer p { footer p {
@ -136,9 +146,14 @@ hr.connections {
margin-top: 60px; margin-top: 60px;
} }
nav#nav-main a {
text-decoration: none;
}
nav#nav-main { nav#nav-main {
text-align: center; text-align: center;
margin-bottom: 20px; margin-bottom: 20px;
margin-top: 10px;
} }
#nav-main-spread { #nav-main-spread {
@ -150,7 +165,7 @@ nav#nav-main {
nav#nav-main ul { nav#nav-main ul {
display: inline; display: inline;
padding-left: 0; padding-left: 10px;
margin: 0; margin: 0;
} }
@ -159,8 +174,11 @@ nav#nav-main li {
display: inline; display: inline;
} }
.nav-inputs div { .nav-inputs {
margin-right: 10px; margin-right: 10px;
}
.nav-inputs div {
display: flex; display: flex;
align-items: right; align-items: right;
} }
@ -182,6 +200,7 @@ div#error-poem {
margin-top: 8em; margin-top: 8em;
margin-right: 2em; margin-right: 2em;
font-size: 0.8em; font-size: 0.8em;
font-size: calc(var(--base-font-size) * 0.8);
} }
em, i { em, i {
@ -191,7 +210,7 @@ em, i {
} }
em#index-node-count { em#index-node-count {
font-size: 0.8em; font-size: calc(var(--base-font-size) * 0.8);
} }
table { table {
@ -264,6 +283,29 @@ hr {
display: inline; display: inline;
margin: 0; margin: 0;
} }
.nav-inputs {
margin-right: 0px;
}
div.nav-inputs {
margin-top: 10px;
}
main {
width: 95vw;
padding: 0 2.5vw;
min-width: unset;
}
ul {
padding-left: 20px;
}
pre {
max-width: 100%;
margin: 15px 5px;
}
} }
@media (min-width: 601px) { @media (min-width: 601px) {
@ -274,3 +316,30 @@ hr {
grid-template-columns: 1fr 1fr; grid-template-columns: 1fr 1fr;
} }
} }
@media (min-width: 1100px) and (max-width: 2100px) {
main {
width: 800px;
margin: 0 auto;
}
}
@media (min-width: 2100px) {
:root {
--base-font-size: 1vw;
}
main {
max-width: 40%;
}
.nav-inputs :is(input, select, button) {
height: calc(var(--base-font-size) * 1.6);
font-size: calc(var(--base-font-size) * 0.8);
padding: 0 calc(var(--base-font-size) * 0.3);;
}
.nav-inputs input[type="text"], .nav-inputs select {
min-width: calc(var(--base-font-size) * 5);
}
}