ultimate-jekyll-manager 1.4.3 → 1.5.0

package/dist/assets/themes/neobrutalism/css/components/_cards.scss

@@ -0,0 +1,69 @@
+// Neobrutalism Theme — Cards
+// Cards are the canonical "box": surface + hard ink border + offset shadow.
+// Restyles Bootstrap .card so feature grids, pricing tables, blog cards, and
+// the account UI all pick it up automatically.
+
+.card {
+  background: var(--nb-surface);
+  border-radius: 0;
+  @include nb-border();
+  @include nb-shadow(md);
+
+  .card-header {
+    background: transparent;
+    border-bottom: $nb-border-width solid var(--nb-border-color);
+    font-family: $nb-font-display;
+    font-weight: 800;
+    padding: 1.1rem 1.35rem;
+  }
+
+  .card-body {
+    padding: 1.35rem;
+  }
+
+  .card-footer {
+    background: transparent;
+    border-top: $nb-border-width solid var(--nb-border-color);
+    padding: 1rem 1.35rem;
+  }
+
+  // Card images sit flush against the top border
+  .card-img-top {
+    border-radius: 0;
+    border-bottom: $nb-border-width solid var(--nb-border-color);
+  }
+}
+
+// Clickable cards press like buttons
+a.card,
+.card.nb-pressable {
+  @include nb-press();
+  text-decoration: none;
+}
+
+// Emphasis card — thicker frame + bigger shadow (use for "featured"/popular tiers)
+.card.nb-card-feature {
+  @include nb-border($nb-border-width-lg);
+  @include nb-shadow(lg);
+}
+
+// Accent-headed card: colored header strip
+@each $name, $color in (
+  blue: $nb-accent-blue,
+  pink: $nb-accent-pink,
+  yellow: $nb-accent-yellow,
+  green: $nb-accent-green,
+  purple: $nb-accent-purple,
+  orange: $nb-accent-orange,
+) {
+  .card.nb-card-#{$name} > .card-header {
+    background: var(--nb-accent-#{$name});
+    color: #111111;
+  }
+}
+
+// List groups inside cards keep hard dividers
+.list-group-item {
+  border-radius: 0;
+  border-color: var(--nb-border-color);
+}

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

@@ -0,0 +1,88 @@
+// Neobrutalism Theme — Forms
+// Inputs are hard-bordered boxes. On focus they gain the offset shadow rather
+// than a glow ring — consistent with the rest of the system. Powers auth pages
+// (signin/signup), the contact form, and the hero demo form.
+
+.form-control,
+.form-select {
+  background-color: var(--nb-surface);
+  color: var(--bs-body-color);
+  border-radius: 0;
+  @include nb-border();
+  padding: 0.6rem 0.85rem;
+  font-weight: 500;
+  transition: $nb-transition;
+
+  &::placeholder {
+    color: rgba(var(--bs-body-color-rgb, 17, 17, 17), 0.45);
+    font-weight: 400;
+  }
+
+  &:focus {
+    background-color: var(--nb-surface);
+    color: var(--bs-body-color);
+    border-color: var(--nb-border-color);
+    @include nb-shadow(sm);
+    outline: 0;
+  }
+
+  &:disabled,
+  &[readonly] {
+    background-color: var(--nb-surface-alt);
+    opacity: 1;
+  }
+}
+
+// Labels: bold, slightly mono for the editorial feel
+.form-label {
+  font-weight: 700;
+  margin-bottom: 0.4rem;
+}
+
+// Checkboxes / radios: square, hard-edged
+.form-check-input {
+  border-radius: 0;
+  border: $nb-border-width-sm solid var(--nb-border-color);
+  background-color: var(--nb-surface);
+
+  &:checked {
+    background-color: $primary;
+    border-color: var(--nb-border-color);
+  }
+
+  &:focus {
+    border-color: var(--nb-border-color);
+    box-shadow: none;
+  }
+}
+
+// Switch keeps square track (intentionally un-rounded)
+.form-switch .form-check-input {
+  border-radius: 0;
+}
+
+// Input groups: shared ink frame, no gaps
+.input-group {
+  .form-control,
+  .form-select,
+  .btn,
+  .input-group-text {
+    border-radius: 0;
+  }
+
+  .input-group-text {
+    background: var(--nb-surface-alt);
+    @include nb-border();
+    font-weight: 700;
+  }
+}
+
+// Validation states use accent colors with the ink frame intact
+.form-control.is-invalid,
+.was-validated .form-control:invalid {
+  border-color: $danger;
+}
+.form-control.is-valid,
+.was-validated .form-control:valid {
+  border-color: $success;
+}

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

