01/04 Start here

Custom CSS

Use Custom CSS for changes that aren't available in the editor.

In Site Settings, turn on Advanced CSS editor. Open Custom code → CSS editor, paste or write your CSS, then publish.

02/04 CSS snippets

Navigation layouts

Copy the layout you want into the CSS editor. Desktop layouts come first, followed by mobile layouts and spacing adjustments.

Choose one layout per screen size. Replace your previous layout snippet when trying another. You can combine a desktop layout with a mobile layout.

Site name left and menu right

/* Name left, menu right */
@media (min-width: 48rem) {
  .site-nav__desktop {
    justify-content: flex-start;
  }

  .site-nav__desktop > .site-nav__item:first-child {
    margin-right: auto;
  }
}

Site name right and menu left

/* Name right, menu left */
@media (min-width: 48rem) {
  .site-nav__desktop {
    justify-content: flex-start;
  }

  .site-nav__desktop > .site-nav__item:first-child {
    order: 1;
    margin-left: auto;
  }
}

Site name left and menu left

/* Name and menu left */
@media (min-width: 48rem) {
  .site-nav__desktop {
    justify-content: flex-start;
  }
}

Site name right and menu right

/* Name and menu right */
@media (min-width: 48rem) {
  .site-nav__desktop {
    justify-content: flex-end;
  }

  .site-nav__desktop > .site-nav__item:first-child {
    order: 1;
  }
}

Site name and menu centered

/* Center name and menu */
@media (min-width: 48rem) {
  .site-nav__desktop {
    justify-content: center;
  }
}

Site name left and menu centered

/* Name left, menu centered */
@media (min-width: 48rem) {
  .site-nav__desktop {
    position: relative;
    justify-content: center;
  }

  .site-nav__desktop > .site-nav__item:first-child {
    position: absolute;
    left: var(--site-gutter);
  }
}

Site name and menu left (vertical)

The site name and links sit on separate lines, with extra space after the name.

/* Name and menu left, stacked vertically */
@media (min-width: 48rem) {
  .site-nav__desktop {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    padding-block: var(--nav-desktop-gap);
  }

  .site-nav__item {
    white-space: normal;
  }

  .site-nav__desktop > .site-nav__item:first-child {
    margin-bottom: var(--nav-desktop-gap);
  }
}

Site name left and menu below

The site name sits above a horizontal menu. Links wrap onto another line when needed.

/* Name left, horizontal menu below */
@media (min-width: 48rem) {
  .site-nav__desktop {
    flex-wrap: wrap;
    justify-content: flex-start;
    padding-block: var(--nav-desktop-gap);
  }

  .site-nav__item {
    white-space: normal;
  }

  .site-nav__desktop > .site-nav__item:first-child {
    flex-basis: 100%;
  }
}

Site name centered and menu below

The site name sits above a centered horizontal menu. Links wrap onto another line when needed.

/* Name centered, horizontal menu below */
@media (min-width: 48rem) {
  .site-nav__desktop {
    flex-wrap: wrap;
    justify-content: center;
    padding-block: var(--nav-desktop-gap);
  }

  .site-nav__item {
    text-align: center;
    white-space: normal;
  }

  .site-nav__desktop > .site-nav__item:first-child {
    flex-basis: 100%;
  }
}

Site name left and menu right (vertical)

The site name sits at the upper left, with links stacked at the right.

/* Name left, vertical menu right */
@media (min-width: 48rem) {
  .site-nav__desktop {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    padding-block: var(--nav-desktop-gap);
  }

  .site-nav__item {
    grid-column: 2;
    justify-self: end;
    text-align: right;
    white-space: normal;
  }

  .site-nav__desktop > .site-nav__item:first-child {
    grid-column: 1;
    grid-row: 1;
    justify-self: start;
    text-align: left;
  }
}

Mobile site name and links centered

/* Center mobile navigation */
@media (max-width: 47.999rem) {
  .site-nav__mobile-bar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  }

  .site-nav__title {
    grid-column: 2;
    text-align: center;
  }

  .site-nav__toggle {
    grid-column: 3;
    justify-self: end;
  }

  .site-nav__drawer-link {
    text-align: center;
  }
}

Mobile site name and links right

