apollo-elements/apollo-elements

:root {
  --rhodamine: #e10098;
}

slidem-deck {
  &::part(progress) {
    width: 100%;
    height: 5px;
    top: 0;
  }
}

slidem-slide[float-header] {
  & h2:first-of-type {
    float: right;
    z-index: 1;
    position: relative;
    font-size: 0.8em;
  }
}

#slides-progress {
  --sl-border-radius-pill: 0;
  --indicator-color: var(--primary);
  --height: 100%;
  width: 100%;
}

[progressive] > :not([current]) {
  pointer-events: none;
}

section[progressive] > section[reveal] {
  margin-block-start: 0;
}

section[reveal] {
  margin-block-start: 1em;
}

slidem-slide[alt] {
  --background: var(--blue-grey-900);
  --primary: var(--light-blue-400);
  --secondary: var(--yellow-300);
}

section[reveal] pre {
  margin-block-start: 0;
}

docs-playground {
  height: 100%;
  --playground-ide-height: 100%;
  &::part(playground-ide) {
    --playground-code-background: black;
    --playground-code-font-family: Recursive;
    --playground-code-padding: 0 12px;
    --playground-tab-bar-background: black;
    --playground-code-font-size: 72%;
    --playground-code-line-height: 1.71em;
    --playground-code-font-family: Recursive;
    --mono: 1;
    --wght: 400;
    --casl: 0;
    font-variation-settings: "wght" var(--wght), "CASL" var(--casl), "MONO" var(--mono), "slnt" var(--slnt);
    font-feature-settings: "ss01", "ss05", "dlig";
  }
}

[name="intro"] {
  &::part(content) {
    display: grid;
    gap: 2em;
    grid-template:
      'main' 4fr
      'foot' 1fr;
  }

  & header {
    margin-block-start: 4em;
  }

  & #keys-legend {
    font-size: 3vw;
    text-align: center;
  }

  & h1 {
    font-size: 500%;
    display: flex;
    flex-flow: column;
    & em:first-of-type {
      --wght: 650;
      --slnt: 0;
      color: var(--secondary);
      line-height: 0.6;
    }

    & em:nth-of-type(2) {
      --wght: 100;
      --casl: 1;
      --slnt: 0;

      font-size: 80%;
      margin-inline-start: 0.3em;
      & code {
        --slnt: -16;
        --wght: 750;
        --casl: 0.5;
        --mono: 0.25;

        color: var(--primary);
        font-size: 100%;
        font-family: inherit;
      }
    }
    & em:last-of-type {
      display: none;
    }

    & + p {
      text-align: center;
      width: 100%;
    }
  }

}


.cover {
  background-position: center;
  background-size: cover;
}

[name="standardization"] {
  & ul {
    display: grid;
    font-size: 200%;
    height: 100%;
    list-style-type: none;
    margin: 0;
    padding: 0;
    place-items: center;
    text-align: center;
  }
}

[name="iso-containers"] {
  & svg {
    width: 20%;
  }
}

[name$=" Advantages"],
[name^="HTML "] {
  &:not([float-header]) {
    & h2 {
      --casl: 0;
      --slnt: 0;
      line-height: 0.9;
      & em {
        --slnt: -15;
        color: var(--primary);
      }
    }
  }
}

[name$=" Advantages"] {
  & p {
    font-size: 70%;
  }
}
[name="Web Components"] {
  & img { width: 512px; }
  &::part(content) {
    display: grid;
    place-content: center;
    gap: 1em;
    font-size: 200%;
    place-items: center;
  }
}

[name="Custom Elements"] {
  & svg {
    height: 512px;
    width: auto;
  }
  #javascript-logo-svg {
    transform: scale(80%);
    transform-origin: bottom;
  }
}

