ultimate-jekyll-manager 1.7.2 → 1.8.0

package/dist/assets/themes/newsflash/css/layout/_navigation.scss

@@ -0,0 +1,164 @@
+// Newsflash Theme — Navigation
+// The inherited nav markup (.navbar-wrapper > .navbar.navbar-floating) is a
+// floating glass pill in Classy. Here it becomes the MASTHEAD: a sticky,
+// blurred-paper bar closed by a hairline ink rule, serif brand on the left,
+// uppercase pill links in the middle. The ticker (in base.html) sits above it
+// in-flow and scrolls away; the masthead stays.
+
+.navbar-wrapper {
+  position: sticky;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 1030;
+
+  .navbar {
+    width: 100%;
+    max-width: 100%;
+    margin: 0;
+    padding-left: clamp(1rem, 4vw, 3rem);
+    padding-right: clamp(1rem, 4vw, 3rem);
+  }
+}
+
+.navbar.navbar-floating {
+  border-radius: 0;
+  padding-top: 0.75rem;
+  padding-bottom: 0.75rem;
+  background: var(--nf-paper-translucent) !important;
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+  border: 0;
+  border-bottom: var(--nf-border);
+  transition: box-shadow 0.25s ease;
+
+  // Soft shadow only once scrolled (set by js/masthead-scroll.js)
+  &.scrolled {
+    box-shadow: 0 8px 24px -16px rgba(23, 19, 16, 0.4);
+  }
+
+  .container,
+  .container-fluid {
+    padding: 0;
+  }
+}
+
+// Brand: the serif masthead title
+.navbar-brand {
+  font-family: $nf-font-display;
+  font-optical-sizing: auto;
+  font-weight: 600;
+  font-size: 1.5rem;
+  letter-spacing: -0.02em;
+
+  .brand-logo { height: 32px; width: auto; margin-right: 0.5rem; }
+}
+
+// Nav links: uppercase grotesk pills. Hover fills ink; active fills vermilion.
+.navbar-nav .nav-link {
+  font-weight: 700;
+  font-size: 0.82rem;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  padding: 0.55rem 0.9rem;
+  margin: 0 0.1rem;
+  border-radius: 50rem;
+  color: var(--bs-body-color);
+  transition: $nf-transition;
+
+  // Hover + active need !important on color: the nav include puts Bootstrap's
+  // .text-body utility (!important) on every link, which otherwise wins and
+  // leaves ink text on the ink hover fill (unreadable).
+  &:hover {
+    background: var(--nf-ink);
+    color: var(--nf-paper) !important;
+  }
+
+  // Active = vermilion pill.
+  &.active,
+  &.active.text-body {
+    background: var(--nf-accent-interactive) !important;
+    color: var(--nf-accent-interactive-ink) !important;
+  }
+}
+
+// Mobile toggle: a pill ink-framed button
+.navbar-toggler {
+  border-radius: 50rem;
+  padding: 0.35rem 0.6rem;
+  background: transparent;
+  @include nf-border();
+  transition: $nf-transition;
+
+  &:hover { background: var(--nf-paper-2); }
+  &:focus { box-shadow: 0 0 0 3px var(--nf-volt); }
+
+  .navbar-toggler-icon {
+    width: 1.25em;
+    height: 1.25em;
+    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2823,19,16,1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2.5' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
+  }
+
+  [data-bs-theme="dark"] & .navbar-toggler-icon {
+    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28242,232,217,1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2.5' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
+  }
+}
+
+// Mobile collapsed menu becomes a framed paper drawer
+@media (max-width: 991.98px) {
+  .navbar-collapse {
+    margin-top: 0.75rem;
+    padding: 0.85rem;
+    background: var(--bs-card-bg);
+    border-radius: var(--bs-border-radius-lg);
+    @include nf-border();
+    @include nf-shadow-pop();
+  }
+}
+
+// ============================================
+// Dropdown menus — framed paper panels
+// ============================================
+// Doubled selector: page bundles re-emit Bootstrap's .dropdown-menu AFTER the
+// main bundle, and its `--bs-dropdown-padding-x: 0` strips the inset — the
+// highlighted item pills end up pressed edge-to-edge against the panel.
+.dropdown-menu.dropdown-menu {
+  background: var(--bs-card-bg);
+  border-radius: var(--bs-border-radius);
+  @include nf-border();
+  @include nf-shadow-pop();
+  padding: 0.4rem;
+  margin-top: 0.6rem;
+
+  .dropdown-item {
+    border-radius: 50rem;
+    font-weight: 600;
+    padding: 0.5rem 0.9rem;
+    color: var(--bs-body-color);
+
+    // !important: dropdown items (account dropdown, nav dropdowns) carry
+    // text-color utilities from the shared includes — same trap as nav links.
+    &:hover,
+    &:focus {
+      background: var(--nf-ink);
+      color: var(--nf-paper) !important;
+
+      // Child text spans with their own utility colors flip with the item
+      [class*="text-"] {
+        color: inherit !important;
+      }
+    }
+
+    &.active,
+    &:active {
+      background: var(--nf-accent-interactive);
+      color: var(--nf-accent-interactive-ink) !important;
+    }
+  }
+
+  .dropdown-divider {
+    border-top: 1px solid var(--nf-line);
+    opacity: 1;
+    margin: 0.4rem 0;
+  }
+}