/* Right-align mobile navigation */
@media (max-width: 47.999rem) {
  .site-nav__mobile-bar {
    flex-direction: row-reverse;
  }

  .site-nav__title,
  .site-nav__drawer-link {
    text-align: right;
  }
}

Mobile links always visible below the site name

Show the links without a menu button. A row of up to four short links wraps when needed.

/* Always-visible mobile navigation */
@media (max-width: 47.999rem) {
  .site-nav__mobile-bar,
  .site-nav__drawer.is-open {
    display: none;
  }

  .site-nav__desktop {
    display: flex;
    flex-wrap: wrap;
    gap: var(--nav-drawer-row-gap) var(--nav-desktop-gap);
    padding: var(--nav-mobile-pad-y) var(--site-gutter) 0;
  }

  .site-nav__item {
    font-size: var(--nav-font-size-mobile);
  }

  .site-nav__desktop > .site-nav__item:first-child {
    flex-basis: 100%;
  }
}

Mobile menu in two columns

Arrange the open menu in two columns. Four links form two rows, and longer labels wrap within each column.

/* Two-column mobile menu */
@media (max-width: 47.999rem) {
  .site-nav__drawer {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--nav-desktop-gap);
  }
}

Mobile text menu button

Show “Open menu” and “Close menu” instead of the menu icon. You can combine this with the two-column menu.

/* Use the existing menu button's text label */
@media (max-width: 47.999rem) {
  .site-nav__toggle {
    display: grid;
    align-content: start;
    padding: max(0px, calc(var(--nav-mobile-title-offset) - var(--nav-toggle-offset))) 0 0;
    font: var(--nav-font-weight) var(--nav-font-size-mobile) / var(--nav-line-height) var(--nav-font-family);
    letter-spacing: var(--nav-letter-spacing);
    text-transform: var(--nav-text-transform);
  }

  .site-nav__toggle-icon {
    display: none;
  }

  .site-nav__toggle-label {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    clip: auto;
  }
}

Adjust navigation spacing

Change these example values to suit your layout. See Navigation variables for descriptions and more controls.

:root {
  --nav-desktop-gap: 1rem;
  --nav-desktop-min-height: 4rem;
  --nav-drawer-row-gap: 0.75rem;
}

03/04 CSS selectors

Useful selectors

These examples style all matching elements across your site. Change the values to suit your design.

Use the hover color for the current menu link

/* Current link color */
.site-nav__item.is-active,
.site-nav__title.is-active,
.site-nav__drawer-link.is-active {
  color: var(--hover-color);
}

Underline the current menu link and links on hover

Underline the current page and links under the pointer or keyboard focus.

/* Current, hovered, and focused menu links */
.site-nav__item:is(.is-active, :hover, :focus-visible),
.site-nav__title:is(.is-active, :hover, :focus-visible),
.site-nav__drawer-link:is(.is-active, :hover, :focus-visible) {
  text-decoration-line: underline;
  text-underline-offset: 0.2em;
}

Make image captions smaller

/* Smaller captions */
.home-image__caption,
.media-strip__caption,
.image-slideshow__captions,
.image-grid-lightbox__caption {
  font-size: 0.875rem;
}

Center image captions

Center captions beneath images, including Image Slider, Image Slideshow, and lightbox captions.

/* Center captions while keeping their reading width */
.home-image__caption,
.media-strip__caption,
.image-slideshow__captions {
  margin-inline: auto;
  text-align: center;
}

.content-block--image-slideshow-full-width .image-slideshow__captions {
  max-width: min(var(--image-caption-max-width), calc(100% - var(--site-gutter) * 2));
  margin-inline: auto;
}

.image-grid-lightbox__caption {
  justify-self: center;
  text-align: center;
}

Adjust Marquee spacing

Change the gap between items and the space above and below the text in every Marquee block, at any text size.

/* Marquee spacing */
.marquee-block {
  --marquee-item-gap: 2rem;
  --marquee-padding-block: 1rem;
}

Give Marquee a background color

Use your site's text color for the background and its background color for the text. Replace these values with your own colors if you prefer.

/* Marquee background and text colors */
.marquee-block {
  background: var(--ink);
  color: var(--surface);
}

.marquee-block__link:is(:hover, :focus-visible, .is-pointer-hovered) {
  color: inherit;
  outline-color: currentcolor;
  text-decoration: underline;
}