@@ -0,0 +1,94 @@
+// Neobrutalism 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 neobrutalist look (square cards, hard hover shadow).
+// 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%)); }
+}
+
+// Logo items
+.infinite-scroll-item--logo {
+  padding: 0 3rem;
+  display: flex;
+  align-items: center;
+  height: 60px;
+
+  img, svg {
+    height: 40px;
+    width: auto;
+    max-width: 150px;
+    transition: $nb-transition;
+  }
+}
+
+// Card items (testimonials) — square, ink frame + hard offset shadow
+.infinite-scroll-item--card {
+  width: 320px;
+  padding: 0.5rem 0.5rem 0.5rem 0; // give the offset shadow room so it isn't clipped
+
+  .card {
+    height: 100%;
+    border-radius: 0;
+    @include nb-border();
+    @include nb-shadow(md);
+
+    &:hover {
+      @include nb-shadow(lg);
+    }
+  }
+}
+
+@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/neobrutalism/css/layout/_general.scss

@@ -0,0 +1,200 @@
+// Neobrutalism Theme — General Layout
+// Section rhythm, the hero treatment, footer, badges, and overrides for the
+// gradient/accent classes the shared (Classy-derived) layouts emit. The goal:
+// the inherited homepage/pricing/auth markup renders as flat neobrutalist
+// color-blocks instead of soft gradients — no layout override needed.
+
+// ============================================
+// Section rhythm
+// ============================================
+// Shared layouts rely on the theme to provide vertical section padding.
+section {
+  padding-top: clamp(3rem, 7vw, 6rem);
+  padding-bottom: clamp(3rem, 7vw, 6rem);
+}
+
+// The navbar is fixed and overlaps the page, so the FIRST section on every page
+// must add the navbar's height to its top padding — otherwise its content sits
+// under the nav (cramped at the top, unbalanced vs. the section's bottom).
+// Targets the first section regardless of page; the !important beats a `pt-0`
+// utility that a layout may put on the first section.
+main > section:first-child,
+#main-content > section:first-child {
+  padding-top: calc(var(--nb-navbar-height) + clamp(2rem, 5vw, 4rem)) !important;
+}
+
+// ============================================
+// Hero — flat color block, not a gradient
+// ============================================
+// The hero <section> ships with .bg-gradient-rainbow .gradient-animated etc.
+// We neutralize the gradient and replace it with a solid accent block framed
+// by a thick ink rule at the bottom. Decorative grain/animation are dropped.
+.bg-gradient-rainbow,
+.gradient-animated,
+.gradient-grain {
+  background-image: none !important;
+  animation: none !important;
+}
+
+section.bg-gradient-rainbow {
+  background-color: var(--nb-accent-yellow) !important;
+  color: #111111 !important;
+  border-radius: 0 !important;
+  border-bottom: $nb-border-width-lg solid var(--nb-border-color);
+  box-shadow: none !important;
+
+  // Force readable ink text over the bright block
+  // (exclude the tagline kicker, which is ink-on-accent and styled below)
+  .text-light,
+  &.text-light,
+  h1, h2, h3, .lead,
+  p:not(.text-uppercase) {
+    color: #111111 !important;
+  }
+
+  // Tagline becomes a mono kicker chip: accent text on an ink block
+  .text-uppercase {
+    display: inline-block;
+    font-family: $nb-font-mono;
+    font-weight: 700;
+    background: #111111;
+    color: var(--nb-accent-yellow) !important;
+    padding: 0.4rem 0.8rem;
+    opacity: 1 !important;
+  }
+}
+
+// Accent text (headline_accent spans) — marker highlight instead of color swap
+.text-accent {
+  background: #111111;
+  color: var(--nb-accent-yellow);
+  padding: 0 0.12em;
+  box-decoration-break: clone;
+  -webkit-box-decoration-break: clone;
+}
+
+// ============================================
+// CTA / promo cards (.card.bg-gradient.bg-primary.text-white)
+// ============================================
+// Flatten gradient promo cards into solid accent blocks with ink frame.
+.card.bg-gradient,
+.card.bg-primary {
+  background-image: none !important;
+  background-color: var(--nb-accent-blue) !important;
+  color: #fff !important;
+  @include nb-border();
+  @include nb-shadow(lg);
+}
+
+// Glassy hero-demo card → solid surface box
+.bg-glassy,
+.card.bg-glassy {
+  background: var(--nb-surface) !important;
+  backdrop-filter: none !important;
+  -webkit-backdrop-filter: none !important;
+  @include nb-border();
+}
+
+// ============================================
+// Shadow utility overrides → hard offset shadows
+// ============================================
+// Bootstrap's .shadow / .shadow-lg are soft blurs. Map them to the neobrutalist
+// hard offset so inherited markup (auth cards, modals) gets the right look.
+.shadow-sm { box-shadow: var(--nb-shadow-sm) !important; }
+.shadow    { box-shadow: var(--nb-shadow) !important; }
+.shadow-lg { box-shadow: var(--nb-shadow-lg) !important; }
+
+// Cards that ship with .border-0 (e.g. the auth card) lose Bootstrap's border;
+// give the frame back so the ink outline + hard shadow read as one box.
+// (Targeted to elevated cards so flat inline cards stay borderless.)
+.card.border-0.shadow-sm,
+.card.border-0.shadow,
+.card.border-0.shadow-lg {
+  @include nb-border();
+}
+
+// ============================================
+// Badges — sticker chips with ink frame
+// ============================================
+.badge {
+  border-radius: 0;
+  font-weight: 700;
+  letter-spacing: 0;
+  padding: 0.4rem 0.6rem;
+  @include nb-border($nb-border-width-sm);
+  color: #111111;
+}
+.badge.bg-body-tertiary { background: var(--nb-accent-yellow) !important; }
+// Strip decorative gradient borders from inherited badges
+.border-gradient-rainbow { border-image: none !important; }
+
+// ============================================
+// Footer
+// ============================================
+footer {
+  background: var(--nb-surface);
+  border-top: $nb-border-width-lg solid var(--nb-border-color);
+
+  a {
+    color: var(--bs-body-color);
+    text-decoration: none;
+    font-weight: 600;
+
+    &:hover {
+      background: var(--nb-accent-interactive);
+      color: var(--nb-accent-interactive-ink);
+    }
+  }
+}
+
+// ============================================
+// Tables, alerts, accordions — square + framed
+// ============================================
+.alert {
+  border-radius: 0;
+  @include nb-border();
+  @include nb-shadow(sm);
+}
+
+.accordion-item {
+  border-radius: 0;
+  @include nb-border();
+  @include nb-shadow(sm);
+
+  // Bootstrap strips the top border on .accordion-item:not(:first-of-type) to
+  // avoid doubled borders in a connected stack. Our items are separated (mb-3),
+  // so force the full ink frame back on every item (!important beats Bootstrap's
+  // same-specificity reset that may load after this via bootstrap/overrides).
+  &:not(:first-of-type) {
+    border-top: $nb-border-width solid var(--nb-border-color) !important;
+  }
+}
+.accordion-button {
+  border-radius: 0;
+  font-weight: 700;
+
+  &:not(.collapsed) {
+    background: var(--nb-accent-yellow);
+    color: #111111;
+    box-shadow: none;
+  }
+  &:focus {
+    box-shadow: none;
+    border-color: var(--nb-border-color);
+  }
+}
+
+.modal-content,
+.toast,
+.offcanvas {
+  border-radius: 0;
+  @include nb-border();
+  @include nb-shadow(lg);
+}
+
+// Back-to-top / floating action buttons stay on-brand
+.btn-back-to-top {
+  border-radius: 0;
+  @include nb-border();
+  @include nb-shadow(sm);
+}

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