package/dist/assets/themes/newsflash/js/initialize-tooltips.js

@@ -0,0 +1,20 @@
+/**
+ * Initialize Bootstrap Tooltips
+ * Finds all elements with data-bs-toggle="tooltip" and initializes them
+ */
+export default function initializeTooltips() {
+  const $tooltipTriggers = document.querySelectorAll('[data-bs-toggle="tooltip"]');
+
+  // If no tooltips found, exit early
+  if ($tooltipTriggers.length === 0) {
+    return;
+  }
+
+  // Log the number of tooltips being initialized
+  console.log(`Initializing ${$tooltipTriggers.length} tooltips`);
+
+  // Initialize each tooltip
+  $tooltipTriggers.forEach(($el) => {
+    new bootstrap.Tooltip($el);
+  });
+}

package/dist/assets/themes/newsflash/js/masthead-scroll.js

@@ -0,0 +1,29 @@
+// Masthead scroll effect for the Newsflash theme.
+// Toggles a `.scrolled` class on the sticky masthead once the page is scrolled
+// past a threshold; the SCSS turns that into a soft shadow under the bar.
+// Threshold is configurable via the data-nf-scroll-threshold attribute on the navbar.
+export default function setupMastheadScroll() {
+  const $navbar = document.querySelector('.navbar-floating');
+  if (!$navbar) {
+    return;
+  }
+
+  const threshold = parseInt($navbar.dataset.nfScrollThreshold, 10) || 8;
+
+  let ticking = false;
+  function update() {
+    $navbar.classList.toggle('scrolled', window.scrollY > threshold);
+    ticking = false;
+  }
+
+  function onScroll() {
+    if (!ticking) {
+      ticking = true;
+      window.requestAnimationFrame(update);
+    }
+  }
+
+  // Initial state + listener
+  update();
+  window.addEventListener('scroll', onScroll, { passive: true });
+}

package/dist/assets/themes/newsflash/pages/404/index.scss

@@ -0,0 +1,27 @@
+// Newsflash Theme — 404 page-specific CSS
+// The "correction notice" treatment for
+// (_layouts/themes/newsflash/frontend/pages/404.html).
+// Compiles standalone, so it pulls in the theme tokens + mixins via loadPaths.
+@use 'config' as *;
+@import 'css/base/mixins';
+
+// Oversized stroked serif numerals
+.error-code {
+  font-family: $nf-font-display;
+  font-style: italic;
+  font-weight: 900;
+  font-size: clamp(5rem, 16vw, 8rem);
+  line-height: 1;
+  color: transparent;
+  -webkit-text-stroke: 2px var(--nf-ink);
+}
+
+// The rotated "Correction" chip pinned to the notice
+.error-stamp {
+  position: absolute;
+  top: -0.85rem;
+  left: 50%;
+  transform: translateX(-50%) rotate(-3deg);
+  z-index: 1;
+  white-space: nowrap;
+}

package/dist/assets/themes/newsflash/pages/about/index.scss

