@ponchia/ui 0.2.2 → 0.3.0

package/css/cards.css

@@ -1,336 +0,0 @@
-.metric-grid {
-  display: grid;
-  gap: 0.9rem;
-  grid-template-columns: repeat(3, minmax(0, 1fr));
-}
-
-.metric-tile,
-.principle-card,
-.surface-card,
-.archive-note,
-.project-card,
-.post-card,
-.essay-card,
-.project-teaser,
-.misc-card {
-  border-radius: var(--radius-lg);
-  padding: 0.9rem;
-}
-
-.metric-tile,
-.principle-card,
-.surface-card,
-.archive-note,
-.project-card,
-.post-card,
-.essay-card,
-.project-teaser,
-.misc-card,
-.project-pager__link {
-  transition:
-    background-color var(--duration-base) var(--ease-standard),
-    border-color var(--duration-base) var(--ease-standard),
-    box-shadow var(--duration-base) var(--ease-standard),
-    transform var(--duration-base) var(--ease-standard);
-}
-
-.metric-tile strong {
-  display: block;
-  font-family: var(--display);
-  font-size: 1.85rem;
-  letter-spacing: 0;
-  margin-block-start: 0.35rem;
-}
-
-.metric-tile p,
-.principle-card p,
-.surface-card p,
-.archive-note p {
-  margin: 0.55rem 0 0;
-}
-
-.project-card,
-.project-teaser,
-.misc-card {
-  display: grid;
-  gap: 0.9rem;
-}
-
-.notes-strip {
-  align-items: center;
-  border-block-end: 1px solid var(--line);
-  border-block-start: 1px solid var(--line);
-  display: grid;
-  gap: 1.2rem;
-  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
-  padding: 1rem 0;
-}
-
-.notes-strip__copy h2,
-.notes-strip__latest h3 {
-  margin: 0;
-}
-
-.notes-strip__copy p,
-.notes-strip__latest p {
-  margin: 0.45rem 0 0;
-}
-
-.notes-strip__latest {
-  border-inline-start: 1px solid var(--line);
-  display: grid;
-  gap: 0.45rem;
-  min-inline-size: 0;
-  padding-inline-start: 1.2rem;
-}
-
-.notes-strip__topline {
-  align-items: center;
-  display: flex;
-  gap: 0.7rem;
-  justify-content: space-between;
-}
-
-.project-card__header,
-.section-head,
-.post-card__meta,
-.post-header__meta,
-.project-teaser__topline,
-.project-page__headline,
-.misc-card__header {
-  align-items: flex-start;
-  display: flex;
-  gap: 0.7rem;
-  justify-content: space-between;
-}
-
-.section-head p {
-  margin: 0;
-  max-inline-size: 60ch;
-}
-
-.section-head--stacked {
-  display: grid;
-  gap: 0.6rem;
-}
-
-.project-card__category {
-  color: var(--text-dim);
-  margin-block-start: 0.15rem;
-}
-
-.project-category-label {
-  align-items: center;
-  display: inline-flex;
-  gap: 0.36rem;
-}
-
-.project-category-label__icon {
-  display: inline-block;
-  fill: none;
-  flex: 0 0 auto;
-  block-size: 1em;
-  stroke: currentColor;
-  stroke-linecap: round;
-  stroke-linejoin: round;
-  stroke-width: 2;
-  inline-size: 1em;
-}
-
-.project-card__summary,
-.project-card__detail,
-.project-teaser__summary,
-.misc-card__summary,
-.post-header__summary {
-  margin: 0;
-}
-
-.misc-card {
-  align-content: start;
-}
-
-.misc-card__header h2 {
-  font-size: 1.45rem;
-}
-
-.misc-card__status {
-  background: var(--panel-soft);
-  border: 1px solid var(--line);
-  border-radius: var(--radius-md);
-  color: var(--text);
-  flex: 0 0 auto;
-  font-size: 0.72rem;
-  font-weight: 700;
-  line-height: 1;
-  padding: 0.45rem 0.62rem;
-  text-transform: uppercase;
-}
-
-.misc-card__boundary {
-  border-block-start: 1px solid var(--line);
-  display: grid;
-  gap: 0.35rem;
-  padding-block-start: 0.85rem;
-}
-
-.misc-card__boundary p {
-  margin: 0;
-}
-
-.post-card__meta,
-.post-header__meta {
-  color: var(--text-dim);
-  flex-wrap: wrap;
-  font-size: 0.88rem;
-}
-
-.post-card h3 {
-  font-size: 1.45rem;
-  margin-block-start: 0.35rem;
-}
-
-.post-card p {
-  margin: 0.55rem 0 0;
-}
-
-.contact-stub-card {
-  max-inline-size: 48rem;
-}
-
-.project-pager {
-  display: grid;
-  gap: 1rem;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-}
-
-.project-pager--single {
-  grid-template-columns: minmax(0, 1fr);
-  justify-items: end;
-}
-
-.project-pager__link {
-  display: grid;
-  gap: 0.45rem;
-  background: var(--panel);
-  border: 1px solid var(--line);
-  border-radius: var(--radius-lg);
-  box-shadow: var(--shadow);
-  min-block-size: 6rem;
-  padding: 1rem 1.05rem;
-  inline-size: 100%;
-}
-
-.project-pager__link strong {
-  color: var(--text);
-  font-size: 1.2rem;
-}
-
-.project-pager__link--next {
-  text-align: end;
-}
-
-@media (hover: hover) {
-  .project-card:has(a:hover),
-  .post-card:has(a:hover),
-  .essay-card:has(a:hover),
-  .project-teaser:has(a:hover),
-  .misc-card:has(a:hover),
-  .project-pager__link:hover {
-    border-color: var(--line-strong);
-    box-shadow: var(--shadow-raised);
-    transform: translateY(-2px);
-  }
-}
-
-.project-card:focus-within,
-.post-card:focus-within,
-.essay-card:focus-within,
-.project-teaser:focus-within,
-.misc-card:focus-within,
-.project-pager__link:focus-visible {
-  border-color: var(--line-strong);
-}
-
-.tag-list {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 0.5rem;
-  list-style: none;
-  margin: 0;
-  padding: 0;
-}
-
-.tag-list li {
-  background: var(--panel-soft);
-  border: 1px solid var(--line);
-  border-radius: var(--radius-md);
-  color: var(--text-soft);
-  font-size: 0.8rem;
-  padding: 0.32rem 0.62rem;
-  transition:
-    background-color var(--duration-fast) var(--ease-standard),
-    border-color var(--duration-fast) var(--ease-standard),
-    color var(--duration-fast) var(--ease-standard);
-}
-
-.tag-list--project li {
-  color: var(--text);
-}
-
-.tag-list--compact {
-  gap: 0.38rem;
-}
-
-.tag-list--compact li {
-  font-size: 0.72rem;
-  padding: 0.25rem 0.5rem;
-}
-
-.tag-list--compact li:first-child {
-  background: var(--accent-soft);
-  border-color: color-mix(in srgb, var(--accent) 42%, var(--line));
-  color: var(--accent);
-}
-
-.focus-list,
-.link-list {
-  display: grid;
-  gap: 0.75rem;
-  margin: 0;
-  padding-inline-start: 1.1rem;
-}
-
-.focus-list--dense {
-  margin-block-start: 0.2rem;
-}
-
-.focus-list li,
-.link-list li {
-  color: var(--text-soft);
-}
-
-.profile-link-list {
-  display: grid;
-  gap: 0.75rem;
-  margin: 1rem 0 0;
-}
-
-.profile-link-list div {
-  border-block-start: 1px solid var(--line);
-  display: grid;
-  gap: 0.25rem;
-  padding-block-start: 0.75rem;
-}
-
-.profile-link-list dd {
-  color: var(--text);
-  margin: 0;
-}
-
-.profile-link-list a,
-.link-list a {
-  color: var(--text);
-  text-decoration: underline;
-  text-decoration-color: color-mix(in srgb, var(--accent) 50%, transparent);
-  text-underline-offset: 0.22rem;
-}

