@documental-xyz/core 0.1.0

package/src/components/Group.astro

@@ -0,0 +1,140 @@
+---
+//overlay deve ser: dark ou none
+
+const { imgBg, videoBg, txtColor, bgColor, overlay } = Astro.props;
+
+// imgBg e videoBg recebem a url direta (deve ser possível apenas um dos dois)
+// overlay recebe booleano
+
+const imgBgVar = imgBg && `url(${imgBg})`;
+---
+
+<section
+  class:list={[
+    "group",
+    `group--overlay-${overlay}`,
+    imgBg && `group--has-bg-image`,
+  ]}
+>
+  {
+    (imgBg || videoBg) && (
+      <div class="group__bg">
+        {videoBg && (
+          <video autoplay muted loop>
+            <source src={videoBg} />
+          </video>
+        )}
+      </div>
+    )
+  }
+  <div class="group__content">
+    <slot />
+  </div>
+</section>
+
+<style lang="scss" define:vars={{ "clr-txt": txtColor, "clr-bg": bgColor, "img-bg": imgBgVar }}>
+  @use "../assets/styles/config/config" as *;
+  
+  .group {
+    $self: &;
+    width: 100%;
+    position: relative;
+    color: var(--clr-txt);
+    background-color: var(--clr-bg);
+    z-index: 100;
+
+    &:has(.gallery-modal[aria-hidden="false"]) {
+      position: relative;
+      z-index: 99999;  
+    }
+    
+    @include media-break-down(l) {
+      z-index: 4;
+      position: relative;
+    }
+
+    &__bg {
+      position: absolute;
+      inset: 0;
+      width: 100%;
+
+      color: var(--clr-bg);
+
+      &::after {
+        mix-blend-mode: color;
+      }
+
+      &::before {
+        color: #4d4d4d;
+        opacity: 0.8;
+      }
+
+      #{$self}--overlay-none & {
+        &::after,
+        &::before {
+          display: none;
+        }
+      }
+
+      #{$self}--overlay-dark & {
+        color: var(--clr-black);
+
+        &::after {
+          opacity: 0.5;
+          mix-blend-mode: unset;
+        }
+
+        &::before {
+          display: none;
+        }
+      }      
+
+      #{$self}--has-bg-image & {
+        height: 100%;
+        background-image: var(--img-bg);
+        background-size: cover;
+
+        @include media-break-up(l) {
+          background-attachment: fixed;
+        }
+          
+      }
+
+      &::after,
+      &::before {
+        content: "";
+        display: block;
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background-color: currentColor;
+      }
+
+      img {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+      }
+
+      video {
+        width: 100%;
+        height: 100vh;
+        position: sticky;
+        top: 0;
+        object-fit: cover;
+      }
+    }
+
+    &__content {
+      position: relative;
+      z-index: 3;
+
+      &:has(> *:not(.spacer):not(.column):not(.columns):not(.column-sticky):first-child:last-child) {
+        padding-block: var(--mt-m);
+      }
+      
+    }
+  }
+</style>

package/src/components/HtmlEmbed.astro

