<commit_before>/*doc
---
title: Resource Header
name: resource-header
category: Widgets
---

The resource header should be used as a consistent header for resources such as
processes, proposals or documents. It contains a title, some meta-information,
a primary action (e.g. create proposal or like) and a dropdown with resource
actions (edit, share, report, print, ...).

```html_example
<header class="resource-header">
    <div class="resource-header-navigation">
        <div class="resource-header-breadcrumbs">
            <a href="#">← to process</a>
        </div>
        <a href="#" class="resource-header-actions">…</a>
    </div>
    <div class="resource-header-main-wrapper">
        <div class="resource-header-main">
            <h1 class="resource-header-title">Johannisthal</h1>
            <ul class="resource-header-meta">
                <li>Bebauungsplanverfahren 184a</li>
                <li>Öffentliche auslegung</li>
                <li>22.9.-22.10.15</li>
            </ul>
            <div class="resource-header-action"><a href="#" class="button-cta">Create proposal</a></div>
        </div>
    </div>
</header>
```
*/
.resource-header {
    position: relative;
    padding: $padding;
    margin-bottom: $padding;
    z-index: 0;
}

.resource-header-main-wrapper {
    padding: 1px;  // clear margins
}

.resource-header-main {
    @include rem(margin, 3em auto 4rem);
    max-width: 40em;
    text-align: center;
}

.resource-header-meta,
.resource-header-action {
    @include rem(margin-bottom, 1.5rem);
}

.resource-header-title {
    @include rem(margin-bottom, 1.2rem);
    font-size: 200%;
}

.resource-header-meta {
    text-transform: uppercase;
    font-size: $font-size-smaller;
    color: $color-text-introvert;
    font-weight: bold;
    list-style: none;

    li {
        display: inline;

        &::after {
            content: " / ";
        }

        &:last-child::after {
            content: none;
        }
    }

    a {
        color: inherit;
    }
}

.resource-header-actions {
    position: absolute;
    right: 0;
    top: 0;
}<commit_msg>adapt resource header CSS to S1<commit_after>/*doc
---
title: Resource Header
name: resource-header
category: Widgets
---

The resource header should be used as a consistent header for resources such as
processes, proposals or documents. It contains a title, some meta-information,
a primary action (e.g. create proposal or like) and a dropdown with resource
actions (edit, share, report, print, ...).

```html_example
<header class="resource-header">
    <div class="resource-header-navigation">
        <div class="resource-header-breadcrumbs">
            <a href="#">← to process</a>
        </div>
        <a href="#" class="resource-header-actions">…</a>
    </div>
    <div class="resource-header-main-wrapper">
        <div class="resource-header-main">
            <h1 class="resource-header-title">Johannisthal</h1>
            <ul class="resource-header-meta">
                <li>Bebauungsplanverfahren 184a</li>
                <li>Öffentliche auslegung</li>
                <li>22.9.-22.10.15</li>
            </ul>
            <div class="resource-header-action"><a href="#" class="button-cta">Create proposal</a></div>
        </div>
    </div>
</header>
```
*/
.resource-header {
    position: relative;
    padding: $padding;
    margin-bottom: $padding;
    z-index: 0;
}

.resource-header-main-wrapper {
    padding: 1px;  // clear margins
}

.resource-header-main {
    @include rem(margin, 3em auto 4rem);
    max-width: 40em;
    text-align: center;
}

.resource-header-meta,
.resource-header-action {
    @include rem(margin-bottom, 1.5rem);
}

.resource-header-title {
    @include rem(margin-bottom, 1.2rem);
    font-size: 200%;
}

.resource-header-meta {
    text-transform: uppercase;
    font-size: $font-size-smaller;
    color: $color-text-introvert;
    font-weight: bold;
    list-style: none;

    li {
        display: inline;

        &::after {
            content: " / ";
        }

        &:last-child::after {
            content: none;
        }
    }

    a {
        color: inherit;
    }

    .user-meta.user-profile-image {
        vertical-align: -0.5em;
        margin-left: 0.5em;
        margin-right: 0.5em;
        height: 1.5rem;
        width: 1.5rem;
    }
}

.resource-header-actions {
    position: absolute;
    right: 0;
    top: 0;
}
{'fraction_non_alphanumeric': 0.1503074470507857, 'fraction_numerical': 0.015713960373491234, 'mean_word_length': 2.3072289156626504, 'pattern_counts': {'":': 0, '<': 59, '<?xml version=': 0, '>': 59, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '1469667', 'n_tokens_mistral': 1477, 'n_tokens_neox': 1409, 'n_words': 320}