AI competition for the redesign of a site that already has CSS

by John Morgan

In our last post, John Morgan and Philip Greenspun compared four LLMs to see how they would do on redesigning the Berkshire Hathaway home page, an HTML relic of the 1990s untainted by CSS. Today we’ll give AI a tougher challenge: redesign the philip.greenspun.com site from four sample HTML files and the CSS that is referenced by them. The contenders are ChatGPT, Grok, Gemini, and Claude.

The Prompt

I want to update the CSS on a web site so that it renders nicely on mobile and, ideally, has an improved look on desktop as well. I’d like to not make too many changes to the HTML, though I could add a viewport meta tag in the head of every HTML file, for example. I’m going to upload four sample HTML files from this site and two CSS files that are referenced (margins-and-ads.css is the one that nearly all pages on the site reference). Please send me back new CSS and any changes that you think would be worth doing on all of the HTML pages on the site.

Sample Pages on Desktop Before (Chrome)

Sample Pages on Mobile Before (iPhone 17 Pro Max, Chrome)

Comment from Philip: I’m grateful to John for not looking at these and asking, “Did you think that mobile web browsing was a fad and would go away?” (on the actual device they all are absurdly small and hard to read)

from ChatGPT 5.2

Below is a “drop-in” modernization that keeps your existing HTML working, but makes it responsive on phones and nicer on desktop—without needing structural HTML changes.

It’s designed around what I see in your samples:

  • Most pages pull in margins-and-ads.css and currently just set big left/right margins plus floats for images/ads/notes. margins-and-ads
  • Some pages also include philg.css for paragraph spacing/indents and note backgrounds. philg
  • Layout is often “classic HTML”: <body bgcolor=...> , <center> , <table> for header layout, images with align/hspace/vspace , etc. Philip Greenspun on Photography Travels with Samantha Home
  • Photo pages use <div class="minigallery">…</div> with <br><br> breaks. How to Photograph Architecture …
  • Some pages include custom elements like <photonetpage> / <photonetpagenav> and <product…> tags. How to Photograph Architecture … How to Photograph Architecture …
  • p.marginnote exists and is sometimes floated right at 25% width (bad on mobile). margins-and-ads

One small HTML change I recommend on every page

Add this inside <head> :

<meta name="viewport" content="width=device-width, initial-scale=1">

That alone fixes a lot of “tiny text / zoomed-out” mobile behavior.

(Your pages currently don’t have this viewport meta in the sample heads. Philip Greenspun on Photography Travels with Samantha Home)

Optional but nice (safe even with older markup):

<meta name=”color-scheme” content=”light”>

Why these changes help (mapped to your existing markup)

  • Big fixed margins become mobile-friendly padding: your current body {margin-left/right: 3em} can still be too wide or awkward on phones. margins-and-ads
  • Floats collapse on mobile: images with align="right" and your .illustration floats (plus margin notes/ads) are the #1 cause of “narrow column” mobile misery. Philip Greenspun on Photography margins-and-ads
  • minigallery becomes usable: instead of relying on <br><br> breaks, it wraps naturally and centers on small screens. How to Photograph Architecture …
  • Layout tables stack: your header table (image + title) won’t force sideways scrolling. Philip Greenspun on Photography
  • Custom tags display correctly: <photonetpage> / <photonetpagenav> should behave like block containers. How to Photograph Architecture …

If you’re willing to do one more (still small) HTML improvement later

Not required, but high value over time:

  1. Remove bgcolor / text attributes from <body> and let CSS control it. (Right now you set it in HTML on many pages. Philip Greenspun on Photography)
  2. Replace <center> blocks with CSS classes (centering via CSS is more controllable). Travels with Samantha Home

But again: the CSS above works even if you do none of that.

If you want, I can also generate a tiny “smoke test” checklist (pages to open + what to verify) based on these exact sample files (header table, minigallery , marginnote , and a long chapter page).

[after asking for the checklist]

After ChatGPT

A huge amount of screen space is wasted when the browser is opened at my usual width:

Maybe ChatGPT is right that this is about as wide as a column of text should be, but on a site without ads it doesn’t look right and denies the user the choice to get more content on his or her screen. My previous style sheets didn’t set a font, which enabled the browser to default to whatever the browser authors thought was best or whatever the user had chosen via customization (of course, it would be a rare user who’d take the trouble). ChatGPT has hard-coded in a sans-serif font. Asked why, ChatGPT explains:

But then it backpedals and says that maybe serif could play a role:

Why serif may actually be the right choice for your site

Now the counter-argument—and this matters for your content.

Your site is:

  • long-form
  • essay-like
  • book-structured
  • historically text-forward
  • intentionally “print-ish” (paragraph indents, chapter structure)

That is exactly where serif shines, especially on desktop and tablets.

You’re not running a SaaS dashboard or news feed—you’re publishing durable prose.

My recommended compromise (best of both worlds)

Use serif for body text, sans-serif for UI and headings, with mobile-aware tuning.

Option A: Classic, conservative (very “Philip Greenspun-appropriate”)

body{
font-family: Georgia, "Times New Roman", Times, serif;
}

Then add (already supported by the rest of the CSS):

