@primer/brand-css 0.0.0-20250212132611

package/components/recipes/SolutionTemplates/parallax.css

@@ -0,0 +1,165 @@
+/*
+ * Parallax effect
+ * Opt-in feature. Not officialy-support Primer Brand pattern.
+ */
+
+.hero {
+  --parallax-start-spacing: 74px;
+  --hero-height: 110vh;
+
+  position: relative;
+  height: calc(var(--hero-height) - var(--parallax-start-spacing));
+}
+
+@media screen and (min-height: 600px) {
+  .hero {
+    --hero-height: 100vh;
+  }
+}
+
+@media screen and (min-height: 700px) {
+  .hero {
+    --hero-height: 80vh;
+  }
+}
+
+@media screen and (min-height: 900px) {
+  .hero {
+    --hero-height: 75vh;
+  }
+}
+
+@media screen and (min-height: 1000px) {
+  .hero {
+    --hero-height: 60vh;
+  }
+}
+
+@media screen and (min-height: 1280px) and (min-height: 1000px) {
+  .hero {
+    --hero-height: 60vh;
+  }
+}
+
+.parallax {
+  position: absolute;
+  top: calc(-1 * var(--parallax-start-spacing));
+  width: 100%;
+  height: var(--hero-height);
+  max-height: 600px;
+}
+
+.background,
+.foreground {
+  width: 100%;
+  height: 100vh;
+
+  animation-fill-mode: forwards;
+  animation-timing-function: linear;
+  animation-timeline: scroll();
+  animation-range: 0vh var(--hero-height);
+}
+
+.background {
+  position: absolute;
+}
+
+.foreground {
+  position: relative;
+}
+
+.centeredHero {
+  display: flex;
+  height: var(--hero-height);
+  justify-content: center;
+}
+
+.heroImage {
+  min-width: 100%;
+  min-height: 100%;
+}
+
+.heroImageOverlay {
+  position: absolute;
+  top: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.lightHero .heroImageOverlay {
+  background: linear-gradient(
+    0deg,
+    rgba(255, 255, 255, 0.8) 0%,
+    rgba(255, 255, 255, 0) 50%,
+    rgba(255, 255, 255, 0.6) 100%
+  );
+}
+
+.darkHero .heroImageOverlay {
+  background: linear-gradient(0deg, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.6) 100%);
+}
+
+.heroImageOverlayDark {
+  position: absolute;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(0deg, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.6) 100%);
+}
+
+.foregroundContents {
+  padding: 0;
+  padding-block-start: calc(var(--base-size-20) + var(--parallax-start-spacing));
+  height: 100%;
+}
+
+.articleContents {
+  border-radius: var(--brand-borderRadius-xlarge);
+  margin-top: calc(-1 * var(--brand-borderRadius-xlarge));
+  background-color: var(--brand-color-canvas-default);
+  position: relative;
+  z-index: 90;
+}
+
+.lightHero .articleContents {
+  box-shadow: 0px -2px 49px 0px rgba(0, 0, 0, 0.25);
+}
+
+@keyframes parallax-background {
+  from {
+    top: 0;
+    filter: blur(0px);
+  }
+  to {
+    top: calc(var(--hero-height) * -0.4);
+    filter: blur(0) brightness(0%);
+  }
+}
+
+@keyframes parallax-foreground {
+  from {
+    top: 0;
+  }
+  to {
+    top: calc(calc(var(--hero-height) * 2) * -0.2);
+    filter: blur(10px) brightness(0%);
+  }
+}
+
+/* Progressive enhancement opt-in */
+@supports (animation-timeline: scroll()) {
+  @media (prefers-reduced-motion: no-preference) {
+    .parallax {
+      position: fixed;
+      top: 0;
+    }
+
+    .foreground {
+      animation-name: parallax-foreground;
+    }
+
+    .background {
+      animation-name: parallax-background;
+    }
+  }
+}

package/components/recipes/seo/Article/Article.css