Limit paragraph width

Cap paragraph length in every Text block. Use Columns in the editor to control the width of individual blocks instead. Change 65ch to adjust the reading width.

/* Paragraph width, keeping the block's text alignment */
.content-block--text p {
  max-width: 65ch;
}

.content-block--text-center p {
  margin-inline: auto;
}

.content-block--text-right p {
  margin-left: auto;
}

Style links inside Text and Accordion blocks

These selectors change links inside written content without affecting menu links.

/* Thicker link underlines */
.content-block--text a,
.accordion-block__content a {
  text-decoration-thickness: 2px;
  text-underline-offset: 0.25em;
}

04/04 CSS variables

CSS variables

CSS variables are named values for settings like font size and spacing. Change a variable once to update every part of your site that uses it, without rewriting individual CSS rules.

Colors and page spacing are already covered by the editor. Typography variables override a font preset or select a custom font you've already loaded in the Head section.

Block spacing variables control the space between blocks across your site. Use a Spacer block when you only need extra space in one place.

Some variables use another variable as their default. For example, --project-title-font-family defaults to var(--heading-font-family), so project titles use the same font as your headings. Replace var(--heading-font-family) with a font name to give project titles a different font.

Put site-wide variables inside :root. Edit an existing declaration instead of adding it again.

:root {
  --body-font-family: "Your Font", system-ui;
  --heading-font-family: "Your Font", system-ui;
  --nav-font-family: "Your Font", system-ui;
}

Preset-controlled variables include an example value for easy copying. The example may differ from your current preset. Change the value to override the preset.

Navigation

Type, color, spacing, and toggle controls for the site navigation.

--nav-font-family: system-ui, sans-serif;: Typeface for the site name and menu links. Load custom fonts in the Head section before adjusting this variable.
--nav-font-size-mobile: 0.9rem;: Text size for the mobile site name and menu links.
--nav-font-size-desktop: 0.93rem;: Text size for the desktop site name and menu links.
--nav-desktop-gap: 1rem;: Minimum gap between desktop navigation items. The layout can add extra space.
--nav-desktop-min-height: 3rem;: Minimum height of the desktop navigation row. This does not set the gap below it.
--nav-line-height: 1.3;: Line height for all navigation text.
--nav-letter-spacing: 0.01em;: Space between letters in the site name and menu links.
--nav-font-weight: 400;: Weight of the site name and menu links.
--nav-text-transform: uppercase;: Capitalization of the site name and menu links. Use none, uppercase, lowercase, or capitalize.
--nav-drawer-bg: var(--surface);: Background color of the open mobile menu.
--nav-drawer-ink: var(--ink);: Text color inside the open mobile menu.
--nav-drawer-row-gap: 0.7rem;: Space between links in the open mobile menu.
--nav-mobile-bar-min-height: 3rem;: Minimum height of the closed mobile header.
--nav-mobile-pad-y: 0.65rem;: Top padding inside the mobile header. Moves the site name and menu button together.
--nav-toggle-width: 22px;: Width of the mobile menu's two-line icon.
--nav-toggle-line-height: 2px;: Thickness of each line in the mobile menu icon.
--nav-toggle-line-gap: 10px;: Distance between the two lines in the mobile menu icon.
--nav-toggle-height: calc(var(--nav-toggle-line-gap) + var(--nav-toggle-line-height));: Total height of the mobile menu icon. The default follows the line gap and thickness.
--nav-toggle-motion-duration: 160ms;: Time the mobile menu icon takes to open or close.
--nav-toggle-motion-ease: cubic-bezier(0.16, 1, 0.3, 1);: Controls how the mobile menu icon speeds up and slows down while opening or closing.

Typography

Font families, sizes, and line heights that override the selected preset.

