. */
--heading-font-weight: 700;
/* Form controls
One height and one horizontal padding shared by every control, so a field
and the button next to it line up without either being measured twice. */
--control-height: 36px;
--control-padding: 12px;
/* Spacing */
--spacing-huge: 60px;
--spacing-big: 40px;
--spacing-medium: 30px;
--spacing-small: 16px;
--spacing-vertical: 30px;
--spacing-horizontal: 20px;
}
@media only screen and (max-width: 591.98px) {
:root {
--spacing-vertical: 24px;
}
}
:root {
/* Admin-bar height */
--admin-bar--height: 0px;
}
@media screen and (max-width: 700px) {
:root {
--narrow-width: 100%;
}
}
.admin-bar {
--admin-bar--height: 32px;
}
@media only screen and (max-width: 782px) {
.admin-bar {
--admin-bar--height: 46px;
}
}
/* ============================================================================
03. ELEMENTS
========================================================================== */
/* box sizing
https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/
------------------------------------------------- */
html {
/* Apply border-box across the entire page. */
box-sizing: border-box;
}
/**
* Relax the definition a bit, to allow components to override it manually.
*/
*, *::before, *::after {
box-sizing: inherit;
}
/* body
------------------------------------------------- */
body {
font-family: var(--body-font);
font-size: var(--base-font-size);
line-height: 1.55;
/* 85% of it on a phone. A measure set for a desktop column is being read at
a third of the width, and type that holds there is too large for a hand:
the same words in the same rhythm, one step down, so a line of a paragraph
still breaks somewhere near where it should. Everything else follows, being
em all the way down — headings, meta, captions, the gaps between them.
Written as a scale of the token rather than a size of its own so it holds
whatever the base is: the browser's default, or the px the customizer set. */
}
@media only screen and (max-width: 591.98px) {
body {
font-size: calc(var(--base-font-size) * 0.85);
}
}
body {
overflow-wrap: break-word;
}
mark {
background: #ffc;
}
/* heading
------------------------------------------------- */
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: var(--heading-font);
font-weight: var(--heading-font-weight);
line-height: 1.25;
}
/* media
------------------------------------------------- */
img {
height: auto;
max-width: 100%;
vertical-align: middle;
}
/* Make sure embeds and iframes fit their containers. */
embed,
iframe,
object,
video {
max-width: 100%;
}
/* Media captions
A caption is the note beside the picture, not part of the piece of writing:
set a step down in size and in the same quieter color the theme gives its
other labels, so it reads as a description of the image rather than as the
paragraph that follows it. Tighter leading than the body because the lines
are short. */
figcaption,
.wp-caption-text,
.wp-block-embed figcaption {
color: var(--secondary-text);
font-size: 0.9em;
line-height: 1.4;
margin-top: 0.5em;
}
/* WP Smiley */
.page-content .wp-smiley,
.entry-content .wp-smiley,
.comment-content .wp-smiley {
border: none;
margin-bottom: 0;
margin-top: 0;
padding: 0;
}
/* hr
------------------------------------------------- */
/* The class is named as well as the element: core's block library gives
.wp-block-separator its own border-top and border-bottom, and a class beats a
bare element selector, so `hr` alone would leave the bottom rule standing. */
hr,
.wp-block-separator {
border: 0;
border-top: 1px solid var(--border-color);
}
/* quote
------------------------------------------------- */
blockquote,
.wp-block-quote {
border-left: 2px solid var(--border-color);
padding-left: var(--spacing-small);
margin-left: 0;
font-size: 1.2em;
}
blockquote cite,
.wp-block-quote cite {
color: var(--secondary-text);
font-size: 0.8em;
font-style: normal;
}
/* details
------------------------------------------------- */
.wp-block-details summary {
font-weight: 600;
}
.wp-block-details[open] summary {
background-color: rgb(240, 240, 230);
}
.entry-content > .wp-block-details {
margin-bottom: 0.6em;
}
.wp-block-details + .wp-block-details {
margin-top: 0.6em;
}
/* table
------------------------------------------------- */
table {
width: 100%;
border-collapse: collapse;
}
td,
th {
padding: 0.25em 0.5em 0.25em 0;
text-align: left;
vertical-align: top;
}
.wp-block-table td,
.wp-block-table th,
.wp-block-table thead,
.wp-block-table tfoot {
border-color: var(--border-color);
}
/* form
----------------------------------------------------------------------------
As with everything else here, no colors are named. The border is mixed out of
the current text color, so a form drops into a light page or a dark one and
picks up the palette it lands in; browsers without color-mix() fall back to a
plain currentColor border, which is heavier but never wrong.
------------------------------------------------- */
input,
select,
textarea {
max-width: 100%;
}
textarea,
.site textarea {
width: 100%;
}
/* The text-entry types, spelled out rather than caught with a bare `input`:
checkboxes, radios, files and ranges are drawn by the browser and a height
and a padding would only get in their way. */
input[type=text],
input[type=email],
input[type=url],
input[type=tel],
input[type=number],
input[type=password],
input[type=search],
input[type=date],
input[type=month],
input[type=week],
input[type=time],
input[type=datetime-local],
select,
textarea {
font: inherit;
color: inherit;
background-color: transparent;
border: 1px solid;
border-color: color-mix(in srgb, currentColor 25%, transparent);
border-radius: 0;
padding: 0 var(--control-padding);
height: var(--control-height);
/* The one square-corner exception in the theme is honoured here too: iOS
rounds search fields and inputs on its own. */
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
/* Left off the list above so the native caret survives. */
select {
-webkit-appearance: auto;
-moz-appearance: auto;
appearance: auto;
padding-right: calc(var(--control-padding) / 2);
}
/* A textarea is the one field that grows, so it takes vertical padding and a
height of its own. */
textarea {
height: auto;
min-height: calc(var(--control-height) * 3);
padding: 10px var(--control-padding);
line-height: inherit;
vertical-align: top;
}
input:focus,
select:focus,
textarea:focus {
border-color: currentColor;
}
::-moz-placeholder {
color: inherit;
opacity: 0.5;
}
::placeholder {
color: inherit;
opacity: 0.5;
}
/* Every button on the site is the button the Buttons block draws: a filled dark
box with a white label, square, padded the same 0.5em by 1.125em section 5
gives .wp-block-button__link. A page has one kind of button on it, and which
one it is should not depend on whether it was written by the block editor or
printed by a comment form.
#32373c and #fff are core's own figures for a block button — they come from
WordPress's default global styles, which this theme ships no theme.json to
change — so the two match by using the same numbers rather than by one of them
guessing at the other.
min-height rather than a fixed height: the box grows out of the padding, so it
holds its shape at any base font size, and the floor is --control-height so a
button standing beside an input still lines up with it. At the default size the
padding comes to exactly that floor.
Not the Buttons block itself — it and .wp-element-button are left to core's
rule, which is what carries a color set on a particular button in the editor. */
button,
input[type=button],
input[type=reset],
input[type=submit] {
font: inherit;
color: #fff;
background-color: #32373c;
border: 0;
border-radius: 0;
padding: 0.5em 1.125em;
min-height: var(--control-height);
line-height: 1.2;
cursor: pointer;
}
/* The one place the two part company: a block button has no hover state at all,
and a form button is pressed rather than read, so it acknowledges the pointer.
Opacity rather than a second color, so it holds whatever the fill has been set
to — including a button a plugin has colored itself. */
button:hover,
button:focus,
input[type=button]:hover,
input[type=button]:focus,
input[type=reset]:hover,
input[type=reset]:focus,
input[type=submit]:hover,
input[type=submit]:focus {
opacity: 0.85;
}
button[disabled],
input[disabled] {
cursor: default;
opacity: 0.5;
}
input[type=email],
input[type=url] {
/*rtl:ignore*/
direction: ltr;
}
fieldset {
max-width: 100%;
}
.post-password-form input[type=password] {
margin-right: 0.5em;
}
/* pre / code
----------------------------------------------------------------------------
Two different things share these elements, so they are styled as two things.
Inline: a name lifted out of a sentence — a function, a filename, a value.
It stays in the line, so it gets a tint and a little padding and nothing that
would change the line's height.
Block: a passage that means what its whitespace says. Indentation, columns
and line breaks are the content, so the block keeps them and scrolls sideways
when a line runs long. Wrapping would be the tidier failure and the wrong one:
a wrapped line of code reads as two lines, and a wrapped table of output stops
lining up. `overflow: auto` gives back the width that was lost, and only when
there is something to give back.
------------------------------------------------- */
/* Monospace one step down. At a matched font-size a monospace face reads larger
than the text around it — every glyph is set on the widest one's advance — so
an inline snippet would sit proud of the sentence holding it. */
code,
kbd,
samp,
pre {
font-family: var(--code-font);
font-size: 0.9em;
-moz-tab-size: 4;
-o-tab-size: 4;
tab-size: 4;
}
/* inline */
code,
kbd,
samp {
background-color: color-mix(in srgb, currentColor 7%, transparent);
padding: 0.15em 0.4em;
/* The tint marks the run of text; it should not push the lines apart.
Padding on an inline box does not add to line-height, but a border would,
so the edge is left to the background alone. */
}
/* block */
pre {
max-width: 100%;
overflow: auto;
white-space: pre;
background-color: color-mix(in srgb, currentColor 7%, transparent);
padding: var(--spacing-small);
}
/* The everywhere else and both have to read the same: left to
the elements the inside a is the same passage, not a second snippet nested in
the first: it takes the block's size and drops the inline tint and padding.
Core's block library states `white-space: pre-wrap` and `overflow-wrap:
break-word` on `.wp-block-code code`, which is what would fold the long lines
back in, so both are put back here. */
pre code,
pre kbd,
pre samp,
.wp-block-code code {
background: none;
padding: 0;
font-size: inherit;
white-space: inherit;
overflow-wrap: normal;
}
/* A bare at the top of the content — the classic editor and pasted HTML
both produce one — is standing in for a code block, so it is given one.
The block editor's Code block outputs , which
the rules above already cover. */
.entry-content > code {
display: block;
white-space: pre;
overflow: auto;
padding: var(--spacing-small);
}
/* list
------------------------------------------------- */
ul,
ol {
padding-left: 1.5em;
}
ul.aligncenter,
ol.aligncenter {
list-style-position: inside;
padding: 0;
}
ul.alignright,
ol.alignright {
list-style-position: inside;
text-align: right;
padding: 0;
}
dd {
margin-left: var(--spacing-horizontal);
}
/* classic gallery
------------------------------------------------- */
.gallery {
display: flex;
flex-flow: row wrap;
margin: 0 -4px;
}
.gallery-item {
display: block;
padding: 4px;
margin: 0;
}
.gallery-columns-2 .gallery-item {
width: 50%;
}
.gallery-columns-3 .gallery-item {
width: 33.33%;
}
.gallery-columns-4 .gallery-item {
width: 25%;
}
.gallery-columns-5 .gallery-item {
width: 20%;
}
.gallery-columns-6 .gallery-item {
width: 16.66%;
}
.gallery-columns-7 .gallery-item {
width: 14.28%;
}
.gallery-columns-8 .gallery-item {
width: 12.5%;
}
.gallery-columns-9 .gallery-item {
width: 11.11%;
}
.gallery-columns-10 .gallery-item {
width: 10%;
}
/* helpful classes
------------------------------------------------- */
.fern-warning {
padding: 10px 0;
}
.hide {
display: none;
}
/* pagination — layout only
------------------------------------------------- */
.wp-block-query-pagination-numbers, .page-links, .nav-links {
display: flex;
align-items: center;
flex-flow: row wrap;
}
.wp-block-query-pagination-numbers > * + *, .page-links > * + *, .nav-links > * + * {
margin-left: 10px;
}
.wp-block-query-pagination-numbers > *.next, .page-links > *.next, .nav-links > *.next, .wp-block-query-pagination-numbers > *.prev, .page-links > *.prev, .nav-links > *.prev {
display: flex;
align-items: center;
}
.wp-block-query-pagination-numbers > *.next svg, .page-links > *.next svg, .nav-links > *.next svg, .wp-block-query-pagination-numbers > *.prev svg, .page-links > *.prev svg, .nav-links > *.prev svg {
width: 16px;
height: 16px;
}
.wp-block-query-pagination-numbers > *.next svg, .page-links > *.next svg, .nav-links > *.next svg {
margin-left: 4px;
}
.wp-block-query-pagination-numbers > *.prev svg, .page-links > *.prev svg, .nav-links > *.prev svg {
margin-right: 4px;
}
/* ============================================================================
04. LAYOUT
========================================================================== */
/* clearing
------------------------------------------------- */
.container:before,
.container:after,
.clear:before,
.clear:after,
.entry-content:before,
.entry-content:after,
.comment-content:before,
.comment-content:after,
.site-header:before,
.site-header:after,
.site-content:before,
.site-content:after,
.site-footer:before,
.site-footer:after {
content: "";
display: table;
table-layout: fixed;
}
.container:after,
.clear:after,
.entry-content:after,
.comment-content:after,
.site-header:after,
.site-content:after,
.site-footer:after {
clear: both;
}
/* body padding
------------------------------------------------- */
/* Customizer > Design > Layout > Body padding, as a class from
fern_body_padding_class(). Padding on the body insets header, content and
footer in one move, so the whole site sits as a block inside the window.
The steps roughly double as they climb rather than stepping evenly, because an
even scale makes the middle of the slider feel like it does nothing: each notch
has to be far enough from the last to be worth moving to.
min() against a viewport unit caps each step on narrow screens: 120px of frame
is a frame on a desktop and half the reading width on a phone. The small steps
never reach their cap and so never change. */
body {
padding: var(--body-padding, 0);
}
.body-padding-xs {
--body-padding: 12px;
}
.body-padding-sm {
--body-padding: min(24px, 4vw);
}
.body-padding-md {
--body-padding: min(48px, 6vw);
}
.body-padding-lg {
--body-padding: min(80px, 8vw);
}
.body-padding-xl {
--body-padding: min(120px, 10vw);
}
/* No frame on a phone, whichever step is set. The min() caps above already shrink
the larger steps, but shrinking is the wrong answer at this width: a frame is a
deliberate margin around the site, and on a screen this narrow every pixel of it
comes off the reading width, which is the one thing a phone has too little of.
The .container's own max-width still holds the text off the glass.
The padding, not the custom property: only this declaration reads it, and going
through the property would have to out-specify five classes to land. */
@media only screen and (max-width: 591.98px) {
body {
padding: 0;
}
}
/* site layout
------------------------------------------------- */
.container {
width: var(--container-width);
display: block;
max-width: calc(100% - 20px);
margin: 0 auto;
}
/* vertical rhythm inside content areas
------------------------------------------------- */
.site-main > article > *,
.site-main > .not-found > *,
.entry-content > *,
[class*=inner-container] > *,
.wp-block-template-part > *,
.wp-block-post-template :where(li > *) {
margin-top: var(--spacing-vertical);
margin-bottom: var(--spacing-vertical);
/* Only the top margin is opened up. A heading belongs to the text under it,
so it keeps the ordinary rhythm below and takes its distance from what
came before — the gap that would otherwise sit evenly on both sides and
leave the heading floating between two sections.
Stated in em, so each level takes its distance from its own size: a
larger heading opens a larger break, and the hierarchy of the headings
is carried by the space around them as well as by the type.
:is() keeps this at the specificity of a single element, so the
:first-child rule below still wins on a heading that opens the content
and no post starts with a hole above its first line. */
}
.site-main > article > *:is(h1, h2, h3, h4, h5, h6),
.site-main > .not-found > *:is(h1, h2, h3, h4, h5, h6),
.entry-content > *:is(h1, h2, h3, h4, h5, h6),
[class*=inner-container] > *:is(h1, h2, h3, h4, h5, h6),
.wp-block-template-part > *:is(h1, h2, h3, h4, h5, h6),
.wp-block-post-template :where(li > *):is(h1, h2, h3, h4, h5, h6) {
margin-top: 2em;
}
.site-main > article > *:first-child,
.site-main > .not-found > *:first-child,
.entry-content > *:first-child,
[class*=inner-container] > *:first-child,
.wp-block-template-part > *:first-child,
.wp-block-post-template :where(li > *):first-child {
margin-top: 0;
}
.site-main > article > *:last-child,
.site-main > .not-found > *:last-child,
.entry-content > *:last-child,
[class*=inner-container] > *:last-child,
.wp-block-template-part > *:last-child,
.wp-block-post-template :where(li > *):last-child {
margin-bottom: 0;
}
/* ============================================================================
05. BLOCKS
----------------------------------------------------------------------------
Alignment and layout only — colors, borders and type come from the browser
and from the block editor's own settings.
========================================================================== */
/* ---------------------------- general align */
@media only screen and (min-width: 482px) {
.entry-content > .alignright,
.entry-content > .alignleft,
.entry-content > .blocks-gallery-grid:not(.has-nested-images).alignleft,
.entry-content > .blocks-gallery-grid:not(.has-nested-images).alignright,
.entry-content > .wp-block-gallery:not(.has-nested-images).alignleft,
.entry-content > .wp-block-gallery:not(.has-nested-images).alignright {
max-width: 50%;
}
.alignright,
.blocks-gallery-grid:not(.has-nested-images).alignright,
.wp-block-gallery:not(.has-nested-images).alignright {
float: right;
margin-top: 0.5em;
margin-bottom: 1em;
margin-left: 1em;
}
.alignleft,
.blocks-gallery-grid:not(.has-nested-images).alignleft,
.wp-block-gallery:not(.has-nested-images).alignleft {
float: left;
margin-top: 0.5em;
margin-bottom: 1em;
margin-right: 1em;
}
}
/* alignwide / alignfull - centered breakout, only when the screen is wide enough.
The breakout is done with symmetric negative margins rather than
`margin-left: 50%` + `translateX(-50%)`. The transform is visual only: the
layout box still sat half a parent-width to the right, so every ancestor up
to inherited that overflow and the document grew a horizontal
scrollbar. Negative margins move the real box, so nothing overflows and
#page needs no `overflow: hidden` to paper over it. */
@media only screen and (min-width: 822px) {
.alignwide,
.wp-block-gallery:not(.has-nested-images).alignwide {
--breakout-width: min(var(--wide-width), 90vw);
width: var(--breakout-width);
margin-left: calc(50% - var(--breakout-width) / 2);
margin-right: calc(50% - var(--breakout-width) / 2);
}
.alignwide figcaption,
.alignwide .wp-element-caption,
.wp-block-gallery:not(.has-nested-images).alignwide figcaption,
.wp-block-gallery:not(.has-nested-images).alignwide .wp-element-caption {
max-width: var(--narrow-width);
margin-inline: auto;
}
}
@media only screen and (min-width: 822px) {
.alignfull,
.wp-block-gallery:not(.has-nested-images).alignfull {
--breakout-width: 96vw;
width: var(--breakout-width);
margin-left: calc(50% - var(--breakout-width) / 2);
margin-right: calc(50% - var(--breakout-width) / 2);
}
.alignfull figcaption,
.alignfull .wp-element-caption,
.wp-block-gallery:not(.has-nested-images).alignfull figcaption,
.wp-block-gallery:not(.has-nested-images).alignfull .wp-element-caption {
max-width: var(--narrow-width);
margin-inline: auto;
}
}
/* ---------------------------- image */
.entry-content > figure:not(.alignwide):not(.alignfull) {
max-width: 100%;
}
.wp-block-image .alignright {
margin-left: var(--spacing-horizontal);
}
.wp-block-image .alignleft {
margin-right: var(--spacing-horizontal);
}
.entry-content > *[class=wp-block-image],
.entry-content [class*=inner-container] > *[class=wp-block-image] {
margin-top: 0;
}
.entry-content > *[class=wp-block-image] + *,
.entry-content [class*=inner-container] > *[class=wp-block-image] + * {
margin-top: 0;
}
@media only screen and (max-width: 591.98px) {
.entry-content > .wp-block-image > .alignleft,
.entry-content > .wp-block-image > .alignright {
max-width: 50%;
}
}
/* ---------------------------- drop cap */
.has-drop-cap:not(:focus):first-letter {
float: left;
font-size: 4em;
font-style: normal;
line-height: 0.7;
margin: 0.2em 0.2em 0 0;
}
/* ---------------------------- button */
/* Square corners and a tighter box. Core ships the pill (border-radius: 9999px)
as the default, which is the one thing about a button that reads as
decoration here, and pads it out to calc(0.667em + 2px) by calc(1.333em + 2px)
— half an inch of fill around a word, which is a landing-page button rather
than something sitting in a paragraph. A radius set per-block in the editor
still wins — that arrives as an inline style.
The padding is stated in em so it keeps its proportions at whatever size the
button is set, and the horizontal figure is the 1.125em that
var(--control-padding) * 1.5 comes to on the theme's own buttons, so a Buttons
block and a submit button in a form are padded to the same measure.
Both declarations tie with core's global styles on specificity and win on
order: the theme's stylesheet is enqueued after them. */
.wp-block-button__link {
border-radius: 0;
padding: 0.5em 1.125em;
}
/* The outline style is padded separately by core — a 2px border and .667em by
1.333em inside it, so the outlined button ends up the same outer size as the
filled one — and that rule carries the block's own class, which outranks the
one above. Restated at the same weight core states it, with the border taken
out of the padding for the same reason: 2px of frame plus this is the box the
filled button draws with padding alone. */
.wp-block-button.is-style-outline > .wp-block-button__link,
.wp-block-button .wp-block-button__link.is-style-outline {
padding: calc(0.5em - 2px) calc(1.125em - 2px);
}
/* ---------------------------- media text
The content column sits beside a picture, so its text has an edge to line up
with that a paragraph in the open column does not. The blocks inside it come
with their own margins — a paragraph's 1em, a heading's larger one, whatever
the buttons block carries — and the first and last of those margins push the
text off the top and bottom of the image next to it.
So the column states its own rhythm: one gap between any two blocks, closed
at both ends. Tighter than the rhythm of the main column, because this is a
short passage in a narrow measure rather than a page of running text, and the
two are read differently.
The gap is in em, so it is measured against the block it sits under: two
paragraphs close up, and a heading still arrives with a little more air than
the line before it would take on its own.
------------------------------------------------- */
.wp-block-media-text > .wp-block-media-text__content {
/* Adjacent margins collapse, so a bottom of 0.75em meeting a top of 0.75em
is one 0.75em gap, not two stacked. */
}
.wp-block-media-text > .wp-block-media-text__content > * {
margin-top: 0.75em;
margin-bottom: 0.75em;
}
.wp-block-media-text > .wp-block-media-text__content > :first-child {
margin-top: 0;
}
.wp-block-media-text > .wp-block-media-text__content > :last-child {
margin-bottom: 0;
}
@media only screen and (max-width: 591.98px) {
.wp-block-media-text > .wp-block-media-text__content {
padding: 20px 10px 0;
}
}
/* ============================================================================
06. HEADER
========================================================================== */
/* ---------------------------- header layout */
.site-header .container {
display: flex;
align-items: center;
position: relative;
/* A baseline of its own, so the header never sits flush against the top of
the window. Body padding sits outside this and adds to it, but it is
zeroed on phones — without this the branding would touch the glass there.
Small on purpose: this is the floor, not the spacing, and on a desktop the
frame around it is doing most of the work already. */
padding: var(--spacing-small) 0;
/* Lets the menu drop to a line of its own on small screens. */
}
@media only screen and (max-width: 821.98px) {
.site-header .container {
flex-wrap: wrap;
}
}
.site-header svg path {
fill: currentColor;
}
/* Customizer > Header > Header width = Narrow. Caps the header row at the reading
width, so branding and menu line up with the column the article text runs in
rather than with the outer page margins.
Through min() against the container's own cap rather than on its own: below
700px --narrow-width is 100%, and a plain max-width there would out-specify
.container and run the header the full width of the glass while the article
under it still sits 10px in. The narrow header has to be no wider than the
column it is lining up with, never wider — which is also what holds it in the
gap between 680px and 700px, where 660px is still the narrower of the two. */
.site-header-narrow .container {
max-width: min(var(--narrow-width), 100% - 20px);
}
/* Inline at the narrow width is the one arrangement where the menu is short of
room: branding and menu share a row capped at the reading width, so a menu of
any length wraps onto a second line. Two things follow from that, and neither
is wanted anywhere else — Stack gives the menu a line of its own, and Full
leaves enough width that it rarely wraps at all.
Only from the tablet breakpoint up: below it the menu already drops to its own
full-width line under the branding, where it reads left-aligned like the text. */
@media only screen and (min-width: 822px) {
.site-header-narrow:not(.site-header-stack) {
/* Room the margin-left: auto on the menu can't guarantee: with the row this
tight, the first line of the menu would otherwise sit against the last
word of the title.
Carried on the menu rather than as a column-gap on the row: the clearfix
in section 04 gives .container a :before and an :after, and in a flex
container those count as items — a gap would then be laid out three times
over, once before the branding and once after the menu as well, and the
header would sit 20px inside the width it is supposed to hold. Inside the
menu's own box the space lands only where it is wanted, and the auto
margin still puts the menu's right edge on the edge of the row. */
}
.site-header-narrow:not(.site-header-stack) .primary-navigation {
padding-left: 20px;
}
.site-header-narrow:not(.site-header-stack) {
/* Right-aligned against the same edge the row ends on, so a menu that wraps
keeps a straight edge under the first line rather than starting each new
line back at the middle of the header. */
}
.site-header-narrow:not(.site-header-stack) ul.menu-wrapper {
justify-content: flex-end;
}
}
/* Customizer > Header > Vertical align. Where the menu sits against the branding,
which is the taller of the two whenever a logo, a title and a tagline are stacked
in it — with only a title there is nothing to align and none of the three differ.
Middle is the default and is what the center above already does, so it carries no
class of its own; only the two that move the row need one. Inline only: the class is
withheld in fern_header_align_class() when the layout is Stack, where branding
holds a line to itself and there is no second item on it to align to. */
.site-header-align-top .container {
align-items: flex-start;
}
.site-header-align-bottom .container {
align-items: flex-end;
}
/* Customizer > Header > Header layout = Stack. Branding takes a line of its own and
the menus wrap onto the next one.
Only from the tablet breakpoint up: below it the menu already takes a line of its
own under the branding, so the stack layout is what the header does there anyway. */
@media only screen and (min-width: 822px) {
.site-header-stack .container {
flex-wrap: wrap;
row-gap: var(--spacing-small);
}
.site-header-stack .site-branding {
flex: 0 0 100%; /* forces the wrap; everything after it starts a new line. */
max-width: none;
}
.site-header-stack .primary-navigation {
/* Left-aligned under the branding rather than pushed to the far right. */
margin-left: 0;
}
}
/* Stack at the full header width: both lines centred. Narrow already lines the
header up with the text column, so left-aligning there keeps branding, menu and
article on the same edge; at full width there is no such edge to hold to, and a
title sitting alone in a wide row reads better centred over the menu than pinned
to the far left of the page. */
@media only screen and (min-width: 822px) {
.site-header-stack:not(.site-header-narrow) .site-branding {
align-items: center;
max-width: 100%;
text-align: center;
}
.site-header-stack:not(.site-header-narrow) {
/* A row rather than a column when the logo is inline, so centring it is the
main axis — align-items above is already doing the other one. */
}
.site-header-stack:not(.site-header-narrow) .site-branding-logo-inline {
justify-content: center;
/* The pair is centred in the header, but the title and the tagline are
set against the logo rather than against each other: the logo gives
them an edge to start from, and two centred lines beside it would read
as a second thing that happens to be there rather than as one lockup. */
}
.site-header-stack:not(.site-header-narrow) .site-branding-logo-inline .site-branding-text {
text-align: left;
}
.site-header-stack:not(.site-header-narrow) {
/* Auto on both sides, against the margin-left: 0 the stack rule sets. */
}
.site-header-stack:not(.site-header-narrow) .primary-navigation {
margin-left: auto;
margin-right: auto;
}
}
/* ---------------------------- branding */
/* Logo, title, tagline: each on a line of its own, at every width, and each one
optional — a site can show any of the three. Set as a column rather than left
to the block flow so they stay aligned to the start edge whatever the header
row does around them. */
.site-branding {
display: flex;
flex-direction: column;
align-items: flex-start;
max-width: 60%;
/* The menu is on the line below rather than beside it, so there is nothing to
leave room for: a long title gets the whole width instead of wrapping at 60%. */
}
@media only screen and (max-width: 821.98px) {
.site-branding {
max-width: 100%;
}
}
.site-branding img {
height: 44px;
width: auto;
display: block;
}
/* The title reads as the menu does — the body font at body size and regular
weight — so the header is one line of type rather than a brand with a smaller
menu beside it. The menu carries no type rules of its own; this is the side
that moves.
All three stated rather than inherited, because the title is an on the
front page and a
would take the heading font, the heading weight and 2em
from section 03, and the title would change on the way off the blog index.
Its color and its lack of an underline come from .site-header a above, and they
are the whole story however the site is set up: the nav treatments in section
11 name every link up here except this one, so the site title is never painted
in the link color and never carries a line, at rest or under the pointer. It is
the name of the site before it is a link home, and a name in link blue with a
line under it reads as a link in a sentence rather than as a masthead. */
.site-title {
font-family: var(--body-font);
font-weight: 400;
font-size: 1em;
margin: 0;
line-height: 1.2;
}
/* The title and the tagline together, in the wrapper header.php prints around
them. Stacked it is one more block in the branding column and changes nothing
about how the two read; inline it is the block the logo sits beside.
Spaced only when it is running under a logo — on its own it is the top of the
branding block and takes no space above it. */
.site-logo-image + .site-branding-text {
margin-top: 6px;
}
/* Customizer > Site Identity > Logo position = Inline. The logo comes out of the
branding column and sits beside the title and tagline instead of above them,
centred against the pair however tall they are — read by header.php, which adds
the class only when there is a logo.
Nothing is withheld below the breakpoints: unlike the header's own layout
options this one is about the branding block itself, which holds its shape at
every width, and a logo beside a title on a wide screen would be a logo above
it on a phone for no reason the reader can see. */
.site-branding-logo-inline {
flex-direction: row;
align-items: center;
-moz-column-gap: var(--spacing-small);
column-gap: var(--spacing-small);
/* Beside the logo rather than under it, so the 6px that separates the two when
they are stacked has nothing to do. */
}
.site-branding-logo-inline .site-logo-image + .site-branding-text {
margin-top: 0;
}
/* Under the title rather than beside it, so the gap is a small vertical one and
the same at every width. */
.site-description {
margin: 4px 0 0;
line-height: 1.3;
color: var(--secondary-text);
font-size: 0.9em;
}
/* ---------------------------- header links
The site header sits outside Customizer > Design > Link style: the logo, the
site title and the primary menu are furniture, not writing, and a reader picks
a treatment down in section 11 for the links they are reading, not for the row
above them. Section 11 excludes .site-header a from every treatment, so this is
the only place that says what a link up here looks like.
The ink of the header and nothing else — no color of its own and no underline,
because the header's links are the header: a title that is also a link home,
and a row of items that is already legible as a menu by being a row. */
.site-header a {
color: inherit;
text-decoration: none;
}
/* The pointer is the only thing that draws a line here, and only in the menu —
the logo and the title are one target each and the cursor already says so. */
.primary-navigation a:hover, .primary-navigation a:focus {
text-decoration: underline;
text-decoration-thickness: 2px;
}
/* The item for the page you are already on is the one link in the row with
nowhere to go: it drops to the secondary text color and takes no line from the
pointer, which marks it as where you are rather than somewhere to head. */
.primary-navigation .current-menu-item a {
color: var(--secondary-text);
}
.primary-navigation .current-menu-item a:hover, .primary-navigation .current-menu-item a:focus {
text-decoration: none;
}
/* ---------------------------- primary navigation */
/* One menu at every width — there is no off-canvas panel to hand the small
screens over to. Up to the tablet breakpoint the header row wraps and the menu
takes the line under the branding, left-aligned, rather than being squeezed in
beside it. */
.primary-navigation {
margin-left: auto;
}
@media only screen and (max-width: 821.98px) {
.primary-navigation {
flex: 0 0 100%;
margin-left: 0;
margin-top: var(--spacing-small);
}
}
.primary-navigation ul.menu-wrapper {
display: flex;
align-items: center;
flex-flow: row wrap;
/* As a gap rather than a margin on the items: when the menu wraps onto a second
line — which it does on small screens, where it has the width to itself — a
left margin would indent every row after the first. */
gap: 4px 20px;
list-style: none;
margin: 0;
padding: 0;
/* Tight, so a menu item is as tall as its own text and nothing more: the row
gap above is then the whole of the space between items, on one line or two,
and the header sits as close to the branding as the layout allows. */
line-height: 1.2;
}
.primary-navigation ul.menu-wrapper > li {
display: flex;
align-items: center;
}
/* ============================================================================
07. FOOTER
========================================================================== */
.site-footer .container {
padding: var(--spacing-huge) 0 var(--spacing-big);
}
.footer-navigation {
margin: 0 auto 5px;
max-width: var(--narrow-width);
font-size: 0.9em;
}
.footer-navigation .menu-wrapper {
display: flex;
flex-wrap: wrap;
gap: 4px var(--spacing-small);
list-style: none;
margin: 0;
padding: 0;
}
/* The footer menu is the header menu's twin and sits outside Design > Link style
for the same reason — section 11 excludes .footer-navigation a from every
treatment, so a link down here is drawn once, here, and does not move when the
writing above it does.
The copyright line beside it is NOT excluded: it is a sentence with a link in
it, which is exactly what the treatments are for. */
.footer-navigation a {
color: inherit;
text-decoration: none;
}
.footer-navigation a:hover, .footer-navigation a:focus {
text-decoration: underline;
text-decoration-thickness: 2px;
}
.footer-navigation .current-menu-item a {
color: var(--secondary-text);
}
.footer-navigation .current-menu-item a:hover, .footer-navigation .current-menu-item a:focus {
text-decoration: none;
}
/* Always the last line in the footer, so it carries no margin under it: the
space to the foot of the page is the container's padding and nothing else. */
.copyright {
margin: 0 auto;
font-size: 0.9em;
max-width: var(--narrow-width);
color: var(--secondary-text);
}
/* ============================================================================
08. SINGLE
========================================================================== */
.entry-content {
margin-top: 1.5em;
counter-reset: footnotes;
}
/* Pages link
---------------------------------------- */
.page-links-label {
display: block;
margin-right: 20px;
}
/* tags
---------------------------------------- */
.entry-tags {
margin-top: 2em;
display: flex;
flex-flow: row wrap;
align-items: center;
}
.entry-tags a {
display: block;
margin-right: 10px;
}
.tags-label {
display: block;
margin-right: 10px;
}
/* Comments
---------------------------------------- */
:root {
--comment-avatar-width: 56px;
--comment-avatar-text-spacing: 16px;
}
@media only screen and (max-width: 821.98px) {
:root {
--comment-avatar-width: 48px;
}
}
@media only screen and (max-width: 591.98px) {
:root {
--comment-avatar-width: 36px;
--comment-avatar-text-spacing: 8px;
}
}
.comments-area {
margin-top: 3em;
}
.comment-body {
position: relative;
}
.comment-list {
margin: 0;
padding: 0;
list-style: none;
position: relative;
}
.comment-list li.comment {
overflow: hidden;
position: relative;
margin-top: var(--spacing-medium);
}
.comment-list > li:first-child {
margin-top: 0;
}
.comment-list {
/* main body */
}
.comment-list li + li > .comment-body {
padding: 0;
display: block;
position: relative;
}
.comment-list {
/* author */
}
.comment-list .comment-author img {
float: left;
margin-right: var(--comment-avatar-text-spacing);
width: var(--comment-avatar-width);
display: block;
margin-top: 3px;
}
.comment-list .fn {
font-style: normal;
display: table;
margin-bottom: 4px;
}
.comment-list {
/* nested */
}
.comment-list ul.children {
margin: 0;
list-style: none;
}
.comment-list .children {
position: relative;
padding-left: var(--comment-avatar-width);
}
/* The comment's date is a link where a post's date is plain text, and its edit
link is a second one. Neither is styled here: they are meta links like the
categories on a post, and section 09 draws all of them in one place so a
comment's byline and a post's meta line cannot drift apart. */
.comment-meta .comment-metadata .edit-link {
margin-left: 16px;
}
.reply {
display: block;
position: absolute;
top: 0;
right: 0;
}
.comment-metadata,
.comment .reply,
.comment-content,
.comment .comment-respond {
padding-left: calc(var(--comment-avatar-width) + var(--comment-avatar-text-spacing));
}
.comment-content {
padding-top: 0.7em;
}
.comment-content > * {
margin: 1em 0;
}
.comment-content > *:first-child {
margin-top: 0;
}
.comment-content > *:last-child {
margin-bottom: 0;
}
.says {
display: none;
}
.comments-pagination {
margin-top: var(--spacing-medium);
}
/* Comment Form
---------------------------------------- */
#reply-title,
.comments-title {
margin-bottom: var(--spacing-small);
margin-top: 2em;
}
#reply-title small {
display: block;
margin-top: 10px;
}
.no-comments {
margin-top: 2em;
}
#commentform .logged-in-as,
#commentform .comment-notes {
margin-bottom: 1.5em;
}
#commentform p {
margin: 0 0 1em;
}
#commentform p input[type=text],
#commentform p input[type=url],
#commentform p input[type=email],
#commentform p input[type=password],
#commentform p input[type=number] {
width: 100%;
}
label[for=comment],
label[for=email],
label[for=author],
label[for=url] {
display: block;
margin: 0 0 0.2em;
}
.comment-form-cookies-consent {
display: flex;
align-items: center;
}
.comment-form-cookies-consent input[type=checkbox] {
flex: none;
margin-right: 6px;
}
#commentform .form-submit {
margin-top: 2em;
}
/* ============================================================================
09. ARCHIVES
========================================================================== */
/* ---------------------------- layout */
.main {
padding: var(--spacing-big) 0;
margin: 0 auto;
width: var(--narrow-width);
max-width: 100%;
}
@media only screen and (max-width: 821.98px) {
.main {
padding: var(--spacing-medium) 0;
}
}
.page-no-title .main {
padding-top: 0;
}
.fern-post {
margin-bottom: var(--spacing-huge);
}
@media only screen and (max-width: 821.98px) {
.fern-post {
margin-bottom: var(--spacing-big);
}
}
.fern-post:last-of-type {
margin-bottom: 0;
}
/* ---------------------------- blog layout: inline
Customizer > Blog > Blog layout > Inline (the default), printed by
template-parts/content-inline.php: one line per post, the date and then the
title, so a page of them reads as an index instead of as a run of entries.
The same shape as the homepage list and the archives page, which is the point
— those are already lists, and a blog index set the same way makes the three
read as one site rather than as three ideas about what a list of posts is.
The homepage list is not merely the same shape: it prints this same template
part, so these rules dress it too. */
.fern-post-inline {
display: flex;
align-items: baseline;
line-height: 1.35;
margin-bottom: 0.4em;
}
.fern-post-inline:last-of-type {
margin-bottom: 0;
}
.fern-post-inline .fern-meta-date {
flex: none;
font-variant-numeric: tabular-nums;
margin-right: var(--spacing-small);
min-width: 10.5em;
white-space: nowrap;
}
.fern-post-inline .entry-title {
flex: 1;
min-width: 0;
font-size: 1em;
font-weight: inherit;
margin: 0;
}
@media only screen and (max-width: 591.98px) {
.fern-post-inline {
display: block;
margin-bottom: 0.8em;
}
.fern-post-inline .fern-meta-date {
display: block;
margin-right: 0;
}
}
/* ---------------------------- blog layout: stack
Customizer > Blog > Blog layout > Stack, printed by
template-parts/content-stack.php: title, meta, thumbnail, excerpt. Every part
is styled by the shared rules below — including .entry-header, which wraps the
title and the meta line here exactly as it does on the single post. */
/* ---------------------------- thumbnail */
.post-thumbnail {
margin: 0 0 1em;
max-width: 100%;
}
.post-thumbnail > figcaption {
margin: 0.4em 0 0;
}
.post-thumbnail > a {
display: block;
margin: 0;
}
@media only screen and (min-width: 822px) {
.post-has-thumbnail-vertical .post-thumbnail {
width: 360px;
}
}
/* ---------------------------- entry header
Title and meta line as one block — printed by content-single.php and by the
stack blog layout, which is every view that shows both. The space below the
pair is stated on the wrapper rather than on the meta line, so a post with its
meta switched off opens the same gap before its thumbnail or its text. Pages,
which print a title and no meta, wrap it in the same header so they open that
gap too. */
.entry-header {
margin-bottom: 1.8em;
}
/* ---------------------------- title */
.entry-title {
margin: 0 0 0.1em;
overflow-wrap: break-word;
}
/* A stack entry's title is a heading first and a link second: it is set in the
ink of the page, not the link color, and it carries no line at rest however the
writing below it is styled — a headline with an underline through it reads as a
link in a sentence rather than as the top of a post. The pointer still gets an
answer, in the 2px the theme draws everywhere else.
Two classes and an element, so it holds against every treatment in section 11
— including the ones that underline a link at rest and take the line away on
hover, which is the pair this rule has to turn the right way up. */
.fern-post-stack .entry-title a {
color: inherit;
text-decoration: none;
}
.fern-post-stack .entry-title a:hover, .fern-post-stack .entry-title a:focus {
text-decoration: underline;
text-decoration-thickness: 2px;
}
/* ---------------------------- excerpt */
.entry-excerpt p {
margin: 0;
}
/* ---------------------------- meta */
/* The date, the categories and the edit link, wherever they are printed: inside
an .entry-meta line on the stack layout and the single post, on their own on
an inline blog row, and under a commenter's name in .comment-metadata — the
date and edit link on a comment are the same kind of line as the date and
categories on a post, so they are set in the same color.
The color only. .comment-metadata keeps its own layout: it sits beside a
floated avatar, and the flex row below would make it a formatting context of
its own, which stops it overlapping that float and lands it an avatar's width
further right than the line above it.
This list is the only statement of what "secondary text" reaches: Customizer >
Design > Colors > Secondary text color moves the token and nothing else, so
anything added here follows it without the emitter needing to know. */
.entry-meta,
.comment-metadata,
.fern-meta-date {
color: var(--secondary-text);
}
/* The links inside those lines — a category, an edit link, the date on a comment
— go with the navigation rather than with the writing. A category and an edit
link are meta before they are links: they belong to the furniture the theme
prints around a post, which is the same thing the header menu is, and a reader
who has learned what a link looks like in the menu has then learned it here
too. So section 11 keeps them out of every writing treatment and names them
alongside .site-header and .footer-navigation in the nav ones, and Customizer >
Design > Links > Nav link style moves the menu and the meta lines together.
This is that arrangement at rest: the header's own two declarations said again
for the meta lines, so Bay — the nav style that emits nothing — leaves a meta
link looking exactly like a menu item, no color of its own and no line until
the pointer arrives. `inherit` is what holds it in the meta color, the same way
`inherit` holds a header link in the ink of the header: the color comes from
the rule above, and Secondary text color still moves the whole line at once.
One class and one element, which is exactly what a nav treatment weighs, and
earlier in the sheet than all of them — so picking one in the Customizer takes
this over, and picking Bay leaves it standing. */
.entry-meta a,
.comment-metadata a {
color: inherit;
text-decoration: none;
}
.entry-meta a:hover, .entry-meta a:focus,
.comment-metadata a:hover,
.comment-metadata a:focus {
text-decoration: underline;
text-decoration-thickness: 2px;
}
.entry-meta {
display: flex;
flex-flow: row wrap;
}
.entry-meta > * {
display: block;
}
.entry-meta > * + * {
margin-left: 0.5em;
}
.entry-meta > * + *::before {
content: "·";
margin-right: 0.5em;
}
/* ---------------------------- pagination
fern_pagination() prints .navigation.pagination, and every list on the
site ends with one: the blog in both layouts and the search results.
The space above it is stated here rather than left to whichever list happens
to be above. Left to the lists it came out at several different sizes. */
.pagination {
margin-top: var(--spacing-big);
}
@media only screen and (max-width: 821.98px) {
.pagination {
margin-top: var(--spacing-medium);
}
}
.wp-block-query-pagination {
margin-top: 2em;
}
/* ---------------------------- archive header
Sits above .main rather than inside it, so it has to open the space under the
site header itself — and it opens the same amount .main does, so an archive
title starts on the line a page title would have started on. */
.archive-header {
padding: var(--spacing-big) 0 0;
margin: 0 auto;
width: var(--narrow-width);
max-width: 100%;
}
@media only screen and (max-width: 821.98px) {
.archive-header {
padding-top: var(--spacing-medium);
}
}
.archive-header h1 {
margin: 0;
}
.archive-description {
margin: 0.4em 0 0;
}
.archive-description p {
margin: 0;
}
/* search
--------------------------------------------- */
.search-result-count {
margin: 0.2em 0 0;
}
.search-result-count p {
margin: 0;
}
/* The count and the form under the title, still inside the header: the padding
above and the space below both come from .archive-header and .main, as on
every other archive, so a longer head does not move where the results start
relative to the title. */
.search-header .search-form {
margin-top: 1em;
}
/* No bottom margin: the pagination under it carries its own space, and with no
results there is nothing here to hold open. */
.fern-search {
margin: 0;
}
.fern-post-search + .fern-post-search {
margin-top: var(--spacing-medium);
}
.fern-post-search {
overflow: hidden;
}
.fern-post-search .entry-excerpt {
margin-top: 0.5em;
}
.fern-post-search-thumbnail {
margin: 0 0 0 10px;
width: 54px;
float: right;
}
.fern-post-search-thumbnail a {
display: block;
}
.fern-post-search-thumbnail img {
width: 100%;
display: block;
}
.fern-post-search-text {
overflow: hidden;
}
/* archives index
---------------------------------------------
The archives page — every published post, grouped year > month.
Titles only, so the rows are set tight and the columns carry the structure.
The month is set at the same size as the titles it heads — it is a date on
the row, not a heading over it. The year is a step up from both, and no
more: it is the only thing on the page set larger, so it does not need to
shout to be found when scrolling.
The year heads everything filed under it, on its own line above the months;
the month and its titles are two columns beside each other. So the page is
read straight down — year, then month by month — and only the months carry
a second column. Both are flush left, which puts the year, the months and
the titles' first characters on one edge rather than three. Month and
titles share one font size, and both columns hang from the top of the row,
so they land on one line with no nudging. Nothing is drawn to mark any of
it, so there is no rule between years either — years are parted by space
alone, and by enough of it that none is missed.
Two optional sections can sit above the index — the categories and the
popular tags, both switched on in Customizer > Blog — each headed the way a
year is, with its links running as one wrapped line underneath. */
.archives-index {
/* The month's gutter and the gap beside it. In rem rather than em so the
months are one fixed spine down the whole page, whatever a month label
happens to measure — a long name wraps inside its column rather than
moving the titles beside it. */
--archives-month-column: 7rem;
--archives-column-gap: 1.25rem;
margin-top: var(--spacing-medium);
/* Only when the page above it wrote something. An .entry-content that the
template skipped for an empty page leaves the index directly under the
title, where the title's own margin is the right amount of space. */
}
.entry-content + .archives-index {
margin-top: var(--spacing-big);
}
@media only screen and (max-width: 821.98px) {
.entry-content + .archives-index {
margin-top: var(--spacing-medium);
}
}
.archives-year {
/* Space between years, no rule. It has to do the whole job of the missing
line, so it is set well clear of the gap between months below — the two
are what tell you which level you are looking at. */
}
.archives-year + .archives-year {
margin-top: 3.2em;
}
.archives-year-title {
line-height: 1.35;
/* Closer to the months under it than to the year above it, so it is read
as heading the list that follows rather than closing the one before. */
margin: 0 0 0.8em;
}
.archives-month {
display: grid;
grid-template-columns: var(--archives-month-column) minmax(0, 1fr);
-moz-column-gap: var(--archives-column-gap);
column-gap: var(--archives-column-gap);
/* The month heads its posts rather than centring on them, so both columns
hang from the top of the row. */
align-items: start;
}
.archives-month + .archives-month {
margin-top: 0.9em;
}
@media only screen and (max-width: 591.98px) {
.archives-month {
/* Under the phone breakpoint there is no room for two columns: the
month goes back to being a heading above its list, as the year
already is. */
display: block;
}
.archives-month + .archives-month {
margin-top: 1.4em;
}
}
/* Same size as the titles beside it, so the row reads as one line and the two
need no nudging onto each other. It is a date on the row rather than a
heading over it, so it also drops the bold a heading would carry. */
.archives-month-title {
font-size: inherit;
font-weight: normal;
line-height: 1.35;
margin: 0;
}
@media only screen and (max-width: 591.98px) {
.archives-month-title {
margin-bottom: 0.35em;
}
}
.archives-list {
list-style: none;
margin: 0;
padding: 0;
}
.archives-list li {
margin: 0 0 0.4em;
line-height: 1.35;
}
.archives-list li:last-child {
margin-bottom: 0;
}
.archives-empty {
margin-top: var(--spacing-medium);
}
/* ---------------------------- categories and popular tags
The two optional sections above the index, printed by
fern_the_archives_categories() and fern_the_archives_tags().
Headed the way the years are: the heading on its own line, flush left, at the
one size this page sets anything larger, and its links as a single wrapped
line beneath it. So the page is read down as three sections of one kind —
Categories, Popular tags, then the years — rather than as two labels and then
an index.
The links run across rather than down. There is no chronology to a set of
categories, so nothing is gained by giving each one its own line, and a blog
with forty of them would otherwise open its archives page with forty rows
before the archive itself began. */
.archives-terms {
margin-top: var(--spacing-medium);
}
.entry-content + .archives-terms {
margin-top: var(--spacing-big);
}
@media only screen and (max-width: 821.98px) {
.entry-content + .archives-terms {
margin-top: var(--spacing-medium);
}
}
.archives-terms + .archives-terms {
margin-top: 2em;
}
.archives-terms + .archives-index {
margin-top: var(--spacing-big);
}
@media only screen and (max-width: 821.98px) {
.archives-terms + .archives-index {
margin-top: var(--spacing-medium);
}
}
.archives-terms-title {
line-height: 1.35;
margin: 0 0 0.8em;
}
.archives-terms-list {
display: flex;
flex-flow: row wrap;
-moz-column-gap: 1.25em;
column-gap: 1.25em;
row-gap: 0.4em;
line-height: 1.35;
list-style: none;
margin: 0;
padding: 0;
}
.archives-terms-list li {
margin: 0;
}
.archives-term-count {
font-variant-numeric: tabular-nums;
margin-left: 0.35em;
}
/* homepage: latest posts
---------------------------------------------
The list printed under a static front page's content, switched on in
Customizer > Homepage Settings.
Title and date per row: this is the way through from a homepage to the
writing, not a second copy of the blog, and anything more per row would make
it compete with the page above it.
The rows are the Inline blog layout's rows — .fern-post-inline, styled
above — so there is nothing to set here but the space above the section. The
heading is left as the h2 the browser and the theme's element rules already
set: it is a heading on the page like any other, and one sized specially for
this list would be the only one on the site that is. The arrangement is the
archives index minus its year and month columns; a handful of recent posts
needs no grouping to be read. */
.homepage-posts {
margin-top: var(--spacing-big);
}
@media only screen and (max-width: 821.98px) {
.homepage-posts {
margin-top: var(--spacing-medium);
}
}
/* nothing found
---------------------------------------------
Two templates print the same page: 404.php, for an address that resolves to
nothing, and template-parts/content-none.php, for an archive that came back
empty. Both set it inside .main, which holds it to the reading width and
opens the space above the title and below the search form, so all that is
left here is the gap between the two — the same one an archive keeps between
its title and the first thing under it. */
.no-results .page-title {
margin: 0;
}
.page-content-404 {
width: var(--narrow-width);
max-width: 100%;
margin: var(--spacing-big) auto 0;
}
@media only screen and (max-width: 821.98px) {
.page-content-404 {
margin-top: var(--spacing-medium);
}
}
.page-content-404 .search-form {
margin-top: 10px;
}
/* ============================================================================
10. WIDGETS
========================================================================== */
.widget-area .wp-block-heading,
.widget-area .widgettitle,
.widget-area .widget-title {
font-size: 1em;
margin-bottom: 0.5em;
}
/* ---------------------------- calendar */
.wp-calendar-nav {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 0.5em;
}
/* ---------------------------- search form */
/* Capped rather than filled: a search field is a few words long, and a rule
drawn the whole width of the reading column reads as a section divider. The
cap is a max, so inside anything narrower — a widget, a phone — it still
takes what it is given. */
.search-form {
display: block;
position: relative;
max-width: 320px;
}
.search-form input[type=search] {
width: 100%;
/* Room for the button sitting over the right end of the field. */
padding-right: var(--control-height);
}
.search-form {
/* The submit is an icon inside the field, so it drops the button fill and
the border and becomes the glyph alone. Square, matching the field height,
which is what keeps the icon centred on the text. */
}
.search-form button {
background: none;
color: inherit;
border: 0;
padding: 0;
margin: 0;
width: var(--control-height);
height: var(--control-height);
cursor: pointer;
position: absolute;
top: 0;
right: 0;
display: flex;
align-items: center;
justify-content: center;
}
.search-form button:hover {
background: none;
opacity: 0.7;
}
/* ---------------------------- search block */
/* The Search block draws itself out of the box — a #949494 field, a filled dark
button (that fill arrives on .wp-element-button, from core's own global
styles, so a bare `button` rule never reaches it) held 10px clear of the
field — and none of that is the theme's. Redrawn here with the same border,
height and faint fill every other control gets, and capped at the width of
.search-form so the block and the theme's own form read as one object.
A colour set on the button in the editor still wins: presets land as
!important, custom colors as an inline style. */
.wp-block-search {
max-width: 320px;
}
.wp-block-search .wp-block-search__label {
display: block;
font-weight: inherit;
margin-bottom: 0.5em;
}
.wp-block-search .wp-block-search__input {
font: inherit;
color: inherit;
background-color: transparent;
border: 1px solid;
border-color: color-mix(in srgb, currentColor 25%, transparent);
border-radius: 0;
padding: 0 var(--control-padding);
height: var(--control-height);
/* Core's 3rem floor would keep the field from shrinking inside a
sidebar narrower than the two controls together. */
min-width: 0;
}
.wp-block-search .wp-block-search__input:focus {
border-color: currentColor;
}
.wp-block-search .wp-block-search__button {
font: inherit;
color: inherit;
background-color: color-mix(in srgb, currentColor 7%, transparent);
border: 1px solid;
border-color: color-mix(in srgb, currentColor 25%, transparent);
border-radius: 0;
padding: 0 calc(var(--control-padding) * 1.5);
height: var(--control-height);
line-height: 1;
cursor: pointer;
/* Centres the glyph when the button is set to an icon. */
display: inline-flex;
align-items: center;
justify-content: center;
}
.wp-block-search .wp-block-search__button:hover {
background-color: color-mix(in srgb, currentColor 12%, transparent);
border-color: color-mix(in srgb, currentColor 45%, transparent);
}
.wp-block-search {
/* Flush against the field, the two borders pulled onto one seam, rather
than core's 10px gap. Not on the button-only layout, which has no field
to sit against. */
}
.wp-block-search:not(.wp-block-search__button-only) .wp-block-search__button {
margin-left: -1px;
}
.wp-block-search {
/* Button-inside: the wrapper carries the border, so the two controls give
theirs up and the pair reads as a single field. */
}
.wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper {
background-color: transparent;
border: 1px solid;
border-color: color-mix(in srgb, currentColor 25%, transparent);
border-radius: 0;
padding: 0;
height: var(--control-height);
}
.wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__input,
.wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__button {
border: 0;
height: 100%;
margin: 0;
}
.wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__input {
padding: 0 var(--control-padding);
}
.wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__button {
padding: 0 var(--control-padding);
}
/* ---------------------------- lists */
.wp-block-latest-comments,
.widget_nav_menu nav > ul,
.wp-block-archives-list,
.wp-block-categories-list,
.wp-block-latest-posts__list,
.wp-block-page-list,
.wp-block-rss,
.widget_rss ul,
.widget_archive ul,
.widget_nav_menu ul,
.widget_meta ul,
.widget_recent_comments ul,
.widget_recent_entries ul,
.widget_pages ul,
.widget_categories ul,
.widget_product_categories ul {
list-style: none;
margin-block: 0;
padding: 0;
}
.wp-block-latest-comments ul,
.widget_nav_menu nav > ul ul,
.wp-block-archives-list ul,
.wp-block-categories-list ul,
.wp-block-latest-posts__list ul,
.wp-block-page-list ul,
.wp-block-rss ul,
.widget_rss ul ul,
.widget_archive ul ul,
.widget_nav_menu ul ul,
.widget_meta ul ul,
.widget_recent_comments ul ul,
.widget_recent_entries ul ul,
.widget_pages ul ul,
.widget_categories ul ul,
.widget_product_categories ul ul {
list-style: none;
margin: 0 0 0 20px;
padding: 0;
}
.wp-block-latest-comments__comment,
.widget_recent_comments li,
.wp-block-latest-posts.wp-block-latest-posts__list li,
.wp-block-rss > li,
.widget_rss ul > li {
margin-bottom: 0.75em;
overflow: hidden;
}
.wp-block-latest-comments__comment:last-child,
.widget_recent_comments li:last-child,
.wp-block-latest-posts.wp-block-latest-posts__list li:last-child,
.wp-block-rss > li:last-child,
.widget_rss ul > li:last-child {
margin-bottom: 0;
}
.wp-block-latest-comments__comment-excerpt > *:last-child {
margin-bottom: 0;
}
/* ---------------------------- widget in .secondary */
.secondary .widget_block + .widget_block, .secondary .widget_block + .widget,
.secondary .widget + .widget_block,
.secondary .widget + .widget {
margin-top: 2em;
}
/* ============================================================================
11. LINK STYLES
----------------------------------------------------------------------------
Customizer > Design > Links, one block per treatment, applied as a body class
by fern_link_style_class() in inc/template-functions.php. "No style" — the
default — is the exception: it carries no class, because it leaves links
exactly as the browser draws them, which is what every section before this one
assumes.
WHAT A TREATMENT REACHES. Every link on the page except three things: the site
header — logo, site title, primary menu — the footer menu, and buttons. The
first two are furniture, drawn once in sections 6 and 7, and they stay exactly
as they are whichever treatment is picked. Everything else is in: the writing,
the widgets, the archive listings, the copyright line.
The header and the footer menu are left out of these rules, not out of the
customizer: they have six treatments of their own at the foot of this section,
chosen by Design > Links > Nav link style, so the two halves of the page can be
set separately and neither is stuck with what the other picked.
A button is a link by markup only. It is already told apart by its shape and
its fill, and its color is decided elsewhere — currentColor for the outline
style, the fill's own contrast color for the solid one, or whatever was picked
in the editor. All three of those arrive from core as `:root :where(…)` rules,
which carry the weight of a single class and would lose to a treatment here,
so the exclusion is what keeps a button the color it was built to be rather
than the color links happen to be.
The meta lines are out too, and for the same reason the header is: a category,
an edit link and the date on a comment are the furniture the theme prints
around a piece of writing rather than the writing itself. They are handed to
the nav treatments below instead — the meta rule in section 09 sets that out.
$link-scope below is how all of it is said, and it is wrapped in :where() on
purpose. :where() contributes no specificity, so a treatment's selector weighs
exactly what `.link-style-x a` weighed — one class, one element — and the rules
above that deliberately outrank a bare link color, `.fern-post-stack
.entry-title a` among them, still do.
Last in the sheet, where a section about every link on the page belongs.
Every treatment is named for an herb — Basil, Parsley, Thyme, Rosemary, Mint,
Chive, Sorrel, Sage — so a site can say which one it is running. The names are
in fern_link_styles(), beside the labels; the classes keep the descriptive
slugs they started with.
--accent only exists once Design > Colors sets it, so the treatments that wear
it name LinkText — the browser's own link color — as the fallback and stay the
browser's blue until an accent is picked. Nothing sets a link color underneath
them: fern_design_inline_css() publishes --accent and applies it nowhere,
precisely so the treatment picked here is the only thing deciding what color a
link is — Sage included, which is why Sage is the browser's blue however the
accent is set.
========================================================================== */
/* Basil — accent color, no line until the pointer is on it.
2px rather than the hairline the browser would draw: the line is the whole of
what happens on hover here, and at the font's own thickness it reads as an
accident of rendering more than an answer to the pointer. */
.link-style-accent-underline a:where(:not(.site-header a, .footer-navigation a, .entry-meta a, .comment-metadata a, .wp-element-button, .wp-block-button__link)) {
color: var(--accent, LinkText);
text-decoration: none;
}
.link-style-accent-underline a:where(:not(.site-header a, .footer-navigation a, .entry-meta a, .comment-metadata a, .wp-element-button, .wp-block-button__link)):hover, .link-style-accent-underline a:where(:not(.site-header a, .footer-navigation a, .entry-meta a, .comment-metadata a, .wp-element-button, .wp-block-button__link)):focus {
text-decoration: underline;
text-decoration-thickness: 2px;
}
/* Parsley — Basil the other way round: the accent and the line are both there at
rest, and hover takes the line away. The loudest of the four accent treatments
and the one to pick when a link should be findable by skimming rather than by
sweeping the pointer across the paragraph.
The offset is what keeps that readable at rest — a line sitting on the
descenders of a link that is always underlined is a line you read through all
day, and a fraction of an em below the baseline is enough to stop that. */
.link-style-accent-underlined a:where(:not(.site-header a, .footer-navigation a, .entry-meta a, .comment-metadata a, .wp-element-button, .wp-block-button__link)) {
color: var(--accent, LinkText);
text-decoration: underline;
text-underline-offset: 0.15em;
}
.link-style-accent-underlined a:where(:not(.site-header a, .footer-navigation a, .entry-meta a, .comment-metadata a, .wp-element-button, .wp-block-button__link)):hover, .link-style-accent-underlined a:where(:not(.site-header a, .footer-navigation a, .entry-meta a, .comment-metadata a, .wp-element-button, .wp-block-button__link)):focus {
text-decoration: none;
}
/* Thyme — accent color, with a wash of it behind the text on hover instead of
a line.
Background alone, no padding to sit it off the text: inline links sit in
running text, so anything added here would move the line on hover. */
.link-style-accent-background a:where(:not(.site-header a, .footer-navigation a, .entry-meta a, .comment-metadata a, .wp-element-button, .wp-block-button__link)) {
color: var(--accent, LinkText);
text-decoration: none;
}
.link-style-accent-background a:where(:not(.site-header a, .footer-navigation a, .entry-meta a, .comment-metadata a, .wp-element-button, .wp-block-button__link)):hover, .link-style-accent-background a:where(:not(.site-header a, .footer-navigation a, .entry-meta a, .comment-metadata a, .wp-element-button, .wp-block-button__link)):focus {
background-color: color-mix(in srgb, var(--accent, LinkText) 14%, transparent);
text-decoration: none;
}
/* Rosemary — the same idea at full strength: the accent fills the box on hover
and the text reverses out of it in white.
White rather than the page background: this is the one rule here that has to
name a color of its own — the background is a token the theme only sets when
someone picks one, so there is nothing to read back — and white is the color
that reads against an accent, which is a color chosen to stand out from a page
that is light by default. A site running a pale accent should use the
treatment above instead. */
.link-style-accent-fill a:where(:not(.site-header a, .footer-navigation a, .entry-meta a, .comment-metadata a, .wp-element-button, .wp-block-button__link)) {
color: var(--accent, LinkText);
text-decoration: none;
}
.link-style-accent-fill a:where(:not(.site-header a, .footer-navigation a, .entry-meta a, .comment-metadata a, .wp-element-button, .wp-block-button__link)):hover, .link-style-accent-fill a:where(:not(.site-header a, .footer-navigation a, .entry-meta a, .comment-metadata a, .wp-element-button, .wp-block-button__link)):focus {
background-color: var(--accent, LinkText);
color: #fff;
text-decoration: none;
}
/* Mint — the text color, underlined. The first of the three treatments where a
link is told apart by its line rather than by its color, so the line is the
resting state and hover takes it away.
color: inherit rather than a color of its own: it follows Design > Colors >
Text color, and the accent, if one is set, stops reaching links entirely. */
.link-style-text a:where(:not(.site-header a, .footer-navigation a, .entry-meta a, .comment-metadata a, .wp-element-button, .wp-block-button__link)) {
color: inherit;
text-decoration: underline;
text-underline-offset: 0.15em;
}
.link-style-text a:where(:not(.site-header a, .footer-navigation a, .entry-meta a, .comment-metadata a, .wp-element-button, .wp-block-button__link)):hover, .link-style-text a:where(:not(.site-header a, .footer-navigation a, .entry-meta a, .comment-metadata a, .wp-element-button, .wp-block-button__link)):focus {
text-decoration: none;
}
/* Chive — Mint with the accent moved off the text and onto the line under it.
The text stays the color of the sentence it is part of, which is what keeps a
paragraph full of links readable, and the accent does the marking.
2px, because a line in a second color at the font's own thickness reads as a
rendering artefact rather than a decision — the same reason Basil's hover line
is 2px. */
.link-style-text-accent-underline a:where(:not(.site-header a, .footer-navigation a, .entry-meta a, .comment-metadata a, .wp-element-button, .wp-block-button__link)) {
color: inherit;
text-decoration: underline;
text-decoration-color: var(--accent, LinkText);
text-decoration-thickness: 2px;
text-underline-offset: 0.15em;
}
.link-style-text-accent-underline a:where(:not(.site-header a, .footer-navigation a, .entry-meta a, .comment-metadata a, .wp-element-button, .wp-block-button__link)):hover, .link-style-text-accent-underline a:where(:not(.site-header a, .footer-navigation a, .entry-meta a, .comment-metadata a, .wp-element-button, .wp-block-button__link)):focus {
text-decoration: none;
}
/* Sorrel — Mint plus Thyme's wash: the text color underlined at rest, and on
hover the line goes and a tint of the accent comes up behind the text instead.
The one treatment where hover trades one mark for another rather than adding
or removing one, which is what makes the change visible without the link ever
changing color.
The tint is the accent's, not a gray, so this still follows Design > Colors >
Accent even though nothing here is ever drawn in the accent outright. */
.link-style-text-background a:where(:not(.site-header a, .footer-navigation a, .entry-meta a, .comment-metadata a, .wp-element-button, .wp-block-button__link)) {
color: inherit;
text-decoration: underline;
text-underline-offset: 0.15em;
}
.link-style-text-background a:where(:not(.site-header a, .footer-navigation a, .entry-meta a, .comment-metadata a, .wp-element-button, .wp-block-button__link)):hover, .link-style-text-background a:where(:not(.site-header a, .footer-navigation a, .entry-meta a, .comment-metadata a, .wp-element-button, .wp-block-button__link)):focus {
background-color: color-mix(in srgb, var(--accent, LinkText) 14%, transparent);
text-decoration: none;
}
/* Sage — "No style" has no block here and no class on the body: links outside
the header and the footer menu are left exactly as the browser draws them,
underline, blue and all. It is the default, and it is the reason every rule
above this section can assume nothing has been said about link color. */
/* ----------------------------------------------------------------------------
Nav link styles — Customizer > Design > Links > Nav link style, applied as a
body class by fern_nav_link_style_class() in inc/template-functions.php.
The other half of the choice above. The treatments up there stop at the site
header, the footer menu and the meta lines on purpose — the furniture is not
the writing — so this is where the furniture gets its own say: the logo, the
primary menu, the footer menu and every link in a meta line, all at once,
because those are all the same kind of thing and a site whose menu and whose
bylines disagreed would read as a mistake.
THE META LINES. A category, an edit link and the date on a comment are in the
scopes below beside the two menus, so whatever is picked here paints them too,
the color and the decoration both. Their resting state — the one Bay leaves
standing — is in section 09 with the rest of what a meta line looks like. Two
of the treatments have less to say there than they do in a menu: Dill and
Fennel are made of the difference between the ink of the page and the secondary
text color, and a meta line is already set in the second of those, so under
those two a meta link stays the color it started. That is the honest outcome of
"the meta lines follow the menu" rather than a case worth an exception — the
row above is where those two treatments are doing their work.
THE SITE TITLE is not in them, and it is the one part of the header this list
leaves alone. It is the name of the site before it is a link home, so it stays
in the ink of the page with no line under it at any point, whichever treatment
is running: section 06 says what it looks like once, and nothing here reaches
it. The custom logo is out of the two box scopes for the neighbouring reason.
Bay, the default, carries no class and no rules, which leaves the header and
the footer exactly as sections 6 and 7 draw them — the ink of the page, no
color of its own, a 2px line from the pointer in the menus, and the current
item a step down in the secondary text color. Everything here is opt-in on top
of that.
Sage is the other way out, and it is the only treatment here that takes CSS
away rather than adding it: it hands the header and the footer menu back to the
browser, blue and underlined and purple once visited. It needs rules of its own
to do that, because sections 6 and 7 have already spoken — which is the one
place this list is not the mirror of section 11's. Up there Sage is silence and
the browser was never interrupted; down here silence is the theme's own header,
so Sage has to say revert out loud.
WHERE YOU ARE. Under a treatment, the item for the page you are on wears that
treatment's hover state, and wears it permanently: Rosemary fills it, Thyme
washes it, Tarragon puts the accent bar under it. The marking is then the same
mark the pointer makes, which is the point — a reader learns what "this one"
looks like the first time they sweep the menu, and the current item is already
speaking that language rather than a second one invented for it. Ancestors are
in too, so a child page lights its section up in the row.
That is what $nav-current is for, and it is why the three scopes below are
weighted the way they are. The rest state is `:is()`, not `:where()`, so it
weighs a class more than section 6's `.site-header a` and a class more than
nothing against `.primary-navigation .current-menu-item a` — it has to beat
that second one, or the current item would still be the gray those sections
set. $nav-current is another class heavier again, which puts it over the
current item's own hover rule in sections 6 and 7 as well. Nothing here needs
!important; it is all one class at a time.
$nav-scope is every link in the header, the footer menu and the meta lines,
less the site title. $nav-box-scope is the same list minus the custom logo, and
the two treatments that draw a background use it — a wash or a fill behind an
image logo is a rectangle around a picture, which is not what "highlighted on
hover" means to anyone.
$nav-current names both spellings WordPress uses. A menu here is capped at
depth 1, so menu ancestry — current-menu-ancestor and its parent — is rare,
while page ancestry is not: current_page_ancestor is what marks "About" while
you are reading a child of it, and current_page_parent is what marks the posts
page while you are reading a post. Those are the same claim about where you
are, so they get the same mark.
The background the two box treatments draw is exactly that — a background, no
padding, and nothing standing in for padding either. A menu is a row of short
words set close together, and a highlight that reaches past them turns each
item into a button and the row into a toolbar; held to the text it stays a
menu with one item lit up. It also keeps the treatments honest about layout:
padding on a menu item would have to be taken back as a negative margin to
leave the row where it was — which works on the header's flex items and shifts
the footer's inline ones bodily left — and a box drawn outside layout instead,
as a spread shadow, is the same overreach by another route.
line-height is set with it, at the menu's own 1.2. On the header items it is
what decides how tall the background is: they are flex children, so it covers
the line box, and left to inherit from the page a menu item would light up half
a line taller than its own letters. On the footer's inline items and on the
site title it changes nothing at all — an inline background covers the font's
own content area whatever the line-height says — so the declaration is here to
make one case behave like the two that already do.
The names are section 11's names, carried over on purpose: where a treatment
here does what a treatment up there does, it takes that treatment's herb.
Rosemary fills on hover in the writing and Rosemary fills on hover in the
header, so the name answers the question wherever it is asked and a site
running it in both halves says so once. Three have no counterpart above —
nothing in the writing trades the text color against the secondary one, and
nothing there holds the accent back for the hover state — so those take herbs
of their own: Dill, Fennel and Tarragon. Same rule as above: a name is a
handle, and a published one does not move to another treatment.
-------------------------------------------------------------------------- */
/* Basil — the accent, and the line the menus already draw on hover, which is
Basil in the writing almost word for word. The quietest of the three accent
treatments: it changes the color of the row and nothing about the way it
behaves. The current item is the one wearing the line without being pointed
at. */
.nav-link-style-accent-underline :is(.site-header, .footer-navigation, .entry-meta, .comment-metadata) a:where(:not(.site-title a)) {
color: var(--accent, LinkText);
text-decoration: none;
}
.nav-link-style-accent-underline :is(.site-header, .footer-navigation, .entry-meta, .comment-metadata) a:where(:not(.site-title a)):hover,
.nav-link-style-accent-underline :is(.site-header, .footer-navigation, .entry-meta, .comment-metadata) a:where(:not(.site-title a)):focus,
.nav-link-style-accent-underline :is(.site-header, .footer-navigation) :is(.current-menu-item, .current-menu-ancestor, .current-menu-parent, .current_page_item, .current_page_ancestor, .current_page_parent) > a {
text-decoration: underline;
text-decoration-thickness: 2px;
}
/* Thyme — the accent, with a wash of it behind the item on hover instead of a
line, the same trade Thyme makes in the writing. The wash goes further here: a
menu is a row of separate targets rather than words inside a sentence, so the
tint is drawn as a block behind the item, and a block that lights up says
which item the pointer is on more plainly than a line under it does. */
.nav-link-style-accent-background :is(.site-header, .footer-navigation, .entry-meta, .comment-metadata) a:where(:not(.site-title a)) {
color: var(--accent, LinkText);
text-decoration: none;
}
.nav-link-style-accent-background :is(.site-header, .footer-navigation, .entry-meta, .comment-metadata) a:where(:not(.custom-logo-link, .site-title a)) {
line-height: 1.2;
}
.nav-link-style-accent-background :is(.site-header, .footer-navigation, .entry-meta, .comment-metadata) a:where(:not(.site-title a)):hover,
.nav-link-style-accent-background :is(.site-header, .footer-navigation, .entry-meta, .comment-metadata) a:where(:not(.site-title a)):focus,
.nav-link-style-accent-background :is(.site-header, .footer-navigation) :is(.current-menu-item, .current-menu-ancestor, .current-menu-parent, .current_page_item, .current_page_ancestor, .current_page_parent) > a {
text-decoration: none;
}
.nav-link-style-accent-background :is(.site-header, .footer-navigation, .entry-meta, .comment-metadata) a:where(:not(.custom-logo-link, .site-title a)):hover,
.nav-link-style-accent-background :is(.site-header, .footer-navigation, .entry-meta, .comment-metadata) a:where(:not(.custom-logo-link, .site-title a)):focus,
.nav-link-style-accent-background :is(.site-header, .footer-navigation) :is(.current-menu-item, .current-menu-ancestor, .current-menu-parent, .current_page_item, .current_page_ancestor, .current_page_parent) > a {
background-color: color-mix(in srgb, var(--accent, LinkText) 14%, transparent);
}
/* Rosemary — Thyme at full strength, here as in the writing: the accent fills
the item and the text reverses out of it in white.
The loudest thing either dropdown can do, and the current item wears it all
day, so it is worth saying plainly: this is the treatment that turns the
current menu item into a solid block of the accent. A site that wants the
pointer to shout and the current item to murmur should pick Thyme.
White for the same reason the Rosemary above uses it — the page background is a
token the theme only sets when someone picks one, so there is nothing to read
back, and white is the color that reads against an accent chosen to stand out
from a light page. A site running a pale accent should pick Thyme. */
.nav-link-style-accent-fill :is(.site-header, .footer-navigation, .entry-meta, .comment-metadata) a:where(:not(.site-title a)) {
color: var(--accent, LinkText);
text-decoration: none;
}
.nav-link-style-accent-fill :is(.site-header, .footer-navigation, .entry-meta, .comment-metadata) a:where(:not(.custom-logo-link, .site-title a)) {
line-height: 1.2;
}
.nav-link-style-accent-fill :is(.site-header, .footer-navigation, .entry-meta, .comment-metadata) a:where(:not(.site-title a)):hover,
.nav-link-style-accent-fill :is(.site-header, .footer-navigation, .entry-meta, .comment-metadata) a:where(:not(.site-title a)):focus,
.nav-link-style-accent-fill :is(.site-header, .footer-navigation) :is(.current-menu-item, .current-menu-ancestor, .current-menu-parent, .current_page_item, .current_page_ancestor, .current_page_parent) > a {
text-decoration: none;
}
.nav-link-style-accent-fill :is(.site-header, .footer-navigation, .entry-meta, .comment-metadata) a:where(:not(.custom-logo-link, .site-title a)):hover,
.nav-link-style-accent-fill :is(.site-header, .footer-navigation, .entry-meta, .comment-metadata) a:where(:not(.custom-logo-link, .site-title a)):focus,
.nav-link-style-accent-fill :is(.site-header, .footer-navigation) :is(.current-menu-item, .current-menu-ancestor, .current-menu-parent, .current_page_item, .current_page_ancestor, .current_page_parent) > a {
background-color: var(--accent, LinkText);
color: #fff;
}
/* Dill — the header steps back: the menu is set in the secondary text color and
comes up to the ink of the page under the pointer, and at the current item.
Nothing is underlined either way, so the whole of it is the text getting
darker.
Which lands the current item on the ink while the row around it stays gray —
the same "this one is not like the others" sections 6 and 7 draw, read the
other way up. That is worth noting because it is the one treatment where the
marking inverts rather than intensifies, and it is the reason this list needs
no exception for it.
The first of the three with no counterpart in section 11, and there could not
be one: a sentence whose links sat a step below the text around them would be a
sentence with links hidden in it. A menu can afford it — it is a row, legible
as a menu by its shape before its color is read at all.
The one treatment that changes what the header is for. A row that sits a step
below the writing is a row you find when you go looking for it, which is the
right header for a site whose first screen is a piece of writing. */
.nav-link-style-muted :is(.site-header, .footer-navigation, .entry-meta, .comment-metadata) a:where(:not(.site-title a)) {
color: var(--secondary-text);
text-decoration: none;
}
.nav-link-style-muted :is(.site-header, .footer-navigation, .entry-meta, .comment-metadata) a:where(:not(.site-title a)):hover,
.nav-link-style-muted :is(.site-header, .footer-navigation, .entry-meta, .comment-metadata) a:where(:not(.site-title a)):focus,
.nav-link-style-muted :is(.site-header, .footer-navigation) :is(.current-menu-item, .current-menu-ancestor, .current-menu-parent, .current_page_item, .current_page_ancestor, .current_page_parent) > a {
color: inherit;
text-decoration: none;
}
/* Fennel — Dill the other way round: the ink of the page at rest, stepping back
to the secondary text color under the pointer and at the current item. The
hover state is a link softening rather than sharpening, which is unusual enough
to be worth naming: it reads as the row acknowledging the pointer without
asking for it.
It is also the treatment that agrees with the theme's own marking — the current
item ends up in the secondary text color, which is exactly where sections 6 and
7 put it, so Fennel is what the default looks like with the hover line traded
for a color change.
No counterpart in section 11 either, and the same reason as Dill — this is a
hover state made of the text getting quieter, which only works where the
resting row is already understood as a menu. */
.nav-link-style-text-muted :is(.site-header, .footer-navigation, .entry-meta, .comment-metadata) a:where(:not(.site-title a)) {
color: inherit;
text-decoration: none;
}
.nav-link-style-text-muted :is(.site-header, .footer-navigation, .entry-meta, .comment-metadata) a:where(:not(.site-title a)):hover,
.nav-link-style-text-muted :is(.site-header, .footer-navigation, .entry-meta, .comment-metadata) a:where(:not(.site-title a)):focus,
.nav-link-style-text-muted :is(.site-header, .footer-navigation) :is(.current-menu-item, .current-menu-ancestor, .current-menu-parent, .current_page_item, .current_page_ancestor, .current_page_parent) > a {
color: var(--secondary-text);
text-decoration: none;
}
/* Tarragon — the ink of the page at rest, and a bar of the accent under the item
the pointer is on, or the item you are already on. The last of the three with
no counterpart above: it is the only treatment in either dropdown that holds
the accent back for the hover state, which makes it the one to pick when the
header should be part of the page until it is used.
The text does not change color, which is the whole idea — the accent arrives as
a mark beside the word rather than as the word being repainted, so the row
reads identically before and after the pointer reaches it. It is also what
makes this the quietest way to mark the current page: a bar under one item in a
row of otherwise untouched ink.
4px, and that is the reason for it: this line is not an underline in the sense
the others are, it is the hover state itself, and the only thing carrying it. At
the 2px Basil and section 6 use it would be an underline that happened to be a
different color; at twice that it is a bar, and a bar is legible as an answer to
the pointer at a glance. The offset keeps it clear of the descenders, which
matters more the thicker the line gets. */
.nav-link-style-text-accent :is(.site-header, .footer-navigation, .entry-meta, .comment-metadata) a:where(:not(.site-title a)) {
color: inherit;
text-decoration: none;
}
.nav-link-style-text-accent :is(.site-header, .footer-navigation, .entry-meta, .comment-metadata) a:where(:not(.site-title a)):hover,
.nav-link-style-text-accent :is(.site-header, .footer-navigation, .entry-meta, .comment-metadata) a:where(:not(.site-title a)):focus,
.nav-link-style-text-accent :is(.site-header, .footer-navigation) :is(.current-menu-item, .current-menu-ancestor, .current-menu-parent, .current_page_item, .current_page_ancestor, .current_page_parent) > a {
text-decoration: underline;
text-decoration-color: var(--accent, LinkText);
text-decoration-thickness: 4px;
text-underline-offset: 0.15em;
}
/* Sage — no style, and meant literally: the same links the browser would have
drawn if the theme had never opened its mouth. Blue, underlined, purple once
visited, the current item no different from the rest because the browser has
never heard of a current item. The logo is in it too, and so are the meta
lines — a date and a category in link blue is what "no style" costs; anyone
who wants the header left alone but not undressed wants Bay. The site title is
the one thing it does not reach, for the reason given at the top of this
section.
Every declaration is `revert`, which is the keyword for exactly this: roll the
property back past everything the author said and take whatever the browser
was going to do. Not `initial` — that would be black, unstyled in the wrong
sense, and it would take the visited color with it. Not `unset` either, which
on an inherited property like color means "inherit" and would land back on the
ink of the page, which is where sections 6 and 7 already have it.
Four properties, because four is what sections 6 and 7 set: color and
text-decoration on every header and footer link, and text-decoration plus its
thickness again on the menus' hover state. Nothing else up there touches a
link, so nothing else needs taking back.
The current item is in the same lists rather than left out, and that is the
point of it: the secondary-text marking is a thing the theme does, so Sage
undoes it too. A visited link going purple is the only "you have been here"
the browser has, and under Sage it is the only one the menu gets. */
.nav-link-style-unstyled :is(.site-header, .footer-navigation, .entry-meta, .comment-metadata) a:where(:not(.site-title a)),
.nav-link-style-unstyled :is(.site-header, .footer-navigation) :is(.current-menu-item, .current-menu-ancestor, .current-menu-parent, .current_page_item, .current_page_ancestor, .current_page_parent) > a {
color: revert;
-webkit-text-decoration: revert;
text-decoration: revert;
}
.nav-link-style-unstyled :is(.site-header, .footer-navigation, .entry-meta, .comment-metadata) a:where(:not(.site-title a)):hover,
.nav-link-style-unstyled :is(.site-header, .footer-navigation, .entry-meta, .comment-metadata) a:where(:not(.site-title a)):focus,
.nav-link-style-unstyled :is(.site-header, .footer-navigation) :is(.current-menu-item, .current-menu-ancestor, .current-menu-parent, .current_page_item, .current_page_ancestor, .current_page_parent) > a:hover,
.nav-link-style-unstyled :is(.site-header, .footer-navigation) :is(.current-menu-item, .current-menu-ancestor, .current-menu-parent, .current_page_item, .current_page_ancestor, .current_page_parent) > a:focus {
-webkit-text-decoration: revert;
text-decoration: revert;
text-decoration-thickness: revert;
}
/* Bay — the default, and the only entry in either dropdown with no block and no
class on the body: the header and the footer menu as sections 6 and 7 draw
them. It is what every site that never opens this dropdown is already running,
which is why it stays the value that emits nothing, and it is the reason those
two sections can still be read as the whole story of what a link up there looks
like. */
/* ============================================================================
12. REDUCED MOTION
----------------------------------------------------------------------------
Respect users who ask for less motion (WCAG 2.3.3): drop transitions,
animations and smooth scrolling. The off-canvas still opens/closes — it
just snaps instead of sliding.
========================================================================== */
@media (prefers-reduced-motion: reduce) {
html:focus-within {
scroll-behavior: auto;
}
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}/*# sourceMappingURL=style.css.map */