@zplane-web/craft-licensing

Seite: Seite 

<div id="page-80168-31253" class="page">
    <div class="page__head">
        <div class="page__headline-date">

            <div class="page__headline">

                <h1 class="headline" data-headline-size="1"><span class="headline__text">FAQ</span></h1>
            </div>

            <div class="page__description">
                <p class="paragraph">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>

            </div>
        </div>

    </div>

    <div class="page__content">

        <div class="page__section" data-scheme="light">

            <div id="page-80168-31253-c1" class="page__block">

                <div class="text">
                    <p class="paragraph">Isolate instruments or vocals – and remix, rebalance or remove stems in already mixed audio. All in real-time. All directly inside your DAW, right on the track you are working on.</p>
                    <p class="paragraph">PEEL STEMS is a plugin for real-time stem separation in any VST3-, AU- or AAX-compatible DAW. Simply bring it up as an insert on a track, and get creative with mixed audio as if you had access to its separate tracks.</p>
                    <p class="paragraph">PEEL STEMS is based on zplane’s new STEMS EFFICIENT technology and highly optimized for real-time low-latency processing. Of course, PEEL STEMS still needs to “read ahead” in order to separate audio inside a mixed track. But in most cases this latency is automatically compensated by the DAW. So now, removing vocals or bass in a loop is as simple as muting that stem while you are playing it back!</p>

                </div>

            </div>

            <div id="page-80168-31253-c2" class="page__block" data-block-size="left">

                <picture class="image">
                    <img class="image__img" src="https://bildermangel.de/470x264/fe7c09/130f26.webp?text=+++S:+470x264@1x+++" width="470" height="264" loading="lazy" />
                </picture>

            </div>

            <div id="page-80168-31253-c3" class="page__block">

                <div class="text">
                    <h2 class="headline" data-headline-size="3"><span class="headline__text">Key Features</span></h2>
                    <ul class="bullet-list" role="list" data-bullet-list-type="unordered">
                        <li class="bullet-list__item">
                            <span class="bullet-list__text">Real-time audio stem separation</span>

                        </li>
                        <li class="bullet-list__item">
                            <span class="bullet-list__text">Soundfield Display: Visually identify single stems in a mix</span>

                        </li>
                        <li class="bullet-list__item">
                            <span class="bullet-list__text">Mute, Solo or Rebalance stems (Drums, Bass, Vocals, Other)</span>

                        </li>
                        <li class="bullet-list__item">
                            <span class="bullet-list__text">Includes all PEEL features including the Focus EQ</span>

                        </li>
                        <li class="bullet-list__item">
                            <span class="bullet-list__text">Route selected audio to external processing (supported in Ableton Live, FL Studio, Pro Tools, Reason, Reaper)</span>

                        </li>
                        <li class="bullet-list__item">
                            <span class="bullet-list__text">VST3/AU/AAX formats</span>

                        </li>
                        <li class="bullet-list__item">
                            <span class="bullet-list__text">Compatible with Intel- and M1-based Macs</span>

                        </li>
                    </ul>
                    <h2 class="headline" data-headline-size="3"><span class="headline__text">Technical Specifications</span></h2>
                    <ul class="bullet-list" role="list" data-bullet-list-type="unordered">
                        <li class="bullet-list__item">
                            <span class="bullet-list__text">CPU: Apple Silicon (M1 or higher) recommended</span>

                        </li>
                        <li class="bullet-list__item">
                            <span class="bullet-list__text">Plugin formats: VST3, AU and AAX</span>

                        </li>
                        <li class="bullet-list__item">
                            <span class="bullet-list__text">Supported Operating Systems*: Windows 10 &amp; 11 (64bit), and macOS 13 or higher (Intel &amp; Silicon)</span>

                        </li>
                    </ul>

                </div>

            </div>

        </div>

        <div id="page-80168-31253-c4" class="page__block" data-block-size="section">

            <div id="section-11512-83307" class="section">
                <div class="section__inner">
                    <div class="section__head">
                        <div class="section__headline">

                            <h1 class="headline" data-headline-size="3"><span class="headline__text">Features</span></h1>
                        </div>

                    </div>

                </div>
            </div>

        </div>

    </div>
</div>
 
{% set id = id ??? html_id('page') %}
{% set level = level ??? 1 %}
{% set nextLevel = level %}

