Skip to content

Fix header full-bleed edge gap and readings-column overflow on mobile #171

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
brianglass merged 2 commits into from
Aug 11, 2026
Merged

Fix header full-bleed edge gap and readings-column overflow on mobile #171

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
ff7f11c
Fix header full-bleed edge gap and readings-column overflow on mobile
brianglass Aug 11, 2026
1d1fa50
Revert scrollbar-gutter: both-edges -- it was insetting html by 30px …
brianglass Aug 11, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
30 changes: 20 additions & 10 deletions orthocal/static/main.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,7 @@
html {
font-size: 20px;
font-family: 'EB Garamond', Garamond, 'Times New Roman', Georgia, serif;
/* Reserve the scrollbar's gutter on both edges so centered content
doesn't shift left when a page happens to be short enough not to
scroll (overflow-y:scroll alone reserves the gutter on the right
only, throwing centered content off by half a scrollbar-width). */
overflow-y: auto;
scrollbar-gutter: stable both-edges;
}
body {
margin: 0;
Expand Down Expand Up @@ -230,13 +225,24 @@ main#orthocal iframe {
border-radius: 3px;
}
main#orthocal > header {
position: relative;
padding: 2.2em 0;
box-sizing: border-box;
}
main#orthocal > header::before {
content: "";
position: absolute;
top: 0;
bottom: 0;
/* Spread far past the element's own edges rather than computing an
exact 100vw breakout -- vw units are unreliable on some mobile
browsers, which was throwing this off-center. body's overflow-x:
hidden clips the excess, so precision here doesn't matter. */
left: -100vmax;
right: -100vmax;
background-color: #f3f1ea;
border-bottom: 1px solid #bbb3a0;
width: 100vw;
margin-left: calc(-50vw + 50%);
margin-right: calc(-50vw + 50%);
padding: 2.2em calc(50vw - 50%) 2.2em calc(50vw - 50%);
box-sizing: border-box;
z-index: -1;
}
main#orthocal > header h1 {
margin-top: 0;
Expand Down Expand Up @@ -272,6 +278,9 @@ main#orthocal > header h1 span {
align-items: start;
margin-top: 1.5em;
}
.readings-columns > section.readings {
min-width: 0;
}
section.readings h2 {
color: #a00;
}
Expand Down Expand Up @@ -310,6 +319,7 @@ section.readings h2 {
padding: 2px 6px;
cursor: pointer;
vertical-align: middle;
max-width: 100%;
}
.translation-picker select:hover {
border-color: #888;
Expand Down