@giancarlosgza/blog-layer 0.0.0-stage → 0.1.0

package/app/assets/scss/pages/core/_post-article-layout.scss

@@ -0,0 +1,198 @@
+@use '@colorffy/css/scss/abstracts/mixins' as m;
+
+@layer pages {
+  // Centered reading column, side rails from xl
+  .post-article-grid {
+    --_post-column: 42rem;
+
+    display: grid;
+    grid-template-columns: minmax(0, 1fr);
+
+    @include m.media-breakpoint-up(lg) {
+      grid-template-columns: minmax(0, 1fr) minmax(0, var(--_post-column)) minmax(0, 1fr);
+      column-gap: 2.5rem;
+
+      & > * {
+        grid-column: 2;
+        grid-row: 1;
+      }
+    }
+
+    @include m.media-breakpoint-up(xxl) {
+      --_post-column: 45rem;
+
+      column-gap: 4rem;
+    }
+  }
+
+  // Shrinkable track for wide code and widgets
+  .post-article-main {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .post-article-share-inline {
+    @include m.media-breakpoint-up(xl) {
+      display: none !important;
+    }
+  }
+
+  .post-article-rail {
+    display: none;
+
+    @include m.media-breakpoint-up(xl) {
+      position: sticky;
+      top: calc(var(--cffy-navbar-min-height, 4.25rem) + 1.5rem);
+      align-self: start;
+      display: flex;
+      flex-direction: column;
+    }
+  }
+
+  .post-article-rail-start {
+    @include m.media-breakpoint-up(xl) {
+      grid-column: 1;
+      justify-self: end;
+      align-items: center;
+      gap: var(--cffy-space-8);
+    }
+  }
+
+  .post-article-rail-divider {
+    inline-size: 1px;
+    block-size: 1.5rem;
+    background: var(--cffy-outline-surface);
+  }
+
+  .post-article-rail-end {
+    @include m.media-breakpoint-up(xl) {
+      grid-column: 3;
+      justify-self: start;
+      inline-size: 100%;
+      max-inline-size: 14rem;
+      gap: var(--cffy-space-24);
+    }
+  }
+
+  .post-article-rail-group {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .post-article-rail-label {
+    padding-block-end: var(--cffy-space-8);
+    font-family: var(--cffy-font-code);
+    font-size: var(--cffy-fs-4xs);
+    letter-spacing: .05em;
+    text-transform: uppercase;
+    color: var(--cffy-muted-a10);
+  }
+
+  .post-article-rail-title {
+    padding-block-end: var(--cffy-space-8);
+    font-size: var(--cffy-fs-xs);
+    font-weight: var(--cffy-fw-600);
+    color: var(--cffy-on-background);
+
+    &:is(:hover, :focus-visible) {
+      text-decoration: underline;
+    }
+  }
+
+  // Compact links, a dot marks the current section
+  .post-article-rail-link {
+    display: flex;
+    align-items: flex-start;
+    gap: var(--cffy-space-8);
+    padding-block: var(--cffy-space-6);
+    font-size: var(--cffy-fs-xs);
+    line-height: 1.4;
+    text-align: start;
+    color: var(--cffy-muted-a10);
+    transition: color 200ms var(--cffy-ease-decelerate);
+
+    &.has-dot::before {
+      content: '';
+      flex-shrink: 0;
+      inline-size: 6px;
+      block-size: 6px;
+      margin-block-start: .5em;
+      border-radius: calc(var(--cffy-radius-xl) * 2);
+      background: transparent;
+      transition: background-color 200ms var(--cffy-ease-decelerate);
+    }
+
+    &.is-sub {
+      padding-inline-start: var(--cffy-space-12);
+    }
+
+    &:is(:hover, :focus-visible),
+    &.is-active {
+      color: var(--cffy-on-background);
+    }
+
+    &.is-active {
+      font-weight: var(--cffy-fw-500);
+
+      &::before {
+        background: var(--cffy-secondary-a50);
+      }
+    }
+  }
+
+  span.post-article-rail-link {
+    cursor: default;
+  }
+
+  .post-article-rail-number {
+    flex-shrink: 0;
+    min-inline-size: 1rem;
+    font-family: var(--cffy-font-code);
+    font-size: var(--cffy-fs-3xs);
+    line-height: 1.8;
+  }
+
+  .post-article-mark {
+    --_mark-size: 1.5rem;
+  }
+
+  .post-article-lead {
+    font-size: var(--cffy-fs-lg);
+    line-height: 1.5;
+    max-inline-size: 60ch;
+  }
+
+  // Wider than the reading column, centered on it
+  .post-article-cover {
+    display: block;
+    inline-size: min(100%, 60rem);
+    margin-inline: auto;
+    block-size: auto;
+    aspect-ratio: 1200 / 630;
+    object-fit: cover;
+    border-radius: var(--corner-radius-card-increased);
+  }
+
+  .post-article-toc-mobile {
+    @include m.media-breakpoint-up(xl) {
+      display: none;
+    }
+  }
+
+  // Parts in the xl rail, summary inline
+  .post-article-series-parts {
+    @include m.media-breakpoint-up(xl) {
+      display: none;
+    }
+  }
+
+  // Part number in the icon slot
+  .post-article-series-number {
+    min-inline-size: 1.75rem;
+    text-align: center;
+    color: var(--_list-icon-color);
+  }
+
+  .post-article-toc-sub {
+    padding-inline-start: 1.25rem;
+  }
+}

package/app/assets/scss/pages/core/_post-layout.scss

@@ -0,0 +1,286 @@
+@use '../../abstracts/variables' as lv;
+@use '../../abstracts/type-scale' as t;
+
+@layer pages {
+  // Home hero lead under the display title
+  .section-hero-lead {
+    max-inline-size: 56ch;
+    margin-inline: auto;
+  }
+
+  // Tag filter: wraps on desktop, scrolls on narrow screens
+  .post-filter-chips {
+    @media (width < 768px) {
+      flex-wrap: nowrap;
+      max-inline-size: 100%;
+      overflow-x: auto;
+      scrollbar-width: none;
+      padding-block: .25rem;
+
+      & > * {
+        flex-shrink: 0;
+      }
+    }
+  }
+
+  // Post card
+  .card-post {
+    --_card-bg-color: transparent;
+    --cffy-card-padding-inline: 0;
+    --_card-post-radius: var(--corner-radius-card-increased);
+    --_card-post-easing-in: #{lv.$easing-spring-elastic};
+    --_card-post-easing-duration: 900ms;
+
+    height: 100%;
+    border-radius: 0;
+
+    &:is(:hover) {
+      --_card-post-radius: var(--corner-radius-card);
+    }
+
+    & .card-header {
+      padding: 0;
+      border-radius: var(--_card-post-radius);
+      transition: border-radius var(--_card-post-easing-duration) var(--_card-post-easing-in);
+    }
+
+    & .card-post-cover {
+      height: 12rem;
+      border-radius: var(--_card-post-radius);
+      background: var(--cffy-surface-body-pane);
+      overflow: clip;
+      transition: border-radius var(--_card-post-easing-duration) var(--_card-post-easing-in);
+
+      & img {
+        display: block;
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+        transition: scale 400ms var(--cffy-ease-overshoot-soft);
+      }
+    }
+
+    & .card-body {
+      padding-block: var(--cffy-space-20) 0;
+    }
+
+    & .card-post-details {
+      display: grid;
+      align-content: start;
+      row-gap: var(--cffy-space-12);
+    }
+
+    & .card-post-meta {
+      display: flex;
+      flex-wrap: wrap;
+      align-items: center;
+      gap: var(--cffy-space-8) var(--cffy-space-12);
+
+      & .badge {
+        margin-inline: 0;
+      }
+    }
+
+    & .card-post-title {
+      text-wrap: balance;
+    }
+
+    & .card-post-excerpt {
+      line-clamp: 2;
+      -webkit-line-clamp: 2;
+      display: -webkit-box;
+      -webkit-box-orient: vertical;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
+    & .card-post-tags {
+      display: flex;
+      flex-wrap: wrap;
+      align-items: flex-start;
+      gap: var(--cffy-space-8);
+    }
+
+    // Links above the stretched title link
+    & :is(.card-post-chip, .card-post-author) {
+      position: relative;
+      z-index: 2;
+    }
+
+    & .card-post-chip {
+      --_badge-border-color: transparent;
+
+      margin-inline: 0;
+      transition: background-color 200ms var(--cffy-ease-decelerate);
+    }
+
+    & .card-post-author:is(:hover, :focus-visible) {
+      text-decoration: underline;
+    }
+
+    // Title link stretched over the card
+    & .card-post-link {
+      position: static;
+      color: inherit;
+      font: inherit;
+      letter-spacing: inherit;
+
+      &::after {
+        content: '';
+        position: absolute;
+        inset: 0;
+        z-index: 1;
+        width: auto;
+        height: auto;
+        background: none;
+        border-radius: var(--_card-post-radius);
+        scale: none;
+        transition: none;
+      }
+
+      &:focus-visible {
+        outline: none;
+      }
+
+      & > span {
+        text-decoration: underline;
+        text-decoration-color: transparent;
+        text-decoration-thickness: 2px;
+        text-underline-offset: .2em;
+        transition: text-decoration-color 200ms var(--cffy-ease-decelerate);
+      }
+    }
+
+    &:is(:hover) {
+      & .card-post-cover img {
+        scale: 1.05;
+      }
+
+      & .card-post-link > span {
+        text-decoration-color: currentColor;
+      }
+    }
+
+    &:has(.card-post-link:focus-visible) {
+      outline: var(--cffy-border-width-md) solid var(--cffy-primary-a10);
+      outline-offset: 4px;
+      border-radius: var(--_card-post-radius);
+    }
+
+    &:is(.card-post-skeleton) {
+      pointer-events: none;
+      user-select: none;
+
+      & .card-post-cover {
+        background: rgb(from var(--cffy-muted-base-fixed) r g b / 0.5);
+        animation: skeleton-loading 2500ms both alternate ease-in-out infinite;
+      }
+    }
+
+    // Featured: cover left, details right (stacked below md)
+    &:is(.wide-post) {
+      width: 100%;
+
+      & .card-post-cover {
+        height: auto;
+        aspect-ratio: 1200 / 630;
+      }
+
+      & .card-post-title {
+        font-size: t.$fs-hub-title-long;
+        line-height: 1.05;
+      }
+
+      @media (min-width: 768px) {
+        display: grid;
+        grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
+        align-items: center;
+        gap: var(--cffy-space-32);
+
+        & > .card-body {
+          padding: 0;
+        }
+
+        & .card-post-details {
+          row-gap: var(--cffy-space-16);
+        }
+
+        & .card-post-excerpt {
+          line-clamp: 3;
+          -webkit-line-clamp: 3;
+        }
+      }
+
+      @media (min-width: 1200px) {
+        gap: var(--cffy-space-48);
+      }
+    }
+  }
+
+  // Subgrid aligns cover and detail rows across the grid
+  .blog-post-grid,
+  .blog-post-skeleton-grid {
+    grid-auto-rows: auto;
+    position: relative;
+
+    & > article {
+      grid-row: span 5;
+      display: grid;
+      grid-template-rows: subgrid;
+      row-gap: 0;
+
+      & > .card-post {
+        grid-row: span 5;
+        display: grid;
+        grid-template-rows: subgrid;
+        row-gap: 0;
+
+        & > .card-header {
+          grid-row: span 1;
+        }
+
+        & > .card-body {
+          grid-row: span 4;
+          display: grid;
+          grid-template-rows: subgrid;
+          row-gap: 0;
+
+          & > .card-post-details {
+            grid-row: span 4;
+            row-gap: var(--cffy-space-12);
+
+            & > * {
+              grid-row: span 1;
+            }
+          }
+        }
+      }
+    }
+  }
+
+  // Filter reflow: kept cards slide, removed/added fade
+  .post-card-move,
+  .post-card-enter-active,
+  .post-card-leave-active {
+    transition: transform 800ms var(--cffy-ease-overshoot-soft),
+      opacity 400ms var(--cffy-ease-overshoot-soft);
+  }
+
+  .post-card-enter-from,
+  .post-card-leave-to {
+    opacity: 0;
+    transform: scale(.95);
+  }
+
+  .post-card-leave-active {
+    position: absolute;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .post-card-move,
+    .post-card-enter-active,
+    .post-card-leave-active {
+      transition: none;
+    }
+  }
+}

package/app/assets/scss/pages/core/_shared-ui.scss

@@ -0,0 +1,100 @@
+@use '@colorffy/css/scss/abstracts/mixins' as m;
+@use '../../abstracts/type-scale' as t;
+
+@layer pages {
+  .display-1,
+  .display-3 {
+    font-family: var(--cffy-font-primary);
+    line-height: 1;
+    letter-spacing: -3%;
+  }
+
+  .display-1 {
+    font-size: t.$fs-landing-h1;
+    font-weight: var(--cffy-fw-800);
+  }
+
+  .display-3 {
+    font-size: t.$fs-landing-card-md;
+    font-weight: var(--cffy-fw-500);
+    letter-spacing: -0.64px;
+  }
+
+  .color-mark {
+    --_mark-size: 1.75rem;
+    --_mark-radius: var(--cffy-radius-md);
+    --_mark-border-color: var(--cffy-outline-surface);
+
+    display: flex;
+    flex: none;
+    overflow: hidden;
+    inline-size: var(--_mark-size);
+    block-size: var(--_mark-size);
+    border-radius: var(--_mark-radius);
+    border: var(--cffy-border-width-sm) solid var(--_mark-border-color);
+    background: var(--_mark-bg, transparent);
+  }
+
+  .facet-hub-header {
+    display: grid;
+    gap: 1.5rem;
+    align-items: end;
+    padding-block-end: 1.75rem;
+
+    @include m.media-breakpoint-up(md) {
+      grid-template-columns: 1.2fr 1fr;
+      gap: 3rem;
+    }
+
+    & .facet-hub-title {
+      margin-block-end: 0;
+    }
+
+    & .facet-hub-meta {
+      display: flex;
+      flex-direction: column;
+      gap: 1rem;
+      padding-block-end: .25rem;
+
+      & p {
+        max-inline-size: 52ch;
+      }
+    }
+  }
+
+  .glass-border {
+    --_glass-border-width: var(--cffy-border-width-sm);
+    --_glass-border-start: light-dark(rgb(0 0 0 / .2), rgb(255 255 255 / .35));
+    --_glass-border-end: light-dark(rgb(0 0 0 / .15), rgb(255 255 255 / .35));
+    --_glass-border-shift: .075rem;
+    --_glass-border-nudge: .0125rem;
+    --_glass-border-ring-blur: .3px;
+
+    position: relative;
+    overflow: clip;
+
+    &::before,
+    &::after {
+      content: '';
+      position: absolute;
+      padding: var(--_glass-border-width);
+      border-radius: inherit;
+      filter: blur(var(--_glass-border-ring-blur));
+      pointer-events: none;
+      mask-clip: border-box, content-box, border-box;
+      mask-composite: intersect, exclude;
+    }
+
+    &::before {
+      inset: 0 var(--_glass-border-nudge) calc(var(--_glass-border-shift) * -1) calc(var(--_glass-border-nudge) * -1);
+      background: linear-gradient(var(--_glass-border-start), transparent);
+      mask-image: linear-gradient(45deg, #000, rgb(0 0 0 / .5) 50%, transparent 80%), linear-gradient(#000 0 0), linear-gradient(#000 0 0);
+    }
+
+    &::after {
+      inset: calc(var(--_glass-border-shift) * -1) calc(var(--_glass-border-nudge) * -1) 0 var(--_glass-border-nudge);
+      background: linear-gradient(-45deg, var(--_glass-border-end), transparent);
+      mask-image: linear-gradient(-45deg, #000, rgb(0 0 0 / .5) 50%, transparent 80%), linear-gradient(#000 0 0), linear-gradient(#000 0 0);
+    }
+  }
+}

package/app/assets/scss/pages/core/_transitions-layout.scss

@@ -0,0 +1,70 @@
+@layer pages {
+  .vt-post-image {
+    view-transition-name: selected-post-image;
+    contain: paint;
+  }
+
+  .vt-post-header {
+    view-transition-name: selected-post-header;
+    contain: paint;
+    padding-block-end: .15em;
+    margin-block-end: -.15em;
+  }
+
+  ::view-transition-old(root),
+  ::view-transition-new(root) {
+    animation-duration: 200ms;
+  }
+
+  ::view-transition-group(selected-post-image),
+  ::view-transition-group(selected-post-header) {
+    animation-duration: 350ms;
+    animation-timing-function: var(--cffy-ease-emphasized);
+  }
+
+  ::view-transition-old(selected-post-image),
+  ::view-transition-new(selected-post-image) {
+    height: 100%;
+    object-fit: cover;
+  }
+
+  // Color mode circle reveal
+  html.theme-transition {
+    &::view-transition-group(root) {
+      animation-timing-function: var(--cffy-ease-emphasized);
+    }
+
+    &::view-transition-new(root) {
+      mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40"><defs><filter id="blur"><feGaussianBlur stdDeviation="2"/></filter></defs><circle cx="0" cy="0" r="18" fill="white" filter="url(%23blur)"/></svg>') top left / 0 no-repeat;
+      mask-origin: content-box;
+      transform-origin: top left;
+      animation: theme-reveal 1s both;
+    }
+
+    // Old theme stays beneath the mask
+    &::view-transition-old(root) {
+      transform-origin: top left;
+      animation: theme-reveal 1s both;
+      z-index: -1;
+    }
+  }
+
+  @keyframes theme-reveal {
+    to {
+      mask-size: 350vmax;
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .vt-post-image,
+    .vt-post-header {
+      view-transition-name: none;
+    }
+
+    ::view-transition-group(*),
+    ::view-transition-old(*),
+    ::view-transition-new(*) {
+      animation: none !important;
+    }
+  }
+}

package/app/assets/scss/pages/core/_widgets.scss

@@ -0,0 +1,17 @@
+@layer pages {
+  // Fallback for unknown or unregistered widgets
+  .widget-error {
+    display: flex;
+    align-items: center;
+    gap: 0.6rem;
+    padding: 1rem 1.25rem;
+    border-radius: var(--corner-radius-large);
+    background: var(--cffy-surface-body-pane);
+    font-size: var(--cffy-fs-sm);
+
+    & .material-symbols-rounded {
+      font-size: 20px;
+      opacity: 0.7;
+    }
+  }
+}