package/css/index.css

@@ -1,5 +0,0 @@
-/* @ponchia/ui — full bundle: core + responsive breakpoint overrides.
-   responsive.css joins the same `bronto` layer and, being imported last,
-   wins the within-layer cascade over the base rules it overrides. */
-@import url('./core.css');
-@import url('./responsive.css') layer(bronto);

package/css/layout.css

@@ -1,219 +0,0 @@
-.site-background {
-  inset: 0;
-  overflow: hidden;
-  pointer-events: none;
-  position: fixed;
-  z-index: 0;
-}
-
-.site-background__grid {
-  position: absolute;
-  display: none;
-}
-
-.site-shell {
-  margin: 0 auto;
-  max-inline-size: 1320px;
-  padding: 0.9rem;
-  position: relative;
-  z-index: 1;
-}
-
-.site-header,
-.site-footer,
-.hero,
-.page-head,
-.project-card,
-.post-card,
-.post-shell,
-.focus-panel,
-.surface-card,
-.essay-card,
-.metric-tile,
-.principle-card,
-.archive-note,
-.signal-panel,
-.problem-panel,
-.callout,
-.aside-block,
-.quote-block,
-.timeline,
-.worklog-summary,
-.project-teaser,
-.misc-card {
-  background: var(--panel);
-  border: 1px solid var(--line);
-  box-shadow: var(--shadow);
-}
-
-.site-header {
-  align-items: center;
-  background: var(--panel);
-  border-radius: var(--radius-lg);
-  display: flex;
-  gap: 1rem;
-  justify-content: space-between;
-  margin: 0 auto 0.9rem;
-  padding: 0.55rem 0.65rem;
-  position: sticky;
-  inset-block-start: 0.65rem;
-  z-index: 10;
-}
-
-.site-header__actions {
-  align-items: center;
-  display: flex;
-  gap: 0.7rem;
-}
-
-.site-mark {
-  align-items: center;
-  display: inline-flex;
-  font-family: var(--display);
-  font-size: 0.9rem;
-  gap: 0.35rem;
-  letter-spacing: 0;
-  text-transform: uppercase;
-}
-
-.site-mark__primary {
-  color: var(--text);
-}
-
-.site-main {
-  display: grid;
-  gap: 1.35rem;
-  grid-template-columns: minmax(0, 1fr);
-}
-
-.site-footer {
-  align-items: center;
-  border-radius: var(--radius-lg);
-  display: flex;
-  gap: 1rem;
-  justify-content: space-between;
-  margin-block-start: 1rem;
-  padding: 0.85rem 1rem;
-}
-
-.site-footer p {
-  font-size: 0.9rem;
-  margin: 0;
-}
-
-.site-footer__copy {
-  display: grid;
-  gap: 0.25rem;
-}
-
-.site-footer__links {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 0.7rem;
-  justify-content: flex-end;
-}
-
-.site-footer__links a {
-  color: var(--text);
-  font-size: 0.86rem;
-  text-decoration: underline;
-  text-decoration-color: color-mix(in srgb, var(--accent) 42%, transparent);
-  text-underline-offset: 0.2rem;
-  transition:
-    color var(--duration-fast) var(--ease-standard),
-    text-decoration-color var(--duration-fast) var(--ease-standard);
-}
-
-.site-footer__links a:hover {
-  color: var(--accent-strong);
-  text-decoration-color: var(--accent-strong);
-}
-
-.hero,
-.page-head,
-.post-shell {
-  border-radius: var(--radius-xl);
-  max-inline-size: 100%;
-  overflow: hidden;
-  padding: 1.35rem;
-  position: relative;
-  inline-size: 100%;
-}
-
-.hero {
-  display: grid;
-  gap: 1.6rem;
-  grid-template-columns: minmax(0, 1.2fr) minmax(320px, 0.95fr);
-}
-
-.hero::before,
-.page-head::before,
-.post-shell::before {
-  display: none;
-}
-
-.hero > *,
-.page-head > *,
-.post-shell > * {
-  position: relative;
-  z-index: 1;
-}
-
-.hero__copy,
-.hero__panel,
-.panel-stack,
-.card-stack,
-.home-section,
-.page-section {
-  display: grid;
-  gap: 1rem;
-  grid-template-columns: minmax(0, 1fr);
-}
-
-.hero__panel {
-  align-self: start;
-}
-
-.home-section,
-.page-section {
-  padding-block: 0.2rem;
-}
-
-.profile-grid,
-.project-teaser-grid,
-.project-detail-grid,
-.project-grid,
-.home-grid,
-.essay-grid,
-.principle-grid,
-.project-detail-layout,
-.misc-grid {
-  display: grid;
-  gap: 1rem;
-}
-
-.profile-grid,
-.project-detail-grid {
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-}
-
-.project-detail-layout {
-  align-items: start;
-  gap: 1.6rem;
-  grid-template-columns: minmax(0, 1.35fr) minmax(300px, 0.65fr);
-}
-
-.project-grid,
-.project-teaser-grid,
-.home-grid,
-.essay-grid {
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-}
-
-.principle-grid {
-  grid-template-columns: repeat(3, minmax(0, 1fr));
-}
-
-.misc-grid {
-  grid-template-columns: repeat(3, minmax(0, 1fr));
-}