@@ -0,0 +1,70 @@
+// Newsflash Theme — About page-specific CSS
+// The editorial timeline for
+// (_layouts/themes/newsflash/frontend/pages/about.html).
+// Compiles standalone, so it pulls in the theme tokens + mixins via loadPaths.
+@use 'config' as *;
+@import 'css/base/mixins';
+
+// Single-rail editorial timeline: an ink rule down the left, volt year chips
+// hanging on it, entries stepping down the page.
+.timeline {
+  position: relative;
+  padding-left: 1.5rem;
+  border-left: var(--nf-border);
+}
+
+.timeline-item {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 0.6rem;
+  padding-bottom: 2.25rem;
+
+  &:last-child {
+    padding-bottom: 0;
+  }
+
+  // The rule marker — a vermilion dot pinned to the rail
+  &::before {
+    content: "";
+    position: absolute;
+    left: calc(-1.5rem - 5.75px); // centers the dot on the 1.5px rail
+    top: 0.45rem;
+    width: 10px;
+    height: 10px;
+    border-radius: 50%;
+    background: var(--bs-primary);
+    border: var(--nf-border);
+  }
+}
+
+.timeline-year {
+  transform: rotate(-2deg);
+}
+
+// ============================================
+// Reader quotes — letters to the editor
+// ============================================
+.quote-card {
+  &::before {
+    content: "\201C";
+    display: block;
+    font-family: $nf-font-display;
+    font-weight: 900;
+    font-size: 3rem;
+    line-height: 0.5;
+    color: var(--bs-primary);
+    margin-bottom: 0.5rem;
+  }
+
+  p {
+    font-family: $nf-font-display;
+    font-optical-sizing: auto;
+    font-style: italic;
+    font-weight: 550;
+    font-size: 1.15rem;
+    letter-spacing: -0.01em;
+    line-height: 1.45;
+  }
+}

package/dist/assets/themes/newsflash/pages/blog/index.scss

@@ -0,0 +1,17 @@
+// Newsflash Theme — Blog index page-specific CSS
+// Small accents for the newspaper front page
+// (_layouts/themes/newsflash/frontend/pages/blog/index.html).
+// Compiles standalone, so it pulls in the theme tokens + mixins via loadPaths.
+@use 'config' as *;
+@import 'css/base/mixins';
+
+// The lead-story splash stays planted — only its framed image zooms
+.story-card--lead {
+  &:hover {
+    transform: none;
+  }
+
+  .art-frame {
+    aspect-ratio: 16 / 10;
+  }
+}

package/dist/assets/themes/newsflash/pages/blog/post.js

@@ -0,0 +1,29 @@
+// Newsflash Theme — Blog post page JS (the #theme layer)
+// Drives the reading-progress bar: fills the fixed top rule as the reader
+// scrolls through the page. NOTE: flat file shape — the post layout sets
+// `asset_path: blog/post`, so this loads as pages/blog/post.js.
+export default ({ manager, options }) => {
+  const $bar = document.querySelector('.reading-progress > span');
+  if (!$bar) {
+    return;
+  }
+
+  let ticking = false;
+  function update() {
+    const $doc = document.documentElement;
+    const progress = $doc.scrollTop / ($doc.scrollHeight - $doc.clientHeight);
+    $bar.style.transform = `scaleX(${Math.min(Math.max(progress, 0), 1)})`;
+    ticking = false;
+  }
+
+  function onScroll() {
+    if (!ticking) {
+      ticking = true;
+      window.requestAnimationFrame(update);
+    }
+  }
+
+  // Initial state + listener
+  update();
+  window.addEventListener('scroll', onScroll, { passive: true });
+};

package/dist/assets/themes/newsflash/pages/blog/post.scss