h1, h2, h3, h4,
photonetpagenav{
font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

This:

  • preserves the essay/book feel
  • keeps navigation and headings crisp
  • avoids over-modernizing the site

Option B: Modern serif optimized for screens (my favorite)

body{
font-family: Georgia, "New York", "Times New Roman", Times, serif;
font-size: 17px;
line-height: 1.6;
}

Plus mobile tweak:

@media (max-width: 720px){
body{
font-size: 16px;
}
}

This gives you:

  • excellent long-form readability
  • no “tiny Times on iPhone” problem
  • minimal aesthetic change from the original site

Option C: Keep sans-serif everywhere (only if you want a stylistic reset)

This is what I initially gave you, but I would not recommend it unless you’re intentionally rebranding the site visually.

Why I didn’t ask first (and what I’d do now)

I defaulted to sans-serif because:

  • the stated priority was mobile correctness
  • you wanted minimal HTML changes
  • CSS-only fixes favor safe defaults

But given:

  • your paragraph indents
  • chapter structures
  • archival nature of the content

I would switch the body back to serif and tune size/line-height instead.

TL;DR

  • I chose sans-serif for mobile safety and cross-platform predictability.
  • For your site, serif is not only appropriate—it’s arguably better.
  • Best solution: serif body, sans-serif headings, with slightly larger text and generous line-height.

If you want, I can:

  • give you a one-line diff to revert the font choice cleanly, or
  • mock up before/after screenshots (conceptually) for desktop vs mobile so you can decide instantly.

That last offer is interesting. Maybe ChatGPT actually does have a browser in its back pocket, contrary to what we’ve seen in earlier interactions. Asked for the screenshots, it responds that the first rule of Screenshot Club is that there are no screenshots.

Great—since I can’t literally render screenshots of your pages here, the most useful thing I can do is give you faithful visual mock-ups of what you’d see, tied directly to your actual content and layout patterns. Think of this as a guided “mental screenshot” you can compare against your browser in 30 seconds. Another page:

Things actually look pretty good on mobile. These are iPhone 14 Pro Max mockups from Desktop Chrome’s developer tools:

From Grok Expert

Analysis and Key Changes

  • Mobile Responsiveness:
    • Added media queries for screens under 768px (common breakpoint for tablets/mobile). On small screens, I remove floats (e.g., stack margin notes and ads vertically), ensure images scale down, reduce body margins for more content space, and increase relative font sizes where needed (e.g., small notes).
    • Images now have max-width: 100% and height: auto to prevent overflow and maintain aspect ratios.
    • Flexible layouts: Used relative units (em, %) more consistently. No fixed pixel widths were added; existing ones (like 25% for margin notes) are adjusted or overridden on mobile.
  • Desktop Improvements:
    • Modernized typography slightly: Set a base font size (16px for readability), used a sans-serif font stack (system fonts for performance), and added subtle line-height and padding for better readability.
    • Improved spacing: Increased paragraph margins slightly for breathing room, without altering the vintage feel.
    • Kept the look simple and consistent with the original— no major redesigns like grids or flexbox (to minimize potential breakage on old HTML).
  • Minimal HTML Impact:
    • No structural changes needed (e.g., no new wrappers or classes). The existing classes (e.g., .illustration, .marginnote) are leveraged.
    • The only global HTML change I recommend is adding a viewport meta tag to every <head> (this enables proper scaling on mobile).
    • Tested mentally against the provided HTML samples: They should render well without edits beyond the meta tag. For example:
      • “Travels with Samantha Home.htm”: Centered content and image galleries stack nicely on mobile.
      • “Chapter X_ Overcharged in Katmai.htm”: Narrative text with inline images flows better; philg.css styles (e.g., indented paragraphs) are preserved but made responsive.
      • “How to Photograph Architecture (Interior).htm”: Minigalleries (floated images) stack vertically on mobile.
      • “Philip Greenspun on Photography.htm”: Lists and blockquotes remain readable.
  • Other Notes:
    • Combined some redundant styles from philg.css into margins-and-ads.css (e.g., body margins, paragraph indents). If philg.css is only used on specific pages (like “Chapter X”), you can keep it but update it similarly.
    • Assumed no JavaScript or modern frameworks—just plain CSS.
    • Performance: Kept CSS lightweight; no bloat.
    • Browser Compatibility: Should work on modern browsers (IE11+ might need tweaks, but the site is old anyway).
    • Testing: I recommend testing on real devices (e.g., via BrowserStack or your phone). If you provide a live URL, I could refine further.

Recommended HTML Changes

Add this to the <head> of every HTML file (right after the <title> or existing meta tags):

HTML

<meta name="viewport" content="width=device-width, initial-scale=1.0">

This is the only change needed site-wide. It tells mobile browsers to use the device’s width for layout and start at 1:1 scale (no forced zooming out).

If you want to automate this (e.g., via a script or find/replace), search for </head> and insert it just before.

No other HTML changes are required—the CSS updates handle everything via existing selectors.

Updated CSS Files

Updated margins-and-ads.css

This is the primary CSS file (referenced by nearly all pages). I’ve incorporated relevant styles from philg.css (e.g., paragraph margins and indents) to make it self-contained. If a page references both, this won’t conflict, but you could remove redundant philg.css includes if desired.

after Grok

Not nearly the epic waste of horizontal screen space:

Based on the desktop samples: Advantage, Grok. How about mobile?

These seem fairly similar to what ChatGPT’s CSS produced.

from Gemini Pro

Here is a modern, mobile-responsive solution for your website.

1. The HTML Change (Crucial)

You must add the “viewport” meta tag to the <head> of every HTML file. Without this, mobile phones will zoom out to show the desktop view, making the text tiny and unreadable regardless of what CSS we write.

Insert this line inside the <head> section of all HTML files:

HTML

<meta name="viewport" content="width=device-width, initial-scale=1">

2. The CSS Updates

Since margins-and-ads.css is your primary stylesheet, we will transform it into a “Master” stylesheet that modernizes the look and handles mobile layouts.

Replace the entire content of margins-and-ads.css with this:

…

For philg.css : The old text-indent (indenting the first line of every paragraph) makes mobile text look messy and is generally outdated for web design. I recommend replacing the content of philg.css with the following, which aligns with the new modern style:

…

3. Summary of Changes

  1. Fixed Widths Removed: The old CSS set specific margins (3em) that squeezed phone screens. The new CSS uses max-width: 900px for desktop (comfortable reading width) and small padding for mobile.
  2. Images Tamed: Old HTML uses width="230" attributes and align="right" . The new CSS overrides this on mobile, forcing images to scale
Full post, including comments

Shout-out to our brothers, sisters, and binary-resisters in Minneapolis

by philg

Some gratitude to the good people of Minneapolis. The city’s martyrs of ICE resistance, such as Alex Pretti and Renée Good, are apparently forgotten because Donald Trump briefly posted part of a “king of the jungle” video (apparently suppressed by the righteous who run YouTube, but available from the haters at X). Front page of the NYT today condemning Trump for his racism; nothing anywhere on the front page about Minneapolis, as if the sacrifices were for nothing:

I will celebrate Minneapolis, therefore, with a shout-out to SANUS, headquartered in suburban Minneapolis (a 3-minute drive from the Al-Amaan mosque). Mere hours before we were to our Super Bowl extravaganza guests are arriving, our four-year-old $900 Costco 86″ TV wouldn’t turn on. Thanks to the Sanus BLT3-B1 “tilt 4D” mount, however, I was able to pull the recalcitrant machine from the wall and use my Ph.D. in EECS skills to unplug it and plug it back in. The kids are watching the Puppy Bowl and, if the Costco gods are with us, the party will proceed as planned.

I suppose that we also have to celebrate our brothers and sisters in China (not too many binary-resisters there) for actually making the Sanus BLT3-B1 so that it cost $100 instead of $300.

(I do wish that ICE would detain and deport whoever made the Xfinity XG1v4 box, which I picked up because of its advertised 4K capability. It needs to be power-cycled almost every time that we want to use it and the boot-up process is almost 10 minutes.)

Let this be a cautionary tale for anyone who is considering a super-slim wall-hugging TV mount that requires professional skills and multiple humans to execute a dismount and reach-around. (I guess we could have accomplished the power-cycle via flipping breakers. I’ve never seen a behind-the-TV outlet that is associated with a convenient switch that could be used for a convenient power-cycle.)

Finally, maybe this is the time to start an extended warranty claim on the TV? It was a floor model at Costco and they threw in a five-year warranty from Allstate. The warranty was already used once to replace the TV’s main board, possibly a casualty of a lightning storm putting high voltage into the Xfinity cable (another good reason to go with a fiber connection if you’re lucky enough to live in a place where fiber is available).

Loosely related

From the masjid around the corner from Sanus, a Facebook post from one month after the Gazans’ peaceful October 7, 2023 excursion into Israel:

Allah is the All-Mighty, the Most Merciful, the One Who has the absolute ability to save the oppressed, inflict punishment on the criminals and stop the brutal massacre and genocide happening in Gaza.

It’s a challenging theological question. Allah is “All-Mighty, the Most Merciful” and with “the absolute ability to save the oppressed” (redundant with “All-Mighty”?). Yet the genocide happening in Gaza wasn’t stopped until the Gazans had suffered the loss of most of their military capability. Why did Allah wait two more years and, perhaps more importantly, not assist the Gazans in realizing their military goals, including the destruction of the Zionist entity and the establishment of Hamas rule from the river to the sea?

Full post, including comments

Add EBT card readers to televisions?

by philg

It’s Super Bowl Sunday, a day when tens of millions Americans with jobs will sit on their sofas instead of working and paying taxes associated with working, e.g., payroll and personal income tax.

We have been gifted by far-sighted and generous politicians whose dreams of an improved cradle-to-grave welfare state for roughly 50 percent of Americans have been spoiled by the laziness of Americans who have jobs but don’t work enough hours to fully fund progressive dreams.

Imagine the boost to tax revenue if working Americans worked all weekend instead of watching games on TV. What if we augmented televisions and streaming services with EBT card readers and only those with active SNAP/EBT/food stamps would be able to watch NFL, NBA, MLB, etc.? (It’s easier to get someone who works 50 hours per week to instead work 60 hours per week than it is to get someone who works 0 hours per week to toil for 10 tedious hours per week.)

I pointed this out yesterday, but it is worth pointing out again today: Santa Clara County just recently issued a mask order to reduce the spread of COVID-19 (below) and today they’re going to host a COVID-19 superspreader event. #Science!

Full post, including comments

Bad Bunny at the Super Bowl

by philg

As our young football fans clean up the house for tomorrow’s guests and prepare the chip bowls, I wonder if Bad Bunny will sing his big hit “Monaco” tomorrow at the Super Bowl. That should start some conversations at American elementary schools. Sample lyrics:

You don’t know what it’s like to be out at high sea with two hundred hoes
To have the flight attendant suck you off in the sky
What it’s like to throw five hundred thousand at the strip club
That’s why I don’t care about your opinion
That’s why you’re 101 in the top 100, and I’m first
You’re not rappers anymore, now you’re podcasters
My barber charges more than you
Fucking and traveling around the world

When I die, I’m gonna leave a hundred plots of land to my grandchildren
To all my ladies, the butts and the breast
And an F-40 for my haters but without brakes
Why? So they crash
He, so they kill themselves
Red or white, matt black, what you want?
Rest in peace, I’m still on the yacht

I light a phillie, the family is in Monaco

ChatGPT:

It’s not meant to be taken literally; he’s not claiming there are exactly 200 women on the yacht. Instead, it’s an exaggerated fantasy of abundance — so rich, so famous, so untouchable that he could fill a boat with models just for fun.

The phrase “I light a Phillie” (sometimes written “light up a Phillie”) comes from slang referring to lighting a Phillie Blunt, which is a cigar brand (“Phillies”) that’s often used to roll and smoke marijuana.

[Regarding the flight attendant line] That lyric describes conduct that would violate multiple aviation rules and laws. Interference with flight crew (14 CFR §91.11): Anything that distracts or interferes with a crewmember’s duties is prohibited. Engaging a flight attendant in sexual activity would clearly qualify. … Consent & power dynamics: Any sexual activity involving a working crewmember raises serious legal issues, including coercion and workplace sexual misconduct. … Sexual acts in public conveyances: Aircraft are considered public spaces under U.S. law. Sexual activity onboard can constitute indecent exposure or lewd conduct, which is prosecutable.

[The AI seems to be confused regarding the fact that a private jet can have, and in some cases require, flight attendant, e.g., when certified for more than 19 passenger seats.]

Related:

Full post, including comments

Can LLMs bring the Berkshire Hathaway web site into the 21st century? (AI and CSS/HTML)

by John Morgan

Another collaborative post from Philip Greenspun and John Morgan…

Let’s see what the Giants of Coding can do in the world of HTML and CSS design. Web page design should be much easier than generating C, Java, Python, etc. because people with no programming experience are often capable of writing HTML/CSS. On the other hand, HTML/CSS also entails the challenge of taste. There is no technical obstacle to making every word on a page bold and bright red, but should every word be bold/red?

This article will compare the performance of ChatGPT, Grok, Gemini, and Claude on the challenge of redesigning a legacy web site to render tastefully and legibly on both mobile and desktop. (Inspiration: Peter Norvig’s comparison of LLM performance on small programming puzzles.)

Let’s start with Berkshire Hathaway, market cap $1 trillion. “Berkshire has failed to outperform the S&P 500 since 2008—not because Buffett lost his touch, but because deploying an unwieldy $1 trillion in capital effectively is exponentially harder than investing millions” says Morningstar. The underperformance relative to the S&P can’t be attributed to diverting effort into web page design. The home page is a hideous example of misleading user interface. The text that isn’t hyperlinked is in blue, the standard color for hyperlinks, and unvisited links are in purple, the standard color for already-visited hyperlinks. This isn’t a site that was competently built in the mid-1990s and then didn’t evolve with the rest of the Web; it would have been an example of substandard web design taste even in the mid-1990s.

How does it perform on mobile (iPhone 17 Pro Max; Chrome)? It’s a literal waste of (screen) space:

Tiny barely legible fonts and half the screen left blank.

The Prompt

Here’s an HTML file [upload] with no style sheet reference that doesn’t render well on mobile. Please create a .css file that it can reference and also tell me what changes will be needed in the .html (please keep this to a minimum) to make the site responsive and also look as good as it can on both desktop and mobile.

from Grok

Here’s a practical approach to make the Berkshire Hathaway homepage look decent on both desktop and mobile with minimal HTML changes and one new CSS file.

Minimal HTML changes required

Add these two lines inside the <head> (right after the <title> is fine):

HTML

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="berkshire.css">

That’s it for HTML edits. (If the file is named something else, adjust the href accordingly.)

Suggested berkshire.css file

CSS

/* ============================================================================
   Berkshire Hathaway Homepage - Responsive CSS
   Minimal modern cleanup + mobile-friendly layout
   ============================================================================ */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: Georgia, "Times New Roman", Times, serif;
color: #000080;
background-color: #ffffff;
line-height: 1.45;
}
...
  font[size="1"] {
font-size: 0.78rem;
}
}

