App.vue

<template>
  <v-app id="app">

    <header>
      <TopBar/>
    </header>
    <div class = "banner" aria-hidden="true" :class="$vuetify.breakpoint">
      <div v-if="show_banner_text">
      <h1 :class="$vuetify.breakpoint.name">Ordbøkene</h1>
      <p class="sub-title">{{$t("sub_title")}}</p>
        </div>
    </div>

    <router-view></router-view>


    <footer>
      <div id="photo-attribution" v-if="!$route.name"><span :aria-label="$t('background')"/>{{$t('photo')}}</div>
      <div :class="$vuetify.breakpoint.xs?'sm':'lg'">
        <div>
          <img id="srlogo" src="./assets/Sprakradet_logo_neg.png" alt="Logo, Språkrådet">
        </div>
        <div>
          <img id="uiblogo" src="./assets/uib-logo.svg" alt="Logo, UiB">
        </div>
      </div>
      <div><em>Bokmålsordboka</em>{{$t('and')}}<em>Nynorskordboka</em>{{$t('footer_description')}} <a href="mailto:ordbok-beta@uib.no">ordbok-beta@uib.no</a>.</div>
    </footer>
  </v-app>
</template>
<script>
import TopBar from './components/TopBar.vue'

  export default {
    computed: {
      show_banner_text: function() {
        return !this.$route.name || (window.innerHeight > 800 && this.$route.name != 'about' )
      }
    },
    components: {
      TopBar
    }
  }
</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: 'Noto Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('./assets/o-0NIpQlx3QUlC5A4PNjXhFVZNyBx2pqPA.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Inria Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('./assets/fC1lPYxPY3rXxEndZJAzN3Srdy0.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Inria Serif';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('./assets/fC14PYxPY3rXxEndZJAzN3wQUjjCjl0.woff2')format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('./assets/o-0IIpQlx3QUlC5A4PNr5TRA.woff2')format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Noto Sans';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('./assets/o-0OIpQlx3QUlC5A4PNr4ARCQ_k.woff2')format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@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%;
  background-color: var(--v-tertiary-base)
}

html, body {
    height: 100%
}

body {
  margin: 0px;

}


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

.banner h1 {
  font-size: 48px;
}

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

.banner {
  padding-top: 10px;
}




.banner p {
  padding-bottom: 10px;
  padding-top: 0;
  padding-left: 18px;

}

.banner a {
  text-decoration: none;
  color: var(--v-primary-base) !important;
}

.beta {
  font-family: Inria Serif;
  font-size: 18px;
  color: white;
  margin-left: 10px;
}

.language-dialog-title {
  font-family: Inria Serif;
  color: white;
}


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

footer  a {
  color: #ffffff !important;
}

.top-bar .v-toolbar__content {
    padding-left: calc((100vw - 1200px) / 2) !important;
    padding-right: calc((100vw - 1200px) / 2) !important;
}

.banner {
  position: relative;
  padding-left: calc((100vw - 1200px) / 2);
  padding-right: calc((100vw - 1200px) / 2);
  background-color: var(--v-tertiary-base);
}

.banner.xs, .banner.sm {
  padding-top: 0px;
}
.banner.xs div, .banner.sm div{
  display: none;
}

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

}

.sub-title {
  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;
}

/*
.v-btn {
  font-weight: bold !important;
}

/* all inflection-table css shoud be moved to beta.ordbok */
td[class="infl-group"] {
  background-color: var(--v-button-base) !important;
  color: var(--v-text-base) !important;
  font-style: normal !important;
  font-weight: bold;
}

th[class="infl-group"] {
  background-color: var(--v-button-base) !important;
  font-style: unset;
}

.v-application .rounded-t-xl {
  border-top-left-radius: 28px !important;
  border-top-right-radius: 28px !important;
}

.v-application .rounded-xl {
  border-radius: 28px !important;
}

.theme--light.v-label, .theme--light.v-subheader, .transparent-text{
  color: var(--v-text-base)
}


#photo-attribution {
  position: absolute;
  top: -32px;
  right: 0px;
  width: 100%;
  text-align: right;
  padding-right: 6px;
  color: white;
  font-size: 12;
  text-shadow: -1px 1px 0 black,
                1px 1px 0 black,
                1px -1px 0 black,
               -1px -1px 0 black;
}


</style>