[Summary view] [Print] [Text view]

   1  /*
   2  Theme Name: Ipsum
   3  Theme URI: https://wordpress.org/themes/ipsum/
   4  Author: the WordPress team
   5  Author URI: https://wordpress.org
   6  Description: Ipsum is a blank canvas built around the blogging experience, our proposal for what a default theme should be. Named after lorem ipsum, the placeholder that fills a page until real content arrives, it is composed enough to stand on its own and to be transformed the moment people start writing.
   7  Requires at least: 7.2
   8  Tested up to: 7.2
   9  Requires PHP: 7.4
  10  Version: 1.0
  11  License: GNU General Public License v2 or later
  12  License URI: http://www.gnu.org/licenses/gpl-2.0.html
  13  Text Domain: ipsum
  14  Tags: one-column, featured-images, full-site-editing, block-patterns, rtl-language-support, sticky-post, threaded-comments, translation-ready, wide-blocks, block-styles, style-variations, blog
  15  */
  16  
  17  /* Crossfade page transition */
  18  
  19  @view-transition {
  20      navigation: auto;
  21  }
  22  
  23  /* Font smoothing */
  24  body {
  25      text-rendering: geometricprecision;
  26      -webkit-font-smoothing: antialiased;
  27      -moz-osx-font-smoothing: grayscale;
  28  
  29      /*
  30       * Let long unbroken strings, such as URLs, break onto the next line
  31       * instead of pushing the page wider than the viewport when zoomed in.
  32       * https://www.w3.org/WAI/WCAG22/Understanding/reflow.html
  33       */
  34      overflow-wrap: break-word;
  35  }
  36  
  37  /*
  38   * Progressive enhancement to reduce widows and orphans
  39   * https://github.com/WordPress/gutenberg/issues/55190
  40   */
  41  h1,
  42  h2,
  43  h3,
  44  h4,
  45  h5,
  46  h6,
  47  blockquote,
  48  caption,
  49  figcaption,
  50  p {
  51      text-wrap: pretty;
  52  }
  53  
  54  /*
  55   * Link styles
  56   * https://github.com/WordPress/gutenberg/issues/42319
  57   * Dotted editorial underlines; !important also keeps the style from being reset
  58   * by the text-decoration shorthand emitted in generated global styles.
  59   * The span selector catches the editor's inline underline format.
  60   */
  61  a,
  62  u,
  63  ins,
  64  span[style*="text-decoration"] {
  65      text-decoration-thickness: 1px !important;
  66      text-decoration-style: dotted !important;
  67      text-underline-offset: 0.1em;
  68  }
  69  
  70  /*
  71   * Breathing room when jumping to in-page anchors (e.g. the comments CTA
  72   * landing on #comments or #respond), so targets don't sit flush with the
  73   * viewport edge.
  74   */
  75  :target {
  76      scroll-margin-block-start: var(--wp--preset--spacing--50);
  77  }
  78  
  79  /*
  80   * The comments list starts flush with its heading, unlike the comment form,
  81   * whose internal whitespace pads its landing — match their perceived offset.
  82   */
  83  #comments {
  84      scroll-margin-block-start: var(--wp--preset--spacing--70);
  85  }
  86  
  87  /*
  88   * Change the position of the more block on the front, by making it a block level element.
  89   * https://github.com/WordPress/gutenberg/issues/65934
  90   */
  91  .more-link {
  92      display: block;
  93  }
  94  
  95  /*
  96   * Prevents unnecessary scrollbars while handling long lines of preformatted text.
  97   * https://core.trac.wordpress.org/ticket/63875
  98   */
  99  :where(pre) {
 100      overflow-x: auto;
 101  }
 102  
 103  /*
 104   * Make sure headers and footers have no margin, so the root block gap
 105   * never adds spacing the parts don't control themselves.
 106   * https://github.com/WordPress/gutenberg/issues/47637
 107   */
 108  header.wp-block-template-part,
 109  footer.wp-block-template-part {
 110      margin-block-start: 0;
 111  }
 112  
 113  /*
 114   * Tables. All table styling lives here in one block (theme.json css strings
 115   * cannot carry comments, and its table css remaps selectors onto the inner
 116   * table) — edit or remove any rule below independently.
 117   *
 118   * Strokes: every table line — outer border, cell grid, and the rule under
 119   * the header — draws in the ink wash, matching the calendar and form fields.
 120   */
 121  .wp-block-table table,
 122  .wp-block-table th,
 123  .wp-block-table td {
 124      border-color: var(--wp--preset--color--theme-4);
 125  }
 126  
 127  /*
 128   * Header row: the palette wash as ground, a single hairline underneath
 129   * (!important beats core's `thead { border-bottom: 3px solid }`, whose color
 130   * would otherwise resolve to currentColor), and the theme's meta voice —
 131   * Manrope, small, bold — for the labels.
 132   */
 133  .wp-block-table thead {
 134      background-color: var(--wp--preset--color--theme-5);
 135      border-bottom-width: 1px !important;
 136      border-bottom-color: var(--wp--preset--color--theme-4);
 137  }
 138  
 139  .wp-block-table thead th {
 140      text-align: left;
 141      font-family: var(--wp--preset--font-family--manrope);
 142      font-size: var(--wp--preset--font-size--small);
 143      font-style: normal;
 144      font-weight: 700;
 145  }
 146  
 147  /*
 148   * Striped tables: tint rows and rule with the palette wash instead of core's
 149   * fixed gray, so stripes stay legible under every color variation.
 150   */
 151  .wp-block-table.is-style-stripes tbody tr:nth-child(odd) {
 152      background-color: var(--wp--preset--color--theme-5);
 153  }
 154  
 155  .wp-block-table.is-style-stripes {
 156      border-bottom-color: var(--wp--preset--color--theme-5);
 157  }
 158  
 159  /*
 160   * Utility class prefixing an element with the "·" meta separator. Used where
 161   * neighbors render conditionally (e.g. the comment Edit link only exists for
 162   * users who can edit), so the dot appears and disappears with its element
 163   * instead of leaving orphan separators. The padding carries the breathing
 164   * room — literal spaces in generated content can collapse — so rows using
 165   * this class need no block gap of their own.
 166   */
 167  .dot-before::before {
 168      content: "·";
 169      font-weight: 600;
 170      padding-inline: 0.5em;
 171  }
 172  
 173  /*
 174   * Sticky headers: a sticky root block inside a template part has no room to
 175   * travel — the part's wrapper element is exactly as tall as its content — so
 176   * the wrapper itself must carry the stickiness. Keyed on the class core emits
 177   * for the position support, so any header design set to sticky just works.
 178   */
 179  header.wp-block-template-part:has(> .is-position-sticky) {
 180      position: sticky;
 181      inset-block-start: 0;
 182      z-index: 10;
 183  }
 184  
 185  /*
 186   * Keep a sticky header clear of the admin bar: it is fixed over the viewport,
 187   * so logged-in users would see the header slide beneath it. Core publishes the
 188   * bar's height (32px desktop / 46px small screens) as a custom property.
 189   */
 190  .admin-bar header.wp-block-template-part:has(> .is-position-sticky) {
 191      inset-block-start: var(--wp-admin--admin-bar--height, 32px);
 192  }
 193  
 194  /*
 195   * Short pages: a sticky bottom bar can only pin within the page's own height,
 196   * so the site wrapper must reach at least the viewport; main grows to push
 197   * the footer and the pinned bar down on pages with little content.
 198   */
 199  .wp-site-blocks {
 200      display: flex;
 201      flex-direction: column;
 202      min-height: 100vh;
 203      min-height: calc(100svh - var(--wp-admin--admin-bar--height, 0px));
 204  }
 205  
 206  .wp-site-blocks > main {
 207      flex-grow: 1;
 208  }
 209  
 210  /* Utility class for pinning an element to the bottom of the viewport. */
 211  .sticky-bottom {
 212      position: sticky;
 213      inset-block-end: 0;
 214      z-index: 10;
 215      width: fit-content;
 216      margin-inline-start: auto;
 217  }
 218  
 219  /*
 220   * Quiet search button inside the pinned Search Bar part only: light ground,
 221   * outlined; global button states take back over on hover/focus/active.
 222   */
 223  .sticky-bottom .wp-block-search__button.wp-element-button:not(:hover):not(:focus):not(:active) {
 224      background-color: var(--wp--preset--color--theme-1);
 225      border: 1px dotted var(--wp--preset--color--theme-2);
 226      color: var(--wp--preset--color--theme-2);
 227  }
 228  
 229  /*
 230   * Utility class for a query loop whose post rows hover as one: hovering any
 231   * visible content of a row colors the whole row. Keyed on the row's child
 232   * blocks because the row group's own box spans the full alignwide band.
 233   */
 234  .hover-together .wp-block-post > .wp-block-group,
 235  .hover-together .wp-block-post > .wp-block-group a {
 236      transition: color 0.15s ease-out;
 237  }
 238  
 239  .hover-together .wp-block-post > .wp-block-group:has(> :hover),
 240  .hover-together .wp-block-post > .wp-block-group:has(> :hover) a {
 241      color: var(--wp--preset--color--theme-6);
 242  }
 243  
 244  /*
 245   * Arrival bar: the blank canvas keeps index and single visually close, so a
 246   * thin accent bar sweeps the top of the viewport when a single post loads,
 247   * then fades — a quiet confirmation that navigation happened. The sweep is a
 248   * scaleX() transform rather than a width change so it runs on the compositor
 249   * instead of relaying out and repainting every frame while the page loads.
 250   * Transforms have no logical origin, so RTL flips the origin to follow the
 251   * reading direction.
 252   */
 253  @media (prefers-reduced-motion: no-preference) {
 254      .single::before {
 255          content: "";
 256          position: fixed;
 257          inset-block-start: 0;
 258          inset-inline-start: 0;
 259          block-size: 3px;
 260          inline-size: 100%;
 261          background-color: var(--wp--preset--color--theme-3);
 262          z-index: 99;
 263          pointer-events: none;
 264          transform-origin: left;
 265          animation: ipsum-arrival 0.9s ease-out forwards;
 266      }
 267  
 268      .rtl.single::before {
 269          transform-origin: right;
 270      }
 271  
 272      .admin-bar.single::before {
 273          inset-block-start: var(--wp-admin--admin-bar--height, 32px);
 274      }
 275  
 276      @keyframes ipsum-arrival {
 277          0% {
 278              transform: scaleX(0);
 279              opacity: 1;
 280          }
 281  
 282          60% {
 283              transform: scaleX(1);
 284              opacity: 1;
 285          }
 286  
 287          100% {
 288              transform: scaleX(1);
 289              opacity: 0;
 290          }
 291      }
 292  }
 293  
 294  /* A light tilt-and-settle on the row's featured image when the row is hovered. */
 295  @media (prefers-reduced-motion: no-preference) {
 296      @keyframes tilt-settle {
 297          35% {
 298              transform: rotate(-1deg);
 299          }
 300  
 301          100% {
 302              transform: rotate(0deg);
 303          }
 304      }
 305  
 306      .hover-together .wp-block-post > .wp-block-group:has(> :hover) .wp-block-post-featured-image img {
 307          animation: tilt-settle 0.5s ease-out;
 308      }
 309  }