copy of pagecord style 13 Jun 2026

style.css

@import url("https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=Source+Serif+4:ital,opsz,wght@0,8..60,300..900;1,8..60,300..900&family=IBM+Plex+Sans+Condensed:wght@300;400;500;600&display=swap");

  /*
            --theme-bg:
            --theme-text:
            --theme-accent:
            
            https://help.pagecord.com/custom-css
  */
  :root {
      --font-serif: 'Source Serif 4', 'Lora Variable', Georgia;
      --font-display: 'DM Serif Display', serif;
      --font-sideinfo: 'IBM Plex Sans Condensed', sans-serif;
  }

  body {
      color: var(--color-text);
      font-family: var(--font-serif), serif !important;
      font-weight: 420;
      font-size: 17.5px;
      line-height: 1.62;
  }

  /* ── Header ─────────────────────────────────────────────────── */
  nav {
      display: flex;
      justify-content: center;
      gap: 0;
      font-family: var(--font-sideinfo), sans-serif;
      font-size: 12px;
      letter-spacing: 0.28em;
      text-transform: uppercase;
  }
  nav a { color: var(--theme-text); text-decoration: none; padding: 6px 16px; border-right: 1px solid var(--theme-text); }
  nav a:first-of-type { border-left: 1px solid var(--theme-text); }
  nav a:hover { background: var(--theme-text); color: var(--theme-bg); }

  .titlebar, .avatar-container {
      justify-content: center;
      flex-direction: column;
      align-items: center;
  }

  .avatar { display: none; }

  .blog-title { margin-top: 30px; }

  .blog-title a {
      font-family: var(--font-display), serif;
      font-style: normal; 
      font-weight: 400;
      font-size: 40px; 
      line-height: 0.95;
      letter-spacing: -0.012em;
      color: var(--color-text); 
      text-decoration: none;
  }

  .bio {
      text-align: center;
      max-width: 48ch;
      margin: 14px auto 0;
      color: var(--color-text-muted);
      font-size: 12px;
      letter-spacing: 0.06em;
      font-style: italic;
  }
  
  /* Divider */
      
  header hr {
      border: none;
      height: auto;
      margin: 28px 0 0; /* top left+right bottom */
      text-align: center;
      overflow: visible;
  }

  header hr::before {
      content: "* * *";

      color: var(--theme-accent);
      font-weight: bold;
      font-size: 1.2rem;

      letter-spacing: 0.5em;
  }


  /* INDEX PAGE (CARDS) */

  .post-card:last-child { border-bottom: none; }

  .post-card-content {
      padding: 0;
      border: none;
      background: none;
      box-shadow: none;
      display: flex;
      flex-direction: column;
      gap: 8px;
      hyphens: auto;
  }

  /* Read more */
  .post-card-badge { display: none; }

  .post-card-title {
      font-family: var(--font-display), serif;
      font-size: 38px;
      font-weight: 400;
      line-height: 1.05;
      margin: 0;
      color: var(--color-text);
      letter-spacing: -0.012em;
  }

  .post-card:hover .post-card-title { color: var(--theme-accent); }

  .post-card:hover .post-card-content {
      box-shadow: none;
      transform: none;
  }

  .post-card:nth-child(even) .post-card-summary {
      font-style: italic;
  }


  /* TRYING TO GET DATES AND TAGS TO LINE UP */

  .post-card {
      padding: 15px 0;
      border-bottom: 1px solid var(--theme-accent);
  }

  .post-card-summary {
      margin: 0;
      font-size: 16.5px;
      line-height: 1.7;
      color: var(--color-text);
  }

  .post-card-meta {
      order: -1;
      display: flex;
      margin-top: 6px !important;
      margin-bottom: 3px;
  }

  .post-card-date {
      font-family: var(--font-sideinfo), sans-serif;
      font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase;
      color: var(--theme-accent);
      opacity: 1;

      border: 1px solid var(--theme-accent);

      display: inline-flex;
      height: 24px;
      padding: 2px 10px;
  }

  .post-card[data-tags]::after {
      content: attr(data-tags);
      font-size: 11px;
      text-transform: uppercase;
      color: var(--theme-accent);
      border: 1px solid var(--theme-accent);
      word-spacing: 0.5em;
      display: inline-flex;
      align-items: center;
      height: 24px;
      padding: 0 10px;
      line-height: 1;
      display: none;
  }


  /* ── Single post ────────────────────────────────────────────── */

  .post-title {
      font-size: 38px !important;
      font-family: var(--font-display), serif;
      font-weight: 400 !important;
      font-style: normal;
      line-height: 1;
      margin: 32px 0 16px;
      --letter-spacing: -0.015em;
      text-align: center;


  }

  .lexxy-content {
      font-size: 19px;
      line-height: 1.78;
      margin: 0 auto;
      hyphens: auto;
      --max-width: 60ch;
  }

  /* Hides the blog title only when inside a container with the 'post' class */
  .post .blog-title {
      display: none;
  }

  /* If you want to hide the horizontal rule as well on those pages */
  .post header hr {
      display: none;
  }


  article > footer { 
      margin-top: 56px; padding-top: 22px; border-top: 3px double var(--theme-accent); 
      display: flex; gap: 18px; flex-wrap: wrap; align-items: baseline; 
      font-family: var(--font-sideinfo), sans-serif; font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; 
      color: var(--color-text-muted); }

  /* Footer label helpers (the originals you already had) */
  .reply-by-email::after { content: "Reply"; margin-inline-start: 0.25em; }
  .upvote::after { content: "Like"; margin-inline-start: 0.25em; }

  .blog-footer { margin-top: 60px; text-align: center; color: var(--color-text-muted); }