[name="UI f query"] {
  & figure {
    width: 75%;
    margin: 0 auto;
    --casl:1;
  }

  & figcaption {
    font-size: 300%;
  }

  & dl {
    display: grid;
    grid-template-columns: 1fr 2fr;
    & pre {
      margin: 0;
    }

    & div {
      grid-column: 2/3;
    }

    & dd {
      display: grid;
      grid-template-columns:  1fr 1.5fr;
      grid-template-rows: 1fr 1fr 1fr;
      gap: 2rem;
      &::before {
        content: '⇒';
        font-size: 4rem;
        place-self: center;
        grid-row: -1/1;
        grid-column: 1/2;
      }
    }
  }

  & .fake-user {
    --border-color: var(--rhodamine);
    width: 100%;
    grid-column: 2/3;
    & .name {
      height: 2rem;
      width: calc(90% * var(--b, 1));
      align-self: center;
    }
    &::part(body) {
      display: grid;
      gap: 1rem;
      grid-template:
        'a n' 3rem
        'b b' auto
        'b b' auto
        'b b' auto / 3rem auto;
    }
  }

  & sl-skeleton:nth-last-child(-n+3) {
    grid-column: -1/1;
  }

  & sl-skeleton:last-child {
    width: calc(80% * var(--a, 1));
  }

  & sl-skeleton.avatar {
    width: 3rem;
    height: 3rem;
  }
}

[name^="HTML Queries in"],
[name^="HTML Mutations with"] {
  font-size: 90%;
  & pre {
    width: 100%;
    background: transparent
  }
  & img {
    height: 150px;
    width: auto;
    position: relative;
    top: 50px;
    right: 50px;
  }
  &::part(end-start) {
    position: absolute;
    top: 100px;
  }
}

[name^="HTML Queries in"] {
  font-size: 60%;
}

[name="Apollo Elements"] {
  & h2 {
    --slnt: 0;
    --casl: 0;
    --mono: 0;
    line-height: .9;

    & span {
      &:first-of-type {
        --wght: 100;
      }

      &:last-of-type {
        --wght: 900;
        color: var(--primary);
      }
    }
  }
}

[name="Glue"] {
  text-align: center;
  font-size: 200%;
  & > * {
    width: max-content;
  }
  &::part(content) {
    display: grid;
    align-items: center;
    justify-items: center;
    align-content: space-evenly;
    width: auto;
  }
  & div:first-of-type {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5em;
  }
  & :is(svg, img) {
    width: 350px;
    height: auto;
    display: inline-block;
    &:nth-of-type(2) {
      fill: var(--rhodamine);
    }
  }
  & p {
    font-size: 150%;
    --wght: 600;
    & em {
      --wght: 300;
    }
  }

  & ul {
    gap: 1em;
    list-style-type: none;
    justify-content: space-between;
    display: flex;
    width: 80%;
    padding: 0;
    margin: 0;
    max-width: 70%;
    & li {
      display: contents;
      & a {
        color: inherit;
        font-weight: bold;
        text-transform: uppercase;
        letter-spacing: 0.9;
        display: block;
        text-decoration: none;
        border-radius: 100%;
        transition: background 0.2s ease-in-out;
        height: 100%;
        outline: none;
        width: 10vw;
        height: 10vw;
        & svg {
          font-size: initial;
          width: auto;
          height: 100%;
          max-width: 100%;
        }
      }
    }
  }
}

[name$=" Advantages"] {
  font-size: 200%;
  & h3 span { color: var(--primary); }
  & p[reveal]:last-of-type { text-align: right; }
  & :is(ol, ul) {
    padding-inline-start: 1.5em;
    & li {
      &:first-of-type { --wght: 300; }
      &:nth-of-type(2) { --wght: 500; }
      &:nth-of-type(3) { --wght: 600; }
      &:last-of-type { --wght: 800 }
    }
  }
}

[name="Web Components Advantages"] {
  font-size: 150%;
}

[name="Try It"] {
  & pre {
    font-size: 75%;
  }
  & > [past] {
    opacity: 0;
  }
}

[name="Other Languages"] {
  font-size: 22px;
  &::part(content) {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
  }
  & figure {
    position: relative;
    & figcaption {
      position: absolute;
      top: 40%;
      left: 40%;
      font-size: 92px;
      z-index: 2;
      --wght: 600;
    }
  }
}

[name="Thanks"] {
  &::part(content) { display: grid; }
  & ul {
    list-style-type: none;
    & li:nth-child(n+3) {
      font-size: 70%;
    }
  }
  & p { font-size: 80%; }
  & footer {
    font-size: 70%;
    margin-left: auto;
    margin-top: auto;
    display: grid;
    grid: 'cc logo name' 1fr 'cc logo title' 1fr / auto auto max-content;
    width: max-content;
    align-items: center;
    gap: 8px 24px;
    & img { width: 100px; }
    & #cc-by-nc-sa { grid-area: cc; width: 200px; }
    & #red-hat-logo { grid-area: logo; }
  }
}