What this CSS does

  • Keeps the classic Berkshire color scheme and serif font feel
  • Makes the two-column table become a single-column stacked layout on phones/tablets
  • Improves spacing, readability and touch targets
  • Slightly modernizes typography without destroying the retro aesthetic
  • Handles very small screens reasonably well

Optional nice-to-have HTML improvements (not required)

If you are willing to make a few more small changes later:

HTML

<!-- Replace the big first <p align="center"><b>...</b></p> with: -->
<h1 style="text-align:center; margin:1.5rem 0; font-size:clamp(2rem, 8vw, 3.4rem);">
B<span style="font-size:0.65em;">ERKSHIRE </span>
H<span style="font-size:0.65em;">ATHAWAY </span>
INC.
</h1>
<p style="text-align:center; color:#333; font-size:1.1rem; margin-bottom:1.5rem;">
3555 Farnam Street<br>Omaha, NE 68131<br>
<strong>Official Home Page</strong>
</p>

But again — the two <head> lines + the CSS file above should already give you a surprisingly usable mobile experience with almost zero HTML surgery.

Let me know if you’d like a darker mode variant or more aggressive modernization while still preserving the spirit of the page.

after Grok

Desktop:

Mobile:

from Gemini

It is a classic “rite of passage” for developers to look at the Berkshire Hathaway website—it’s famously minimalist (some might say “frozen in 1996”).