package/css/responsive.css

@@ -1,157 +0,0 @@
-/* ==========================================================================
-   responsive — breakpoint overrides
-   Keyframes and reduced-motion handling now live in motion.css.
-   ========================================================================== */
-
-@media (max-width: 1120px) {
-  .hero,
-  .profile-grid,
-  .project-detail-grid,
-  .project-detail-layout,
-  .project-artifact {
-    grid-template-columns: 1fr;
-  }
-
-  .project-side {
-    position: static;
-  }
-
-  .metric-grid,
-  .principle-grid {
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-  }
-}
-
-@media (max-width: 820px) {
-  .site-shell {
-    padding: 0.9rem;
-  }
-
-  .hero,
-  .page-head,
-  .post-shell {
-    padding: 1.25rem;
-  }
-
-  .site-footer,
-  .section-head,
-  .signal-panel__readout,
-  .project-card__header,
-  .post-card__meta,
-  .post-header__meta,
-  .project-teaser__topline,
-  .project-page__headline {
-    align-items: flex-start;
-    flex-direction: column;
-  }
-
-  .site-footer__links {
-    justify-content: flex-start;
-  }
-
-  .site-nav--desktop {
-    display: none;
-  }
-
-  .site-header__actions {
-    align-items: center;
-    margin-inline-start: auto;
-  }
-
-  .site-menu {
-    display: block;
-  }
-
-  .site-menu[open] {
-    min-inline-size: 0;
-  }
-
-  .site-menu[open] .site-nav--mobile {
-    display: grid;
-  }
-
-  .site-nav--mobile {
-    background: var(--panel-strong);
-    border: 1px solid var(--line);
-    border-radius: var(--radius-lg);
-    box-shadow: var(--shadow-raised);
-    display: none;
-    gap: 0.35rem;
-    margin-block-start: 0;
-    padding: 0.6rem;
-    position: absolute;
-    inset-inline-end: 0;
-    inset-block-start: calc(100% + 0.7rem);
-    inline-size: min(12rem, calc(100vw - 1.8rem));
-    z-index: 20;
-  }
-
-  .site-nav--mobile a {
-    inline-size: 100%;
-  }
-
-  .hero--home .problem-panel {
-    border-inline-start: 0;
-    border-block-start: 1px solid var(--line);
-    padding: 1rem 0 0;
-  }
-
-  .metric-grid,
-  .project-grid,
-  .project-teaser-grid,
-  .misc-grid,
-  .home-grid,
-  .essay-grid,
-  .principle-grid,
-  .profile-grid,
-  .project-detail-grid,
-  .project-pager {
-    grid-template-columns: 1fr;
-  }
-
-  .notes-strip {
-    grid-template-columns: 1fr;
-  }
-
-  .notes-strip__latest {
-    border-inline-start: 0;
-    border-block-start: 1px solid var(--line);
-    padding-inline-start: 0;
-    padding-block-start: 1rem;
-  }
-
-  .hero--home .hero__panel {
-    display: grid;
-  }
-
-  .dot-field {
-    grid-template-columns: repeat(8, minmax(0, 1fr));
-  }
-
-  h1 {
-    font-size: 2.65rem;
-  }
-
-  .page-head h1 {
-    font-size: 2.25rem;
-  }
-
-  .page-head h1,
-  .post-header h1 {
-    overflow-wrap: anywhere;
-  }
-
-  h2 {
-    font-size: 1.9rem;
-  }
-}
-
-@media (max-width: 460px) {
-  .theme-toggle__prefix {
-    display: none;
-  }
-
-  .theme-toggle__button {
-    min-inline-size: 4.2rem;
-  }
-}