@@ -0,0 +1,164 @@
+// Newsflash Theme — Blog post page-specific CSS
+// The editorial article treatment for
+// (_layouts/themes/newsflash/frontend/pages/blog/post.html): reading-progress
+// bar, drop cap, serif crossheads with the vermilion dash, framed in-content
+// images, and the centered pullquote. NOTE: flat file shape — the post layout
+// sets `asset_path: blog/post`, so this compiles to pages/blog/post.<id>.bundle.css.
+// Compiles standalone, so it pulls in the theme tokens + mixins via loadPaths.
+@use 'config' as *;
+@import 'css/base/mixins';
+
+// ============================================
+// Reading progress — fixed vermilion rule across the very top
+// ============================================
+// Sits above the sticky masthead (z-index 1030); driven by pages/blog/post.js.
+.reading-progress {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 4px;
+  z-index: 1040;
+  pointer-events: none;
+  background: transparent;
+
+  span {
+    display: block;
+    height: 100%;
+    background: var(--bs-primary);
+    transform: scaleX(0);
+    transform-origin: left;
+  }
+}
+
+// ============================================
+// Article hero — wide cinematic frame
+// ============================================
+.article-hero {
+  aspect-ratio: 21 / 10;
+
+  img {
+    height: 100%;
+    // Lift the framework's generic .blog-post-image cap (max-height: 480px in
+    // the main bundle) — the 21/10 frame is the size authority here, and the
+    // cap leaves a blank strip inside the frame on wide viewports.
+    max-height: none;
+  }
+}
+
+// ============================================
+// Article body — the editorial reading column
+// ============================================
+.blog-post-content {
+  font-size: 1.13rem;
+  line-height: 1.78;
+
+  p {
+    margin-bottom: 1.5em;
+  }
+
+  // Drop cap on the opening paragraph
+  > p:first-of-type::first-letter {
+    font-family: $nf-font-display;
+    font-weight: 600;
+    font-size: 4.2rem;
+    line-height: 0.82;
+    color: var(--bs-primary);
+    float: left;
+    padding: 8px 12px 0 0;
+  }
+
+  // Serif crossheads with the vermilion dash
+  h2, h3 {
+    display: flex;
+    align-items: center;
+    gap: 0.5em;
+    font-size: 1.7rem;
+    letter-spacing: -0.014em;
+    line-height: 1.25;
+    margin: 2em 0 0.8em;
+
+    &::before {
+      content: "";
+      width: 0.55em;
+      height: 0.18em;
+      background: var(--bs-primary);
+      border-radius: 50rem;
+      flex: none;
+    }
+  }
+
+  h3 {
+    font-size: 1.35rem;
+  }
+
+  // In-content images get the editorial frame
+  img {
+    border: var(--nf-border);
+    border-radius: $nf-radius;
+  }
+
+  figcaption {
+    font-size: 0.78rem;
+    color: var(--bs-secondary-color);
+    padding-top: 10px;
+    text-align: right;
+  }
+
+  // Pullquote — centered italic serif with the oversized quote mark
+  blockquote {
+    margin: 2.4em 0;
+    padding: 0 1em;
+    text-align: center;
+    border: 0;
+
+    &::before {
+      content: "\201C";
+      display: block;
+      font-family: $nf-font-display;
+      font-weight: 900;
+      font-size: 4rem;
+      line-height: 0.6;
+      color: var(--bs-primary);
+      margin-bottom: 0.25em;
+    }
+
+    p {
+      font-family: $nf-font-display;
+      font-style: italic;
+      font-weight: 550;
+      font-size: clamp(1.4rem, 2.6vw, 1.9rem);
+      letter-spacing: -0.01em;
+      line-height: 1.3;
+      margin: 0;
+    }
+
+    cite {
+      display: block;
+      margin-top: 1.1em;
+      font-family: $font-family-sans-serif;
+      font-style: normal;
+      font-weight: 700;
+      font-size: 0.78rem;
+      letter-spacing: 0.12em;
+      text-transform: uppercase;
+      color: var(--bs-secondary-color);
+    }
+  }
+
+  // List markers pick up the accent
+  li::marker {
+    color: var(--bs-primary);
+  }
+}
+
+// Tag row sits on a hairline rule
+.tag-row {
+  border-top: var(--nf-border);
+}
+
+@media (max-width: 767.98px) {
+  .blog-post-content {
+    font-size: 1.05rem;
+  }
+}

package/dist/assets/themes/newsflash/pages/index.scss