To modernize this without stripping its soul, we need to move away from fixed-width tables and use a CSS Grid layout.

1. The CSS File ( style.css )

Create a new file named style.css in the same folder as your HTML. This code handles the responsiveness, typography, and spacing.

/* Basic Reset & Typography */
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
line-height: 1.6;
color: #000080;
max-width: 1000px;
margin: 0 auto;
padding: 20px;
background-color: #ffffff;
}
... 
/* The Magic: Convert the Table to a Responsive Grid */
tbody {
display: grid;
grid-template-columns: repeat(2, 1fr); /* 2 columns on desktop */
gap: 20px;
}
...
.geico-box {
text-align: center;
padding: 20px;
background: #fff;
}

2. Changes to the HTML

You only need to add two lines to your <head> section. Everything else will be handled by the CSS targeting the existing tags.

  1. The Viewport Meta Tag: This tells mobile browsers to match the screen width.
  2. The Link Tag: This connects your new CSS file.

Add these inside the <head> tags:

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css">

What these changes achieve:

  • Mobile First: On a phone, those two columns of links will now stack vertically so you don’t have to “pinch and zoom” to read them.
  • Readability: It replaces the default Times New Roman with modern system fonts that are much easier on the eyes.
  • Touch Friendly: By adding padding and a light background color to the table cells ( td ), we turn the links into “cards” that are much easier to tap with a thumb.
  • Minimal Intrusion: We didn’t have to rewrite the table structure or delete any of the original content, which honors the “no-nonsense” spirit of the original site.

