diff --git a/src/App.vue b/src/App.vue index 1133f9f9b055dcccdd6375c3bbe5c5bc2f1e74bc..c37dcfc1212959f581e53291333f96056b5970da 100644 --- a/src/App.vue +++ b/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 { diff --git a/src/components/Autocomplete.vue b/src/components/Autocomplete.vue index 222835b331598f2fbca08b3e4032b402b7d604b1..330796455458a2ed8bb94e26f292539cd1d82033 100644 --- a/src/components/Autocomplete.vue +++ b/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'}}) diff --git a/src/components/DictionaryView.vue b/src/components/DictionaryView.vue index 20f615e4ab648e68c36ea759cec5b1eb7ffc2ebe..507dce414e3492a2969fceea8f8538845ad102e9 100644 --- a/src/components/DictionaryView.vue +++ b/src/components/DictionaryView.vue @@ -1,26 +1,29 @@ <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;