re meta#300 farger, header

src/App.vue

@@ -4,7 +4,7 @@
     <p class="about-link"><router-link to="/om">OM ORDBØKENE</router-link></p>
       <h1><a href="/">Ordbøkene</a></h1>
       <div class="beta">Beta</div>
-      <p class="sub-title"><router-link to="/">Bokmålsordboka | Nynorskordboka – rett norsk</router-link></p>
+      <p class="sub-title"><router-link to="/">{{sub_header}}</router-link></p>
     </header>
     <router-view></router-view>
     <footer>
@@ -19,6 +19,17 @@
   </v-app>
 </template>
 
+<script>
+  export default {
+    name: 'App',
+    computed: {
+      sub_header: function() {
+        return this.$vuetify.breakpoint.smAndDown ? 'Bokmålsordboka | Nynorskordboka – rett norsk' : 'Bokmålsordboka og Nynorskordboka'
+      }
+    }
+  }
+</script>
+
 
 <style>
   @import url('https://fonts.googleapis.com/css2?family=Inria+Serif:ital,wght@0,400;0,700;1,400;1,700&display=swap');
@@ -63,8 +74,8 @@ h1 {
 
 
 header > h1 > a {
-  color: var(--v-secondary-base) !important;
-  font-size: 40px;
+  color: var(--v-primary-base) !important;
+  font-size: 36px;
   margin: 0px;
 }
 
@@ -78,11 +89,6 @@ header > p {
   padding: 3px;
 }
 
-header > p > a {
-  color: var(--v-tertiary-base)   !important;
-  text-decoration: none;
-}
-
 .beta {
   position: absolute;
   top: 2px;
@@ -92,12 +98,18 @@ header > p > a {
 
 p.about-link > a{
   text-decoration: none;
-  border-bottom: solid var(--v-secondary-base) 4px;
+  border-bottom: solid var(--v-primary-base) 2px;
   font-size: 12px;
-  color: var(--v-tertiary-base);
+  color: var(--v-primary-base);
 }
 
-header,  footer {
+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);
@@ -105,12 +117,13 @@ header,  footer {
 
 header {
   padding-top: 20px;
-  background-color: var(--v-primary-base);
+  background-color: var(--v-tertiary-base);
 }
 
 .sub-title {
   font-size: 14px;
   margin: 0px;
+  margin-bottom: 0px !important;
 }
 
 footer {

src/components/Autocomplete.vue

@@ -20,7 +20,7 @@
         placeholder="Søk..."
         ref="autocomplete"
         color="secondary"
-        dense
+        :dense="$vuetify.breakpoint.smAndDown"
       >
       <template v-slot:item="data">
       <span class="search-hit">{{data.item.label}} </span> ({{data.item.lang_set ? Array.from(data.item.lang_set).sort().join(', ') : 'fritekstsøk'}})

src/components/DictionaryView.vue

 <template>
   <main :class="(article || waiting || error || (search_results && search_results.length)) ? '' : 'welcome  '">
     <div class="search_container">
+      <p class="description" v-if="$vuetify.breakpoint.mdAndUp">
+          Skrivemåte og bøying i tråd med norsk rettskriving
+      </p>
       <div class="lang_select_container">
         <v-radio-group row v-model="lang">
           <template v-slot:label>
             <span>VIS TREFF I</span>
           </template>
-          <v-radio value="bob,nob" color="secondary">
+          <v-radio value="bob,nob" color="primary">
             <template v-slot:label>
               <span>
                 begge{{$vuetify.breakpoint.smAndDown ? '' : ' ordbøkene'}}
               </span>
             </template>
           </v-radio>
-          <v-radio value="bob" color="secondary">
+          <v-radio value="bob" color="primary">
             <template v-slot:label>
               <span>
                 {{$vuetify.breakpoint.xs ? 'bm' :  'bokmål (bm)'}}
               </span>
             </template>
           </v-radio>
-          <v-radio value="nob" color="secondary">
+          <v-radio value="nob" color="primary">
             <template v-slot:label>
               <span>
                 {{$vuetify.breakpoint.xs ? 'nn' :  'nynorsk (nn)'}}
@@ -288,6 +291,12 @@ main.welcome {
   padding-top: 40px;
 }
 
+p.description {
+  font-size: 24px;
+  color: var(--v-primary-base);
+  padding-top: 40px;
+  padding-bottom: 40px;
+}
 
 div.monthly {
   padding: 20px;