Would you like me to help you refactor the HTML further to remove the legacy <font> and <center> tags entirely for better SEO?

after Gemini

Desktop:

Mobile (less compact than Grok’s layout, but arguably more attractive and consistent):

from Claude (slick two-window presentation! Multi-minute analysis)

after Claude

Desktop:

Mobile (failure to notice that the text will overlap; perhaps the AI doesn’t have its own headless browser where it can test and see whether HTML/CSS renders properly?):

from ChatGPT

Below is a drop-in stylesheet + the smallest HTML tweaks needed to make your page render cleanly on phones while still looking good on desktop (your file is very “classic” HTML with <font> tags + a two-column <table> layout berkshire-hathaway).

1) Create styles.css

Save this as styles.css in the same folder as your .htm file:

/* styles.css - responsive polish for legacy table/layout HTML */
/* --- sensible defaults --- */
:root {
--page-max: 980px;
--pad: 16px;
--text: #0a2a6a;          /* close to the original text color */
--bg: #ffffff;
--link: #5a1a7a;          /* close to the original link color */
--visited: #b00000;       /* close to the original vlink */
--rule: rgba(0,0,0,0.18);
}
...
/* Lists look cramped by default in many browsers */
ul {
margin: 0.4rem 0 0.8rem 0;
padding-left: 1.25rem;
}
li { margin: 0.35rem 0; }
...
/* --- mobile: convert the 2-col table into stacked sections --- */
@media (max-width: 640px) {
:root { --pad: 14px; }
/* Turn table rows/cells into blocks so each "column" stacks */
table, tbody, tr, td { display: block; width: 100% !important; }
td {
padding: 6px var(--pad);
}
/* Reduce overly-large headline spacing on small screens */
p[align="center"] {
margin: 12px auto;
}
/* Better tap targets for links inside list items */
li a {
display: inline-block;
padding: 6px 0;
}
}

What this accomplishes:

  • Keeps the old-school Berkshire look (colors, centered header, simple typography), but
  • Prevents horizontal squish/overflow, and
  • Stacks the two columns into a single column on phones (because your core layout is a 2-column table with width="50%" tds berkshire-hathaway).

2) Minimal HTML changes needed

A) Add viewport + CSS link (recommended)

In your <head>...</head> add these two lines (anywhere before </head> ):

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css">

Why: without a viewport meta tag, mobile browsers often render “desktop width” then shrink it, making everything tiny.

B) (Optional but nice) add a language attribute

Change:

<html>

to:

<html lang="en">

That’s it—no restructuring required. The stylesheet is designed to “wrap” and modernize the existing markup (including the <table width="90%"> layout berkshire-hathaway) without you having to rewrite the HTML.

If you want, I can also provide a second CSS variant that’s more “modern” (card-like sections, a little more whitespace, subtle background tint) while still preserving the minimalist vibe—still with minimal/no HTML changes.

after ChatGPT

Desktop:

Mobile (another failure via overlap):

after ChatGPT again (accepted the offer of a more modern CSS)

Desktop:

Mobile (still overlapping):

Summary

Despite the apparent simplicity of the challenge, Gemini was the only LLM that was able to create a web site that rendered well on mobile. Grok came in second with a mobile rendering that featured odd spacing and horizontal lines placed seemingly randomly but at least kept the text legible. Both ChatGPT and Claude’s styling resulted in mobile rendering that can only be described as broken with multiple instances of overlapping text.

These LLMs probably could do much better if they ran an open-source web browser, such as Firefox, internally and used the browser to render whatever they’d designed and then used their image understanding capabilities to spot obvious problems, e.g., overlapping blocks of text.

Stay turned for more comparisons among LLMs in the web development domain, including a look at the Brave New World of artificial intelligence in integrated development environments (AI in IDEs).

Full post, including comments

How’s everyone’s crypto wallet doing?

by philg

The news in the Bitcoin world isn’t all bad. The tensor processing units (proprietary Google LLM chips) behind Gemini 3.0 fixed our Bitcoin v. Medical School page just in time for the Big Slide:

(adjusted for Bidenflation, Bitcoin is now down substantially from the mid-March 2021 price when everyone was filled with hope regarding the Biden-Harris administration leading us forward and out of the bad times of the Trump dictatorship (v1.0))

