complete index search box

frontend/src/style/_index.scss

@@ -2,9 +2,9 @@
 .search {
   width: 100%;
   
-  margin: 15px 0;
+  margin: 5px 0 15px;
 
-  font-size: 15px;
+  font-size: 1.1em;
   padding: .5em .5em;
 }
 

frontend/src/style/_pkginfo.scss

@@ -1,8 +1,3 @@
-.pkgname-header {
-  border-bottom: 1px solid #888;
-  margin-bottom: .5em;
-}
-
 table.pkginfo {
   th {
     text-align: start;

frontend/src/style/main.scss

@@ -26,6 +26,11 @@ a:visited
   color: var(--link-fg);
 }
 
+h2 {
+  border-bottom: 1px solid #888;
+  margin-bottom: .5em;
+}
+
 .content {
   width: 95%;
   margin: 30px auto;

frontend/src/views/Index.vue

@@ -43,7 +43,9 @@ watch(searchInput, async(newVal, oldVal) => {
 
 <template>
   <div class="box" style="margin-bottom: 15px;">
-    <input class="search" type="text" v-model="searchInput">
+    <h2>Package Search</h2>
+    <label for="search-input">Keyword</label>
+    <input class="search" type="text" id="search-input" v-model="searchInput">
   </div>
   <div class="box">
     <PackageList></PackageList>

frontend/src/views/Package.vue

@@ -34,7 +34,7 @@ requestPackageInfo(route.params.packageName)
 
 <template>
   <div class="box">
-    <h2 class="pkgname-header">{{ pkginfo.name }} {{ pkginfo.version }}</h2>
+    <h2>{{ pkginfo.name }} {{ pkginfo.version }}</h2>
 
     <div class="right-things">
       <PackageActions :pkginfo="pkginfo"></PackageActions>