@e-fellows/website-2022

Seite: Default 

<div id="page-29579-65040" class="page">

    <div class="page__content">
        <div class="page__blocks">

        </div>

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

<div {{ html_attributes({
  id: id,
  class: 'page',
}, attrs ?? {}) }}>
  {% if stage|default %}
    <div class="page__stage">
      {% include stage.use with stage.configuration | merge({
        id: 'stage' | namespaceInputId(id),
        level: stage.configuration.level ?? level,
      }) only %}
    </div>
  {% endif %}

  <div class="page__content">
    <div class="page__blocks">
      {% set clearfix = false %}

      {% if actionBar|default and actionBar.items|length > 0 %}
        <div class="page__action-bar">
          {% include '@action-bar' with actionBar only %}
        </div>
      {% endif %}

      {% if date|default and date is instance of('DateTimeInterface') %}
        <time class="page__date" datetime="{{ date | date('Y-m-d') }}">{{ date | date('d. F Y') }}</time>
      {% elseif date|default %}
        <div class="page__date">{{ date }}</div>
      {% endif %}

      {% if introBlock|default %}
        <div {{ html_attributes({
          id: introBlock.id ?? false,
          class: 'page__block page__block--intro',
        }, introBlock.attributes ?? {}) }}>
          {{ introBlock.content | raw }}
        </div>
      {% endif %}

      {% for block in blocks|default([]) %}
        {% set spacing = block.spacing ?? false %}
        {% set halfFull = block.halfFull ?? false %}
        {% set full = block.full ?? false %}
        {% set wide = block.wide ?? false %}
        {% set wider = block.wider ?? false %}
        {% set breaker = block.breaker ?? false %}
        {% set floating = block.floating ?? false %}
        {% set highlight = block.highlight ?? false %}

        {% if (halfFull or full or wide or wider or breaker or highlight) and actionBar.items|default|length > 0 and not clearfix %}
          <div class="page__clearfix"></div>
          {% set clearfix = true %}
        {% endif %}

        <div {{ html_attributes({
          id: block.id ?? false,
          class: {
            'page__block': true,
            'page__block--spacing': spacing,
            'page__block--half-full': halfFull,
            'page__block--full': full,
            'page__block--wide': wide,
            'page__block--wider': wider,
            'page__block--breaker': breaker,
            'page__block--floating': floating,
            'page__block--highlight': highlight,
          },
        }, block.attributes ?? {}) }}>
          {{ block.content | raw }}
        </div>
      {% endfor %}
    </div>

    {% if source|default %}
      <div class="page__blocks page__blocks--outro">
        {% include '@small-print' with {
          content: "<p>#{source}</p>",
        } only %}
      </div>
    {% endif %}
  </div>
</div>
 
/* No context defined. */
  • Content: 
    @use 'sass:map';

:root {
  --page-block-spacing: 2rem;

  @include use-responsive-sizing(--page-block-spacing-wide, responsive-map(xs 3.6rem, xl 5.6rem));
  @include use-responsive-sizing(--page-block-spacing-full, responsive-map(xs 4.2rem, xl 7.2rem));
  @include use-responsive-sizing(--page-content-padding, responsive-map(xs 4rem, xl 6rem));
}

.page__content {
  padding-block: var(--page-content-padding);

  @include use-container();
}

.page__blocks {
  clear: both;
  margin-inline: auto;

  @include use-responsive-sizing(width, (
    m: column-width(m, 8),
    l: column-width(l, 8),
    xl: column-width(xl, 6),
  ));
  @include use-responsive-sizing(max-width, (
    xs: 50rem,
    m: none,
  ));
  @include use-responsive-sizing(--infobox-padding-inline, (
    xs: map.get($inner-container-padding, xs),
    s: map.get($inner-container-padding, s),
    m: 0,
  ));
  @include use-responsive-sizing(--infobox-content-width, (
    m: column-width(m, 8),
    l: column-width(l, 8, $number-of-columns: 10),
    xl: column-width(xl, 6, $number-of-columns: 10),
  ));
  @include use-responsive-sizing(--video-gallery-column-width, (
    l: column-width(l, 3),
    xl: column-width(xl, 3),
  ));
}

.page__blocks--outro {
  margin-block-start: var(--page-block-spacing-wide);
}

