ultimate-jekyll-manager 1.4.2 → 1.5.0

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

@@ -0,0 +1,148 @@
+// Neobrutalism Theme — Buttons
+// Every button is a hard-bordered block sitting on an offset shadow that
+// "presses" into the page on interaction. This restyles Bootstrap's own
+// .btn / .btn-* classes so all existing markup (nav CTAs, hero buttons,
+// forms) inherits the look with zero HTML changes.
+
+.btn {
+  font-family: $nb-font-display;
+  font-weight: 700;
+  letter-spacing: -0.01em;
+  border-radius: 0;
+  @include nb-border();
+  @include nb-shadow(md);
+  text-transform: none;
+  padding: 0.6rem 1.25rem;
+}
+
+// Press EXACTLY like the stat cards. These use the DOUBLED `.btn.btn` selector
+// (specificity 0,2,0) on purpose: every theme page bundle re-emits Bootstrap's own
+// `.btn { transition: color … }` and `.btn:hover` (because page SCSS @forwards
+// Bootstrap), and those load AFTER the main bundle. The doubled class beats them so
+// the press is pure transform+shadow with the stat-card timing — no color flash, no
+// focus-ring fighting the offset shadow.
+.btn.btn {
+  // Same transition the stat cards use → identical feel.
+  @include nb-press();
+
+  // Focus shows an OUTLINE ring (outside the box, never conflicts with the offset
+  // shadow). No focus box-shadow — that was the "flash of border".
+  &:focus { outline: 0; }
+  &:focus-visible {
+    outline: 3px solid var(--nb-border-color);
+    outline-offset: 3px;
+  }
+}
+
+.btn {
+
+  // Bootstrap adds a subtle border-color per-variant; force ink so the
+  // signature black/white frame is consistent across every color.
+  // (btn-adaptive / -inverse are the mode-flipping solids used by the nav CTA,
+  // auth buttons, etc. — they MUST be in this list or they'd keep Bootstrap's
+  // default "darken on hover" and feel different from every other button.)
+  &.btn-primary,
+  &.btn-secondary,
+  &.btn-success,
+  &.btn-info,
+  &.btn-warning,
+  &.btn-danger,
+  &.btn-light,
+  &.btn-dark,
+  &.btn-adaptive,
+  &.btn-adaptive-inverse {
+    border-color: var(--nb-border-color);
+    --bs-btn-hover-border-color: var(--nb-border-color);
+    --bs-btn-active-border-color: var(--nb-border-color);
+  }
+
+  // 3. SOLID buttons: freeze hover/active fill to the resting color so the press is
+  //    pure transform+shadow (no color shift) — exactly the stat-card feel. Outline
+  //    buttons are intentionally EXCLUDED so they keep their fill-on-hover.
+  //    Freezing to `var(--bs-btn-bg)` works in BOTH modes automatically because the
+  //    adaptive classes already set --bs-btn-bg per light/dark.
+  &.btn-primary,   &.btn-secondary, &.btn-success,
+  &.btn-info,      &.btn-warning,   &.btn-danger,
+  &.btn-light,     &.btn-dark,
+  &.btn-adaptive,  &.btn-adaptive-inverse {
+    --bs-btn-hover-bg: var(--bs-btn-bg);
+    --bs-btn-hover-color: var(--bs-btn-color);
+    --bs-btn-active-bg: var(--bs-btn-bg);
+    --bs-btn-active-color: var(--bs-btn-color);
+  }
+}
+
+// btn-adaptive / -inverse RESTING fill. The global _buttons-adaptive.scss sets these
+// via `.btn-adaptive` (0,1,0), but Bootstrap's own `.btn { --bs-btn-bg: transparent }`
+// re-emission can tie/beat it on order, leaving the button transparent. Restate the
+// resting fill here at `.btn.btn-adaptive` (0,2,0) so it always wins — same trick the
+// press uses. Mode-flip handled by pairing with [data-bs-theme="dark"].
+.btn.btn-adaptive {
+  --bs-btn-color: #fff;
+  --bs-btn-bg: var(--bs-dark);
+  --bs-btn-border-color: var(--nb-border-color);
+}
+[data-bs-theme="dark"] .btn.btn-adaptive {
+  --bs-btn-color: #000;
+  --bs-btn-bg: var(--bs-light);
+}
+.btn.btn-adaptive-inverse {
+  --bs-btn-color: #000;
+  --bs-btn-bg: var(--bs-light);
+  --bs-btn-border-color: var(--nb-border-color);
+}
+[data-bs-theme="dark"] .btn.btn-adaptive-inverse {
+  --bs-btn-color: #fff;
+  --bs-btn-bg: var(--bs-dark);
+}
+
+// Size variants keep the chunky proportions
+.btn-lg {
+  padding: 0.85rem 1.75rem;
+  font-size: 1.1rem;
+  @include nb-border($nb-border-width-lg);
+}
+
+.btn-sm {
+  padding: 0.35rem 0.8rem;
+  font-size: 0.85rem;
+}
+
+// Outline buttons: transparent fill, ink frame, fill-on-hover (no fade)
+[class*="btn-outline-"] {
+  background: transparent;
+  border-color: var(--nb-border-color);
+  color: var(--bs-body-color);
+
+  &:hover {
+    color: #111111;
+  }
+}
+.btn-outline-primary:hover { background: $primary; }
+.btn-outline-secondary:hover { background: $secondary; }
+.btn-outline-success:hover { background: $success; }
+.btn-outline-danger:hover { background: $danger; }
+.btn-outline-warning:hover { background: $warning; }
+.btn-outline-info:hover { background: $info; }
+
+// Link-style button stays flat (no border/shadow) but bold + underlined
+.btn-link {
+  border: 0;
+  box-shadow: none;
+  font-weight: 700;
+  text-decoration: underline;
+  text-underline-offset: 0.2em;
+
+  &:hover,
+  &:active {
+    transform: none;
+    box-shadow: none;
+  }
+}
+
+// NOTE: There are intentionally NO theme-specific accent button classes
+// (e.g. .btn-nb-yellow). Themes must restyle the STANDARD Bootstrap button
+// classes so the same markup works across themes (swap theme.id, done). Need a
+// yellow CTA? Use `.btn-warning` ($warning is the acid-yellow accent). Need other
+// accents? Use `.btn-primary` / `.btn-success` / etc. The base `.btn` rule above
+// already gives every variant the neobrutalist border + offset shadow + press.

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