This is a block of CSS code that defines custom fonts for a website. It sets up the “Guardian Headline Full” font family with different styles and weights, such as light, regular, medium, and semibold, each with normal and italic versions. The code specifies where to download the font files from, using different formats like WOFF2, WOFF, and TTF to ensure compatibility across browsers.This is a block of CSS code, not a text passage. It defines font styles and layout rules for a website. Here’s a plain-English explanation of what it does:
The code sets up custom fonts for the Guardian website, including “Guardian Headline Full” in various weights (bold, black, and their italic versions) and “Guardian Titlepiece” in bold. These fonts are loaded from the Guardian’s asset server in multiple formats (WOFF2, WOFF, and TTF) to ensure compatibility across browsers.
It also contains responsive design rules for a specific page layout called “content__main-column–interactive.” On wider screens (over 71.25em), this column gets a left margin of 160px, and on even wider screens (over 81.25em), the margin increases to 240px. Inside this column, certain elements like “element-atom” are limited to a maximum width of 620px, but on smaller screens (under 46.24em), they can take up the full width.
For “element-showcase” elements, they have no left margin on mobile, but on medium screens (46.25em and up), they’re capped at 620px wide, and on large screens (71.25em and up), they can expand to 860px. “Element-immersive” elements are designed to be full-width: on mobile, they stretch across the entire viewport, on medium screens they shift slightly and extend beyond the column, and on large screens they align normally with a max width of 1260px.
Finally, paragraphs and lists within this column are also limited to 620px wide, and there’s a decorative pseudo-element (“:before”) that spans the full height of the column plus 15px, with a minimum height of 100px, positioned at the top..content__main-column–interactive:before {
border-left: 1px solid #dcdcdc;
z-index: -1;
left: -10px;
}
@media (min-width: 81.25em) {
.content__main-column–interactive:before {
border-left: 1px solid #dcdcdc;
left: -11px;
}
}
.content__main-column–interactive .element-atom {
margin-top: 0;
margin-bottom: 0;
padding-bottom: 12px;
padding-top: 12px;
}
.content__main-column–interactive p + .element-atom {
padding-top: 0;
padding-bottom: 0;
margin-top: 12px;
margin-bottom: 12px;
}
.content__main-column–interactive .element-inline {
max-width: 620px;
}
@media (min-width: 61.25em) {
figure[data-spacefinder-role=”inline”].element {
max-width: 620px;
}
}
[data-gu-name=”media”]:has(figure.loop) figure.loop figcaption:not(.hidden) {
z-index: 6;
}
[data-gu-name=”media”]:has(figure.loop) figure.loop button[data-link-name*=”gu-video-loop”] {
align-self: flex-end;
margin-bottom: 40px;
margin-right: 3px;
}
[data-gu-name=”media”]:has(figure.loop) figure.loop .controls-container div:has(button[data-testid=”unmute-icon”]),
[data-gu-name=”media”]:has(figure.loop) figure.loop .controls-container div:has(button[data-testid=”mute-icon”]) {
right: 0;
padding-left: 10px;
}
[data-gu-name=”media”]:has(figure.loop) #caption-button {
z-index: 100;
}
@media (min-width: 61.25em) {
[data-gu-name=”media”]:has(figure.loop) #caption-button {
bottom: 20px;
}
}
@media (min-width: 46.25em) {
[data-gu-name=”media”]:has(figure.cinemagraph) .cinemagraph > div {
max-height: unset;
}
}
[data-gu-name=”body”] gu-island[name=”SelfHostedVideo”] {
width: 100%;
max-width: 620px;
display: block;
margin-top: 12px;
margin-bottom: 12px;
}
[data-gu-name=”body”] gu-island[name=”SelfHostedVideo”] figure.loop,
[data-gu-name=”body”] gu-island[name=”SelfHostedVideo”] figure.loop video {
width: 100%;
height: auto;
max-width: 620px;
margin: 0 auto;
}
[data-gu-name=”body”] gu-island[name=”SelfHostedVideo”]:has(figure.loop.element-video-immersive) {
max-width: unset;
margin: 12px 0;
}
[data-gu-name=”body”] gu-island[name=”SelfHostedVideo”]:has(figure.loop.element-video-immersive) figure.loop,
[data-gu-name=”body”] gu-island[name=”SelfHostedVideo”]:has(figure.loop.element-video-immersive) figure.loop video {
max-width: unset;
margin: 0;
}
@media (min-width: 71.25em) {
[data-gu-name=”body”] gu-island[name=”SelfHostedVideo”]:has(figure.loop.element-video-immersive) {
width: 1140px;
margin-left: -180px;
}
[data-gu-name=”body”] gu-island[name=”SelfHostedVideo”]:has(figure.loop.element-video-immersive) figure figcaption {
margin-left: 20px;
}
}
@media (min-width: 81.25em) {
[data-gu-name=”body”] gu-island[name=”SelfHostedVideo”]:has(figure.loop.element-video-immersive) {
width: 1300px;
margin-left: -260px;
}
}
:root {
–dateline: #606060;
–headerBorder: #dcdcdc;
–captionText: #999;
–captionBackground: hsla(0, 0%, 7%, .72);
–feature: #c70000;
–new-pillar-colour: var(–primary-pillar, var(–feature));
}
:root:root {
–subheading-text: var(–secondary-pillar);
–pullquote-text: var(–secondary-pillar);
–pullquote-icon: var(–secondary-pillar);
–block-quote-text: var(–article-text);
}
:root:root blockquote {
–block-quote-fill: var(–secondary-pillar);
}
@media (prefers-color-scheme: dark) {
:root:root:not([data-color-scheme=”light”]) {
–subheading-text: var(–darkmode-pillar);
–pullquote-text: var(–darkmode-pillar);
–pullquote-icon: var(–darkmode-pillar);
}
:root:root:not([data-color-scheme=”light”]) blockquote {
–block-quote-fill: var(–darkmode-pillar);
}
}
.content__main-column–interactive .element.element-atom,
.element.element-atom {
padding: 0;
}
.content__main-column–interactive .element-atom:first-of-type + p:first-of-type,
.content__main-column–interactive .element-atom:first-of-type + .sign-in-gate + p:first-of-type,
.content__main-column–interactive .element-atom:first-of-type + #sign-in-gate + p:first-of-type,
.content__main-column–interactive .element-atom:first-of-type + .element-atom + p:first-of-type,
.content__main-column–interactive hr:not(.last-horizontal-rule) + p,
.content__main-column–interactive hr:not(.last-horizontal-rule) + .ad-slot-container + p,
#article-body > div .element-atom:first-of-type + p:first-of-type,
#article-body > div .element-atom:first-of-type + .sign-in-gate + p:first-of-type,
#article-body > div .element-atom:first-of-type + #sign-in-gate + p:first-of-type,
#article-body > div .element-atom:first-of-type + .element-atom + p:first-of-type,
#article-body > div hr {
/ No specific styles defined here; the selector list is likely meant to target these elements for some purpose. /
}The first paragraph after a horizontal rule or an element atom gets extra top padding, unless it’s the last horizontal rule. This applies across various sections like the article body, interactive content, comments, and feature sections.
Similarly, the first letter of that first paragraph is styled with a drop cap effect, but only in specific contexts like the interactive main column, article body, and comment sections.Here is the rewritten text in fluent, natural English:
—
The following CSS rules apply to the first letter of certain paragraphs, giving them a large, bold, uppercase drop cap style. This affects paragraphs that come right after specific elements like horizontal rules or content blocks, but only when they are the first paragraph in the body or feature sections. The styling uses the Guardian headline font, sets the font size to 111 pixels, and aligns the letter to the left with a slight margin. The color is controlled by a custom property, with a fallback to the pillar color.
For interactive content and article bodies, paragraphs that follow a horizontal rule or an ad slot container have no extra top padding.
Pull quotes in the body, feature, comment, and interactive sections are limited to a maximum width of 620 pixels.
Captions for showcase images are normally positioned statically and take up the full width, up to 620 pixels. However, on wider screens (over 71.25em), they become absolutely positioned with a max width of 140 pixels, and on even wider screens (over 81.25em), the max width increases to 220 pixels.
Immersive elements stretch to the full viewport width, accounting for scrollbar width. On smaller screens (up to 71.24em), they are capped at 978 pixels, and their captions have horizontal padding that adjusts based on screen size—10 pixels on very small screens and 20 pixels on medium ones. Between 46.25em and 61.24em, the max width is 738 pixels. On very small screens (up to 46.24em), the element is shifted left with negative margins, and the caption padding is set to 20 pixels on screens at least 30em wide.
For showcase figures in the body or interactive columns, a negative left margin of 160 pixels is applied on screens wider than 71.25em.
—
Let me know if you need any further adjustments.[body] .content__main-column–interactive figure.element.element–showcase.element-showcase {
margin-left: -240px !important;
}
.furniture-wrapper {
position: relative;
}
@media (min-width: 61.25em) {
.furniture-wrapper {
display: grid;
grid-column-gap: 20px;
grid-row-gap: 0px;
grid-template-columns: [title-start headline-start meta-start standfirst-start] repeat(5, 1fr) [title-end headline-end meta-end standfirst-end portrait-start] repeat(5, 1fr) [portrait-end];
grid-template-rows: [title-start portrait-start] .25fr [title-end headline-start] 1fr [headline-end standfirst-start] .75fr [standfirst-end meta-start] auto [meta-end portrait-end];
}
.furniture-wrapper #headline > div:first-child,
.furniture-wrapper [data-gu-name=”headline”] > div:first-child,
.furniture-wrapper .headline > div:first-child {
border-top: 1px solid var(–headerBorder);
}
.furniture-wrapper #meta,
.furniture-wrapper [data-gu-name=”meta”] {
position: relative;
padding-top: 2px;
margin-right: 0;
}
.furniture-wrapper .standfirst .content__standfirst,
.furniture-wrapper #standfirst .content__standfirst,
.furniture-wrapper [data-gu-name=”standfirst”] .content__standfirst {
margin-bottom: 4px;
}
.furniture-wrapper .standfirst ul li,
.furniture-wrapper #standfirst ul li,
.furniture-wrapper [data-gu-name=”standfirst”] ul li {
font-size: 20px;
}
.furniture-wrapper .standfirst li a,
.furniture-wrapper .standfirst a,
.furniture-wrapper #standfirst li a,
.furniture-wrapper #standfirst a,
.furniture-wrapper [data-gu-name=”standfirst”] li a,
.furniture-wrapper [data-gu-name=”standfirst”] a {
border-bottom: none;
background-image: none !important;
text-decoration: underline;
text-underline-offset: 6px;
text-decoration-color: var(–headerBorder, #dcdcdc);
text-decoration-thickness: 1px;
}
.furniture-wrapper .standfirst li a:hover,
.furniture-wrapper .standfirst a:hover,
.furniture-wrapper #standfirst li a:hover,
.furniture-wrapper #standfirst a:hover,
.furniture-wrapper [data-gu-name=”standfirst”] li a:hover,
.furniture-wrapper [data-gu-name=”standfirst”] a:hover {
text-decoration-color: var(–new-pillar-colour);
}
.furniture-wrapper .standfirst p:first-of-type,
.furniture-wrapper #standfirst p:first-of-type,
.furniture-wrapper [data-gu-name=”standfirst”] p:first-of-type {
border-top: 1px solid var(–headerBorder);
padding-bottom: 0;
}
}
@media (min-width: 61.25em) and (min-width: 71.25em) {
.furniture-wrapper .standfirst p:first-of-type,
.furniture-wrapper #standfirst p:first-of-type,
.furniture-wrapper [data-gu-name=”standfirst”] p:first-of-type {
border-top: unset;
}
}
@media (min-width: 61.25em) {
.furniture-wrapper figure {
margin: 0 0 0 -10px;
}
.furniture-wrapper figure[data-spacefinder-role=”inline”].element {
max-width: 630px;
}
}
@media (min-width: 71.25em) {
.furniture-wrapper {
grid-template-columns: [title-start headline-start meta-start] repeat(2, 1fr) [meta-end standfirst-start] repeat(5, 1fr) [title-end headline-end standfirst-end portrait-start] repeat(7, 1fr) [portrait-end];
grid-template-rows: [title-start portrait-start] 80px [title-end headline-start] auto [headline-end standfirst-start meta-start] auto [standfirst-end meta-end portrait-end];
}
.furniture-wrapper #meta:before,
.furniture-wrapper [data-gu-name=”meta”]:before {
content: “”;
width: 540px;
position: absolute;
top: 0;
background-color: var(–headerBorder);
height: 1px;
}
.furniture-wrapper .standfirst p,
.furniture-wrapper #standfirst p,
.furniture-wrapper [data-gu-name=”standfirst”] p {
border-top: unset;
}
.furniture-wrapper .standfirst:before,
.furniture-wrapper #standfirst:before,
.furniture-wrapper [data-gu-name=”standfirst”]:before {
content: “”;
width: 1px;
background-color: var(–headerBorder);
height: 100%;
position: absolute;
top: 0;
left: .5px;
}
}
@media (min-width: 81.25em) {
.furniture-wrapper {
grid-template-columns: [title-start headline-start meta-start] repeat(3, 1fr) [meta-end standfirst-start] repeat(5, 1fr) [title-end headline-end standfirst-end portrait-start] repeat(8, 1fr) [portrait-end];
grid-template-rows: [title-start portrait-start] .25fr [title-end headline-start] 1fr [headline-end standfirst-start meta-start] .75fr [standfirst-end meta-end portrait-end];
}
.furniture-wrapper #meta:before,
.furniture-wrapper [data-gu-name=”meta”]:before {
width: 620px;
}
.furniture-wrapper .standfirst:before,
.furniture-wrapper #standfirst:before,
.furniture-wrapper [data-gu-name=”standfirst”]:before {
/ No additional styles specified /
}
}.furniture-wrapper #standfirst:before,
.furniture-wrapper [data-gu-name=”standfirst”]:before {
left: -0.5px;
}
.furniture-wrapper .article-header .content__labels > div,
.furniture-wrapper [data-gu-name=”title”] .content__labels > div {
padding-top: 2px;
}
.furniture-wrapper #headline h1,
.furniture-wrapper [data-gu-name=”headline”] h1,
.furniture-wrapper .headline h1 {
font-weight: 600;
max-width: 620px;
font-size: 32px;
}
@media (min-width: 71.25em) {
.furniture-wrapper #headline h1,
.furniture-wrapper [data-gu-name=”headline”] h1,
.furniture-wrapper .headline h1 {
max-width: 540px;
font-size: 50px;
}
}
@media (min-width: 46.25em) {
.furniture-wrapper .keyline-4,
.furniture-wrapper [data-gu-name=”lines”] {
margin-right: 0;
}
}
@media (min-width: 61.25em) {
.furniture-wrapper .keyline-4,
.furniture-wrapper [data-gu-name=”lines”] {
display: none;
}
}
.furniture-wrapper .keyline-4 svg,
.furniture-wrapper [data-gu-name=”lines”] svg {
stroke: var(–headerBorder);
}
@media (min-width: 46.25em) {
.furniture-wrapper #meta,
.furniture-wrapper [data-gu-name=”meta”] {
margin-right: 0;
}
}
.furniture-wrapper #meta .meta__social,
.furniture-wrapper #meta .meta__social ul li a span,
.furniture-wrapper #meta .meta__comment,
.furniture-wrapper [data-gu-name=”meta”] .meta__social,
.furniture-wrapper [data-gu-name=”meta”] .meta__social ul li a span,
.furniture-wrapper [data-gu-name=”meta”] .meta__comment {
border-color: var(–headerBorder);
}
.furniture-wrapper #meta .content__meta-container_dcr > div > gu-island,
.furniture-wrapper [data-gu-name=”meta”] .content__meta-container_dcr > div > gu-island {
display: none;
}
.furniture-wrapper .standfirst,
.furniture-wrapper #standfirst,
.furniture-wrapper [data-gu-name=”standfirst”] {
margin-left: -10px;
padding-left: 10px;
position: relative;
}
@media (min-width: 46.25em) {
.furniture-wrapper .standfirst,
.furniture-wrapper #standfirst,
.furniture-wrapper [data-gu-name=”standfirst”] {
padding-top: 2px;
}
}
.furniture-wrapper .standfirst p,
.furniture-wrapper #standfirst p,
.furniture-wrapper [data-gu-name=”standfirst”] p {
font-weight: 400;
font-size: 20px;
padding-bottom: 14px;
}
.furniture-wrapper #main-media,
.furniture-wrapper [data-gu-name=”media”] {
position: relative;
margin-top: 0;
margin-bottom: 2px;
grid-area: portrait;
}
.furniture-wrapper #main-media div div,
.furniture-wrapper [data-gu-name=”media”] div div {
width: 100%;
margin-inline: 0;
}
@media (min-width: 61.25em) {
.furniture-wrapper #main-media,
.furniture-wrapper [data-gu-name=”media”] {
margin-bottom: 0;
}
}
@media (max-width: 46.24em) {
.furniture-wrapper #main-media,
.furniture-wrapper [data-gu-name=”media”] {
width: calc(100vw – var(–scrollbar-width, 0px));
margin-left: -10px;
}
}
@media (max-width: 46.24em) and (min-width: 30em) {
.furniture-wrapper #main-media,
.furniture-wrapper [data-gu-name=”media”] {
margin-left: -20px;
}
}
.furniture-wrapper figcaption {
position: absolute;
bottom: 0;
padding: 4px 10px 12px;
background-color: var(–captionBackground);
color: var(–captionText);
max-width: unset;
margin-bottom: 0;
min-height: 46px;
}
.furniture-wrapper figcaption span {
color: var(–headerBorder);
}
.furniture-wrapper figcaption span svg {
fill: var(–headerBorder);
}
.furniture-wrapper figcaption span:nth-of-type(1) {
display: none;
}
.furniture-wrapper figcaption span:nth-of-type(2) {
display: inline;
max-width: 90%;
}
@media (min-width: 30em) {
.furniture-wrapper figcaption {
padding: 4px 20px 12px;
}
}
.furniture-wrapper figcaption.hidden {
opacity: 0;
}
.furniture-wrapper #caption-button {
display: block;
position: absolute;
bottom: 10px;
right: 8px;
z-index: 30;
background-color: var(–captionBackground);
border: none;
border-radius: 50%;
padding: 6px 5px 5px;
}
.furniture-wrapper #caption-button svg {
transform: scale(0.85);
}
@media (min-width: 30em) {
.furniture-wrapper #caption-button {
right: 10px;
}
}
@media (min-width: 71.25em) {
.content__main-column–interactive:before {
top: -12px !important;
height: calc(100% + 24px) !important;
}
}
.content__main-column–interactive h2 {
max-width: 620px;
}
:root:has(.ios, .android) {
–darkBackground: #1a1a1a;
–feature: #c70000;
–darkmodeFeature: #ff5943;
–new-pillar-colour: var(–primary-pillar, var(–feature));
}
@media (prefers-color-scheme: dark) {
:root:has(.ios, .android) {
–new-pillar-colour: var(–darkmode-pillar, var(–darkmodeFeature));
}
}
body.ios #feature-article-container .element-atom:first-of-type + p:fiFor the first paragraph after an element atom in an article container, the first letter should use the secondary pillar color (or black as a fallback). This applies to feature, standard, and comment article containers on both iOS and Android devices, including cases where a sign-in gate appears before the paragraph.
On iOS and Android, the article header in feature, standard, and comment containers should have no height.
The furniture wrapper in these containers should have padding of 4px on top and 10px on the sides. The content labels inside should be bold, use the Guardian Headline font family, match the pillar color, and be capitalized.
The headline (h1) in the furniture wrapper should be 32px, bold, with 12px of padding at the bottom, and colored dark (#121212).
Image figures inside the furniture wrapper should be displayed as block elements.wrapper figure.element-image {
position: relative;
margin: 14px 0 0 -10px;
width: calc(100vw – var(–scrollbar-width, 0px));
height: auto;
}
/* On iOS and Android, for all article types (feature, standard, comment),
make images and their containers full-width and transparent */
body.ios #feature-article-container .furniture-wrapper figure.element-image .figure__inner,
body.ios #feature-article-container .furniture-wrapper figure.element-image img,
body.ios #feature-article-container .furniture-wrapper figure.element-image a,
body.ios #standard-article-container .furniture-wrapper figure.element-image .figure__inner,
body.ios #standard-article-container .furniture-wrapper figure.element-image img,
body.ios #standard-article-container .furniture-wrapper figure.element-image a,
body.ios #comment-article-container .furniture-wrapper figure.element-image .figure__inner,
body.ios #comment-article-container .furniture-wrapper figure.element-image img,
body.ios #comment-article-container .furniture-wrapper figure.element-image a,
body.android #feature-article-container .furniture-wrapper figure.element-image .figure__inner,
body.android #feature-article-container .furniture-wrapper figure.element-image img,
body.android #feature-article-container .furniture-wrapper figure.element-image a,
body.android #standard-article-container .furniture-wrapper figure.element-image .figure__inner,
body.android #standard-article-container .furniture-wrapper figure.element-image img,
body.android #standard-article-container .furniture-wrapper figure.element-image a,
body.android #comment-article-container .furniture-wrapper figure.element-image .figure__inner,
body.android #comment-article-container .furniture-wrapper figure.element-image img,
body.android #comment-article-container .furniture-wrapper figure.element-image a {
background-color: transparent;
width: calc(100vw – var(–scrollbar-width, 0px));
height: auto !important;
}
/ On iOS and Android, for all article types, adjust the standfirst spacing /
body.ios #feature-article-container .furniture-wrapper .standfirst,
body.ios #standard-article-container .furniture-wrapper .standfirst,
body.ios #comment-article-container .furniture-wrapper .standfirst,
body.android #feature-article-container .furniture-wrapper .standfirst,
body.android #standard-article-container .furniture-wrapper .standfirst,
body.android #comment-article-container .furniture-wrapper .standfirst {
padding-top: 4px;
padding-bottom: 24px;
margin-right: -10px;
}
/ On iOS and Android, for all article types, set the font for standfirst paragraphs /
body.ios #feature-article-container .furniture-wrapper .standfirst__inner p,
body.ios #standard-article-container .furniture-wrapper .standfirst__inner p,
body.ios #comment-article-container .furniture-wrapper .standfirst__inner p,
body.android #feature-article-container .furniture-wrapper .standfirst__inner p,
body.android #standard-article-container .furniture-wrapper .standfirst__inner p,
body.android #comment-article-container .furniture-wrapper .standfirst__inner p {
font-family: Guardian Headline, Guardian Egyptian Web, Guardian Headline Full, Georgia, serif;
}
/ On iOS and Android, for all article types, style links in standfirst /
body.ios #feature-article-container .furniture-wrapper .standfirst__inner li a,
body.ios #feature-article-container .furniture-wrapper .standfirst__inner a,
body.ios #standard-article-container .furniture-wrapper .standfirst__inner li a,
body.ios #standard-article-container .furniture-wrapper .standfirst__inner a,
body.ios #comment-article-container .furniture-wrapper .standfirst__inner li a,
body.ios #comment-article-container .furniture-wrapper .standfirst__inner a,
body.android #feature-article-container .furniture-wrapper .standfirst__inner li a,
body.android #feature-article-container .furniture-wrapper .standfirst__inner a,
body.android #standard-article-container .furniture-wrapper .standfirst__inner li a,
body.android #standard-article-container .furniture-wrapper .standfirst__inner a,
body.android #comment-article-container .furniture-wrapper .standfirst__inner li a,
body.android #comment-article-container .furniture-wrapper .standfirst__inner a {
color: var(–new-pillar-colour) !important;
background-image: none !important;
text-decoration: underline;
text-underline-offset: 6px;
text-decoration-color: var(–headerBorder, #dcdcdc);
border-bottom: none;
}
/ On iOS and Android, for all article types, style link hover states in standfirst /
body.ios #feature-article-container .furniture-wrapper .standfirst__inner li a:hover,
body.ios #feature-article-container .furniture-wrapper .standfirOn hover, links inside the standfirst (including list items and regular links) in the article containers for iOS and Android devices will have their underline color set to the new pillar color.
For the meta section in these article containers on both iOS and Android, there is no margin. The byline text, including the author name and any related spans, will also use the new pillar color.
The meta__misc section has no padding, and any SVG icons within it will also follow the same styling rules.ure-wrapper .meta__misc svg {
stroke: var(–new-pillar-colour);
}
body.ios #feature-article-container .furniture-wrapper .element–showcase #caption-button,
body.ios #standard-article-container .furniture-wrapper .element–showcase #caption-button,
body.ios #comment-article-container .furniture-wrapper .element–showcase #caption-button,
body.android #feature-article-container .furniture-wrapper .element–showcase #caption-button,
body.android #standard-article-container .furniture-wrapper .element–showcase #caption-button,
body.android #comment-article-container .furniture-wrapper .element–showcase #caption-button {
display: flex;
padding: 5px;
justify-content: center;
align-items: center;
width: 28px;
height: 28px;
right: 14px;
}
body.ios #feature-article-container .article__body,
body.ios #standard-article-container .article__body,
body.ios #comment-article-container .article__body,
body.android #feature-article-container .article__body,
body.android #standard-article-container .article__body,
body.android #comment-article-container .article__body {
padding: 0 12px;
}
body.ios #feature-article-container .article__body figure.element-image:not(.element–thumbnail):not(.element–immersive),
body.ios #standard-article-container .article__body figure.element-image:not(.element–thumbnail):not(.element–immersive),
body.ios #comment-article-container .article__body figure.element-image:not(.element–thumbnail):not(.element–immersive),
body.android #feature-article-container .article__body figure.element-image:not(.element–thumbnail):not(.element–immersive),
body.android #standard-article-container .article__body figure.element-image:not(.element–thumbnail):not(.element–immersive),
body.android #comment-article-container .article__body figure.element-image:not(.element–thumbnail):not(.element–immersive) {
margin: 0;
width: calc(100vw – 24px – var(–scrollbar-width, 0px));
height: auto;
}
body.ios #feature-article-container .article__body figure.element-image:not(.element–thumbnail):not(.element–immersive) figcaption,
body.ios #standard-article-container .article__body figure.element-image:not(.element–thumbnail):not(.element–immersive) figcaption,
body.ios #comment-article-container .article__body figure.element-image:not(.element–thumbnail):not(.element–immersive) figcaption,
body.android #feature-article-container .article__body figure.element-image:not(.element–thumbnail):not(.element–immersive) figcaption,
body.android #standard-article-container .article__body figure.element-image:not(.element–thumbnail):not(.element–immersive) figcaption,
body.android #comment-article-container .article__body figure.element-image:not(.element–thumbnail):not(.element–immersive) figcaption {
padding: 0;
}
body.ios #feature-article-container .article__body figure.element-image.element-immersive,
body.ios #standard-article-container .article__body figure.element-image.element-immersive,
body.ios #comment-article-container .article__body figure.element-image.element-immersive,
body.android #feature-article-container .article__body figure.element-image.element-immersive,
body.android #standard-article-container .article__body figure.element-image.element-immersive,
body.android #comment-article-container .article__body figure.element-image.element-immersive {
width: calc(100vw – var(–scrollbar-width, 0px));
}
body.ios #feature-article-container .article__body .prose blockquote.quoted:before,
body.ios #standard-article-container .article__body .prose blockquote.quoted:before,
body.ios #comment-article-container .article__body .prose blockquote.quoted:before,
body.android #feature-article-container .article__body .prose blockquote.quoted:before,
body.android #standard-article-container .article__body .prose blockquote.quoted:before,
body.android #comment-article-container .article__body .prose blockquote.quoted:before {
color: var(–new-pillar-colour);
}
body.ios #feature-article-container .article__body .prose a,
body.ios #standard-article-container .article__body .prose a,
body.ios #comment-article-container .article__body .prose a,
body.android #feature-article-container .article__body .prose a,
body.android #standard-article-container .article__body .prose a,
body.android #comment-article-container .article__body .prose a {
/ The original text cuts off here; the rule is incomplete. /
}Here is the rewritten text in fluent, natural English:
Links inside the main article body on both standard and comment pages are styled with the primary pillar color, underlined with a slight offset, and use a matching underline color. On iOS and Android, when you hover over these links, the underline color changes to the new pillar color.
In dark mode, the furniture wrapper (the area around the article header) on iOS and Android gets a dark background. The labels in this area use the new pillar color, and the headline text is no longer given a background color—it simply uses the header border color. The standfirst text also takes on the header border color, while links in the standfirst and the byline author names are shown in the new pillar color. The meta icons in the furniture wrapper are also adjusted for dark mode.rapper .meta__misc svg,
body.ios #comment-article-container .furniture-wrapper .meta__misc svg,
body.android #feature-article-container .furniture-wrapper .meta__misc svg,
body.android #standard-article-container .furniture-wrapper .meta__misc svg,
body.android #comment-article-container .furniture-wrapper .meta__misc svg {
stroke: var(–new-pillar-colour);
}
body.ios #feature-article-container .furniture-wrapper figure.element-image.element–showcase figcaption,
body.ios #standard-article-container .furniture-wrapper figure.element-image.element–showcase figcaption,
body.ios #comment-article-container .furniture-wrapper figure.element-image.element–showcase figcaption,
body.android #feature-article-container .furniture-wrapper figure.element-image.element–showcase figcaption,
body.android #standard-article-container .furniture-wrapper figure.element-image.element–showcase figcaption,
body.android #comment-article-container .furniture-wrapper figure.element-image.element–showcase figcaption {
color: var(–dateline);
}
body.ios #feature-article-container .article__body .prose blockquote.quoted,
body.ios #standard-article-container .article__body .prose blockquote.quoted,
body.ios #comment-article-container .article__body .prose blockquote.quoted,
body.android #feature-article-container .article__body .prose blockquote.quoted,
body.android #standard-article-container .article__body .prose blockquote.quoted,
body.android #comment-article-container .article__body .prose blockquote.quoted {
color: var(–new-pillar-colour);
}
body.ios #feature-article-container #article-body > div,
body.ios #feature-article-container .content–interactive > div,
body.ios #feature-article-container #feature-body,
body.ios #feature-article-container [data-gu-name=”body”],
body.ios #feature-article-container #comment-body,
body.ios #standard-article-container #article-body > div,
body.ios #standard-article-container .content–interactive > div,
body.ios #standard-article-container #feature-body,
body.ios #standard-article-container [data-gu-name=”body”],
body.ios #standard-article-container #comment-body,
body.ios #comment-article-container #article-body > div,
body.ios #comment-article-container .content–interactive > div,
body.ios #comment-article-container #feature-body,
body.ios #comment-article-container [data-gu-name=”body”],
body.ios #comment-article-container #comment-body,
body.android #feature-article-container #article-body > div,
body.android #feature-article-container .content–interactive > div,
body.android #feature-article-container #feature-body,
body.android #feature-article-container [data-gu-name=”body”],
body.android #feature-article-container #comment-body,
body.android #standard-article-container #article-body > div,
body.android #standard-article-container .content–interactive > div,
body.android #standard-article-container #feature-body,
body.android #standard-article-container [data-gu-name=”body”],
body.android #standard-article-container #comment-body,
body.android #comment-article-container #article-body > div,
body.android #comment-article-container .content–interactive > div,
body.android #comment-article-container #feature-body,
body.android #comment-article-container [data-gu-name=”body”],
body.android #comment-article-container #comment-body {
background-color: var(–darkBackground) !important;
}
body.ios #feature-article-container #article-body > div .element-atom + p:first-letter,
body.ios #feature-article-container #article-body > div .element-atom + .sign-in-gate + p:first-letter,
body.ios #feature-article-container #article-body > div .element-atom + #sign-in-gate + p:first-letter,
body.ios #feature-article-container .content–interactive > div .element-atom + p:first-letter,
body.ios #feature-article-container .content–interactive > div .element-atom + .sign-in-gate + p:first-letter,
body.ios #feature-article-container .content–interactive > div .element-atom + #sign-in-gate + p:first-letter,
body.ios #feature-article-container #feature-body .element-atom + p:first-letter,
body.ios #feature-article-container #feature-body .element-atom + .sign-in-gate + p:first-letter,
body.ios #feature-article-container #feature-body .element-atom + #sign-in-gate + p:first-letter {
/ No styles specified here; keeping the selector list intact /
}This text appears to be a long list of CSS selectors, not a piece of prose. It’s technical code used for styling web pages, specifically targeting the first letter of paragraphs that follow certain elements on a website (likely The Guardian, given the class names).
Since it’s not natural language, I can’t rewrite it as fluent English without changing its meaning. However, I can explain what it does in plain terms:
This is a set of CSS rules that apply a special style to the first letter of a paragraph when that paragraph comes right after an “element-atom” (like an interactive graphic or embed) on a page. The rules are repeated for different page layouts (like feature articles, standard articles, and comment sections) and for different devices (iOS and Android). The selectors are very specific to ensure the styling only applies in the right places and doesn’t accidentally affect other content.
If you meant to share a different piece of text, please paste it again, and I’ll be happy to help.body .element-atom+.sign-in-gate+p:first-letter,
body.android #feature-article-container #feature-body .element-atom+#sign-in-gate+p:first-letter,
body.android #feature-article-container [data-gu-name=body] .element-atom+p:first-letter,
body.android #feature-article-container [data-gu-name=body] .element-atom+.sign-in-gate+p:first-letter,
body.android #feature-article-container [data-gu-name=body] .element-atom+#sign-in-gate+p:first-letter,
body.android #feature-article-container #comment-body .element-atom+p:first-letter,
body.android #feature-article-container #comment-body .element-atom+.sign-in-gate+p:first-letter,
body.android #feature-article-container #comment-body .element-atom+#sign-in-gate+p:first-letter,
body.android #standard-article-container #article-body>div .element-atom+p:first-letter,
body.android #standard-article-container #article-body>div .element-atom+.sign-in-gate+p:first-letter,
body.android #standard-article-container #article-body>div .element-atom+#sign-in-gate+p:first-letter,
body.android #standard-article-container .content–interactive>div .element-atom+p:first-letter,
body.android #standard-article-container .content–interactive>div .element-atom+.sign-in-gate+p:first-letter,
body.android #standard-article-container .content–interactive>div .element-atom+#sign-in-gate+p:first-letter,
body.android #standard-article-container #feature-body .element-atom+p:first-letter,
body.android #standard-article-container #feature-body .element-atom+.sign-in-gate+p:first-letter,
body.android #standard-article-container #feature-body .element-atom+#sign-in-gate+p:first-letter,
body.android #standard-article-container [data-gu-name=body] .element-atom+p:first-letter,
body.android #standard-article-container [data-gu-name=body] .element-atom+.sign-in-gate+p:first-letter,
body.android #standard-article-container [data-gu-name=body] .element-atom+#sign-in-gate+p:first-letter,
body.android #standard-article-container #comment-body .element-atom+p:first-letter,
body.android #standard-article-container #comment-body .element-atom+.sign-in-gate+p:first-letter,
body.android #standard-article-container #comment-body .element-atom+#sign-in-gate+p:first-letter,
body.android #comment-article-container #article-body>div .element-atom+p:first-letter,
body.android #comment-article-container #article-body>div .element-atom+.sign-in-gate+p:first-letter,
body.android #comment-article-container #article-body>div .element-atom+#sign-in-gate+p:first-letter,
body.android #comment-article-container .content–interactive>div .element-atom+p:first-letter,
body.android #comment-article-container .content–interactive>div .element-atom+.sign-in-gate+p:first-letter,
body.android #comment-article-container .content–interactive>div .element-atom+#sign-in-gate+p:first-letter,
body.android #comment-article-container #feature-body .element-atom+p:first-letter,
body.android #comment-article-container #feature-body .element-atom+.sign-in-gate+p:first-letter,
body.android #comment-article-container #feature-body .element-atom+#sign-in-gate+p:first-letter,
body.android #comment-article-container [data-gu-name=body] .element-atom+p:first-letter,
body.android #comment-article-container [data-gu-name=body] .element-atom+.sign-in-gate+p:first-letter,
body.android #comment-article-container [data-gu-name=body] .element-atom+#sign-in-gate+p:first-letter,
body.android #comment-article-container #comment-body .element-atom+p:first-letter,
body.android #comment-article-container #comment-body .element-atom+.sign-in-gate+p:first-letter,
body.android #comment-article-container #comment-body .element-atom+#sign-in-gate+p:first-letter {
color: var(–new-pillar-colour, #ffffff);
}
body.ios.garnett–type-comment #comment-article-container .furniture-wrapper .standfirst,
body.android.garnett–type-comment #comment-article-container .furniture-wrapper .standfirst {
padding-top: 24px;
margin-top: 0;
}
.prose h2 {
font-size: 24px;
}
body.ios #feature-article-container #caption-button,
body.ios #standard-article-container #caption-button,
body.ios #comment-article-container #caption-button {
padding: 6px 5px 0;
}In March 2020, when the mayor of San Francisco told everyone to stay home because of the pandemic, the first thing I did was order all of Agatha Christie’s books. I wasn’t alone—many of us turned to familiar stories to block out the chaos. Whether the story ended in marriage or murder didn’t matter; what mattered was the comfort of knowing what to expect. Later, when I realized I’d be stuck at home for a while, my reading habits shifted to a different kind of novel. And since, like Christie’s world, ours keeps throwing up new horrors, it’s the comic novel that now fills my reading time.
Nobody really knows what a comic novel is. And once you start trying to define it, all the fun disappears. EB White compared it to dissecting a frog—you’re left with guts and a dead frog—but I’d say it’s more like turning on all the lights at a party: everyone looks awful and you’ve ruined the mood. Most people would agree that Wodehouse wrote comic novels, but I’m drawn to books that hardly anyone would label that way—like Moby-Dick by Herman Melville—which still strike me as hilarious. I think they’re books that decide something is funny, as Jerry Seinfeld once defined comedy. In Moby-Dick, it’s a coin nailed to a masthead. In Vladimir Nabokov’s Pale Fire, it’s the worst great poem you’ve ever read. And yet these books seem to capture what the most serious stories aim for: an understanding of human nature, grief, love, and death. All the big themes. The comic novels I love could easily have been tragedies. It’s just that the author chose to see them as funny.
I learned this from a wise friend. Once, after I angrily told her a story about my publishing experiences, she replied, “That’s not a very funny story.” I was taken aback. Then I realized I hadn’t really processed what happened—I was just handing it to her raw. I needed to learn how to turn old frustrations into something funny. Only then would she want to listen. I did learn to do that. And I’ve put that exact scene into my latest novel. A comic novel, if you like.
I’ve written both comic novels and ones where you wouldn’t crack a smile—serious novels, I suppose. And I can tell you that, for me, writing the cWriting comic novels is a much more pleasant kind of work, though it’s very different from writing serious ones. But the plots aren’t any funnier than the serious ones. See if you can guess which one is comic and which is serious:
A young woman in 1952 San Francisco teams up with her husband’s gay lover to clear away obstacles to her freedom and make a small fortune.
A middle-aged writer travels across a troubled United States while trying to keep his recently rekindled relationship with a younger man going.
Even if you guessed right, you see my point: I have to decide it’s funny. And that takes double-processing. Like getting your hair lightened at the salon. First, I work out the hardships and frustrations of the characters as realistically, even tragically, as I can. People die in comic novels. Sometimes the world ends, or sometimes just the world we thought we knew, and I have to think about how my characters would really react because, after all, they don’t know it’s a comedy. Second, I start writing it as if it’s all just a funny story. That takes a lot of effort and sometimes feels impossible.
When writing comedy, you have a whole feast of words to choose from: hullabaloo, brouhaha, hubbub, and chivaree. Chivaree!
In my last novel, Less Is Lost (that’s the one about the middle-aged writer), I found myself going through my notes about visiting three forced labor plantations in the American South. There was nothing funny about them, but I didn’t want to cut them; I knew my main character had to face that part of American history. But then I read over my notes from the final visit and realized that I was the comedy: me and the other white visitors, showing off our guilt and anxiety through statements that were completely ridiculous. In fact, I ended up writing the visit almost exactly as I had it in my notes… but with a different focus. Is it “funny”? No. Is it “comic”? Definitely. Why? I don’t know. I can’t explain it any better without ruining the mood.
Writing my latest novel, Villa Coco, was much easier, since I was working from diary entries from my time living in Tuscany, and those notes were already lightened hair at the salon; I promised myself I’d turn each day’s events into a “funny story.” And yet, in a way, I found myself digging through those stories for the other thing: the real feeling. Because during those days, a dear friend died. Seasons changed. A heart was broken. All the things I would have written down in my diary before had been left out, and though I had turned them into lovely stories, the job (as a novelist now, not a diarist) was to get to the hardships and frustrations of my characters. Because, to me, comedy is only truly fun if it’s about something hard and real.
“I don’t think of you as writing a comic novel,” a writer friend told me. “I think of you as working through something in whatever way you have to.” He meant that my books aren’t “about” women in 1952 or middle-aged writers or olive harvests in Tuscany. They’re about marriage, growing old, and the fear of death. It’s just that, in a comic novel, those issues are temporarily solved, often in a deliberately artificial way. As if to say: life is a vale of tears, and there’s no fixing it, but just for fun, let’s fix this one small piece. Let’s decide, briefly, to lift the weight of being. You can’t do that successfully, I think, without being honest about it first.
And yet—what a lovely time I have working on these books. Because everything has to be processed this way, each awful moment of the day becomes more material for comedy. So I become, somehow, more resilient; tripping on the sidewalk is no less embarrassing than before, but instead of trying to brush it off, I laugh with anyone who notices (and people do notice). What would normally be a dull wait at a bus stop…Stopping (or getting lost in a mind-numbing internet rabbit hole) becomes a real pleasure when I have my notebook with me. I might jot down something like, “Cheese rolling contest May 20,” from a poster, “Prize is the wheel of cheese.” Or I’ll note, “lady in black sequined dress yelling at a mailbox at nine in the morning. I think she mailed her purse by mistake.” I’m not someone who usually lives in the moment, but comedy pulls me right into it. And that’s a good place to be.
Language also gets a whole new flavor. People tend to think writers focus on plot or characters, just like they assume painters or photographers think about their subjects. But painters think about paint. Photographers think about light. And writers think about words. There’s something incredibly satisfying about getting to use words that are otherwise off-limits. I’m not talking about swear words; I mean the fancy ones. Take a word like “noise.” In a serious novel, you’d have to write “down the street came a noise.” Anything more elaborate would come off as pretentious. So you stick with the plainness of “noise” and move on. But when you’re writing comedy, suddenly a whole buffet of words opens up: hullabaloo, brouhaha, hubbub, chivaree. Chivaree! Banging pots and pans together to publicly shame someone or tease a newlywed couple! What a fantastic word! Writing comedy hasn’t made my language simpler—it’s made it livelier. And if, like me, words are your favorite thing, it’s like tomatoes finally coming into season after months of cabbage and kale.
No wonder some consider the very first “novel” to be one of the most hilarious, slapstick comedies around: Don Quixote. Chaucer wasn’t above a fart joke, and Shakespeare could never resist a pun. There’s a long tradition of great writers dabbling in comedy—Philip Roth, Saul Bellow, Thornton Wilder—and I think there’s something about having seen the darkness that draws so many to laughter. Certainly, in these tough times, with endless apocalyptic films and novels popping up, many of us find ourselves reaching for Stella Gibbons’ Cold Comfort Farm instead.
There’s something dear and beautiful about the comic novel, something to cherish. It’s like a friend who holds your hand when the lights go out and tells you a story until they come back on. And for those of us who write them, it’s a way to feel our way through the tunnel toward the light. I know it was a comfort to imagine a much younger American man, finding himself dropped off at a rural Tuscan train station that he says is “so fanciful one might unwrap it and find it was chocolate.” And to be seated next to a princess who can’t understand him because she hasn’t mastered “the American dialect.” And to have a wild animal thrown through his window at night. And to have the septic tank overflow. All to get at a simple truth: the world is full of trouble and sorrow, and we won’t get out alive.
But look closely: it’s actually made of chocolate.
Villa Coco by Andrew Sean Greer is published by Sceptre. To support the Guardian, order your copy at guardianbookshop.com. Delivery charges may apply.
Ten novels to make you laugh
Cold Comfort Farm by Stella Gibbons
This is a satire of a genre that no longer even exists (the rural English romance) because it wiped it out with its perfect sense of humor.
Pomp and Circumstance by Noël Coward
The queen is coming to visit a far-flung island nation, and everyone is in a flutter.
Pnin by Vladimir Nabokov
The poignancy of Nabokov’s tortured Russian academic makes you fall in love with poor Pnin.
Bech: A Book by John Updike
The first in a series about a Philip Roth-like novelist drifting through the world. Like Nabokov, a wordsmith having a blast with the English language.
The Sellout by Paul Beatty
A brilliant example of taking the most serious of subjects—slavery in America—and turning it into something completely compelling.I Capture the Castle by Dodie Smith
I read this book every year, and it makes me both laugh and cry. The story follows Cassandra, our teenage narrator, through her diary.
Our Man in Havana by Graham Greene
I actually prefer Greene’s lighter “entertainments” to his more serious novels, from Travels With My Aunt to this wonderfully funny case of mistaken identity.
Little Me: The Intimate Memoirs of That Great Star of Stage, Screen and Television, Belle Poitrine by Patrick Dennis
From the author of Auntie Mame comes a delightfully self-deceived memoir of a complete nobody, complete with photos!
The Pursuit of Love/Love in a Cold Climate by Nancy Mitford
This classic, fictionalized take on her famous family blends eccentricity and joy with heartbreak.
Don Quixote by Miguel de Cervantes
It’s hilarious from start to finish, and the sequel is even better—because by then, Don Quixote and Sancho Panza are famous, since everyone has read the first book.
Frequently Asked Questions
Here is a list of FAQs based on the topic of Andrew Sean Greers reflections on writing comic novels
General Definition Questions
1 Who is Andrew Sean Greer
Andrew Sean Greer is a Pulitzer Prizewinning American author best known for his comic novel Less Hes considered an expert on blending humor with literary fiction
2 What does he mean by a good comic novel is hard to pin down
He means that humor is subjective What makes a book funny is often tied to character timing and tone rather than just a string of jokes Its difficult to define a formula for what makes a comic novel actually work
3 Is a comic novel just a book with jokes in it
No A great comic novel uses humor as a lens to explore serious themes like loneliness aging or failure The jokes arent the point the truth behind the jokes is the point
4 What is the difference between a comic novel and a comedy novel
In literary terms a comic novel is a serious work of fiction that uses wit and irony to examine the human condition A comedy novel is usually more plotdriven and designed purely to make you laugh out loud
The Craft of Humor
5 Why does Greer think funny writing is joyful
He believes its joyful because it creates a shared moment of recognition between the writer and the reader When a joke lands its a moment of intimacyyou and the author are in on the same secret
6 What is the secret to writing funny according to Greer
He often emphasizes that humor comes from character not circumstance The funniest moments happen when a characters personality clashes with the world around themespecially when they are taking themselves too seriously
7 How do you make a sad situation funny without being cruel
Greers approach is to turn the humor inward The narrator or protagonist is usually the butt of the joke not the victim By making the character selfdeprecating the reader can laugh at the tragedy without feeling like they are laughing at a real person
8 What is the role of voice in a comic novel
Voice is everything
