Customize your journal with CSS

@import url("https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&display=swap");

:root {
  --journal-heading-font: "Instrument Serif", serif;
  /* --journal-body-font does the same for everything you write. */
}

:root {
  --journal-space-section: 9rem;
}

:root {
  --primary: #7c4dbd;
  --accent: #7c4dbd;
}

<main class="journal-main journal-view-moment">

  <section class="journal-hero">
    <img class="journal-hero-image">  <!-- only with a hero photograph -->
    <div class="journal-hero-scrim">  <!-- darkens it so the text reads -->
    <div class="journal-hero-glow">   <!-- the theme's soft accent light -->
    <div class="journal-hero-inner">  <!-- the column a stylesheet centres -->
      <div class="journal-avatar"><img></div>
      <p class="journal-name"><a>Journal name</a></p>  <!-- an h1 on the front -->
      <div class="journal-bio">…</div>
      <nav class="journal-nav"><a>About</a> <a>Contact</a></nav>
    </div>
  </section>

  <article class="journal-main-moment journal-moment" id="moment-photos"
           data-photos="4" data-tags="film canal-walk" data-month="06"
           style="--moment-photos: 4">

    <header class="journal-moment-header">
      <div class="journal-moment-meta">
        <h1 class="journal-moment-title">Along the canal</h1>
        <p class="journal-moment-count">4 photos</p>
      </div>
      <div class="journal-moment-tags">
        <span class="journal-moment-place">London</span>
        <span class="journal-moment-date">June 12, 2026</span>
        <span class="journal-tag">film</span>
      </div>
    </header>

    <p class="journal-access-note">…</p>  <!-- unlisted and protected only -->

    <section class="journal-photos-section">
      <!-- one photo: .journal-photos-single · two: .journal-photos-pair
           three or more: a masonry of columns, or one flat grid when the
           theme sets --journal-photo-arrangement: flat -->
      <div class="journal-photos">
        <a class="journal-photo" data-orientation="portrait"
           style="--tile-aspect: 2 / 3"><img></a>
        …
      </div>
    </section>

    <section class="journal-note">
      <div class="journal-note-text">Your field note</div>
    </section>

    <section class="journal-conversation">…</section>  <!-- replies, mentions -->
  </article>
</main>

<footer class="journal-footer">
  <div class="journal-footer-credit">…</div>
  <div class="journal-footer-links">… <div class="journal-theme-switcher"></div></div>
</footer>

<main class="journal-main journal-view-home journal-main-home">
  <section class="journal-hero">…</section>  <!-- identical to the one above -->

  <section class="journal-feed">
    <div class="journal-feed-list">

      <article class="journal-moment" data-photos="4"
               data-tags="film canal-walk" data-month="06"
               style="--moment-photos: 4">
        <header class="journal-moment-header">
          <div class="journal-moment-meta">
            <a><h2 class="journal-moment-title">Along the canal</h2></a>
            <p class="journal-moment-count">4 photos</p>
          </div>
          <div class="journal-moment-tags">…</div>  <!-- place, date, tags -->
        </header>

        <div class="journal-photos">…</div>  <!-- the first six photographs -->

        <div class="journal-note">
          <div class="journal-note-text">…</div>  <!-- clamped to three lines -->
          <a class="journal-more">View moment</a>
        </div>
      </article>

      <!-- one article per moment, newest first -->
    </div>
  </section>
</main>

.journal-hero-inner {
  text-align: center;
}

.journal-avatar,
.journal-bio {
  margin-inline: auto;
}

.journal-nav {
  justify-content: center;
}

.journal-nav {
  order: -1;
  margin-top: 0;
  margin-bottom: var(--journal-gap-nav);
}

@media (min-width: 1024px) {
  .journal-hero {
    position: fixed;
    inset: 0 auto 0 0;
    width: min(30vw, 420px);
    display: flex;
    align-items: center;
    border-bottom: 0 !important;
    border-right: 1px solid var(--border);
  }

  main,
  .journal-footer {
    margin-left: min(30vw, 420px);
  }
}

.journal-moment .journal-photos {
  overflow-x: auto;
  align-items: stretch;
  scroll-snap-type: x proximity;
}

.journal-moment .journal-photos > * {
  flex: 0 0 auto !important;
  flex-direction: row !important;
  height: clamp(210px, 36vh, 340px);
}

.journal-moment .journal-photos a {
  width: auto !important;
  height: 100%;
  scroll-snap-align: start;
}

.journal-feed {
  counter-reset: chapter;
}

.journal-moment {
  counter-increment: chapter;
  position: relative;
}

.journal-moment::before {
  content: counter(chapter, decimal-leading-zero);
  position: absolute;
  top: 1rem;
  right: 1rem;
  font-size: 4rem;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px var(--border);
}

.journal-moment-header {
  position: sticky;
  top: 0;
  z-index: 5;
  background: linear-gradient(
    to bottom,
    var(--background) 65%,
    transparent
  );
}

.dark .journal-hero {
  background: color-mix(in oklch, var(--accent) 8%, transparent);
}

:root {
  /* Applies the dark palette and hides the footer switch. */
  --journal-color-scheme: dark;

  /* Optional overrides for the generated dark palette. */
  --background: #0b0a09;
  --foreground: #ece5d9;
}

You are writing custom CSS for a photography journal on Moments
(moments.im). Read all of this before writing any CSS, then follow the
brief at the end.

