fix: pin project file list to the fixed column position, shrink+dim the info panel, drop obsolete lang-switch padding
This commit is contained in:
+19
-14
@@ -169,35 +169,40 @@ body:not(.home) .menu { display: none; }
|
|||||||
|
|
||||||
/* ─────────────────── PROJECT INFO PANEL ─────────────────── */
|
/* ─────────────────── PROJECT INFO PANEL ─────────────────── */
|
||||||
/* info.md (the project description / about text) lives outside the
|
/* info.md (the project description / about text) lives outside the
|
||||||
filebrowser now — on wide viewports it sits to the right of the whole
|
filebrowser now — on wide viewports it sits to the right of the file
|
||||||
file list, clearing the "$ ls" / "total N" shell lines up top; on narrow
|
list, clearing the "$ ls" / "total N" shell lines up top; on narrow ones
|
||||||
ones there's no room for two columns, so it just stacks below instead. */
|
there's no room for two columns, so it just stacks below instead.
|
||||||
|
the file list itself always stays exactly where the single centered
|
||||||
|
column normally sits — same position with or without an info panel,
|
||||||
|
so nothing shifts around depending on whether a page has text. */
|
||||||
.proj-layout { display: block; }
|
.proj-layout { display: block; }
|
||||||
.proj-info {
|
.proj-info {
|
||||||
margin: 1.5rem 0 0;
|
margin: 1.5rem 0 0;
|
||||||
font-family: var(--font-family-serif);
|
font-family: var(--font-family-serif);
|
||||||
font-size: 1.05em;
|
font-size: 0.85em;
|
||||||
line-height: 1.6;
|
line-height: 1.6;
|
||||||
}
|
}
|
||||||
.proj-info > :first-child { margin-top: 0; }
|
.proj-info > :first-child { margin-top: 0; }
|
||||||
.proj-info > :last-child { margin-bottom: 0; }
|
.proj-info > :last-child { margin-bottom: 0; }
|
||||||
|
|
||||||
@media (min-width: 900px) {
|
@media (min-width: 1100px) {
|
||||||
.proj-layout {
|
.proj-layout {
|
||||||
width: 100vw;
|
width: 100vw;
|
||||||
margin-left: calc(50% - 50vw);
|
margin-left: calc(50% - 50vw);
|
||||||
margin-right: calc(50% - 50vw);
|
/* pushes the file list back out to the same spot the narrow centered
|
||||||
padding: 0 1.5rem;
|
column always occupies — this is a fixed position, not a re-centered
|
||||||
|
pair, so it doesn't move depending on whether .proj-info exists */
|
||||||
|
padding-left: calc((100vw - var(--container-width)) / 2);
|
||||||
|
padding-right: 1.5rem;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
|
||||||
align-items: flex-start;
|
align-items: flex-start;
|
||||||
gap: 2.5rem;
|
gap: 1.5rem;
|
||||||
}
|
}
|
||||||
.proj-layout .filebrowser { flex: 0 1 var(--container-width); min-width: 0; }
|
.proj-layout .filebrowser { flex: 0 0 var(--container-width); }
|
||||||
.proj-info {
|
.proj-info {
|
||||||
flex: 0 1 calc(var(--container-width) - 4rem); /* slightly narrower than the content column */
|
flex: 0 0 18rem;
|
||||||
margin-top: 3.6rem; /* clear the two shell lines above the file list */
|
margin-top: 3.6rem; /* clear the two shell lines above the file list */
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -457,5 +462,5 @@ img { filter: none; }
|
|||||||
z-index: 2;
|
z-index: 2;
|
||||||
}
|
}
|
||||||
.lang-switch:hover { color: var(--color-text-primary); border-bottom: 1px solid; }
|
.lang-switch:hover { color: var(--color-text-primary); border-bottom: 1px solid; }
|
||||||
/* keep the prompt text clear of the toggle so long paths never slide under it */
|
/* no static width reservation needed here anymore — syncLangSwitch() (shell.js)
|
||||||
.prompt { padding-right: 3.5ch; }
|
already hides the toggle the moment a long line would reach it */
|
||||||
|
|||||||
Reference in New Issue
Block a user