Something went wrong on our end
-
Petr Kalashnikov authoredPetr Kalashnikov authored
App.vue 3.26 KiB
<template>
<v-app id="app">
<header>
<div class="about-link"><router-link to="/om">OM ORDBØKENE</router-link></div>
<h1><a :class="$vuetify.breakpoint.name" href="/">Ordbøkene</a></h1>
<div class="beta" :title="release">{{version_label}}</div>
<p class="sub-title"><router-link to="/">Bokmålsordboka og Nynorskordboka</router-link></p>
</header>
<router-view></router-view>
<footer>
<div>
<img id="srlogo" src="./assets/Sprakradet_logo_neg.png" alt="">
<img id="uiblogo" src="./assets/uib-logo.svg" alt="">
</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: #2c3e50;
display: flex;
flex-direction: column;
height: 100%;
}
html, body {
height: 100%
}
body {
margin: 0px;
}
a {
text-decoration: none;
}
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;
font-size: 48px;
margin: 0px;
}
.about-link {
text-align: right;
margin-right: 15px;
float: right;
}
header > p {
padding: 15px;
}
.beta {
position: absolute;
top: 2px;
font-size: 20px;
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);
}
header {
position: relative;
padding-left: calc((100vw - 1200px) / 2);
padding-right: calc((100vw - 1200px) / 2);
}
footer {
position: relative;
padding-left: calc((100vw - 1000px) / 2);
padding-right: calc((100vw - 1000px) / 2);
}
footer a {
text-decoration: underline;
color: #ffffff !important;
}
header {
padding-top: 20px;
background-color: var(--v-tertiary-base);
}
.sub-title {
font-size: 14px;
margin: 0px;
margin-bottom: 0px !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;
}
#srlogo {
height: 20px;
}
#uiblogo {
height: 60px;
margin-left: 25px;
}
</style>