@@ -0,0 +1,159 @@
+// Newsflash Theme — Homepage page-specific CSS
+// Styles the editorial front-page override
+// (_layouts/themes/newsflash/frontend/pages/index.html).
+//
+// Class names are UNIVERSAL (section-hero, hero-title, feed-num, rail-title,
+// mostread, stat-num, cta-panel, Bootstrap .card/.badge …) — no theme prefix —
+// so the same markup is swappable across themes. This file gives those classes
+// the newsflash look. Compiles standalone, so it pulls in the theme tokens +
+// mixins via loadPaths.
+@use 'config' as *;
+@import 'css/base/mixins';
+
+// ============================================
+// Hero — the front-page lead
+// ============================================
+.section-hero {
+  padding-top: clamp(2.5rem, 5vw, 4rem);
+}
+
+.hero-title {
+  font-size: clamp(2.6rem, 5.4vw, 4.4rem);
+  font-weight: 550;
+  letter-spacing: -0.022em;
+  line-height: 1.04;
+}
+
+.hero-art {
+  .art-frame {
+    aspect-ratio: 4 / 3;
+    @include nf-shadow-pop();
+  }
+
+  .hero-art-chip {
+    position: absolute;
+    top: 18px;
+    left: -14px;
+    transform: rotate(-4deg);
+    z-index: 2;
+  }
+}
+
+// Decorative cover art (pre-content fallback when the site has no posts yet):
+// vermilion-to-orange wash with a blue corner glow — pure CSS, no asset.
+.cover-art {
+  background:
+    radial-gradient(110% 90% at 88% 8%, #FFB36B 0%, rgba(255, 179, 107, 0) 52%),
+    radial-gradient(120% 110% at 8% 95%, var(--nf-blue) 0%, rgba(39, 66, 245, 0) 56%),
+    linear-gradient(155deg, var(--nf-vermilion) 10%, #FF7A3D 90%);
+}
+
+// ============================================
+// The rundown — stroked step numerals on dashed rows
+// ============================================
+// (The latest feed uses .feed-item's BASE layout from _editorial.scss —
+// square art thumb + text. Only the rundown swaps the thumb for a numeral.)
+.feed-num {
+  font-family: $nf-font-display;
+  font-style: italic;
+  font-weight: 800;
+  font-size: 3.2rem;
+  line-height: 1;
+  color: transparent;
+  -webkit-text-stroke: 1.5px var(--nf-ink);
+}
+
+// On rundown rows the numeral replaces the thumbnail — shrink its column
+.feed-item .feed-num {
+  width: 5rem;
+}
+.section-rundown .feed-item {
+  grid-template-columns: 5rem 1fr;
+}
+
+// ============================================
+// The rail (sticky sidebar)
+// ============================================
+.rail-stack {
+  position: sticky;
+  top: 5.75rem; // clears the sticky masthead
+}
+
+.rail-title {
+  display: flex;
+  align-items: center;
+  gap: 0.6em;
+  font-weight: 800;
+  font-size: 0.8rem;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+  margin-bottom: 1rem;
+
+  &::after {
+    content: "";
+    flex: 1;
+    height: var(--nf-border-width);
+    background: var(--nf-border-color);
+  }
+}
+
+// Most-read list — stroked counter numerals that ink in on hover
+.mostread {
+  counter-reset: mostread;
+
+  li {
+    counter-increment: mostread;
+    display: flex;
+    gap: 1rem;
+    align-items: flex-start;
+    padding: 0.8rem 0;
+    border-bottom: 1px solid var(--nf-line);
+
+    &:first-child { padding-top: 0; }
+    &:last-child { border-bottom: 0; padding-bottom: 0; }
+
+    &::before {
+      content: counter(mostread);
+      font-family: $nf-font-display;
+      font-style: italic;
+      font-weight: 900;
+      font-size: 2rem;
+      line-height: 1;
+      color: transparent;
+      -webkit-text-stroke: 1.3px var(--nf-ink);
+      flex: none;
+      width: 1.2em;
+      transition: $nf-transition;
+    }
+
+    &:hover::before {
+      color: var(--bs-primary);
+      -webkit-text-stroke-color: var(--bs-primary);
+    }
+  }
+
+  a {
+    font-weight: 700;
+    font-size: 0.95rem;
+    line-height: 1.35;
+    color: inherit;
+    text-decoration: none;
+
+    &:hover {
+      color: var(--bs-primary);
+    }
+  }
+}
+
+// Newsletter rail — the vermilion slab gets the hard offset shadow
+.rail-stack .card.bg-primary {
+  box-shadow: var(--nf-shadow-hard-hover) !important;
+}
+
+// (Feature icon chips, stats numerals + the CTA band live in the main bundle — _panels.scss —
+// because pricing/about reuse them. Reader quote-cards live in pages/about/index.scss —
+// the testimonials section moved to the about page.)
+
+@media (max-width: 991.98px) {
+  .rail-stack { position: static; }
+}