/* responsive.css — the mobile layer for Redeye VC.
*
* Loaded AFTER site.css. Every rule in this file lives inside a media query, so
* the desktop rendering produced by the original TypePad theme is untouched by
* construction rather than by testing. If you add a rule here that is not inside
* a media query, you have broken that guarantee.
*
* The original theme is a fixed 1019px two-column float layout (#alpha 254px
* sidebar + #beta 753px content) with a position:fixed 95px footer. None of it
* was built for a phone, and none of it should be rewritten to be — this file
* adapts it at narrow widths and leaves it alone everywhere else.
*
* Two tiers:
* <= 1039px fluid two-column. The layout keeps its character; only the
* content column flexes. Stops the horizontal scrollbar that the
* fixed 1019px width causes on small laptops and tablets.
* <= 767px full stack, reordered, with mobile nav/footer and larger type.
*
* Colours below are sampled from the theme's own images so the mobile
* substitutes match: #c1453d is the dominant pixel of design/nav.gif, #525d63
* of design/redeyefooterbg.png.
*/
/* ══════════════════════════════════════════════════════════════════════════
STACKED SINGLE COLUMN (<= 1039px)
1040px is the first width at which the theme's fixed 1019px layout fits with
its margins, so it is the point below which the two-column float has to give
way. An intermediate fluid-two-column tier was tried and abandoned: the theme
carries `#alpha, #beta { display: inline }` as an IE6 float bugfix, and every
attempt to keep one column floated while the other flexed produced a sidebar
that overlapped the post. One breakpoint that is verified beats two where the
middle one is subtly wrong.
══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1039px) {
/* ── Layout ──────────────────────────────────────────────────────────
Source order is sidebar-then-content, so a naive unstack buries every
post under the logo, bio and a nine-year archive list. Flatten #alpha
with display:contents so its modules become siblings of #beta in one
flex column, then interleave: masthead, post, then everything else.
This keeps the site identity above the fold without touching the HTML. */
/* Stacked, the content is as wide as the viewport. At 1000px that is a
120-character measure, so cap it and centre — the stacked layout reads
as a deliberate single column rather than a broken two-column one. */
.layout-two-column-left #container {
width: auto;
max-width: 760px;
margin: 0 auto;
}
#pagebody-inner {
display: flex;
flex-direction: column;
}
.layout-two-column-left #alpha,
.layout-two-column-left #alpha-inner {
display: contents;
}
#alpha-inner > *:nth-child(1) { order: 1; } /* masthead logo */
.layout-two-column-left #beta { order: 2; } /* the post itself */
#alpha-inner > *:nth-child(2) { order: 3; } /* "Josh Kopelman" */
#alpha-inner > *:nth-child(3) { order: 4; } /* bio prose */
#alpha-inner > *:nth-child(4) { order: 5; } /* dashed rule */
#alpha-inner > *:nth-child(5) { order: 6; } /* archives */
.layout-two-column-left #beta {
width: auto;
float: none;
margin: 0 0 24px;
border-left: 0;
border-right: 0;
}
#beta-inner { padding: 0; }
/* Modules are drawn at the sidebar's 254px column width. As column flex
items they stretch on their own — an explicit width:100% would add the
theme's left margins on top of a full-width box and push past the
viewport, so clear the margins and let stretch do the sizing. */
#alpha-inner > * {
box-sizing: border-box;
width: auto;
max-width: 100%;
margin-left: 0;
margin-right: 0;
padding-left: 16px;
padding-right: 16px;
}
/* ── Masthead ────────────────────────────────────────────────────────
The logo is a 254px-wide GIF; centre it and let it be the page header. */
#alpha-inner > *:nth-child(1) {
padding-top: 14px;
padding-bottom: 10px;
}
/* .module-content sets text-align:left, so centring has to be applied
there rather than inherited from the module wrapper. */
#alpha-inner > *:nth-child(1),
#alpha-inner > *:nth-child(1) .module-content {
text-align: center;
}
#alpha-inner > *:nth-child(1) img { max-width: 100%; height: auto; }
/* .bio_text is the "Josh Kopelman" name plate. On desktop it carries
margin-top:90px and margin-bottom:-140px — a deliberate overlap that
floats the plate across the portrait artwork. Stacked, that negative
margin drags the plate down on top of the bio prose, so drop the
overlap and let the plate be a plain full-bleed band. */
.bio_text {
margin: 0;
padding: 10px 16px;
border-width: 1px 0;
text-align: center;
}
.bio_text h2 { margin-bottom: 2px; }
/* ── Bio ─────────────────────────────────────────────────────────────
The portrait is not an ![]()
; it is left-bg-josh.png, a 254x786 column
artwork painted on #alpha-inner and cleared by .bio's 150px top margin.
display:contents drops that background, so re-anchor the portrait onto
.bio itself and convert the clearance from margin to padding so the
image has a box to sit in. */
.bio {
width: auto;
margin-top: 0;
/* The photo occupies only rows 11-82 of the 254x786 artwork; the rest
is flat column background. Clear the photo, not the whole image. */
padding-top: 95px;
padding-left: 0;
background: url(/design/left-bg-josh.png) top center no-repeat;
}
/* ── Sidebar modules ─────────────────────────────────────────────────
The module chrome is drawn at the sidebar's inner width: .module-header
is a fixed 218x37 image bar clipped to 17px, .module-content a 198px
box. Widening the module wrapper alone leaves both stranded at a third
of the screen, so free the internals too. */
.module-header {
box-sizing: border-box;
width: auto;
height: auto;
min-height: 17px;
padding: 7px 12px;
line-height: 1.2;
/* archiveheader.gif is 218px wide and will not stretch; its dominant
colour stands in. */
background: #85b8d5;
}
.module .module-content,
.module-archives .module-content {
box-sizing: border-box;
width: auto;
}
.module-monthly-archives table { width: auto; }
/* dash.gif is a 219x3 rule; centre it rather than leaving it stranded. */
#alpha-inner > *:nth-child(4) { text-align: center; }
/* ── Archives ────────────────────────────────────────────────────────
Nine years of month links; give them room to breathe and a tap target
that clears the 44px minimum. */
.module-archives .module-list-item { margin-bottom: 10px; }
.module-archives .module-list-item a {
display: inline-block;
padding: 6px 8px;
margin: 2px 1px;
line-height: 1.1;
}
/* ── Nav ─────────────────────────────────────────────────────────────
Four floated at fixed widths (230 + 220 + 170 + search) on a 40px
bar painted with a 999x56 GIF. Let it wrap and pay for itself in height. */
/* nav.gif is a fixed 999x56 strip; below that the ends would go
transparent, so paint its dominant colour instead. */
#nav {
height: auto;
margin-bottom: 0;
background: #c1453d;
padding: 6px 10px;
}
.nav-list {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 4px 14px;
line-height: 1.6;
}
.nav-list .subscribe,
.nav-list .contact,
.nav-list .twitter,
.nav-list .search {
float: none;
display: block;
padding-left: 0;
}
li.subscribe, li.contact, li.twitter { width: auto; }
li.search {
width: 100%;
order: -1; /* search first — it is the useful one on a phone */
margin-bottom: 4px;
}
.nav-list .subscribe a { padding-left: 20px; }
#searchform fieldset.search {
display: flex;
gap: 6px;
border: 0;
margin: 0;
padding: 0;
}
#searchform input.box {
flex: 1 1 auto;
min-width: 0;
width: auto;
box-sizing: border-box;
font-size: 16px; /* < 16px makes iOS Safari zoom on focus */
padding: 7px 9px;
}
#searchform button.btn { flex: 0 0 auto; }
/* ── Footer ──────────────────────────────────────────────────────────
position:fixed pins a 95px bar over the content and #pagebody reserves
115px for it. On a phone that is a fifth of the screen spent on a
permanent bar. Let it sit at the end of the document instead. */
#ind-footer {
position: static;
height: auto;
padding: 14px 0;
background-color: #525d63;
}
#pagebody { padding-bottom: 0; }
.ind-footer-inner {
width: auto;
max-width: 100%;
padding: 0 16px;
text-align: center;
}
.ind-footer-inner > p,
.main-footer-inner > p {
float: none !important;
width: auto !important;
margin: 0 0 10px;
}
.ind-footer-inner .pages,
.main-footer-inner .pages {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 8px 16px;
}
.ind-footer-inner .pager-left,
.ind-footer-inner .pager-right,
.main-footer-inner .pager-left,
.main-footer-inner .pager-right,
.ind-footer-inner .pages.has-nums .pager-left,
.ind-footer-inner .pages.has-nums .pager-right {
float: none !important;
width: auto !important;
margin: 0 !important;
text-align: center !important;
}
/* ── Reading ─────────────────────────────────────────────────────────
The theme sets 12px body copy, tuned for a 661px measure. On a ~343px
measure that is a squint. */
.entry-body,
.entry-body p,
.entry-body li,
.entry-body blockquote p {
font-size: 17px;
line-height: 1.55;
}
.entry-content { padding: 0 16px; }
/* Posts from 2006-2014 are full of bare URLs pasted inline. At a 343px
measure a long one cannot wrap and pushes past the viewport. */
.entry-body, .entry-header, .module-list-item {
overflow-wrap: break-word;
word-wrap: break-word;
}
.entry-header, .entry-header a { font-size: 24px; line-height: 1.25; }
.entry-body blockquote { margin-left: 12px; padding-left: 12px; }
/* The per-post footer ("WRITTEN ON ") floats a 415px and a 150px
column side by side — both wider than the phone. */
.entry-footer .footer-left,
.entry-footer .footer-right {
float: none;
width: auto;
height: auto;
}
/* Posts carry inline pixel widths (up to 493px, sized for the 753px
column) on wrappers and images. Let them shrink. */
.entry-body [style*="width"],
.entry-body [width] {
max-width: 100% !important;
}
/* ── Media ─────────────────────────────────────────────────────────── */
img, table { max-width: 100%; }
img { height: auto; }
/* Posts float images inline at sizes chosen for a 661px measure -- up to
493px. Floated at that size in a ~331px column, the text beside them is
squeezed to a 40px ribbon, one or two words per line.
Capping the float instead of dropping it keeps the author's wrapping
intent and needs no width-conditional logic: the genuinely small inline
images in posts are 50-115px and already sit under the cap, so only the
oversized ones move. (The 33px drop cap and the READ MORE button are in
the sidebar, not .entry-body, and are untouched.) */
/* !important is required, not decorative: the inline-width clamp above uses
it to beat the posts' own style attributes, and these images carry an
inline width too, so without it that rule wins and the cap never applies. */
.entry-body img[style*="float"] { max-width: 45% !important; }
/* Embed sizing is handled globally in site.css (the theme had none at any
width, so players rendered at the browser default 300x150). Nothing
mobile-specific is needed beyond letting them shrink — and it must stay
scoped to .entry-body so the Twitter share-button iframe in
.entry-footer-share is not stretched to full width. */
.entry-body iframe { max-width: 100%; }
}