kandimat-user-app/src/app/imprint/components/index.vue

<template>
  <section>
    <h1>{{ $t('imprint.headline') }}</h1>

    <div class="imprint-basic">
      <div class="imprint-address">
        <div class="imprint-group">
          <h3>{{ $t('imprint.netzbegruenung.addressLabel') }}</h3>
          <address>
            <v-markdown :source="$t('imprint.netzbegruenung.address')" />
          </address>
        </div>

        <div class="imprint-group">
          <h3>{{ $t('imprint.netzbegruenung.representedLabel') }}</h3>
          <p>{{ $t('imprint.netzbegruenung.represented') }}</p>
        </div>

        <div class="imprint-group inline">
          <h3>{{ $t('imprint.netzbegruenung.emailLabel') }}</h3>
          <a class="btn btn-dark btn-small" :href="`mailto:${$t('imprint.netzbegruenung.email')}`">
            {{ $t('imprint.netzbegruenung.email') }}
            <feather-mail />
          </a>
        </div>

        <div class="imprint-group inline">
          <h3>{{ $t('imprint.netzbegruenung.phoneLabel') }}</h3>
          <a class="btn btn-dark btn-small" :href="`tel:${$t('imprint.netzbegruenung.phone')}`">
            {{ $t('imprint.netzbegruenung.phone') }}
            <feather-phone />
          </a>
        </div>

        <div class="imprint-group">
          <h3>{{ $t('imprint.netzbegruenung.registerLabel') }}</h3>
          <v-markdown :source="$t('imprint.netzbegruenung.register')" />
        </div>
      </div>

      <div class="imprint-address">
        <div class="imprint-group">
          <h3>{{ $t('imprint.editorialStaff.addressLabel') }}</h3>
          <address>
            <v-markdown :source="$t('imprint.editorialStaff.address')" />
          </address>
        </div>

        <div class="imprint-group">
          <h3>{{ $t('imprint.editorialStaff.representedLabel') }}</h3>
          <p>{{ $t('imprint.editorialStaff.represented') }}</p>
        </div>

        <div class="imprint-group inline">
          <h3>{{ $t('imprint.editorialStaff.emailLabel') }}</h3>
          <a class="btn btn-dark btn-small" :href="`mailto:${$t('imprint.editorialStaff.email')}`">
            {{ $t('imprint.editorialStaff.email') }}
            <feather-mail />
          </a>
        </div>

        <div class="imprint-group inline">
          <h3>{{ $t('imprint.editorialStaff.phoneLabel') }}</h3>
          <a class="btn btn-dark btn-small" :href="`tel:${$t('imprint.editorialStaff.phone')}`">
            {{ $t('imprint.editorialStaff.phone') }}
            <feather-phone />
          </a>
        </div>

        <div class="imprint-group">
          <h3>{{ $t('imprint.editorialStaff.registerLabel') }}</h3>
          <v-markdown :source="$t('imprint.editorialStaff.register')" />
        </div>
      </div>
    </div>

    <hr>

    <div class="imprint-responsibility">
      <div class="imprint-group">
        <h3>{{ $t('imprint.responsible.headline') }}</h3>
        <v-markdown :source="$t('imprint.responsible.text')" />
      </div>

      <div class="imprint-group inline">
        <h3>{{ $t('imprint.responsible.mail') }}</h3>
        <a class="btn btn-dark btn-small" href="mailto:backoffice (a) netzbegruenung.de">
          backoffice (a) netzbegruenung.de
          <feather-mail />
        </a>
      </div>
    </div>

    <hr>

    <ul class="imprint-info">
      <li v-for="info of $t('imprint.content')" :key="info.title">
        <h2>{{ info.title }}</h2>
        <p>{{ info.text }}</p>
      </li>
    </ul>
  </section>
</template>

<script>
  export default {
    name: 'Imprint',

    components: {
      'feather-mail': () =>
        import('vue-feather-icons/icons/MailIcon' /* webpackChunkName: "icons" */),
      'feather-phone': () =>
        import('vue-feather-icons/icons/PhoneIcon' /* webpackChunkName: "icons" */)
    }
  }
</script>

<style lang="scss" scoped>
  @import "~@/styles/layout";
  @import "~@/styles/colors";

  h1 {
    margin-bottom: $base-gap;
  }

  .imprint-basic,
  .imprint-responsibility {
    margin-bottom: $base-gap / 2;
  }

  hr {
    display: block;
    width: 100%;
    border: none;
    height: 4px;
    background: $transparent-white;
    margin-bottom: $base-gap;
  }

  .imprint-basic {
    display: flex;
    justify-content: space-between;

    @media (max-width: 700px) {
      flex-direction: column;
    }

    address {
      font-style: normal;
    }

    .imprint-address {
      width: calc(50% - #{$base-gap / 2});

      @media (max-width: 700px) {
        width: 100%;

        &:last-of-type {
          border-top: 4px solid $transparent-white;
          padding-top: $small-gap;
        }
      }
    }
  }

  .imprint-group {
    margin-bottom: $small-gap;

    &.inline {
      display: flex;
      align-items: center;
    }

    &.inline h3 {
      margin-right: $small-gap;
    }
  }

  .imprint-info {
    list-style: none;

    h2 {
      margin-bottom: $small-gap / 2;
    }

    li:not(:last-child) {
      margin-bottom: $small-gap;
    }
  }
</style>