@zplane-web/craft-licensing

Seite: Startseite 

<div id="page-44517-44987" class="page">

</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: 
    @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.