@@ -0,0 +1,98 @@
+---
+import Caption from "./Caption.astro";
+
+const { wide } = Astro.props;
+//wide recebe booleano
+
+const hasCaption = Astro.slots.has("caption");
+---
+
+<figure class:list={["html-embed", { "html-embed--wide": wide }]}>
+  <div class="reveal--fadeInUp">
+    <slot />
+    {
+      hasCaption && (
+        <figcaption>
+          <Caption><slot name="caption" /></Caption>
+        </figcaption>
+      )
+    }
+  </div>
+</figure>
+
+<style lang="scss">
+  @use "../assets/styles/config/config" as *;
+  @use "../assets/styles/utils/grrr/grrr" as *;
+
+  .html-embed {
+    position: relative;
+    
+    &:not(:first-child),
+    :global(+ *:not(.column)),
+    :global(.animation-disabled:not(:first-child) >) &  {
+      margin-top: var(--mt-m);
+    }
+
+    :global(.group__content >) & > div,
+    :global(.group__content > .animation-disabled >) & > div {
+      @extend %grrr--board;
+
+      :global(> div) {
+        grid-column: content;
+      }
+
+      figcaption {
+        grid-column: content;
+        
+        @include media-break-up(x) {
+          grid-column: board-start 2/board-end 11;
+        }
+      }
+    }
+    
+    :global(.group__content >) &--wide div,
+    :global(.group__content > .animation-disabled >) &--wide div {
+      :global(> div) {
+        grid-column: full;
+      }
+    }
+
+    :global(iframe) {
+      width: 100%;
+      height: auto;
+      display: block;
+      aspect-ratio: 16 / 9;
+    }
+
+    &__caption {
+      @include type('b-s');
+      display: block;
+      margin-top: 20px;
+    }
+  }
+
+  :global(.column .html-embed--wide) {
+    width: grrr-cols-size(10);
+    transform: translateX(calc(-1 * grrr-cols-size(2, 1)));
+
+    @include media-break-down(xl) {
+      transform: translateX(calc(-1 * ((100vw - 657px) / 2) + grrr-cols-size(1, 1) + var(--atnl-margin)));
+    }
+   
+    @include media-break-down(l) {
+      width: calc(100% + var(--atnl-margin) * 2);
+      transform: translateX(calc(-1 * var(--atnl-margin)));
+    }
+    
+    @include media-break-down(m) {
+      :global(.caption) {
+        padding-inline: var(--atnl-margin);
+      }
+    }
+
+    &,
+    :global(+ *)  {
+      margin-top: var(--mt-l);
+    }
+  }
+</style>

package/src/components/ImageBlock.astro

@@ -0,0 +1,134 @@
+---
+import Caption from "./Caption.astro";
+import { Image } from 'astro:assets';
+
+const { src, wide } = Astro.props;
+// src recebe a url direta da imagem
+// wide recebe booleano
+
+const hasCaption = Astro.slots.has("default");
+---
+
+<figure class:list={["image", { "image--wide": wide }]}>
+  <div class="reveal--fadeInUp">
+    <Image src={src} alt="" width="100%" height="100%"/>
+    {
+      hasCaption && (
+        <figcaption>
+          <Caption><slot /></Caption>
+        </figcaption>
+      )
+    }
+  </div>
+</figure>
+
+<style lang="scss">
+  @use "../assets/styles/config/config" as *;
+  @use "../assets/styles/utils/grrr/grrr" as *;
+
+  .image {
+    width: 100%;
+
+    &:not(:first-child),
+    :global(+ *:not(.column)),
+    :global(.animation-disabled:not(:first-child) >) & {
+      margin-top: var(--mt-m);
+    }
+
+
+    :global(.group__content >) & > div,
+    :global(.group__content > .animation-disabled >) & > div {
+      @extend %grrr--board;
+      
+      img {
+        grid-column: content;
+      }
+
+      figcaption {
+        grid-column: content;
+        
+        @include media-break-up(x) {
+          grid-column: board-start 2/board-end 11;
+        }
+      }
+    }
+    
+    :global(.group__content >) &--wide div,
+    :global(.group__content > .animation-disabled >) &--wide div {
+      img {
+        grid-column: full;
+      }
+    }
+
+    &--wide {
+      @include media-break-down(m) {
+        width: calc(100% + var(--atnl-margin) * 2);
+        transform: translateX(calc(-1 * var(--atnl-margin)));
+        padding-inline: 0;
+
+        :global(.caption) {
+          padding-inline: var(--atnl-margin);
+        }
+      }
+    }
+  }
+
+  :global(.columns:not(.columns--33-66) .columns__column-2 .image--wide) {
+    :global(img) {
+      @include media-break-up(m) {
+        width: calc(100% + var(--atnl-margin));
+      }
+      
+      @include media-break-up(x) {
+        width: calc(100% + grrr-cols-size(1, 1) + var(--atnl-margin));
+      }
+    }
+  }
+
+  :global(.columns__column-1 .image--wide > div) {
+    @include media-break-up(m) {
+      display: flex;
+      flex-wrap: wrap;
+      justify-content: flex-end;
+    }
+  }
+  
+  :global(.columns .image--wide img) {
+    @include media-break-up(m) {      
+      width: calc(100% + var(--atnl-margin));
+    }
+
+    @include media-break-up(x) {
+      width: calc(100% + grrr-cols-size(1, 1) + var(--atnl-margin));
+    }
+  }
+
+  :global(.column .image--wide) {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    
+    &:not(:first-child),
+    :global(+ *:not(.column)),
+    :global(.animation-disabled >) & {
+      margin-top: var(--mt-l);
+    }
+    
+    :global(> div) {
+      // @include media-break-down(m) {
+      //   width: calc(100% + var(--atnl-margin) * 2);
+      // }
+  
+      @include media-break-up(m) {
+        width: grrr-cols-size(12);
+      }
+      
+      @include media-break-up(x) {
+        width: grrr-cols-size(10);
+      }
+    }
+  }
+
+
+
+</style>

