[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  @media (prefers-reduced-motion: no-preference) {
  20      @view-transition {
  21          navigation: auto;
  22      }
  23  }
  24  
  25  /* Font smoothing */
  26  body {
  27      text-rendering: geometricprecision;
  28      -webkit-font-smoothing: antialiased;
  29      -moz-osx-font-smoothing: grayscale;
  30  
  31      /*
  32       * Let long unbroken strings, such as URLs, break onto the next line
  33       * instead of pushing the page wider than the viewport when zoomed in.
  34       * https://www.w3.org/WAI/WCAG22/Understanding/reflow.html
  35       */
  36      overflow-wrap: break-word;
  37  }
  38  
  39  /*
  40   * Progressive enhancement to reduce widows and orphans
  41   * https://github.com/WordPress/gutenberg/issues/55190
  42   */
  43  h1,
  44  h2,
  45  h3,
  46  h4,
  47  h5,
  48  h6,
  49  blockquote,
  50  caption,
  51  figcaption,
  52  p {
  53      text-wrap: pretty;
  54  }
  55  
  56  /*
  57   * Link styles
  58   * https://github.com/WordPress/gutenberg/issues/42319
  59   * Dotted editorial underlines; !important also keeps the style from being reset
  60   * by the text-decoration shorthand emitted in generated global styles.
  61   * The span selector catches the editor's inline underline format.
  62   */
  63  a,
  64  u,
  65  ins,
  66  span[style*="text-decoration"] {
  67      text-decoration-thickness: 1px !important;
  68      text-decoration-style: dotted !important;
  69      text-underline-offset: 0.1em;
  70  }
  71  
  72  /*
  73   * Breathing room when jumping to in-page anchors (e.g. the comments CTA
  74   * landing on #comments or #respond), so targets don't sit flush with the
  75   * viewport edge.
  76   */
  77  :target {
  78      scroll-margin-block-start: var(--wp--preset--spacing--50);
  79  }
  80  
  81  /*
  82   * The comments list starts flush with its heading, unlike the comment form,
  83   * whose internal whitespace pads its landing — match their perceived offset.
  84   */
  85  #comments {
  86      scroll-margin-block-start: var(--wp--preset--spacing--70);
  87  }
  88  
  89  /*
  90   * Change the position of the more block on the front, by making it a block level element.
  91   * https://github.com/WordPress/gutenberg/issues/65934
  92   */
  93  .more-link {
  94      display: block;
  95  }
  96  
  97  /*
  98   * Prevents unnecessary scrollbars while handling long lines of preformatted text.
  99   * https://core.trac.wordpress.org/ticket/63875
 100   */
 101  :where(pre) {
 102      overflow-x: auto;
 103  }
 104  
 105  /*
 106   * Make sure headers and footers have no margin, so the root block gap
 107   * never adds spacing the parts don't control themselves.
 108   * https://github.com/WordPress/gutenberg/issues/47637
 109   */
 110  header.wp-block-template-part,
 111  footer.wp-block-template-part {
 112      margin-block-start: 0;
 113  }
 114  
 115  /*
 116   * Tables. All table styling lives here in one block (theme.json css strings
 117   * cannot carry comments, and its table css remaps selectors onto the inner
 118   * table) — edit or remove any rule below independently.
 119   *
 120   * Strokes: every table line — outer border, cell grid, and the rule under
 121   * the header — draws in the Border color, matching the calendar.
 122   */
 123  .wp-block-table table,
 124  .wp-block-table th,
 125  .wp-block-table td {
 126      border-color: var(--wp--preset--color--accent-6);
 127  }
 128  
 129  /*
 130   * Header row: the Surface color as ground, a single hairline underneath
 131   * (!important beats core's `thead { border-bottom: 3px solid }`, whose color
 132   * would otherwise resolve to currentColor), and the theme's meta voice —
 133   * Manrope, small, bold — for the labels.
 134   */
 135  .wp-block-table thead {
 136      background-color: var(--wp--preset--color--accent-5);
 137      border-bottom-width: 1px !important;
 138      border-bottom-color: var(--wp--preset--color--accent-6);
 139  }
 140  
 141  .wp-block-table thead th {
 142      text-align: start;
 143      font-family: var(--wp--preset--font-family--manrope);
 144      font-size: var(--wp--preset--font-size--small);
 145      font-style: normal;
 146      font-weight: 700;
 147  }
 148  
 149  /*
 150   * Striped tables: tint rows and rule with the Surface color instead of core's
 151   * fixed gray, so stripes stay legible under every color variation.
 152   */
 153  .wp-block-table.is-style-stripes tbody tr:nth-child(odd) {
 154      background-color: var(--wp--preset--color--accent-5);
 155  }
 156  
 157  .wp-block-table.is-style-stripes {
 158      border-bottom-color: var(--wp--preset--color--accent-5);
 159  }
 160  
 161  /*
 162   * Author cards: core hides the Author Name block for post types that do not
 163   * support authors, but the hand-written "Written by" byline would remain.
 164   * Hide the card when the Author Name block renders nothing, so the avatar and
 165   * the byline disappear together.
 166   * https://github.com/WordPress/ipsum/issues/166
 167   */
 168  .author-card:not(:has(.wp-block-post-author-name)) {
 169      display: none;
 170  }
 171  
 172  /*
 173   * Comments rows in post lists: core renders nothing for the Comments Link
 174   * block when comments are closed, but the hand-written "·" and "›" would
 175   * remain. Hide the row when the Comments Link block renders nothing, so the
 176   * separators disappear with it.
 177   * https://github.com/WordPress/ipsum/issues/173
 178   */
 179  .comments-meta:not(:has(.wp-block-post-comments-link)) {
 180      display: none;
 181  }
 182  
 183  /*
 184   * Sticky headers: a sticky root block inside a template part has no room to
 185   * travel — the part's wrapper element is exactly as tall as its content — so
 186   * the wrapper itself must carry the stickiness. Keyed on the class core emits
 187   * for the position support, so any header design set to sticky just works.
 188   */
 189  header.wp-block-template-part:has(> .is-position-sticky) {
 190      position: sticky;
 191      inset-block-start: 0;
 192      z-index: 10;
 193  }
 194  
 195  /*
 196   * Keep a sticky header clear of the admin bar: it is fixed over the viewport,
 197   * so logged-in users would see the header slide beneath it. Core publishes the
 198   * bar's height (32px desktop / 46px small screens) as a custom property.
 199   */
 200  .admin-bar header.wp-block-template-part:has(> .is-position-sticky) {
 201      inset-block-start: var(--wp-admin--admin-bar--height, 32px);
 202  }
 203  
 204  /*
 205   * While the navigation overlay is open, lift the sticky header above the
 206   * admin bar and the pinned Search Bar, matching the non-sticky headers.
 207   */
 208  header.wp-block-template-part:has(> .is-position-sticky):has(.wp-block-navigation__responsive-container.is-menu-open) {
 209      z-index: 100000;
 210  }
 211  
 212  /*
 213   * Short pages: a sticky bottom bar can only pin within the page's own height,
 214   * so the site wrapper must reach at least the viewport; main grows to push
 215   * the footer and the pinned bar down on pages with little content.
 216   */
 217  .wp-site-blocks {
 218      display: flex;
 219      flex-direction: column;
 220      min-height: 100vh;
 221      min-height: calc(100svh - var(--wp-admin--admin-bar--height, 0px));
 222  }
 223  
 224  .wp-site-blocks > main {
 225      flex-grow: 1;
 226  }
 227  
 228  /*
 229   * Arrival bar: the blank canvas keeps index and single visually close, so a
 230   * thin accent bar sweeps the top of the viewport when a single post loads,
 231   * then fades — a quiet confirmation that navigation happened. The sweep is a
 232   * scaleX() transform rather than a width change so it runs on the compositor
 233   * instead of relaying out and repainting every frame while the page loads.
 234   * Transforms have no logical origin, so RTL flips the origin to follow the
 235   * reading direction.
 236   */
 237  @media (prefers-reduced-motion: no-preference) {
 238      .single::before {
 239          content: "";
 240          position: fixed;
 241          inset-block-start: 0;
 242          inset-inline-start: 0;
 243          block-size: 3px;
 244          inline-size: 100%;
 245          background-color: var(--wp--preset--color--accent-1);
 246          z-index: 99;
 247          pointer-events: none;
 248          transform-origin: left;
 249          animation: ipsum-arrival 0.9s ease-out forwards;
 250      }
 251  
 252      .rtl.single::before {
 253          transform-origin: right;
 254      }
 255  
 256      .admin-bar.single::before {
 257          inset-block-start: var(--wp-admin--admin-bar--height, 32px);
 258      }
 259  
 260      @keyframes ipsum-arrival {
 261          0% {
 262              transform: scaleX(0);
 263              opacity: 1;
 264          }
 265  
 266          60% {
 267              transform: scaleX(1);
 268              opacity: 1;
 269          }
 270  
 271          100% {
 272              transform: scaleX(1);
 273              opacity: 0;
 274          }
 275      }
 276  }