<div {{ html_attributes({
  id: id,
  class: 'page',
}, attrs ?? {}) }}>
  {% if headline|default or date|default or description|default or image|default %}
    <div class="page__head">
      {% if headline|default or date|default or description|default %}
        <div class="page__headline-date">
          {% if headline|default %}
            {% set nextLevel = level + 1 %}

            <div class="page__headline">
              {% include '@headline' with headline | merge({
                level: level,
                size: headline.size ?? 2,
              }) only %}
            </div>
          {% endif %}

          {% if date|default or category|default %}
            <div class="page__meta">
              {% if date|default %}
                <time class="page__date" datetime="{{ date | date('Y-m-d') }}">
                  {% include '@pill' with {
                    icon: 'calendar',
                    text: date | date('long'),
                  } only %}
                </time>
              {% endif %}

              {% if category|default %}
                <div class="page__category">
                  {% include '@pill' with category | merge({ icon: 'tag' }) only %}
                </div>
              {% endif %}
            </div>
          {% endif %}

          {% if description|default %}
            <div class="page__description">
              {{ description | componentize }}
            </div>
          {% endif %}
        </div>
      {% endif %}

      {% if image|default %}
        <div class="page__image">
          {% include '@media' with { image } only %}
        </div>
      {% endif %}
    </div>
  {% endif %}

  {% if blocks|default %}
    <div class="page__content">
      {% headlines size: 3, level: nextLevel %}
        {% set inSection = false %}

        {% for block in blocks %}
          {% set size = block.size ?? null %}
          {% set blockTag = block.tag ??? 'div' %}

          {% if size == 'section' and inSection and not loop.first %}
            {% set inSection = false %}

            </div>
          {% elseif size != 'section' and not inSection %}
            {% set inSection = true %}

            <div class="page__section" data-scheme="light">
          {% endif %}

          <{{ blockTag }} {{ html_attributes({
            id: block.id ?? "c#{loop.index}" | namespaceInputId(id),
            class: 'page__block',
            'data-block-size': size,
            'data-block-type': block.type|default ? block.type|dasherize,
          }) }}>
            {{ block.content }}
          </{{ blockTag }}>

          {% if inSection and loop.last %}
            </div>
          {% endif %}
        {% endfor %}
      {% endheadlines %}
    </div>
  {% endif %}
</div>
 
{
  "blocks": [
    {
      "content": "!twig\n\n{% set text %}\n  <p>Isolate instruments or vocals – and remix, rebalance or remove stems in already mixed audio. All in real-time. All directly inside your DAW, right on the track you are working on.</p>\n  <p>PEEL STEMS is a plugin for real-time stem separation in any VST3-, AU- or AAX-compatible DAW. Simply bring it up as an insert on a track, and get creative with mixed audio as if you had access to its separate tracks.</p>\n  <p>PEEL STEMS is based on zplane’s new STEMS EFFICIENT technology and highly optimized for real-time low-latency processing. Of course, PEEL STEMS still needs to “read ahead” in order to separate audio inside a mixed track. But in most cases this latency is automatically compensated by the DAW. So now, removing vocals or bass in a loop is as simple as muting that stem while you are playing it back!</p>\n{% endset %}\n\n{% include '@text' with { text } only %}\n"
    },
    {
      "size": "left",
      "content": "!twig\n\n{% include '@image' with {\n  src: 'https://bildermangel.de/470x264/fe7c09/130f26.webp?text=+++S:+470x264@1x+++',\n  width: 470,\n  height: 264,\n} only %}\n"
    },
    {
      "content": "!twig\n\n{% set text %}\n  <h1>Key Features</h1>\n  <ul>\n    <li>Real-time audio stem separation</li>\n    <li>Soundfield Display: Visually identify single stems in a mix</li>\n    <li>Mute, Solo or Rebalance stems (Drums, Bass, Vocals, Other)</li>\n    <li>Includes all PEEL features including the Focus EQ</li>\n    <li>Route selected audio to external processing (supported in Ableton Live, FL Studio, Pro Tools, Reason, Reaper)</li>\n    <li>VST3/AU/AAX formats</li>\n    <li>Compatible with Intel- and M1-based Macs</li>\n  </ul>\n  <h1>Technical Specifications</h1>\n  <ul>\n    <li>CPU: Apple Silicon (M1 or higher) recommended</li>\n    <li>Plugin formats: VST3, AU and AAX</li>\n    <li>Supported Operating Systems*: Windows 10 & 11 (64bit), and macOS 13 or higher (Intel & Silicon)</li>\n  </ul>\n{% endset %}\n\n{% include '@text' with { text } only %}\n"
    },
    {
      "size": "section",
      "content": "!twig\n\n{% include '@section' with {\n  boxTheme: 'electric-gray-dark',\n  headline: {\n    text: 'Features',\n  },\n} only %}\n"
    }
  ],
  "headline": {
    "size": 1,
    "text": "FAQ"
  },
  "description": "<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>\n"
}
  • Content: 
    @use 'grid';
@use 'sizing';

.page__head {
  align-items: center;
  column-gap: var(--grid-gap);
  display: grid;
  grid-template-columns: 100%;
  margin-block-end: 4.8rem;
  row-gap: 4.8rem;

  @include sizing.mq($from: m) {
    grid-template-columns: 1fr 1fr;
  }

  @include sizing.mq($from: l) {
    grid-template-columns: #{grid.column(10)} #{grid.column(8)};
    justify-content: space-between;
  }

  @include sizing.mq($from: xl) {
    grid-template-columns: #{grid.column(14)} #{grid.column(10)};
    padding-inline: #{grid.offset(1)};
  }
}

