ultimate-jekyll-manager 1.7.1 → 1.8.0

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

@@ -0,0 +1,264 @@
+// Newsflash Theme — General Layout
+// Section rhythm, footer, shadow utilities, and overrides for the
+// gradient/accent classes the shared (Classy-derived) layouts emit. The goal:
+// inherited pages (auth, account, team, feedback…) render as flat editorial
+// paper-and-ink — no layout override needed.
+
+// ============================================
+// Section rhythm
+// ============================================
+// Shared layouts rely on the theme to provide vertical section padding.
+// The masthead is sticky (in-flow), so no first-section navbar offset is
+// needed — content starts right under the bar.
+section {
+  padding-top: clamp(3rem, 6vw, 5rem);
+  padding-bottom: clamp(3rem, 6vw, 5rem);
+}
+
+// ============================================
+// Gradient neutralization — inherited markup goes flat editorial
+// ============================================
+.bg-gradient-rainbow,
+.gradient-animated,
+.gradient-grain {
+  background-image: none !important;
+  animation: none !important;
+}
+
+// Hero sections ship as .bg-gradient-rainbow with light text; flatten to a
+// paper-2 well closed by an ink rule, and pull the text back to ink.
+section.bg-gradient-rainbow {
+  background-color: var(--nf-paper-2) !important;
+  color: var(--bs-body-color) !important;
+  border-radius: 0 !important;
+  border-bottom: var(--nf-border);
+  box-shadow: none !important;
+
+  .text-light,
+  &.text-light,
+  h1, h2, h3, .lead,
+  p {
+    color: var(--bs-body-color) !important;
+  }
+
+  // The hero tagline becomes a vermilion kicker line
+  .text-uppercase {
+    color: var(--bs-primary) !important;
+    font-weight: 800;
+    letter-spacing: 0.14em;
+    opacity: 1 !important;
+  }
+}
+
+// Gradient-clipped text → solid italic serif vermilion
+.text-gradient-rainbow {
+  background: none !important;
+  -webkit-background-clip: initial !important;
+  background-clip: initial !important;
+  -webkit-text-fill-color: currentColor !important;
+  color: var(--bs-primary) !important;
+  font-family: $nf-font-display;
+  font-style: italic;
+}
+
+// Decorative gradient borders → hairline ink
+.border-gradient-rainbow {
+  border-image: none !important;
+  border-color: var(--nf-line) !important;
+}
+
+// Glassy panels → framed paper
+.bg-glassy,
+.card.bg-glassy {
+  background: var(--bs-card-bg) !important;
+  backdrop-filter: none !important;
+  -webkit-backdrop-filter: none !important;
+  @include nf-border();
+}
+
+// Gradient promo/CTA cards (newsletter bands on inherited blog pages) →
+// solid vermilion signup slab with ink frame + hard offset shadow.
+.card.bg-gradient,
+.card.bg-primary {
+  background-image: none !important;
+  background-color: var(--bs-primary) !important;
+  color: #fff !important;
+  @include nf-border();
+  box-shadow: var(--nf-shadow-hard-hover) !important;
+}
+
+// ============================================
+// Shadow utilities → editorial pop (soft depth; frames carry the ink)
+// ============================================
+.shadow-sm { box-shadow: 0 8px 20px -14px rgba(23, 19, 16, 0.35) !important; }
+.shadow    { box-shadow: var(--nf-shadow-pop) !important; }
+.shadow-lg { box-shadow: var(--nf-shadow-pop) !important; }
+
+// Cards that ship with .border-0 (e.g. the auth card) lose the frame; give it
+// back on elevated cards so the ink outline + pop shadow read as one object.
+.card.border-0.shadow-sm,
+.card.border-0.shadow,
+.card.border-0.shadow-lg {
+  @include nf-border();
+}
+
+// ============================================
+// Rules — hr reads as a soft editorial divider
+// ============================================
+hr {
+  border-top: 1px solid var(--nf-line);
+  opacity: 1;
+}
+
+// ============================================
+// Footer — the ink slab that closes every page
+// ============================================
+// The shared footer include ships a .bg-body-secondary utility (!important,
+// specificity 0,1,0) — the ink slab needs !important AND the class-qualified
+// selector to beat it (a bare `footer` ties on !important and loses on
+// specificity).
+footer,
+footer.bg-body-secondary {
+  background: var(--nf-panel-bg) !important;
+}
+
+footer {
+  color: var(--nf-panel-color);
+
+  h1, h2, h3, h4, h5, h6,
+  .h1, .h2, .h3, .h4, .h5, .h6 {
+    color: var(--nf-panel-color);
+  }
+
+  a {
+    color: var(--nf-panel-color);
+    opacity: 0.78;
+    text-decoration: none;
+    transition: $nf-transition;
+
+    &:hover {
+      opacity: 1;
+      color: var(--nf-volt);
+    }
+  }
+
+  // The inherited (classy) footer brand row ships an avatar + .h5 wordmark;
+  // render it as the masthead echo instead — wordmark-only, oversized serif —
+  // and keep the description to a column measure.
+  .h5 {
+    font-family: $nf-font-display;
+    font-size: clamp(1.6rem, 2.4vw, 2.1rem);
+
+    .avatar { display: none; }
+  }
+
+  p { max-width: 24em; }
+
+  // Inherited links carry .link-muted / .text-body utilities (!important
+  // color) — repaint with panel color so they read on the ink slab.
+  .text-body { color: var(--nf-panel-color) !important; }
+
+  .link-muted {
+    color: var(--nf-panel-color) !important;
+
+    &:hover,
+    &:focus {
+      color: var(--nf-volt) !important;
+      text-decoration: none;
+      opacity: 1;
+    }
+  }
+
+  // Muted footer text keeps panel contrast (utilities would go ink-soft)
+  .text-muted,
+  .text-body-secondary {
+    color: var(--nf-panel-color) !important;
+    opacity: 0.6;
+  }
+
+  // Volt uppercase column heads (the editorial footer's section labels).
+  // !important on weight: the inherited column heads carry .fw-semibold.
+  h6, .h6 {
+    font-family: $font-family-sans-serif;
+    font-size: 0.72rem;
+    font-weight: 800 !important;
+    letter-spacing: 0.14em;
+    text-transform: uppercase;
+    color: var(--nf-volt);
+  }
+
+  // Rules + dividers read as faint panel-color lines on the ink slab
+  hr,
+  .border-top {
+    border-top-color: color-mix(in srgb, var(--nf-panel-color) 18%, transparent) !important;
+  }
+
+  // Outline buttons (language/appearance pickers) carry the panel color — the
+  // global ghost-button rule paints body ink, which vanishes on the slab.
+  // Doubled attribute + footer scope (0,2,1) beats the global doubled rule.
+  [class*="btn-outline-"][class*="btn-outline-"] {
+    color: var(--nf-panel-color);
+    border-color: color-mix(in srgb, var(--nf-panel-color) 55%, transparent);
+    opacity: 1;
+    --bs-btn-hover-bg: var(--nf-panel-color);
+    --bs-btn-hover-color: var(--nf-panel-bg);
+
+    &:hover {
+      color: var(--nf-panel-bg);
+      background: var(--nf-panel-color);
+      border-color: var(--nf-panel-color);
+    }
+  }
+}
+
+// ============================================
+// Alerts, accordions, modals — framed paper panels
+// ============================================
+.alert {
+  @include nf-border();
+  border-radius: var(--bs-border-radius-lg);
+}
+
+.accordion-item {
+  @include nf-border();
+  background: var(--bs-card-bg);
+
+  // Bootstrap strips the top border on stacked items; ours are framed
+  // objects, so force the full frame back on every item.
+  &:not(:first-of-type) {
+    border-top: var(--nf-border) !important;
+  }
+}
+
+.accordion-button {
+  font-family: $nf-font-display;
+  font-weight: 600;
+  background: var(--bs-card-bg);
+  color: var(--bs-body-color);
+
+  &:not(.collapsed) {
+    background: var(--nf-volt);
+    color: var(--nf-volt-ink);
+    box-shadow: none;
+  }
+
+  &:focus {
+    box-shadow: none;
+    border-color: var(--nf-border-color);
+  }
+}
+
+.modal-content,
+.toast,
+.offcanvas {
+  background: var(--bs-card-bg);
+  @include nf-border();
+  @include nf-shadow-pop();
+}
+
+// Back-to-top / floating action buttons stay on-brand
+.btn-back-to-top {
+  border-radius: 50rem;
+  @include nf-border();
+  @include nf-shadow-hard();
+}

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 });
+};