endringer i grafisk design

src/App.vue

 <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>

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 {

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>