HOW THE STYLESHEET IS APPLIED
- The page loads three stylesheets in order: a color palette, the
  journal's chosen theme, then this custom CSS. Custom CSS comes last,
  so plain selectors win. Avoid !important unless a rule truly cannot
  win without it.
- Write plain, standard CSS. No preprocessors, no scripts, no HTML.
- @import is allowed only over https from the supported font services.
  url() values may use https, a relative path on the journal, or an
  inline data:image.
- Readers can choose light or dark. Base rules are light mode; prefix
  dark-mode overrides with .dark (for example .dark .journal-hero).
  Style both, or pin one mode with --journal-color-scheme: light or dark
  on :root. Pinning a mode hides .journal-theme-switcher automatically.

THE STRUCTURE OF EVERY PAGE
main.journal-main.journal-view-{home|moment|page|collection}
  section.journal-hero            the journal's header, on every view
    img.journal-hero-image        only when a hero photograph is set
    div.journal-hero-scrim        darkens that photograph for the text
    div.journal-hero-glow         a soft accent light
    div.journal-hero-inner        the column: avatar, name, bio, nav
      div.journal-avatar > img
      h1|p.journal-name > a       an h1 on the front page only
      div.journal-bio
      nav.journal-nav > a ...
  home: section.journal-feed > div.journal-feed-list >
    article.journal-moment ...    one per moment, newest first
  moment page: article.journal-main-moment.journal-moment
    header.journal-moment-header
      div.journal-moment-meta > h1.journal-moment-title
        + p.journal-moment-count
      div.journal-moment-tags > span.journal-moment-place
        + span.journal-moment-date + span.journal-tag ...
    section.journal-photos-section > div.journal-photos >
      a.journal-photo > img
    section.journal-note > div.journal-note-text
    section.journal-conversation  replies from the open web
  written page: article.journal-page > div.journal-page-body
  collection: h1.journal-collection-title, then a feed or a gallery
footer.journal-footer
  div.journal-footer-credit, div.journal-footer-links,
  div.journal-theme-switcher

A feed item is the same article.journal-moment with an h2 title inside
a link, a three-line clamp on .journal-note-text, and a.journal-more
linking through to the moment. Scope list-only rules as
.journal-feed .journal-moment; a bare .journal-moment rule also
dresses the moment's own page.

FACTS THE MARKUP STATES (style by content; nothing reads them by default)
- article.journal-moment carries data-photos="N", data-tags="slugged
  tags" (match one with [data-tags~="film"]), data-month="01".."12",
  and --moment-photos: N for calc().
- a.journal-photo carries data-orientation="portrait|landscape|square"
  and --tile-aspect, its natural width / height.

VARIABLES THE PAGE READS (set on :root unless one element should differ)
- --background, --foreground: the page and its text
- --primary, --accent: the accent as the page uses it;
  --journal-accent is the owner's chosen color before the theme
  adjusted it
- --border, --radius, --journal-border-width
- --journal-color-scheme: light or dark pins one mode
- --journal-align and --journal-align-margin: header/content alignment
- --journal-hero-background: plain, glow, wash, dawn, or aurora
- --journal-heading-font, --journal-body-font
- --journal-title-size (the journal name), --journal-moment-title-size
- --journal-collection-title-size
- --journal-heading-weight, --journal-heading-tracking,
  --journal-body-weight
- --journal-space-section: air between moments in the feed
- --journal-section-gap: air between the header and what follows
- --journal-space-block: air between a moment's parts
- --journal-photo-gap: the gutter between photographs
- --journal-profile-base: the portrait's size (mobile derives from it);
  --journal-profile-display: none removes it
- --journal-hero-py: the header's vertical padding on wide screens

RULES THAT KEEP IT WORKING
- Some sizes are read from variables on the element (the journal name,
  the moment title). Change the variable, not font-size, or nothing
  happens.
- With three or more photographs the grid is a masonry of columns, so
  frames are grandchildren of .journal-photos. Set
  :root { --journal-photo-arrangement: flat; --journal-photo-columns: 3 }
  to make every frame a direct child in the order they were taken.
- Photographs load into placeholders. In a flat grid, give geometry to
  .journal-photos > * rather than .journal-photo, so the held space
  matches and nothing jumps.
- A flat grid of mixed shapes leaves holes. Crop it to uniform cells
  with .journal-photos > * { aspect-ratio: 1 }, or leave it masonry.
- With a hero photograph the header text turns white over the image.
  If you restyle the header, keep
  .journal-hero:has(.journal-hero-image) readable: a scrim, light
  type, or both.
- The owner may center the header (--journal-align: center answers
  it). Make sure your layout survives both alignments.
- Moments can contain one photo or many, a title or no title, and a field
  note or no field note. Style for all of these cases.

OUTPUT
Return one complete stylesheet, grouped by short comments, and nothing
else. Write only rules that change something; do not restate the
theme.

MY BRIEF
Theme I am starting from: [theme name]
The look I want: [describe it in your own words: moods, references,
typefaces, how the photographs should hang. The more concrete, the
better.]

Below is the stylesheet my Moments journal uses today. Keep its
character and everything you are not asked to touch. Change only
this: [what you want different]. Return the complete updated
stylesheet and mark what changed with a short comment.

[paste your stylesheet here, from the Custom CSS editor]