I wonder what this means for the Cirrus waiting list and aircraft values in general. A crypto investor seems like a natural personal airplane customer: (a) independent personality, (b) not averse to irrational purchases, (3) maybe a need to go back and forth to Puerto Rico frequently.

Stake in the ground: I’m not going to sell any Bitcoin!

Separately: “This Bitcoin crash is worse than a divorce. I lost half of my money and my wife is still around.” (source)

Readers: who has favorite X posts to share? I’ll start:

Full post, including comments

Why Johnny LLM can’t read web page source code

by John Morgan

First of a series of posts by John Morgan and Philip Greenspun on using AI models to perform HTML and CSS design.

The plan: Compare ChatGPT, Gemini, Claude, and Grok to see which LLMs do the best job on CSS and, if necessary, HTML redesign of existing web pages.

All of these models failed at the simplest imaginable HTML/CSS question (not hyperlinks in the queries, but included here for convenience):

Do all four of these HTML pages reference the same .css file? https://philip.greenspun.com/samantha/ https://philip.greenspun.com/samantha/samantha-X https://philip.greenspun.com/photography/ https://philip.greenspun.com/photography/learn/interior

All four pages actually do reference the same .css file, /margins-and-ads.css, and one file also references /philg.css

Sample actual page content:

<head>
<meta name="keywords" content="interior photography">
<LINK REL=STYLESHEET HREF="/margins-and-ads.css" TYPE="text/css">

<title>How to Photograph Architecture (Interior)
</title>
</head>
<head>
<link rel=stylesheet href="/margins-and-ads.css" type="text/css">
<LINK REL=STYLESHEET HREF="/philg.css" TYPE="text/css">
<title>Chapter X:  Overcharged in Katmai</title>
<meta name=processor content=adp>
</head>

from ChatGPT

I checked the content of the four pages you listed, but from the snippets returned there is no visible <link rel=”stylesheet” …> line in the parts shown — that’s because the portions we could fetch start at the body text and don’t include the <head> section where CSS is normally referenced. … If you want precise verification, I can fetch and show the full <head> source (including the exact <link …> line) for each of the four URLs — just let me know.

[after “Yes please fetch the full HEAD source for each one and verify.”]

I tried to fetch the full HTML <head> source of each of the four pages you listed — specifically to look for the <link rel=”stylesheet” …> tag that shows which CSS file (if any) each page references. However, the tool returns only the rendered body content and not the complete <head> section, so I couldn’t directly inspect the <link> tags for CSS in the fetched results.

from Claude

I should note that the web_fetch tool extracts text content and may not always show the complete HTML <head> section where CSS references typically appear. The pages I did fetch appear to be very minimalist in design, consistent with early-to-mid 1990s web design when these pages were originally created.

Without being able to see the complete HTML source including the <head> sections of all four pages, I cannot definitively confirm whether they all reference the same CSS file.

[prompted further]

Now I have all four pages. Let me examine them for CSS file references. Looking at the extracted HTML content from all four pages, I notice that none of them contain explicit <link> tags to external CSS files in the content that was extracted.

from Gemini

