App.vue

<template>
  <v-app id="app">
    <header>
    <div class="about-link"><router-link aria-label="Lenke til informasjon om ordbøkene" to="/om" tabindex="2">OM ORDBØKENE</router-link></div>
      <h1><a aria-label="Ordbøkene bokmålsordboka og nynorskordboka sitt nettsted" :class="$vuetify.breakpoint.name"  href="/" tabindex="1">Ordbøkene</a></h1>
      <div class="beta" :title="release">{{version_label}}</div>
      <p class="sub-title"><router-link aria-label="Ordbøkene bokmålsordboka og nynorskordboka sitt nettsted" to="/" tabindex="3">Bokmålsordboka og Nynorskordboka</router-link></p>
    </header>
    <router-view></router-view>
    <footer>
      <div :class="$vuetify.breakpoint.xs?'sm':'lg'">
        <div>
          <img id="srlogo" src="./assets/Sprakradet_logo_neg.png" alt="">
        </div>
        <div>
          <img id="uiblogo" src="./assets/uib-logo.svg" alt="">
        </div>
      </div>
      <div>Bokmålsordboka og Nynorskordboka viser skrivemåte og bøying i tråd med norsk rettskriving. Språkrådet og Universitetet i Bergen står bak ordbøkene. Gi oss gjerne tilbakemelding på <a href="mailto:ordbok-beta@uib.no">ordbok-beta@uib.no</a>.</div>
    </footer>
  </v-app>
</template>
<script>
  export default {
    data: function() {
      return {
        version_label: process.env.VUE_APP_VERSION_LABEL,
        release: process.env.VUE_APP_RELEASE
      }
    },
    mounted: function(){
      document.title = 'Ordbøkene - ' + this.version_label
    }
  }
</script>


<style>
  @import url('https://fonts.googleapis.com/css2?family=Inria+Serif:ital,wght@0,400;0,700;1,400;1,700&display=swap');
  @import url('https://fonts.googleapis.com/css2?family=Inria+Serif:ital,wght@0,400;0,700;1,400;1,700&family=Noto+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap');

  @font-face {
    font-family: NotoParen;
    font-style: italic;
    src: url('./assets/NotoSansParen.woff') format('woff');
    unicode-range: U+28-29;
  }


#app {
  font-family: NotoParen, 'Noto Sans', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: var(--v-text-base);
  display: flex;
  flex-direction: column;
  height: 100%;
}

html, body {
    height: 100%
}

body {
  margin: 0px;

}


h1 {
  font-family: Inria Serif;
  color: var(--v-primary-base);
  padding-left: 15px;
}

h1 > a.xs, h1 > a.sm {
  font-size: 36px;
}


header > h1 > a {
  color: var(--v-primary-base) !important;
  text-decoration: none;
  font-size: 48px;
  margin: 0px;
}

.about-link {
  text-align: right;
  margin-right: 15px;
  float: right;
}

header > p {
  padding-left: 18px;
  padding-bottom: 15px;
  padding-top: 0;
}

.beta {
  position: absolute;
  white-space: nowrap;
  top: 2px;
  font-size: 18px;
  color: #BBBBBB;
  padding-left: 15px;
}

.about-link > a{
  text-decoration: none;
  border-bottom: solid var(--v-primary-base) 2px;
  font-size: 12px;
  color: var(--v-primary-base) !important;
}

header {
  position: relative;
  padding-left: calc((100vw - 1200px) / 2);
  padding-right: calc((100vw - 1200px) / 2);
}

footer {
  position: relative;
  padding-left: calc((100vw - 1200px) / 2);
  padding-right: calc((100vw - 1200px) / 2);
}

footer  a {
  text-decoration: underline;
  color: #ffffff !important;
}

a {
  text-decoration: none;
}

header {
  padding-top: 20px;
  background-color: var(--v-tertiary-base);
}

.sub-title {
  font-size: 18px;
  margin: 0px;
  margin-bottom: 0px !important;
  
}

.sub-title a {
  color: var(--v-primary-base) !important;
}

footer {
  font-size: smaller;
  display: table;
  flex-direction: row;
  background-color: var(--v-primary-base);
  color: #ffffff;
}

footer > div {
  display: table-cell;
  vertical-align: middle;
  padding: 10px;
}

footer > div.lg > div {
    padding: 0;
  display: table-cell;
  vertical-align: middle;
  padding: 10px;
}

footer > div.sm > div {
  vertical-align: middle;
  text-align: center;
  padding: 10px;
}

#srlogo {
  height: 20px;
}

#uiblogo {
  height: 60px;
}

/*
Hyperlink style in about page and article content
*/
@media (hover: none) {
  article a:not(.choose):not(.return_to_results a), .about a {
     text-decoration: underline;
  } 
}

@media (hover: hover) {
  article  a, .about a {
     text-decoration: none;
  } 
  article a:hover:not(.choose):not(.return_to_results a), .about a:hover {
  text-decoration: underline;
  }

}


</style>