Complete CSS refactor

components/contentTypeFilter.vue

 <template>
-  <div class='tabs is-toggle is-toggle-rounded is-centered content-filter-toggle'>
+  <div class='tabs is-toggle is-toggle-rounded is-centered content-filter-toggle is-small'>
     <ul>
       <li class='is-active'>
         <a>
@@ -24,9 +24,9 @@ export default {
 </script>
 
 <style>
-.content-filter-toggle.tabs {
-  font-size: 1.5vmax;
-  margin-top: -1.5vmax;
-  margin-bottom: 4vmax;
+
+.content-filter-toggle.tabs
+{
+  margin-bottom: 1em;
 }
 </style>

components/search.vue

@@ -51,11 +51,8 @@ export default {
 </script>
 
 <style>
-  .autocomplete.control {
-    margin-left: auto;
-    margin-right: auto;
-    width: 42vmax;
-    font-size: 2vmax;
-    margin-top: 2vmax;
-  }
+.autocomplete.control {
+  margin-left: auto;
+  margin-right: auto;
+}
 </style>

layouts/default.vue

@@ -154,9 +154,9 @@ Controls
 Tabs
 - - - - - - - - - - - - */
 
-.tabs
-{
+.tabs, .tabs.is-small {
   /* override Bulma default that prevents font scaling */
   font-size: 1em;
 }
+
 </style>

pages/index.vue

@@ -75,4 +75,23 @@ export default {
   max-width: 42em;
 }
 
+nav.tabs
+{
+  /* make navigation tab text bigger (ideally these will be h2s) */
+  font-size: 1.2em;
+  /* make navigation tabs very tall */
+  line-height: 2;
+}
+
+.tabs ul
+{
+  margin: 0;
+}
+
+.tabs li
+{
+  margin-bottom: 0;
+}
+
+
 </style>