b4um_generators 0.1.0

data/lib/generators/b4um/install/templates/b4um/badges.css

@@ -0,0 +1,43 @@
+.b4um-badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+
+  padding: 0.3rem 0.65rem;
+
+  font-size: 0.8rem;
+  font-weight: 600;
+  line-height: 1;
+
+  color: var(--b4um-text);
+  background-color: var(--b4um-surface-soft);
+
+  border: 1px solid var(--b4um-border-light);
+  border-radius: 999px;
+
+  white-space: nowrap;
+}
+
+.b4um-badge--success {
+  color: var(--b4um-text);
+  background-color: var(--b4um-success-background);
+  border-color: var(--b4um-success-border);
+}
+
+.b4um-badge--warning {
+  color: var(--b4um-warning);
+  background-color: var(--b4um-warning-background);
+  border-color: var(--b4um-warning-border);
+}
+
+.b4um-badge--danger {
+  color: var(--b4um-danger);
+  background-color: var(--b4um-danger-background);
+  border-color: var(--b4um-danger-soft-border);
+}
+
+.b4um-badge--muted {
+  color: var(--b4um-text-muted);
+  background-color: var(--b4um-neutral-background);
+  border-color: var(--b4um-border-light);
+}

data/lib/generators/b4um/install/templates/b4um/base.css

@@ -0,0 +1,42 @@
+/* -------------------------------------------------------
+   Base
+------------------------------------------------------- */
+
+html {
+  min-height: 100%;
+}
+
+body {
+  display: flex;
+  flex-direction: column;
+
+  min-height: 100vh;
+  margin: 0;
+
+  background-color: var(--b4um-page-background);
+  color: var(--b4um-text);
+
+  font-family: Verdana, Helvetica, Arial, sans-serif;
+  font-size: 14px;
+}
+
+main {
+  flex: 1 0 auto;
+}
+
+.b4um-footer {
+  flex-shrink: 0;
+}
+
+a {
+  color: var(--b4um-link);
+}
+
+a:active,
+a:visited {
+  color: var(--b4um-link-visited);
+}
+
+a img {
+  border: none;
+}

data/lib/generators/b4um/install/templates/b4um/callouts.css

@@ -0,0 +1,58 @@
+/* -------------------------------------------------------
+   Callouts
+------------------------------------------------------- */
+
+.b4um-callout {
+  padding: 1rem 1.25rem;
+
+  color: var(--b4um-text);
+  background-color: var(--b4um-surface-soft);
+
+  border: 1px solid var(--b4um-border);
+  border-left: 4px solid var(--b4um-primary);
+  border-radius: var(--b4um-radius);
+}
+
+.b4um-callout__title {
+  margin: 0;
+
+  font-size: 1rem;
+  font-weight: 600;
+}
+
+.b4um-callout__text {
+  margin: 0.4rem 0 0;
+
+  color: var(--b4um-text-secondary);
+  line-height: 1.5;
+}
+
+/* Info */
+
+.b4um-callout--info {
+  border-left-color: var(--b4um-primary);
+}
+
+/* Success */
+
+.b4um-callout--success {
+  background-color: var(--b4um-success-background);
+  border-color: var(--b4um-success-border);
+  border-left-color: var(--b4um-success-border);
+}
+
+/* Warning */
+
+.b4um-callout--warning {
+  background-color: var(--b4um-warning-background);
+  border-color: var(--b4um-warning-border);
+  border-left-color: var(--b4um-warning);
+}
+
+/* Danger */
+
+.b4um-callout--danger {
+  background-color: var(--b4um-danger-background);
+  border-color: var(--b4um-danger-soft-border);
+  border-left-color: var(--b4um-danger);
+}

data/lib/generators/b4um/install/templates/b4um/cards.css

