ultimate-jekyll-manager 1.7.1 → 1.8.0

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

@@ -0,0 +1,182 @@
+// Newsflash Theme — Editorial Primitives
+// The cross-page newsroom vocabulary: kickers, section heads with rules, and
+// framed images. Genuinely novel UI (no Bootstrap equivalent) → universal
+// semantic class names other themes are free to style their own way.
+
+// ============================================
+// Kicker — the uppercase vermilion micro-label above headlines
+// ============================================
+.kicker {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5em;
+  font-family: $font-family-sans-serif;
+  font-size: 0.72rem;
+  font-weight: 800;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+  color: var(--bs-primary);
+
+  &::before {
+    content: "";
+    width: 7px;
+    height: 7px;
+    background: currentColor;
+    border-radius: 50%;
+    flex: none;
+  }
+}
+
+// ============================================
+// Section head — uppercase label + full-width ink rule (+ optional link)
+// ============================================
+.section-head {
+  display: flex;
+  align-items: baseline;
+  gap: 1.25rem;
+  margin-bottom: 1.75rem;
+
+  h2, h3, .h2, .h3 {
+    font-family: $font-family-sans-serif;
+    font-size: 1.05rem;
+    font-weight: 800;
+    letter-spacing: 0.12em;
+    text-transform: uppercase;
+    line-height: 1;
+    margin: 0;
+  }
+
+  .rule {
+    flex: 1;
+    height: var(--nf-border-width);
+    background: var(--nf-border-color);
+    align-self: center;
+  }
+
+  a {
+    font-size: 0.82rem;
+    font-weight: 700;
+    color: var(--bs-primary);
+    text-decoration: none;
+    white-space: nowrap;
+
+    &:hover {
+      text-decoration: underline;
+      text-underline-offset: 0.2em;
+    }
+  }
+}
+
+// ============================================
+// Art frame — the framed editorial image
+// ============================================
+// Hairline ink border + radius; images zoom slowly when the parent
+// link/card is hovered (rule lives in _cards.scss).
+.art-frame {
+  border: var(--nf-border);
+  border-radius: var(--bs-border-radius-lg);
+  overflow: hidden;
+  background: var(--nf-paper-2);
+
+  // uj_post image-tags render as <picture><img>. The wrapper must fill the
+  // frame or the img's percentage height resolves against the auto-height
+  // picture instead — leaving a blank strip inside the frame.
+  picture {
+    display: block;
+    width: 100%;
+    height: 100%;
+  }
+
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    display: block;
+    transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .art-frame img { transition: none; }
+}
+
+// ============================================
+// Headline links outside cards (feed rows, hero) — same grow-rule affordance
+// ============================================
+.headline-link {
+  color: inherit;
+  text-decoration: none;
+  @include nf-underline-grow();
+}
+
+// ============================================
+// Story card — a whole-tile link to an article (home, blog index, read-next)
+// ============================================
+// Framed image + kicker + serif headline + byline meta. The tile lifts and
+// its framed image zooms on hover.
+.story-card {
+  display: block;
+  color: inherit;
+  text-decoration: none;
+  transition: $nf-transition;
+
+  &:hover {
+    color: inherit;
+    transform: translateY(-5px);
+  }
+
+  &:hover .art-frame img {
+    transform: scale(1.04);
+  }
+
+  h2, h3, .h4, .h5 {
+    font-optical-sizing: auto;
+    letter-spacing: -0.012em;
+    line-height: 1.22;
+  }
+
+  .art-frame {
+    aspect-ratio: 16 / 10;
+  }
+}
+
+// ============================================
+// Feed item — an editorial list row (thumb/number + headline + dek)
+// ============================================
+.feed-item {
+  display: grid;
+  grid-template-columns: 200px 1fr;
+  gap: 1.5rem;
+  align-items: center;
+  padding: 1.6rem 0;
+  border-bottom: 1.5px dashed var(--nf-line);
+  color: inherit;
+  text-decoration: none;
+
+  &:first-child { padding-top: 0; }
+  &:last-child { border-bottom: 0; }
+
+  .art-frame {
+    aspect-ratio: 1 / 1;
+    border-radius: var(--bs-border-radius);
+  }
+}
+
+a.feed-item:hover {
+  color: inherit;
+
+  .art-frame img {
+    transform: scale(1.04);
+  }
+}
+
+@media (max-width: 767.98px) {
+  .feed-item {
+    grid-template-columns: 1fr;
+    gap: 0.9rem;
+
+    .art-frame {
+      aspect-ratio: 16 / 9;
+    }
+  }
+}

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