.page__headline-date {
  display: grid;
  grid-template-columns: 100%;
  padding-block: var(--_page-head-padding-block);
  row-gap: 1.6rem;

  @include sizing.mq($from: m) {
    row-gap: 2.4rem;
  }
}

.page__headline {
  --headline-text-wrap: balance;
}

.page__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
}

.page__description {
  font-size: var(--font-size-body);
  line-height: var(--line-height-wide);

  > * + * {
    margin-block-start: 0.5lh;
  }
}

.page__image {
  order: -1;
  overflow: hidden;
  position: relative;

  @include sizing.mq($from: m) {
    order: 0;
  }
}

.page__image-copyright {
  inset-block-end: 2rem;
  inset-inline-end: 2rem;
  position: absolute;
}

.page__content {
  display: grid;
  grid-template-columns: 100%;
  row-gap: var(--grid-gap);
}

.page__section {
  --_page-block-spacing: 1.6rem;
  --_page-block-spacing-headlines: 3.2rem;
  --_page-block-spacing-figures: 4rem;

  font-size: var(--font-size-body);
  padding-block: clamp(var(--grid-padding), 5vw, 8rem);

  &:is(:first-child) {
    padding-block-start: 0;
  }

  &:is(:last-child) {
    padding-block-end: 0;
  }

  @include sizing.mq($from: m) {
    padding-inline: #{grid.offset(1)};
  }

  @include sizing.mq($from: l) {
    --_page-block-spacing: 2rem;
    --_page-block-spacing-headlines: 4rem;
    --_page-block-spacing-figures: 6rem;

    padding-inline: #{grid.offset(2)};
  }

  @include sizing.mq($from: xl) {
    --_page-block-spacing: 2.4rem;
    --_page-block-spacing-headlines: 4.8rem;
    --_page-block-spacing-figures: 6.4rem;

    padding-inline: #{grid.offset(4)};
  }
}

.page__block:not([data-block-size='section']) {
  margin-block: var(--_page-block-spacing);

  &:where([data-block-size='left'], [data-block-size='right'], [data-block-size='full'], [data-block-size='center']) + & {
    margin-block-start: calc(var(--_page-block-spacing-figures) - var(--_page-block-spacing));
  }

  &:where([data-block-size='left'], [data-block-size='right'], [data-block-size='full'], [data-block-size='center']) {
    margin-block: var(--_page-block-spacing-figures);
  }

  &:where([data-block-size='left'], [data-block-size='right']) {
    @include sizing.mq($from: s) {
      margin-block-start: var(--_page-block-spacing);
    }
  }

  &:is(:first-child) {
    margin-block-start: 0;
  }

  &:is(:last-child) {
    margin-block-end: 0;
  }
}

.page__block:is([data-block-size='left']) {
  @include sizing.mq($from: s) {
    float: left;
    inline-size: #{grid.column(3)};
    margin-inline-end: var(--grid-gap);
  }

  @include sizing.mq($from: m) {
    inline-size: #{grid.column(8)};
    margin-inline-start: #{grid.offset(-1)};
  }

  @include sizing.mq($from: l) {
    inline-size: #{grid.column(8)};
    margin-inline-start: #{grid.offset(-2)};
  }

  @include sizing.mq($from: xl) {
    inline-size: #{grid.column(12)};
    margin-inline-end: calc(#{grid.offset(1)} + var(--grid-gap));
    margin-inline-start: #{grid.offset(-4)};
  }
}

.page__block:is([data-block-size='right']) {
  @include sizing.mq($from: s) {
    float: right;
    inline-size: #{grid.column(3)};
    margin-inline-start: var(--grid-gap);
  }

  @include sizing.mq($from: m) {
    inline-size: #{grid.column(8)};
    margin-inline-end: #{grid.offset(-1)};
  }

  @include sizing.mq($from: l) {
    inline-size: #{grid.column(8)};
    margin-inline-end: #{grid.offset(-2)};
  }

  @include sizing.mq($from: xl) {
    inline-size: #{grid.column(12)};
    margin-inline-end: #{grid.offset(-4)};
    margin-inline-start: calc(#{grid.offset(1)} + var(--grid-gap));
  }
}

.page__block:is([data-block-size='full']) {
  @include sizing.mq($from: m) {
    margin-inline: #{grid.offset(-1)};
  }

  @include sizing.mq($from: l) {
    margin-inline: #{grid.offset(-2)};
  }

  @include sizing.mq($from: xl) {
    margin-inline: #{grid.offset(-4)};
  }
}

.page__block:is([data-block-size='section']) {
  border-block: 2px solid var(--color-gray-200);
  padding-block: clamp(var(--grid-padding), 5vw, 8rem);

  &:last-child {
    border-block-end: 0;
    padding-block-end: 0;
  }
}
  • URL: /components/raw/page/page.scss
  • Filesystem Path: src/components/4-organisms/page/page.scss
  • Size: 4.6 KB

No notes defined.