@@ -0,0 +1,401 @@
+/* -------------------------------------------------------
+   Bento grid
+------------------------------------------------------- */
+
+.b4um-grid {
+  display: grid;
+  grid-template-columns: repeat(12, minmax(0, 1fr));
+  gap: 20px;
+
+  width: 100%;
+  margin: 32px 0;
+}
+
+/* -------------------------------------------------------
+   Card grid
+------------------------------------------------------- */
+
+.b4um-card-grid {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 20px;
+
+  width: 100%;
+  margin: 32px 0;
+}
+
+.b4um-card-grid > .b4um-card {
+  display: flex;
+  flex-direction: column;
+
+  grid-column: auto;
+  grid-row: auto;
+
+  min-width: 0;
+}
+
+.b4um-card-grid > .b4um-card .b4um-card__actions {
+  margin-top: auto;
+  padding-top: 22px;
+}
+
+/* -------------------------------------------------------
+   Cards
+------------------------------------------------------- */
+
+.b4um-card {
+  grid-column: span 4;
+
+  min-width: 0;
+  padding: 28px;
+
+  box-sizing: border-box;
+
+  border: 1px solid var(--b4um-border-light);
+  border-radius: var(--b4um-radius);
+
+  background-color: var(--b4um-surface);
+  box-shadow: 0 6px 20px var(--b4um-primary-shadow-soft);
+
+  transition:
+    border-color 0.18s ease,
+    box-shadow 0.18s ease,
+    transform 0.18s ease;
+}
+
+.b4um-card:hover {
+  border-color: var(--b4um-border);
+  box-shadow: 0 10px 30px var(--b4um-primary-shadow);
+}
+
+/* -------------------------------------------------------
+   Card sizes
+------------------------------------------------------- */
+
+.b4um-card--wide {
+  grid-column: span 8;
+}
+
+.b4um-card--large {
+  grid-column: span 8;
+  grid-row: span 2;
+}
+
+.b4um-card--full {
+  grid-column: 1 / -1;
+}
+
+/* -------------------------------------------------------
+   Card content
+------------------------------------------------------- */
+
+.b4um-card__eyebrow {
+  margin: 0 0 8px;
+
+  color: var(--b4um-primary);
+
+  font-size: 0.8rem;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.b4um-card__title {
+  margin: 0;
+
+  color: var(--b4um-text);
+
+  font-size: 1.35rem;
+  line-height: 1.25;
+}
+
+.b4um-card__text {
+  margin: 12px 0 0;
+
+  color: var(--b4um-text-secondary);
+
+  line-height: 1.6;
+}
+
+.b4um-card__actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+
+  margin-top: 22px;
+}
+
+/* -------------------------------------------------------
+   Card media
+------------------------------------------------------- */
+
+.b4um-card__media {
+  margin: -28px -28px 24px;
+
+  overflow: hidden;
+
+  border-radius: var(--b4um-radius) var(--b4um-radius) 0 0;
+}
+
+.b4um-card__image {
+  display: block;
+
+  width: 100%;
+  height: 220px;
+
+  object-fit: cover;
+}
+
+.b4um-card--large .b4um-card__image {
+  height: 320px;
+}
+
+/* -------------------------------------------------------
+   Soft card
+------------------------------------------------------- */
+
+.b4um-card--soft {
+  border-color: transparent;
+
+  background-color: var(--b4um-surface-soft);
+
+  box-shadow: none;
+}
+
+.b4um-card--soft:hover {
+  border-color: transparent;
+
+  box-shadow: 0 8px 24px var(--b4um-primary-shadow-soft);
+}
+
+/* -------------------------------------------------------
+   List
+------------------------------------------------------- */
+
+.b4um-list {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+
+  width: 100%;
+  margin: 32px 0;
+}
+
+.b4um-list__item {
+  display: flex;
+  align-items: center;
+  gap: 24px;
+
+  width: 100%;
+  min-width: 0;
+  padding: 20px 24px;
+
+  box-sizing: border-box;
+
+  border: 1px solid var(--b4um-border-light);
+  border-radius: var(--b4um-radius);
+
+  background-color: var(--b4um-surface);
+  box-shadow: 0 4px 14px var(--b4um-primary-shadow-soft);
+
+  transition:
+    border-color 0.18s ease,
+    box-shadow 0.18s ease;
+}
+
+.b4um-list__item:hover {
+  border-color: var(--b4um-border);
+  box-shadow: 0 8px 22px var(--b4um-primary-shadow);
+}
+
+.b4um-list__content {
+  flex: 1 1 auto;
+
+  min-width: 0;
+}
+
+.b4um-list__actions {
+  flex: 0 0 auto;
+}
+
+/* -------------------------------------------------------
+   Alternating
+------------------------------------------------------- */
+
+.b4um-alternating {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+
+  width: 100%;
+  margin: 32px 0;
+}
+
+.b4um-alternating__item {
+  display: grid;
+  grid-template-columns: minmax(0, 3fr) minmax(180px, 1fr);
+  align-items: stretch;
+  gap: 0;
+
+  min-width: 0;
+  overflow: hidden;
+
+  border: 1px solid var(--b4um-border-light);
+  border-radius: var(--b4um-radius);
+
+  background-color: var(--b4um-surface);
+  box-shadow: 0 6px 20px var(--b4um-primary-shadow-soft);
+
+  transition:
+    border-color 0.18s ease,
+    box-shadow 0.18s ease;
+}
+
+.b4um-alternating__item:hover {
+  border-color: var(--b4um-border);
+  box-shadow: 0 10px 30px var(--b4um-primary-shadow);
+}
+
+.b4um-alternating__content {
+  min-width: 0;
+  padding: 28px;
+}
+
+.b4um-alternating__actions {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  padding: 28px;
+
+  border-left: 1px solid var(--b4um-border-light);
+  background-color: var(--b4um-surface-soft);
+}
+
+.b4um-alternating__actions .button {
+  width: 100%;
+}
+
+.b4um-alternating__item--reverse {
+  grid-template-columns: minmax(180px, 1fr) minmax(0, 3fr);
+}
+
+.b4um-alternating__item--reverse .b4um-alternating__content {
+  order: 2;
+}
+
+.b4um-alternating__item--reverse .b4um-alternating__actions {
+  order: 1;
+
+  border-right: 1px solid var(--b4um-border-light);
+  border-left: 0;
+}
+
+/* -------------------------------------------------------
+   Responsive
+------------------------------------------------------- */
+
+@media (max-width: 900px) {
+  .b4um-card-grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .b4um-card,
+  .b4um-card--wide,
+  .b4um-card--large {
+    grid-column: span 6;
+  }
+
+  .b4um-card--full {
+    grid-column: 1 / -1;
+  }
+}
+
+@media (max-width: 600px) {
+  .b4um-card-grid {
+    grid-template-columns: minmax(0, 1fr);
+    gap: 16px;
+
+    margin: 24px 0;
+  }
+
+  .b4um-list {
+    gap: 10px;
+
+    margin: 24px 0;
+  }
+
+  .b4um-list__item {
+    flex-direction: column;
+    align-items: stretch;
+    gap: 16px;
+
+    padding: 20px;
+  }
+
+  .b4um-list__actions {
+    display: flex;
+  }
+
+  .b4um-list__actions .button {
+    width: 100%;
+  }
+
+  .b4um-alternating {
+    gap: 16px;
+
+    margin: 24px 0;
+  }
+
+  .b4um-alternating__item,
+  .b4um-alternating__item--reverse {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .b4um-alternating__content,
+  .b4um-alternating__item--reverse .b4um-alternating__content {
+    order: 1;
+
+    padding: 22px;
+  }
+
+  .b4um-alternating__actions,
+  .b4um-alternating__item--reverse .b4um-alternating__actions {
+    order: 2;
+
+    padding: 0 22px 22px;
+
+    border: 0;
+    background-color: transparent;
+  }
+
+  .b4um-grid {
+    grid-template-columns: minmax(0, 1fr);
+    gap: 16px;
+
+    margin: 24px 0;
+  }
+
+  .b4um-card,
+  .b4um-card--wide,
+  .b4um-card--large,
+  .b4um-card--full {
+    grid-column: 1;
+    grid-row: auto;
+
+    padding: 22px;
+
+    border-radius: var(--b4um-radius);
+  }
+
+  .b4um-card__media {
+    margin: -22px -22px 20px;
+
+    border-radius: var(--b4um-radius) var(--b4um-radius) 0 0;
+  }
+
+  .b4um-card__image,
+  .b4um-card--large .b4um-card__image {
+    height: 220px;
+  }
+}

data/lib/generators/b4um/install/templates/b4um/comments.css

@@ -0,0 +1,52 @@
+.b4um-comments {
+  margin-top: 2rem;
+}
+
+.b4um-comments__list {
+  display: grid;
+  gap: 0;
+}
+
+.b4um-comments__item {
+  padding: 1.25rem 0;
+  border-bottom: 1px solid var(--b4um-border);
+}
+
+.b4um-comments__item:first-child {
+  padding-top: 0;
+}
+
+.b4um-comments__body {
+  margin: 0;
+}
+
+.b4um-comments__body > :first-child {
+  margin-top: 0;
+}
+
+.b4um-comments__body > :last-child {
+  margin-bottom: 0;
+}
+
+.b4um-comments__meta {
+  margin-top: 0.5rem;
+  font-size: 0.875rem;
+  color: var(--b4um-text-muted);
+}
+
+.b4um-comments__actions {
+  margin-top: 0.75rem;
+}
+
+.b4um-comments__empty {
+  margin: 0;
+  color: var(--b4um-text-muted);
+}
+
+.b4um-comments__form {
+  margin-top: 2rem;
+}
+
+.b4um-comments__form h3 {
+  margin-top: 0;
+}

data/lib/generators/b4um/install/templates/b4um/cookie-consent.css

@@ -0,0 +1,83 @@
+/* -------------------------------------------------------
+   Cookie Consent
+------------------------------------------------------- */
+
+.b4um-cookie-consent {
+  position: fixed;
+  right: 1rem;
+  bottom: 1rem;
+  left: 1rem;
+
+  z-index: 1000;
+
+  display: flex;
+  justify-content: center;
+
+  pointer-events: none;
+}
+
+.b4um-cookie-consent[hidden] {
+  display: none;
+}
+
+.b4um-cookie-consent__content {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1.5rem;
+
+  width: 100%;
+  max-width: 960px;
+
+  padding: 1rem 1.25rem;
+
+  color: var(--b4um-text);
+  background-color: var(--b4um-surface);
+
+  border: 1px solid var(--b4um-border);
+  border-radius: var(--b4um-radius);
+
+  box-shadow: 0 12px 32px rgb(0 0 0 / 18%);
+
+  pointer-events: auto;
+}
+
+.b4um-cookie-consent__text {
+  flex: 1;
+
+  margin: 0;
+
+  line-height: 1.5;
+}
+
+.b4um-cookie-consent__actions {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+
+  flex-shrink: 0;
+}
+
+@media (max-width: 640px) {
+  .b4um-cookie-consent {
+    right: 0.75rem;
+    bottom: 0.75rem;
+    left: 0.75rem;
+  }
+
+  .b4um-cookie-consent__content {
+    flex-direction: column;
+    align-items: stretch;
+    gap: 1rem;
+
+    padding: 1rem;
+  }
+
+  .b4um-cookie-consent__actions {
+    width: 100%;
+  }
+
+  .b4um-cookie-consent__actions .button {
+    flex: 1;
+  }
+}

data/lib/generators/b4um/install/templates/b4um/empty-state.css

@@ -0,0 +1,26 @@
+.b4um-empty-state {
+  grid-column: 1 / -1;
+
+  padding: 3rem 2rem;
+
+  text-align: center;
+
+  background: var(--b4um-surface);
+  border: 1px dashed var(--b4um-border);
+  border-radius: var(--b4um-radius);
+}
+
+.b4um-empty-state__title {
+  margin: 0;
+
+  font-size: 1.25rem;
+  font-weight: 600;
+}
+
+.b4um-empty-state__text {
+  max-width: 34rem;
+
+  margin: 0.75rem auto 0;
+
+  color: var(--b4um-text-muted);
+}