- add search components: vs-result.vue, vs-input.vue, facet-category.vue

- add search models
- add opensans font
- add bulma css framework
- add axios, rxjs, vue-property-decorator
- npm updates

src/assets/fa/search.svg

@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg fill="grey" width="1792" height="1792" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M1216 832q0-185-131.5-316.5t-316.5-131.5-316.5 131.5-131.5 316.5 131.5 316.5 316.5 131.5 316.5-131.5 131.5-316.5zm512 832q0 52-38 90t-90 38q-54 0-90-38l-343-342q-179 124-399 124-143 0-273.5-55.5t-225-150-150-225-55.5-273.5 55.5-273.5 150-225 225-150 273.5-55.5 273.5 55.5 225 150 150 225 55.5 273.5q0 220-124 399l343 343q37 37 37 90z"/></svg>

src/assets/scss/main-styles.scss

@@ -0,0 +1,201 @@
+@charset "utf-8";
+@import "~bulma";
+// @import "@fontsource/open-sans"; // Defaults to weight 400.
+@import "~@openfonts/open-sans_all/index.css";
+
+html, body {
+    font-family: "Open Sans", sans-serif;
+    font-size: 0.92rem;   
+  }
+
+
+/*footer {*/
+/*    !*position: absolute;*!*/
+/*    bottom: 0;*/
+/*    width: 100%;*/
+/*}*/
+
+.site {
+    display: flex;
+    min-height: 100vh;
+    flex-direction: column;
+}
+
+.site-content {
+    flex: 1;
+}
+
+.search-button-icon {
+    color: rgb(219, 219, 219);
+}
+
+.search-button-icon:hover {
+    color: rgb(74, 74, 74);
+}
+
+.icon-spacing {
+    margin-right: 3px;
+}
+
+svg,
+:before,
+:after {
+    box-sizing: border-box;
+    padding: auto;
+    margin: auto;
+}
+
+.hide {
+    display: none;
+}
+
+.animate_content {
+    animation: animate 3s ease;
+}
+
+@keyframes animate {
+    10% {
+        transform: scale(1, 0.004);
+    }
+    35% {
+        transform: scale(0.001, 0.004);
+        opacity: 1;
+    }
+    50% {
+        transform: scale(0.001, 0.004);
+        opacity: 0;
+    }
+    85% {
+        transform: scale(1, 0.004);
+        opacity: 1;
+    }
+    100% {
+        transform: scale(1, 1);
+    }
+}
+
+.page_description {
+    font-weight: 300;
+    text-align: center;
+}
+
+.page_style {
+    background: transparent;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    height: 100%;
+    width: 100%;
+    margin: auto;
+    overflow: hidden;  
+}
+
+.rabbit-grid {
+    padding-left: 2%;
+    padding-right: 2%;
+}
+
+.rabbit-card {
+    height: 10vh;
+    margin: auto;
+    justify-content: center;
+    border-radius: 6px;
+}
+
+.rabbit-text {
+    font-size: 1.75vh;
+}
+
+/* flip the pane when hovered */
+.flip-container:hover .flipper,
+.flip-container.hover .flipper {
+    transform: rotateY(180deg);
+}
+
+.flip-container,
+.front,
+.back {
+    width: 100%;
+    height: 100%;
+}
+
+/* flip speed goes here */
+.flipper {
+    transition: 0.6s;
+    transform-style: preserve-3d;
+
+    position: relative;
+}
+
+/* hide back of pane during swap */
+.front,
+.back {
+    backface-visibility: hidden;
+
+    position: absolute;
+    top: 0;
+    left: 0;
+}
+
+/* front pane, placed above back */
+.front {
+    z-index: 2;
+    /* for firefox 31 */
+    transform: rotateY(0deg);
+    border-radius: 6px;
+}
+
+/* back, initially hidden pane */
+.back {
+    position: absolute;
+    transform: rotateY(180deg);
+    width: 100%;
+    display: table;
+    justify-content: center;
+    border-radius: 6px;
+    border-style: solid;
+    border-width: 1px;
+}
+
+.back a {
+    display: table-cell;
+    vertical-align: middle;
+    text-align: center;
+}
+
+#home_padding {
+    margin-top: 7%;
+}
+
+@media screen and (max-width: 768px) {
+    #featured_area {
+        display: none;
+    }
+
+    #home_message {
+        display: none;
+    }
+
+    #home_padding {
+        margin-top: 15%;
+    }
+    #firefox_button,
+    #chrome_button,
+    #opera_button {
+        display: none;
+    }
+}
+
+@media screen and (min-width: 769px) {
+    .autocomplete-column.is-offset-one-quarter,
+    .autocomplete-column.is-offset-one-quarter-tablet {
+        margin-left: 25%; 
+    }
+
+    .autocomplete-column.is-half,
+    .autocomplete-column.is-half-tablet {
+        flex: none;
+        width: 50%; 
+    }
+}