.page__action-bar {
  @include use-responsive-sizing(margin-bottom, (xs: calc(var(--page-block-spacing) * 2), m: 0));
  @include use-responsive-sizing(width, (
    m: column-width(m, 2, $number-of-columns: 8),
    l: column-width(l, 2, $number-of-columns: 8),
    xl: column-width(xl, 2, $number-of-columns: 6),
  ));
  @include use-responsive-sizing(margin-left, (
    m: column-offset(m, 2, $negative: true, $number-of-columns: 8),
    l: column-offset(l, 2, $negative: true, $number-of-columns: 8),
    xl: column-offset(xl, 3, $negative: true, $number-of-columns: 6),
  ));

  @include mq($from: m) {
    --action-bar-button-padding: 2rem 1rem;
    --action-bar-button-width: 100%;

    float: left;
  }
}

.page__date {
  display: block;
  font-size: 2rem;
  font-style: italic;
  margin-block-end: var(--page-block-spacing);
  text-transform: uppercase;
}

.page__clearfix {
  @include use-clearfix();
}

.page__block {
  margin-block-end: var(--page-block-spacing);

  .page__blocks:first-child &:first-child,
  .page__blocks:first-child &:first-child > *:first-child {
    margin-block-start: 0;
  }

  .page__blocks:last-child &:last-child {
    margin-block-end: 0;
  }

  > * + * {
    margin-block-start: var(--page-block-spacing);
  }

  > .headline {
    margin-block-start: calc(var(--page-block-spacing) * 2);
  }
}

.page__block--intro > .paragraph:first-child {
  font-weight: var(--font-weight-semibold);
  margin-block-end: calc(var(--page-block-spacing) * 2);

  @include use-responsive-sizing(font-size, (xs: 2.2rem, m: 2.4rem));
}

.page__block--wide {
  margin-block: var(--page-block-spacing-wide);

  @include use-responsive-sizing(margin-left margin-right, (
    xs: map.get($inner-container-padding, xs) * -1,
    m: column-offset(m, -1, $number-of-columns: 8),
    l: column-offset(l, -1, $number-of-columns: 8),
    xl: column-offset(xl, -1, $number-of-columns: 6),
  ));

  @include mq($until: m) {
    --list-pagination-padding-inline: #{map.get($inner-container-padding, xs)};
    --list-search-results-padding-inline: #{map.get($inner-container-padding, xs)};
    --list-teasers-padding-inline: #{map.get($inner-container-padding, xs)};
    --form-padding-inline: #{map.get($inner-container-padding, xs)};
  }
}

.page__block--wider {
  margin-block: var(--page-block-spacing-wide);

  @include use-responsive-sizing(margin-left margin-right, (
    xs: map.get($inner-container-padding, xs) * -1,
    m: column-offset(m, -1, $number-of-columns: 8),
    l: column-offset(l, -1, $number-of-columns: 8),
    xl: column-offset(xl, -2, $number-of-columns: 6),
  ));

  @include mq($until: m) {
    --extended-table-padding-inline: #{map.get($inner-container-padding, xs)};
  }
}

.page__block--spacing {
  margin-block: var(--page-block-spacing-wide);
}

.page__block--half-full {
  margin-block: var(--page-block-spacing-wide);

  @include use-responsive-sizing(margin-inline, (
    m: column-offset(m, -1, $number-of-columns: 8),
    l: column-offset(l, -1, $number-of-columns: 8),
    xl: column-offset(xl, -2, $number-of-columns: 6),
  ));
}

.page__block--full {
  margin-block: var(--page-block-spacing-full);

  @include use-responsive-sizing(margin-left margin-right, (
    m: column-offset(m, -2, $number-of-columns: 8),
    l: column-offset(l, -2, $number-of-columns: 8),
    xl: column-offset(xl, -3, $number-of-columns: 6),
  ));
}

.page__block--highlight {
  padding-block: var(--page-block-spacing-wide);
  position: relative;

  .page__blocks:first-child &:first-child {
    margin-block-start: calc(var(--page-content-padding) * -1);
  }

  &::before {
    background-color: var(--color-orange-light);
    content: '';
    inset: 0;
    margin-inline: calc((100vw - 100%) / -2);
    position: absolute;
    z-index: -1;
  }
}

.page__block--breaker {
  margin-block: var(--page-block-spacing-full);

  & + & {
    margin-block-start: calc(var(--page-block-spacing-full) * -1 + 0.5rem);
  }

  .page__blocks:first-child &:first-child {
    margin-block-start: calc(var(--page-content-padding) * -1 + 0.5rem);
  }

  @include use-break-out();
}

.page__block--floating {
  display: contents;
}
  • URL: /components/raw/page/page.scss
  • Filesystem Path: src/components/3-organisms/page/page.scss
  • Size: 5.4 KB

No notes defined.