ultimate-jekyll-manager 1.7.2 → 1.8.1

package/dist/assets/themes/newsflash/css/components/_forms.scss

@@ -0,0 +1,75 @@
+// Newsflash Theme — Forms
+// Pill inputs framed in ink with a volt focus ring — the newsletter-signup
+// look applied to every form control.
+
+.form-control,
+.form-select {
+  background-color: var(--bs-body-bg);
+  border: var(--nf-border);
+  color: var(--bs-body-color);
+  border-radius: 50rem;
+  font-weight: 500;
+  padding: 0.6rem 1.1rem;
+  transition: $nf-transition;
+
+  &::placeholder {
+    color: var(--bs-secondary-color);
+    opacity: 0.8;
+  }
+
+  &:focus {
+    background-color: var(--bs-body-bg);
+    border-color: var(--nf-border-color);
+    color: var(--bs-body-color);
+    box-shadow: 0 0 0 3px var(--nf-volt);
+  }
+}
+
+// Multiline fields keep the editorial frame radius (a pill textarea is silly)
+textarea.form-control {
+  border-radius: var(--bs-border-radius);
+}
+
+// Checks + radios: ink frames, vermilion when checked
+.form-check-input {
+  border: var(--nf-border);
+  background-color: var(--bs-body-bg);
+
+  &:checked {
+    background-color: var(--bs-primary);
+    border-color: var(--nf-border-color);
+  }
+
+  &:focus {
+    border-color: var(--nf-border-color);
+    box-shadow: 0 0 0 3px var(--nf-volt);
+  }
+}
+
+// Switches keep the pill but pick up the ink frame
+.form-switch .form-check-input {
+  border-radius: 50rem;
+}
+
+// Labels read as compact editorial labels
+.form-label {
+  font-weight: 700;
+  font-size: 0.85rem;
+}
+
+// Input groups: joined pill — round only the outer corners
+.input-group {
+  > .form-control:not(:last-child),
+  > .form-select:not(:last-child) {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+
+  > .btn:last-child {
+    border-top-right-radius: 50rem;
+    border-bottom-right-radius: 50rem;
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+    box-shadow: none; // joined controls share one frame; no floating shadow
+  }
+}

package/dist/assets/themes/newsflash/css/components/_infinite-scroll.scss

@@ -0,0 +1,102 @@
+// Newsflash Theme — Infinite Scroll
+// Structural marquee used by the shared layouts (trusted-by logo strip,
+// testimonial scroll). Mostly layout/animation (theme-agnostic); cosmetic
+// bits are tuned to the editorial look (framed cards, paper fade edges).
+// NOTE: this is structural behavior the inherited Classy layouts depend on —
+// see docs/themes.md "Structural vs visual components".
+
+.infinite-scroll-wrapper {
+  position: relative;
+  width: 100vw;
+  margin-left: calc(-50vw + 50%);
+  overflow: hidden;
+
+  &.infinite-scroll-fade-edges {
+    &::before,
+    &::after {
+      content: '';
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      width: 100px;
+      z-index: 10;
+      pointer-events: none;
+    }
+    &::before { left: 0;  background: linear-gradient(to right, var(--bs-body-bg), transparent); }
+    &::after  { right: 0; background: linear-gradient(to left,  var(--bs-body-bg), transparent); }
+  }
+}
+
+.infinite-scroll-track {
+  display: flex;
+  width: fit-content;
+  animation: infinite-scroll var(--infinite-scroll-duration, 30s) linear infinite;
+
+  &:hover { animation-play-state: paused; }
+
+  &.gap-sm { gap: 1rem; }
+  &.gap-md { gap: 1.5rem; }
+  &.gap-lg { gap: 2rem; }
+}
+
+.infinite-scroll-item { flex-shrink: 0; }
+
+@keyframes infinite-scroll {
+  0%   { transform: translateX(0); }
+  100% { transform: translateX(var(--infinite-scroll-distance, -50%)); }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .infinite-scroll-track { animation: none; }
+  .infinite-scroll-wrapper { overflow-x: auto; }
+}
+
+// Logo items — quiet ink-tinted marks that wake on hover
+.infinite-scroll-item--logo {
+  padding: 0 3rem;
+  display: flex;
+  align-items: center;
+  height: 60px;
+
+  img, svg {
+    height: 40px;
+    width: auto;
+    max-width: 150px;
+    opacity: 0.65;
+    transition: $nf-transition;
+  }
+
+  &:hover img,
+  &:hover svg {
+    opacity: 1;
+  }
+}
+
+// Card items (testimonials) — framed paper, pop on hover
+.infinite-scroll-item--card {
+  width: 320px;
+  padding: 0.5rem 0.5rem 1.5rem 0; // room for the pop shadow
+
+  .card {
+    height: 100%;
+
+    &:hover {
+      @include nf-shadow-pop();
+    }
+  }
+}
+
+@media (max-width: 768px) {
+  .infinite-scroll-wrapper.infinite-scroll-fade-edges {
+    &::before,
+    &::after { width: 50px; }
+  }
+
+  .infinite-scroll-item--logo {
+    padding: 0 2rem;
+    height: 50px;
+    img, svg { height: 30px; }
+  }
+
+  .infinite-scroll-item--card { width: 280px; }
+}

package/dist/assets/themes/newsflash/css/components/_panels.scss

@@ -0,0 +1,91 @@
+// Newsflash Theme — Shared Panels & Numerals
+// Cross-page editorial set pieces: the dark "big read" CTA band (home,
+// pricing, about) and the stroked serif numerals (stats strips, step
+// numbers). Universal semantic class names — no theme prefixes.
+
+// ============================================
+// CTA panel — the dark big-read band
+// ============================================
+.cta-panel {
+  background: var(--nf-panel-bg);
+  color: var(--nf-panel-color);
+  border-radius: calc(#{$nf-radius} + 8px);
+  padding: clamp(2.5rem, 6vw, 4rem);
+  position: relative;
+  overflow: hidden;
+
+  .kicker {
+    color: var(--nf-volt);
+  }
+
+  .text-accent {
+    color: var(--nf-volt);
+  }
+}
+
+.cta-title {
+  font-style: italic;
+  font-weight: 550;
+  font-size: clamp(2rem, 3.6vw, 3.2rem);
+  letter-spacing: -0.015em;
+  line-height: 1.1;
+  margin: 0.75rem 0;
+}
+
+.cta-desc {
+  color: var(--nf-panel-color);
+  opacity: 0.72;
+  max-width: 36em;
+  margin-bottom: 1.75rem;
+}
+
+// Spinning vermilion ring field — the band's decorative flourish
+.cta-rings {
+  position: absolute;
+  right: -120px;
+  top: 50%;
+  width: 520px;
+  aspect-ratio: 1;
+  border-radius: 50%;
+  background: repeating-radial-gradient(circle, var(--nf-vermilion) 0 2px, transparent 2px 34px);
+  opacity: 0.7;
+  transform: translateY(-50%);
+  animation: cta-rings-spin 60s linear infinite;
+  pointer-events: none;
+}
+
+@keyframes cta-rings-spin {
+  to { transform: translateY(-50%) rotate(360deg); }
+}
+
+@media (max-width: 991.98px) {
+  .cta-rings { opacity: 0.3; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .cta-rings { animation: none; }
+}
+
+// ============================================
+// Feature icon chip — round accent badge for desk cards (features, values,
+// contact methods)
+// ============================================
+.feature-icon {
+  width: 3rem;
+  height: 3rem;
+  flex: none;
+  border: var(--nf-border);
+}
+
+// ============================================
+// Stroked numerals — stats strips, oversized counters
+// ============================================
+.stat-num {
+  font-family: $nf-font-display;
+  font-style: italic;
+  font-weight: 800;
+  font-size: clamp(2.6rem, 5vw, 3.6rem);
+  line-height: 1.1;
+  color: transparent;
+  -webkit-text-stroke: 1.5px var(--nf-ink);
+}

package/dist/assets/themes/newsflash/css/components/_ticker.scss

@@ -0,0 +1,70 @@
+// Newsflash Theme — News Ticker
+// The signature strip above the masthead: an ink bar marquee-scrolling the
+// latest headlines with a pulsing live dot. Pure CSS animation — the track
+// content is duplicated once in the layout, so -50% loops seamlessly.
+// Genuinely novel UI (no Bootstrap equivalent) → universal semantic classes.
+
+.ticker {
+  background: var(--nf-panel-bg);
+  color: var(--nf-panel-color);
+  overflow: hidden;
+  white-space: nowrap;
+  font-size: 0.78rem;
+  font-weight: 600;
+  letter-spacing: 0.03em;
+
+  a {
+    color: inherit;
+    text-decoration: none;
+
+    &:hover {
+      color: var(--nf-volt);
+    }
+  }
+}
+
+.ticker-track {
+  display: inline-flex;
+  padding: 0.55em 0;
+  animation: ticker-scroll 36s linear infinite;
+}
+
+.ticker:hover .ticker-track {
+  animation-play-state: paused;
+}
+
+.ticker-item {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.6em;
+  padding: 0 1.6em;
+
+  // Bolt separators render via {% uj_icon %} — keep them volt
+  svg, i {
+    color: var(--nf-volt);
+  }
+}
+
+.live-dot {
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  flex: none;
+  background: var(--nf-vermilion);
+  animation: live-pulse 1.4s ease-in-out infinite;
+}
+
+@keyframes ticker-scroll {
+  to { transform: translateX(-50%); }
+}
+
+@keyframes live-pulse {
+  0%, 100% { opacity: 1; transform: scale(1); }
+  50% { opacity: 0.45; transform: scale(0.8); }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .ticker-track { animation: none; }
+  .live-dot { animation: none; }
+  .ticker { overflow-x: auto; }
+}

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