@@ -0,0 +1,289 @@
+.articleCol {
+  order: 1;
+}
+
+.asideCol {
+  order: 2;
+}
+
+.socialLinks {
+  list-style: none;
+  display: inline-flex;
+  align-items: center;
+  gap: var(--base-size-16);
+  margin: 0;
+  padding: 0;
+}
+
+.hero {
+  --parallax-start-spacing: 74px;
+  --hero-height: 70vh;
+
+  position: relative;
+  height: calc(var(--hero-height) - var(--parallax-start-spacing));
+}
+
+.lightHero .hero {
+  background: var(--base-color-scale-white-0);
+}
+
+.darkHero .hero {
+  background: var(--base-color-scale-black-0);
+}
+
+.parallax {
+  position: absolute;
+  top: calc(-1 * var(--parallax-start-spacing));
+  width: 100%;
+  height: var(--hero-height);
+}
+
+.background,
+.foreground {
+  width: 100%;
+  height: 100%;
+
+  animation-fill-mode: forwards;
+  animation-timing-function: linear;
+  animation-timeline: scroll();
+  animation-range: 0vh var(--hero-height);
+}
+
+.background {
+  position: absolute;
+}
+
+.foreground {
+  position: relative;
+}
+
+.heroImage {
+  min-width: 100%;
+  min-height: 100%;
+}
+
+.heroImageOverlay {
+  position: absolute;
+  top: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.lightHero .heroImageOverlay {
+  background: linear-gradient(
+    0deg,
+    rgba(255, 255, 255, 0.8) 0%,
+    rgba(255, 255, 255, 0) 50%,
+    rgba(255, 255, 255, 0.6) 100%
+  );
+}
+
+.darkHero .heroImageOverlay {
+  background: linear-gradient(0deg, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.6) 100%);
+}
+
+.heroImageOverlayDark {
+  position: absolute;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(0deg, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.6) 100%);
+}
+
+.foregroundContents {
+  padding: 0;
+  padding-block-start: calc(var(--base-size-20) + var(--parallax-start-spacing));
+  height: 100%;
+}
+
+.articleContents {
+  position: relative;
+  z-index: 90;
+}
+
+.lightHero .articleContents {
+  box-shadow: 0px -2px 49px 0px rgba(0, 0, 0, 0.25);
+}
+
+@keyframes parallax-background {
+  from {
+    top: 0;
+    filter: blur(0px);
+  }
+  to {
+    top: calc(var(--hero-height) * -0.4);
+    filter: blur(10px) brightness(0%);
+  }
+}
+
+@keyframes parallax-foreground {
+  from {
+    top: 0;
+  }
+  to {
+    top: calc(var(--hero-height) * -0.7);
+    filter: blur(2px) brightness(0%);
+  }
+}
+
+/* Progressive enhancement opt-in */
+@supports (animation-timeline: scroll()) {
+  @media (prefers-reduced-motion: no-preference) {
+    .parallax {
+      position: fixed;
+      top: 0;
+    }
+
+    .foreground {
+      animation-name: parallax-foreground;
+    }
+
+    .background {
+      animation-name: parallax-background;
+    }
+  }
+}
+
+.lede {
+  max-width: var(--brand-Prose-lineLength);
+  line-height: 1.3;
+}
+
+.lede::first-letter {
+  font-size: var(--base-size-64);
+  line-height: 1;
+  padding: var(--base-size-4) var(--base-size-12);
+  border: var(--base-size-4) solid var(--brand-color-accent-primary);
+  color: var(--brand-color-accent-primary);
+  margin-inline-end: var(--base-size-12);
+  float: left;
+}
+
+.asideHeading {
+  color: var(--brand-color-text-muted);
+  letter-spacing: 0.031rem;
+}
+
+@media screen and (max-width: 63.25rem) {
+  .aside {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    width: 100%;
+    z-index: 99;
+  }
+
+  .asideContent {
+    display: flex;
+    opacity: 0;
+    visibility: hidden;
+    background-color: var(--brand-color-canvas-default);
+    padding: var(--base-size-16);
+    width: 100%;
+    box-shadow: 0px 100px 80px rgba(0, 0, 0, 0.01), 0px 41px 33px rgba(0, 0, 0, 0.02), 0px 22px 17px rgba(0, 0, 0, 0.02),
+      0px 12px 10px rgba(0, 0, 0, 0.03), 0px 6px 5px rgba(0, 0, 0, 0.04), 0px 2px 2px rgba(0, 0, 0, 0.07);
+    justify-content: center;
+    transition: visibility var(--brand-animation-duration-default) var(--brand-animation-easing-default),
+      opacity var(--brand-animation-duration-default) var(--brand-animation-easing-default),
+      transform var(--brand-animation-duration-default) var(--brand-animation-easing-default);
+    transform: translateY(-100%);
+  }
+
+  .asideContent--visible {
+    opacity: 1;
+    visibility: visible;
+    transform: none;
+  }
+
+  .asideContent--open {
+    height: auto;
+    display: flex;
+    justify-content: center;
+    padding: var(--base-size-16) var(--base-size-16) var(--base-size-32);
+  }
+
+  .asideContent--open::after {
+    content: '';
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: -1;
+    background-color: var(--brand-color-canvas-subtle);
+    opacity: 0.8;
+  }
+
+  .asideHeading {
+    height: 45px;
+    display: flex;
+    align-items: center;
+  }
+}
+
+@media screen and (min-width: 64rem) {
+  .aside {
+    position: sticky;
+    top: 0;
+    margin-block-start: -64px;
+    padding-block-start: var(--base-size-64);
+  }
+}
+
+.asideHeading {
+  font-size: var(--brand-text-size-100);
+  text-transform: uppercase;
+}
+
+.tableOfContentsList {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--base-size-16);
+}
+
+.tableOfContentsList a {
+  color: var(--brand-color-text-muted);
+  text-decoration: none;
+}
+
+.tableOfContentsMenuToggle {
+  display: none;
+}
+
+.tableOfContentsMenuToggle:hover {
+  background-color: var(--brand-color-neutral-subtle);
+}
+
+@media screen and (max-width: 63.25rem) {
+  .asideHeading {
+    padding-inline-start: var(--base-size-12);
+  }
+  .tableOfContentsMenuToggle {
+    display: block;
+    background-color: var(--brand-color-canvas-subtle);
+    border-radius: var(--brand-borderRadius-full);
+    padding: var(--base-size-4);
+    width: var(--base-size-32);
+    border: none;
+    cursor: pointer;
+  }
+  .tableOfContentsNav,
+  .tableOfContentsFeaturesBox {
+    display: none;
+  }
+  .tableOfContentsNav--visible {
+    display: block;
+  }
+  .tableOfContentsList a {
+    padding: var(--base-size-8) var(--base-size-12);
+    display: block;
+  }
+  .tableOfContentsList a[aria-current] {
+    background-color: var(--brand-color-neutral-subtle);
+    border-radius: var(--brand-borderRadius-medium);
+  }
+}

package/components/recipes/seo/Category/CategoryPage.css

@@ -0,0 +1,43 @@
+.navListHeading {
+  font-size: var(--brand-text-size-100);
+  color: var(--brand-color-text-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.031rem;
+}
+
+.navList {
+  display: flex;
+  flex-direction: column;
+  gap: var(--base-size-4);
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.navListItem {
+  display: block;
+  padding: var(--base-size-8) var(--base-size-12);
+  border-radius: var(--brand-borderRadius-medium);
+  cursor: pointer;
+  color: var(--brand-color-text-muted);
+  text-decoration: none;
+}
+
+.navListItem * {
+  color: inherit;
+}
+
+.navListItemSelected,
+.navListItem:hover {
+  color: var(--brand-color-text-default);
+  background-color: var(--base-color-scale-gray-1);
+}
+
+[data-color-mode='dark'] .navListItemSelected,
+[data-color-mode='dark'] .navListItem:hover {
+  background-color: var(--base-color-scale-gray-6);
+}
+
+.cardGrid {
+  --brand-Grid-spacing-row: var(--base-size-48);
+}