package/src/components/InnerColumns.astro

@@ -0,0 +1,54 @@
+---
+
+---
+
+<div class="inner-columns">
+  <div class="inner-columns__holder">
+    <div class="inner-columns__column">
+      <slot name="column-1" />
+    </div>
+    <div class="inner-columns__column">
+      <slot name="column-2" />
+    </div>
+  </div>
+</div>
+
+<style lang="scss">
+  @use "../assets/styles/config/config" as *;
+  @use "../assets/styles/utils/grrr/grrr" as *;
+
+  .inner-columns {
+    :global(+ *) {
+      margin-top: var(--mt-s);
+    }
+
+    &:not(:first-child) &__holder {
+      margin-top: var(--mt-s);
+    }
+
+    &__holder {
+      display: flex;
+      gap: var(--atnl-gutter);
+
+      @include media-break-down(m) {
+        flex-direction: column;
+        gap: var(--mt-s);
+      }
+
+     
+    }
+
+    &__column {
+      flex-basis: 50%;
+    }
+
+    :global(.columns) & {
+      &__holder {
+        @include media-grrr-between(7, 10) {
+          flex-direction: column;
+          gap: var(--mt-s);
+        }
+      }
+    }
+  }
+</style>

package/src/components/LogosGroup.astro

@@ -0,0 +1,102 @@
+---
+import { Image } from "astro:assets";
+const { title, logos } = Astro.props
+---
+<div class="logos-group reveal--fadeInUp">
+  <div class="logos-group__holder">
+    <span class="logos-group__title">{title}</span>
+    <div class="logos-group__logos">
+      {
+        logos && logos.map(logo => (
+          //logo.image
+          //logo.link
+          //logo.link
+          //  logo.url
+          //  logo.target
+          //  logo.title
+          <div class="logos-group__logo">
+            {logo.link && <a href={logo.link?.url} target={logo.link?.target} title={logo.link?.title}></a>}
+            {logo.image && <Image src={logo.image} alt={logo?.link?.title}  width="100%" height="100%"/>}
+          </div>
+        ))
+      }
+    </div>
+  </div>
+</div>
+
+<style lang="scss">
+  @use "../assets/styles/config/config" as *;
+  @use "../assets/styles/utils/grrr/grrr" as *;
+  @use "../assets/styles/globals/grrr" as *;
+
+  .logos-group {
+    $self: &;
+
+    &:not(:first-child),
+    & :global(+ *:not(.column)),
+    :global(.animation-disabled:not(:first-child) >) & {
+      margin-top: var(--mt-m);
+    }
+
+    :global(.group__content) > & {
+      @extend %grrr--board;
+    }
+
+    &__holder {
+      :global(.group__content) > #{$self} & {
+        grid-column: board-start 2 / board-end 11;
+        
+        @include media-break-down(x) {
+          grid-column: board-start 1 / board-end 12;
+        }
+  
+        @include media-break-down(m) {
+          grid-column: board-full;
+        }
+      }
+    }
+
+    &__title {
+      @include type("h-m");
+      display: block;
+      margin-bottom: 10px;
+    }
+    
+    &__logos {
+      grid-column: board-start 2 / board-end 11;
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
+      gap: var(--atnl-gutter);
+      
+      @include media-break-up(m) {
+        grid-template-columns: repeat(auto-fit, minmax(155px, 1fr));
+      }
+    }
+
+    &__logo {
+      width: 100%;
+      aspect-ratio: 1 / 1;
+      position: relative;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      img {
+        width: auto;
+        height: auto;
+        max-width: 100%;
+        max-height: 100%;
+        object-fit: contain;
+        pointer-events: none;
+      }
+
+      a {
+        width: 100%;
+        height: 100%;
+        position: absolute;
+        top: 0;
+        left: 0;
+      }
+    }
+  }
+</style>