[Us: Google’s smartest child has trouble counting and trouble understanding HTML, but it is great at presentation. It says that three pages reference no external CSS and then shows a table featuring two files that reference CSS. It is dead wrong about the interior page, which references margins-and-ads.css. It either cross-contaminated its own thinking by looking at the samantha-X file, which does reference philg.css or found a reference to the file in the BODY of https://philip.greenspun.com/panda/html.]

No, they do not all reference the same CSS file. In fact, three of the pages appear to use no external CSS at all, while one of them uses a specific stylesheet for that section of the site.

Based on the source code for each page:

  1. https://philip.greenspun.com/samantha/
    • CSS: None.
    • Details: This page uses old-school HTML attributes (like bgcolor=white and text=black in the <body> tag) for styling rather than an external CSS file.
  2. https://philip.greenspun.com/samantha/samantha-X
    • CSS: None.
    • Details: Like the index page for this book, individual chapters are formatted using plain HTML and inline attributes.
  3. https://philip.greenspun.com/photography/
    • CSS: References /philg.css
    • Details: This page contains a <link rel="stylesheet" href="/philg.css" type="text/css"> tag in the <head> .
  4. https://philip.greenspun.com/photography/learn/interior
    • CSS: References /philg.css
    • Details: As part of the photography tutorial section, it shares the same stylesheet as the photography index.

Limitation Rationale

Why are these LLMs so hobbled? Apparently, it is intentional for the LLM to see only what a user might see. This ensures that dynamic sites are properly understood and also may prevent some security risks.

When prompted, ChatGPT replied that this limitation is due to its web content fetching tool not returning the full payload and instead querying “search indexes, reader-mode extracts, preprocessed HTML snapshots, [and] content extraction pipelines” that are “optimized for reading and summarizing, not inspection.” It explained that “in those pipelines, the <head> is usually stripped entirely or reduced to a title and a few meta fields [because] CSS links, JS, analytics, preload hints, etc. are irrelevant to text extraction [and] keeping them increases size and complexity with no benefit for search/reading.” If true, this suggests that the tool was not built with full HTML analysis in mind but rather optimized for the admittedly more common text extraction use case.

Next Steps

Since our future AI overlords won’t download a web page from the Internet and click “view source”, the next step was to see what these LLMs could do if we downloaded HTML and CSS files to our desktop computers and then uploaded the files back up to the LLMs along with our questions.

Full post, including comments

Mask efficacy Scientists move to Cato and prove that immigration makes us rich

by philg

Cato Institute has released a couple of studies recently showing that low-skill immigrants are valuable. (The papers lump together all immigrants, but the majority of immigration in recent decades was low-skill.)

“Immigrant and Native Consumption of Means-Tested Welfare and Entitlement Benefits in 2023” classifies Social Security as “welfare”. The Social Security Administration calculates a real rate of return on taxes paid into the system at 2-4 percent/year for a medium-wage worker and, thus, someone who invested in the S&P 500 and received a 6 percent/year real return would be a “welfare queen”.

“Immigrants’ Recent Effects on Government Budgets: 1994–2023” says that low skill immigrants are the reason that we can afford our magnificent government. Much of the study hinges on birthright citizenship. If a migrant has 10 U.S.-born children and each child costs the Treasury $3 million (public school education, public housing, Medicaid, etc.) the costs of those 10 kids are put into the “native” category. One fun part:

Indirect property tax revenue: The one semidynamic element that we incorporate into the NASEM model is the effect of immigration on housing values. By increasing the demand for housing, immigration increases the value of property, which increases property tax revenues.

In other words, one benefit of open borders is that the tens of millions of people who walk across will drive up the value of residential real estate and, thus, property tax revenue. I.e., contrary to other propaganda in which Econ 101 supply-demand curves don’t apply, the Cato nerds say that a migrant-expanded population drives up housing costs for native-born Americans.

(I don’t think that Cato is correct, incidentally, that more valuable real estate leads to more property tax revenue. The typical city has a budget and then sets a property tax rate sufficient to fund that budget given the total assessed value within the city. If Ayatollah Mamdani drove every successful person from NYC down to Florida and property values in Palm Beach County doubled, the county wouldn’t keep the rates the same and immediately double its spending.)

Cato used to believe in markets. This is plainly no longer true. They didn’t ask the obvious questions, e.g.,

  • If low-skill immigrants are a gold mine, why won’t some other country pay us to send them the migrants whom we are deporting?
  • Why don’t other countries compete with us for migrants, then? If we offer a green card via diversity lottery to a person in Mali, for example, why don’t Australia, Taiwan, Mexico, or Canada jump in and try to persuade that person to go elsewhere? Why don’t Japan and France have offices in northern Mexico offering to fly U.S.-destined migrants to their nations?

What kind of Scientists at Cato could do a study proving Scientifically that every low-skill migrant is worth $1 million despite the fact that no country anywhere in the world has offered to pay even $1 for one of our deported migrants?

The answer arrived via direct message. A rich Democrat who lives in the Boston area recently criticized me for referring to his state as “Maskachusetts” and noted that Science had proven (“data shows”) 500 million to 1 billion lives saved from people wearing their saliva-soaked face rags. How does this relate to Cato’s contrary-to-the-market conclusions regarding immigration?

Nobody right now will pay for Scientific proof that forcing 2-year-olds to wear cloth masks prevents an aerosol respiratory virus from spreading. The Scientists who did that research can now apply their nonbinary selves to proving that low-skill migrants from the world’s least successful and most violent societies are a huge plus for any country wise enough to welcome them.

Full post, including comments

How does a no-fault divorce culture play out over two generations?

by philg

I’m reading Strangers: A Memoir of Marriage by Belle Burden (wife) and co-starring “James” (a pseudonym for the husband). It’s a good illustration of how the American no-fault divorce culture plays out over two generations.

Generation 0: Both spouses had married grandparents. Divorce was obtainable, but in the typical case only if the parties cooperated and came to an agreement.

Generation 1: Both spouses had divorced parents.

Generation 2: the book.

TL;DR version: The author/wife says that she was 50 when the husband decided to avail himself of our unilateral divorce system. His new sweetheart was “was thirty-five but looked twenty“. She was happy to leave her own husband, breaking up her own kids’ home, and, in the magical world of no-fault, there was no way for the husband to obstruct her plan (in fact, he would likely have had to pay her to execute the plan).

One area of agreement between the parties is on the appropriate level of coronapanic. They abandon NYC for Martha’s Vineyard, but the husband returns to NYC to spend more time with his new sex partner.

By late April, I knew I could not keep hiding the truth from the kids. I texted James that it was time to tell them and that we needed to do it together. We hadn’t spoken in several weeks. He said he thought it would be better if I told them alone. Initially, I agreed with him. I was afraid that he would expose us to COVID. He was not in quarantine; he was having an affair in the middle of New York City. We decided we would do a family Zoom call to break the news. James’s boss texted me the next day. He was a kind man, and a friend to both of us. He wrote that he understood why I was angry, but I needed to allow James to be there to tell our kids. He spoke from experience, having been divorced, having broken the news to children himself. He wrote that he was giving James his seaplane and pilot to fly to the Vineyard.

James landed on the Vineyard just before 2 p.m. He drove down our driveway in a Jeep our caretaker had left for him at the airport, a model similar to the one he’d driven onto the ferry a month earlier. He walked up the brick path to our door. He wore a mask, so I couldn’t see his whole face, but my first thought was that he seemed happy, his step brisk and optimistic. He was carrying an empty duffel bag over his shoulder.

He said, “Mom and I are separated and we’re going to divorce. I haven’t been happy.”

James turned to me and said, “I’m starving, can you make me a sandwich?”

A lot to unpack here. If there truly was a “seaplane” why did James go to Connecticut to start his journey (a seaplane can pull up to a dock on E. 23rd St.) and then why was there a landing at the MVY airport? The principal fear 8 weeks into coronapanic is not that the children will be harmed by separation and divorce litigation, but of some tweenage kids getting infected by a virus that was killing Maskachusetts residents at a median age of 82.

One question is why the U.S. still has wedding ceremonies with vows exchanged. If, by cultural and legal design, the marriage lasts only until one partner thinks that a better deal is available, why do friends and family have to gather and sit through the charade of a wedding? If James can say to a judge “I discovered that I preferred banging 35-year-old women to sleeping with a 50-year-old woman” and get what he asks for (a divorce), what stops people from laughing when they hear the vows?

(Note that even if New York family courts are aggressively biased against men, James could still come out ahead financially by swapping out the 50-year-old wife to marry the 35-year-old. He just needs the courts to be consistent, for his girlfriend to divorce her husband, and for the husband she’s divorcing to earn more money than James. In that case, everything that James loses to his ex-wife will be made up for in child support revenue paid to the new 35-year-old wife by her former husband.)

Loosely related, I’m proud to have been interviewed by the New York Times: “I Let My Wife Have an Affair. Do I Have to Console Her Now That It’s Over?”

(The answer turns out to be Yes: “it may be worth your both talking this all through with a counselor” (i.e., “Yes, and also you will have to pay for assistance in consoling her”))

Admission: While the NYT story is genuine, I ripped off the above introduction from this X parody account.

Full post, including comments

Gemini and Antigravity fixed the Bill Gates Personal Wealth Clock

by philg

Bill Gates has been in the news lately.

“Melinda French Gates says latest allegations about Bill Gates’ antics with Epstein dredge up ‘very painful’ memories” (New York Post):

Melinda French Gates said that new details of ex-husband Bill Gates’ alleged antics with Jeffrey Epstein dredge up “very painful times” from their 27-year marriage — and have left her “so happy to be away from all the muck that was there.” … “It’s personally hard whenever those details come up, right? Because it brings back memories of some very, very painful times in my marriage,” she told NPR’s “Wild Card” podcast on Tuesday.

“I’m able to take my own sadness and look at those young girls and say, ‘My God, how did that happen to those girls?’” she said.

There’s a video with Melinda Gates where she smiles as she talks about the “sadness”. Keep in mind that, via a personal relationship with the boss, she made more money than the entire team of software engineers who built Microsoft Windows. Perhaps this has occasioned some “sadness” among those who worked 100 hours per week?

(Also, she implies that Bill Gates was having sex with “young girls” (a “young girl” would be 10? 12?). Is there any evidence of that in the Epstein files? Epstein pleaded guilty to partying with paid women as young as 16 back in 2008, but is there anything definitive in these files or elsewhere to suggest that, post-2008, “young girls” were having sex in exchange for cash or other inducements with Bill Gates or any other Epstein friend? A lot of Americans seem to be energetic when it comes to condemning Jeffrey Epstein and his circle. They say that they’re passionate about “the victims”, but Epstein died in 2019 and any “victims” are adults today. There are teenage prostitutes working right now in various states and countries. The folks who energetically condemn Jeffrey Epstein don’t try to do anything about current teenage prostitutes. If they live in Maskachusetts, for example, they don’t lobby to raise the age of consent from 16 to 18 or 21.)

Thirty-one years ago, as an envious impoverished graduate student, I developed the Bill Gates Personal Wealth Clock:

The clock had broken because the U.S. Census Bureau put in additional barriers to scraping their popclock and the sites for getting stock quotes kept changing.

I fed Antigravity on a copy of the entire tree behind my web site and, incredibly, it/Gemini was able to answer questions about AOLserver configuration, Tcl API code, relational database structure, etc. It suggested fixes to the software that actually worked, e.g., 

set population_html [exec curl -s -L \
-H "User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36" \
-H "Accept: application/json, text/javascript, */*; q=0.01" \
-H "Accept-Language: en-US,en;q=0.9" \
-H "Referer: https://www.census.gov/popclock/" \
-H "X-Requested-With: XMLHttpRequest" \
"https://www.census.gov/popclock/data/population.php/us"]

for scraping the Census web site.

I wonder if the page is conceptually broken. For a couple of decades, the page seemed to track reasonably well with (1) reports of Bill Gates’s personal stash, and (2) reports of total assets in the Gates Foundation (I considered them both to be forms of wealth for him since he controlled the foundation).

Right now, though, the grand total of $960 billion seems to be off the reservation (and we don’t need Elizabeth Warren to tell us how bad that is). I’m wondering if the explanation is Microsoft issuing shares like crazy to employees, thus diluting Bill Gates’s ownership percentage. The Google says that Gates is worth about $100 billion personally and the Gates Foundation total assets is about the same. That would put his total post-divorce wealth at $200 billion, not $500 billion. The Gates Foundation has supposedly paid out (“squandered”?) roughly $83 billion (mostly money extracted from American computer users and handed over to Africans without the U.S. Treasury ever collected a dime of capital gains tax). That still gets us to only about $300 billion. How did the discrepancy arise? Could it be that Gates was diversifying and paying capital gains taxes over the years, thus getting the mediocre returns of the S&P 500 instead of the Mag 7 returns of Microsoft? Or did he do what all of our other noble billionaires do and borrow against his appreciated stock to fund lifestyle? Google AI says that “he has borrowed hundreds of millions against his assets … [and] Despite using tax-efficient strategies, Gates has publicly advocated for higher capital gains taxes for the wealthy.”

Related (simple non-RDBMS web apps from the same era):

Full post, including comments