diff --git a/src/App.vue b/src/App.vue index 71c68e31b7f902e9138b516316ab6cff6dcf64b7..e8a983ac9dbcdabf94bb1fce8c48814a58912e07 100644 --- a/src/App.vue +++ b/src/App.vue @@ -1,25 +1,24 @@ <template> <main id="app"> <header> - <h1>Søk i Ordbøkene</h1> - <span class="top">EID AV UNIVERSITETET I BERGEN OG SPRÅKRÅDET</span> - <p class="mission-statement">Bokmålsordboka og Nynorskordboka er dei einaste fritt tilgjengelege ordbøkene som gjer svar på korleis ord skal skrivast og bøyast - i norsk i tråd med gjeldande rettskriving.</p> - <div class="search_container"> - <autocomplete :debounceTime="100" :auto-select="true" :search="search" @submit="select_result" placeholder="søk..." ref="search"> - <template #result="{result, props}"> - <li class="suggestion" v-bind="props">{{result.label}}</li> - </template> - </autocomplete> - <div class="lang_select_container"> - <select class="lang_select" name="lang" v-model="lang"> - <option value="bob,nob">Begge målformer </option> - <option value="bob">Bokmål</option> - <option value="nob">Nynorsk</option> - </select> - </div> - </div> + <h1>Ordbøkene</h1> + <p class="about-link"><a href="#">OM ORDBØKENE</a></p> + <p class="mission-statement">Skrivemåter og bøying i tråd med norsk rettskriving.</p> </header> + <div class="search_container"> + <autocomplete :debounceTime="100" :auto-select="true" :search="search" @submit="select_result" placeholder="søk..." ref="search"> + <template #result="{result, props}"> + <li class="suggestion" v-bind="props">{{result.label}}</li> + </template> + </autocomplete> + <div class="lang_select_container"> + <select class="lang_select" name="lang" v-model="lang"> + <option value="bob,nob">Begge målformer </option> + <option value="bob">Bokmål</option> + <option value="nob">Nynorsk</option> + </select> + </div> + </div> <img id="spinner" :class="waiting ? 'show' : 'hide'" src="./assets/spinner.gif" alt="Venter på innhold" /> <SearchResults :hits="search_results" :lang="lang" @article-click="article_link_click" v-show="! waiting" /> <div id="single_article_container"> @@ -239,10 +238,12 @@ export default { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; color: #2c3e50; + background-color: #FDF4F5; } body { margin: 0px; + } h1 { @@ -251,13 +252,32 @@ h1 { color: #560027; } + +header > h1 { + color: #BC477B; + font-size: 40px; + margin: 0px; +} + +p.about-link { + text-align: right; + margin: 0px; +} + +p.about-link > a{ + text-decoration: none; + border-bottom: solid #BC477B 4px; + font-size: 12px; + color: #FDF4F5; +} + main { background-image: url('./assets/beta.png'); background-repeat: no-repeat; background-attachment: fixed; } -header, #search_results, #spinner, #single_article_container, footer, div.welcome { +header, #search_results, #spinner, #single_article_container, footer, div.welcome, div.search_container { padding-left: calc((100vw - 1000px) / 2); padding-right: calc((100vw - 1000px) / 2); background-image: url('./assets/beta.png'); @@ -268,11 +288,7 @@ header, #search_results, #spinner, #single_article_container, footer, div.welcom header { padding-top: 60px; padding-bottom: 20px; - background-color: #FDF4F5; -} - -section#search_results, article { - background-color: #FFFFFF; + background-color: #560027; } div.welcome { @@ -288,7 +304,9 @@ div.welcome { } .mission-statement { - font-size: 24px; + font-size: 16px; + margin: 0px; + color: #FDF4F5; } .show { @@ -303,28 +321,15 @@ div.welcome { width: 25em; border-bottom: solid #BC477B; border-radius: 0px; - margin-bottom: 8px; -} - -.autocomplete-result-list { - max-height: 500px; -} - -input[type=radio] { - display: none; } -input[type=radio]:checked + label { - border: solid 1px #560027; - box-shadow: inset 0 0 2px #000000; +.autocomplete-input { + border-radius: 0px; + background-color: #FFFFFF; } -label { - margin: 4px 4px 4px 8px; - border: solid 1px #FDF4F5; - border-radius: 4px; - padding: 2px 8px 2px 8px; - background-color: #DDDDDD +.autocomplete-result-list { + max-height: 500px; } .lang-select-intro { @@ -344,6 +349,7 @@ footer { .search_container { display: flex; flex-direction: row; + padding-top: 50px; } li.suggestion { @@ -370,10 +376,9 @@ footer p { select.lang_select { appearance: none; - background-color: transparent; + background-color: #EEEEEE; border: none; padding: 0 1em 0 0; - margin: 0; width: 100%; height: 100%; font-family: inherit; @@ -385,6 +390,7 @@ select.lang_select { background-position: 98% center; background-repeat: no-repeat; background-size: 10%; + border-bottom: solid #BC477B; } </style> diff --git a/src/components/Article.vue b/src/components/Article.vue index 9dbf0af9bd611d7428e3ca72bc96b7560c2bccdb..3567595c7166917429bb742a0eafd75776d26dff 100644 --- a/src/components/Article.vue +++ b/src/components/Article.vue @@ -57,7 +57,10 @@ export default { <!-- Add "scoped" attribute to limit CSS to this component only --> <style> article { - margin-top: 30px; + padding: 10px; + margin: 10px; + border-radius: 10px; + background-color: #FFFFFF; } h3 { diff --git a/src/components/SearchResults.vue b/src/components/SearchResults.vue index d1c3cc73e443aed1bd5f0efe5aaa26487652d99a..434f3c0a612a84cf0e763e354f6c2aa6c0c80b8c 100644 --- a/src/components/SearchResults.vue +++ b/src/components/SearchResults.vue @@ -53,21 +53,8 @@ export default { color: #560027; } - .hits .preview { - margin: 10px; - padding: 5px; - cursor: pointer; - } - - .hits .preview h4 { - color: #560027; - text-decoration: underline; - } - .hits { margin-top:0px; - margin-left: 20px; - margin-right: 20px; } .flex-container { @@ -80,9 +67,6 @@ export default { .flex-container h4 { margin: 0px; - } - - li.article_container { - border-bottom: solid 2px #560027; + color: #560027; } </style>