@@ -0,0 +1,153 @@
+// Neobrutalism Theme — Navigation
+// The inherited nav markup (.navbar-wrapper > .navbar.navbar-floating) is a
+// floating glass pill in Classy. Here we make it a solid, ink-framed bar that
+// sits flush at the top — a hard horizontal block, true to the style.
+
+.navbar-wrapper {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 1030;
+  pointer-events: none;
+
+  .navbar {
+    pointer-events: auto;
+    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: 0.75rem clamp(1rem, 4vw, 3rem);
+  background: var(--nb-surface) !important;
+  border: 0;
+  border-bottom: $nb-border-width-lg solid var(--nb-border-color);
+  transition: $nb-transition;
+
+  // Slight shadow only once scrolled (set by _theme.js)
+  &.scrolled {
+    @include nb-shadow(sm);
+  }
+
+  .container,
+  .container-fluid {
+    padding: 0;
+  }
+}
+
+// Brand: chunky display type, no fade
+.navbar-brand {
+  font-family: $nb-font-display;
+  font-weight: 900;
+  font-size: 1.4rem;
+  letter-spacing: -0.03em;
+
+  .brand-logo { height: 32px; width: auto; margin-right: 0.5rem; }
+}
+
+// Nav links: square hover blocks. Hover/active fill is the PRIMARY blue (white
+// text) — not the yellow accent — so the top-bar interactions match the brand's
+// blue buttons instead of the yellow CTA accent.
+.navbar-nav .nav-link {
+  font-weight: 700;
+  font-size: 0.95rem;
+  padding: 0.4rem 0.85rem;
+  margin: 0 0.15rem;
+  border-radius: 0;
+  color: var(--bs-body-color);
+  border: $nb-border-width-sm solid transparent;
+  transition: $nb-transition;
+
+  // Interactive accent (blue), not the yellow signature accent. Single token so
+  // every hover/active state across the theme stays consistent.
+  &:hover {
+    background: var(--nb-accent-interactive);
+    color: var(--nb-accent-interactive-ink);
+    border-color: var(--nb-border-color);
+  }
+
+  // Active = solid blue block with white text (matches hover, always readable).
+  // Use &.active.active + !important to beat Bootstrap's .text-body utility that
+  // the nav include adds to links (which otherwise forces color back to body).
+  &.active,
+  &.active.text-body {
+    background: var(--nb-accent-interactive) !important;
+    color: var(--nb-accent-interactive-ink) !important;
+    border-color: var(--nb-border-color);
+  }
+}
+
+// Mobile toggle: a hard square button
+.navbar-toggler {
+  border-radius: 0;
+  padding: 0.3rem 0.55rem;
+  background: var(--nb-surface);
+  @include nb-border($nb-border-width-sm);
+  transition: $nb-transition;
+
+  &:hover { background: var(--nb-accent-interactive); }
+  &:focus { box-shadow: var(--nb-shadow-sm); }
+
+  .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%2817,17,17,1%29' stroke-linecap='square' stroke-miterlimit='10' stroke-width='3' 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%28245,245,245,1%29' stroke-linecap='square' stroke-miterlimit='10' stroke-width='3' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
+  }
+}
+
+// Mobile collapsed menu becomes a bordered drawer panel
+@media (max-width: 991.98px) {
+  .navbar-collapse {
+    margin-top: 0.75rem;
+    padding: 0.75rem;
+    background: var(--nb-surface);
+    @include nb-border();
+    @include nb-shadow(md);
+  }
+}
+
+// ============================================
+// Dropdown menus — hard bordered panels
+// ============================================
+.dropdown-menu {
+  background: var(--nb-surface);
+  border-radius: 0;
+  @include nb-border();
+  @include nb-shadow(md);
+  padding: 0.4rem;
+  margin-top: 0.6rem;
+
+  .dropdown-item {
+    border-radius: 0;
+    font-weight: 600;
+    padding: 0.55rem 0.85rem;
+    color: var(--bs-body-color);
+
+    &:hover,
+    &:focus {
+      background: var(--nb-accent-interactive);
+      color: var(--nb-accent-interactive-ink);
+    }
+
+    &.active,
+    &:active {
+      background: var(--bs-body-color);
+      color: var(--nb-paper);
+    }
+  }
+
+  .dropdown-divider {
+    border-top: $nb-border-width-sm solid var(--nb-border-color);
+    opacity: 1;
+    margin: 0.4rem 0;
+  }
+}

package/dist/assets/themes/neobrutalism/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/neobrutalism/js/navbar-scroll.js

@@ -0,0 +1,29 @@
+// Navbar scroll effect for the Neobrutalism theme.
+// Toggles a `.scrolled` class on the floating navbar once the page is scrolled
+// past a threshold; the SCSS turns that into a hard offset shadow under the bar.
+// Threshold is configurable via the data-nb-scroll-threshold attribute on the navbar.
+export default function setupNavbarScroll() {
+  const navbar = document.querySelector('.navbar-floating');
+  if (!navbar) {
+    return;
+  }
+
+  const threshold = parseInt(navbar.dataset.nbScrollThreshold, 10) || 20;
+
+  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 });
+}