manifest/nuxt/components/Noga.vue

<script setup="setup">
const route = useRoute()

const pot = computed(() => route.path)
const naManifestu = computed(() => route.path.indexOf('/pojmi') === 0)
</script>

<template>
<section class="noga">
    <div class="maska">
        <a href="https://maska.si" target="_blank">
            <img src="/images/maska-logo.svg" />
        </a>
    </div>
    <div class="kompot">
        <p>
          <a href="https://kompot.si" target="_blank">
            <img src="/images/kompot_sm.png">
            2024
            Kompot
          </a>
        </p>
    </div>
    <div class="eu-projekti">
      <div class="eu-projekti-logos">
        <img src="/images/peripheralvisions.png" />
        <img src="/images/eu-logo.svg" />
      </div>
      <p>Funded by the European Union. Views and opinions expressed are however those of the author(s) only and do not necessarily reflect those of the European Union or European Education and Culture Executive Agency (EACEA). Neither the European Union nor the granting authority can be held responsible for them.</p>
    </div>
</section>
</template>

<style scoped>
.noga {
  background-color: black;
  z-index: 100;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-content: center;
  flex-wrap: wrap;
  padding: 2rem;
  align-content: center;
}

p, a {
    color: white;
    text-decoration: none;
}

a {
  margin-left: auto;
  margin-right: auto;
}

.noga > div {
    position: relative;
    display: block;
    height: 70%;
    max-width: 30%;
    margin-top: auto;
    margin-bottom: auto;
    min-height: 2rem;
    height: fit-content;
}
img {
    width: 100%;
    height: auto;
    max-width: 300px;
}

.eu-projekti {
    padding: 1rem;
    display: flex;
    flex-direction: column;

    background-color: #D9D9D9;
    border-radius: 16px;

}

a {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.eu-projekti-logos {
    position: relative;
    width: 100%;
    display: flex;
    justify-content: space-between;
}

.eu-projekti-logos img {
    max-width: 40%;
}

.eu-projekti p {
    color: black;
}

@media screen and (max-width: 764px) {
    .noga {
        display: block;
    }
    .noga div {
        max-width: 100%;
    }

    .kompot {
        text-align: center;
    }
}


</style>