--body-font-family: system-ui, sans-serif;: Typeface for paragraphs and other body text. Load custom fonts in the Head section before adjusting this variable.
--body-font-size: 1rem;: Base text size for paragraphs and other body text.
--body-line-height: 1.5;: Line height for body text.
--heading-font-family: system-ui, sans-serif;: Typeface for headings, independent of body text. Load custom fonts in the Head section before adjusting this variable.
--heading-font-weight: 700;: Weight of H1, H2, and H3 headings.
--heading-letter-spacing: 0em;: Space between letters in H1, H2, and H3 headings.
--h1-size: clamp(2rem, 5.8vw, 2.369rem);: Size of H1 headings.
--h2-size: clamp(1.55rem, 3.8vw, 1.777rem);: Size of H2 headings.
--h3-size: clamp(1.18rem, 2.4vw, 1.333rem);: Size of H3 headings.
--heading-line-height: 0.97;: Shared line height for H1, H2, and H3 headings.
--h1-line-height: 0.97;: Line height for H1 headings. Overrides the shared heading line height.
--h2-line-height: 0.97;: Line height for H2 headings. Overrides the shared heading line height.
--h3-line-height: 0.97;: Line height for H3 headings. Overrides the shared heading line height.

Block spacing

Space between top-level blocks and blocks inside columns.

--block-gap: 2rem;: Vertical space between top-level content blocks.
--column-block-gap: 1rem;: Vertical space between blocks inside a column.

Accordion

Spacing and icon controls for Accordion blocks.

--accordion-summary-padding: clamp(0.75rem, 1.5vw, 1rem) 0;: Padding around each accordion heading. Increasing it makes the clickable area larger.
--accordion-content-padding: 0 0 clamp(1rem, 2vw, 1.5rem);: Padding around expanded accordion content. The default adds space below it.
--accordion-icon-gap: clamp(0.75rem, 2vw, 1.25rem);: Space between an accordion title and its plus or minus icon.
--accordion-icon-size: 1.25rem;: Width and height of the accordion's plus or minus icon.
--accordion-icon-width: 2px;: Stroke thickness of the accordion icon.

Marquee

Space around and between items in Marquee blocks.

--marquee-item-gap: clamp(2rem, 5vw, 4rem);: Space between repeated marquee items.
--marquee-padding-block: 0.5rem;: Top and bottom padding inside the Marquee block.

Projects Index

Project title typography and spacing below project images.

--project-title-font-family: var(--heading-font-family);: Typeface for Projects Index titles. The default follows the heading font.
--project-title-font-size: 1rem;: Text size of Projects Index titles, independent of other headings.
--project-title-line-height: 1.3;: Line height of Projects Index titles.
--project-list-link-gap: var(--image-caption-gap);: Space between a project image and its linked title. The default follows the image caption gap.

Image Hover

Preview dimensions for Image Hover blocks on desktop, tablet, and mobile.

--image-hover-preview-width: clamp(220px, 32vw, 520px);: Width of an Image Hover preview on desktop.
--image-hover-preview-height: min(68dvh, 680px);: Maximum height of an Image Hover preview on desktop.
--image-hover-preview-width-mobile: min(72vw, 360px);: Width of an Image Hover preview on mobile.
--image-hover-preview-height-mobile: 48dvh;: Maximum height of an Image Hover preview on mobile.
--image-hover-preview-width-tablet: min(58vw, 640px);: Width of an Image Hover preview on tablets.
--image-hover-preview-height-tablet: min(68dvh, 680px);: Maximum height of an Image Hover preview on tablets.

Image Gallery

Caption and linked-image highlight controls shared by image blocks and lightboxes.

--image-caption-gap: 0.9rem;: Space between an image and its caption. Shared by Image, Image Gallery, Image Slideshow, and Image Slider blocks.
--image-caption-max-width: 65ch;: Maximum width of image captions. Shared by Image, Image Gallery, Image Slideshow, and Image Slider blocks.
--thumbnail-highlight-width: 2px;: Width of the optional linked-image highlight. Applies to Projects Index thumbnails and linked images in Image Slider blocks.

Image Slideshow

Fade timing for Image Slideshow blocks.

--image-slideshow-fade-duration: 450ms;: Duration of the crossfade when Crossfade images is enabled. The editor's Duration setting controls how long each image is shown.

Image Slider

Image height and scrollbar controls for Image Slider blocks.

--media-strip-max-height: min(clamp(240px, 50vw, 520px), 65dvh);: Maximum height of images in an Image Slider block.
--media-strip-scrollbar-gap: var(--media-strip-gap);: Space between slider images and the scrollbar.
--media-strip-scrollbar-thickness: 8px;: Thickness of the Image Slider scrollbar.