New colors and curves

src/components/FilterTile.vue

@@ -1,11 +1,14 @@
 <template>
   <section>
-    <label for="filter-tiles">Search</label>
+    <form>
-    <input
+      <label for="filter-tiles">Search</label>
-      id="filter-tiles"
+      <input
-      v-model="input"
+        id="filter-tiles"
-      placeholder="Start typing to filter tiles..."
+        v-model="input"
-      v-on:input="userIsTypingSomething" />
+        placeholder="Start typing to filter tiles..."
+        v-on:input="userIsTypingSomething" />
+      </form>
+      <div class="space-filler"></div>
   </section>
 </template>
 
@@ -30,37 +33,53 @@ export default {
   section {
     display: flex;
     align-items: center;
-    margin: 0.25em;
+    align-items: stretch;
-    border-radius: 5px;
+    background: linear-gradient(0deg, rgba(47,50,58,1) 0%, rgba(40,42,50,1) 100%);
-    border: 1px solid transparent;
-
-    border: 1px solid #30556469;
-    -webkit-box-shadow: 1px 1px 2px #130f23;
-    box-shadow: 1px 1px 2px #130f23;
   }
-  label {
+  form {
-      display: inline;
+    border-radius: 0 0 20px 0;
-      background: -webkit-gradient(linear, right bottom, left top, from(#9F86FF), color-stop(#1CA8DD), to(#007AE1));
+    padding: 0 0.2em 0.2em 0;
-      background: linear-gradient(to left top, #9F86FF, #1CA8DD, #007AE1);
+    background: #282a32;
-      -webkit-background-clip: text;
+    label {
-      -webkit-text-fill-color: transparent;
+        display: inline;
+        background: -webkit-gradient(linear, right bottom, left top, from(#9F86FF), color-stop(#1CA8DD), to(#007AE1));
+        background: linear-gradient(to left top, #9F86FF, #1CA8DD, #007AE1);
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent;
+        margin: 0.5em;
+        display: inline;
+    }
+    input {
+      display: inline-block;
+      width: 200px;
+      padding: 0.5em;
       margin: 0.5em;
-      display: inline;
+      outline: none;
+      border: none;
+      border-radius: 12px;
+      background: #607d8b33;
+      box-shadow: 1px 1px 2px #232323;
+      color: #1CA8DD;
+      font-family: 'Comfortaa', cursive;
+      &:focus {
+        background: #607d8b4a;
+      }
+    }
   }
-  input {
+  .space-filler {
-    display: inline-block;
+    flex: 1;
-    width: 200px;
+    border-radius: 20px 0 0;
-    padding: 0.5em;
+    background: #2f323a;
-    margin: 0.5em;
+  }
-    outline: none;
+  @media screen and (max-width: 600px) {
-    border: none;
+    form {
-    border-radius: 5px;
+      flex: 1;
-    background: #607d8b33;
+      border-radius: 0;
-    box-shadow: 1px 1px 2px #232323;
+      text-align: center;
-    color: #1CA8DD;
+      padding: 0.25em 0;
-    font-family: 'Comfortaa', cursive;
+    }
-    &:focus {
+    .space-filler {
-      background: #607d8b4a;
+      display: none;
     }
   }
 </style>

src/components/Footer.vue

@@ -1,10 +1,10 @@
 <template>
-  <div class="footer">
+  <footer>
       Developed by <a :href="authorUrl">{{authorName}}</a>.
       Licensed under <a :href="licenseUrl">{{license}}</a>
       {{ showCopyright? '©': '' }} {{date}}.
       Get the <a :href="repoUrl">Source Code</a>.
-  </div>
+  </footer>
 </template>
 
 <script>
@@ -25,11 +25,17 @@ export default {
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped lang="scss">
 
-.footer, .footer a {
+footer {
-    color: #5e6474;
+  padding: 0.5rem;
+  text-align: center;
+  color: #5e6474;
 }
-.footer a:hover {
+
+footer a{
+  color: #5e6474;
+  &:hover {
     color: #9F86FF;
+  }
 }
 
 </style>

src/global-styles.scss

@@ -9,7 +9,7 @@ html {
 body {
     margin: 0;
     padding: 0;
-    background:#2F323A;
+    background: #282a32;
     font-family: 'Comfortaa', cursive;
 }
 

src/views/Home.vue

@@ -5,9 +5,10 @@
         <h1>{{title}}</h1>
         <span class="subtitle">{{subtitle}}</span>
       </div>
-      <FilterTile @user-is-searchin="searching" class="filter-container" />
       <Nav class="nav" />
     </section>
+    <FilterTile @user-is-searchin="searching" class="filter-container" />
+
     <div class="item-group-container">
       <ItemGroup
         v-for="item in items"
@@ -59,22 +60,21 @@ export default {
 
 <style lang="scss" scoped>
 
+.home {
+  background: #2F323A;
+  padding-bottom: 1px;
+}
+
 section.top-section {
     margin: 0;
     padding: 0.5em;
     display: flex;
     justify-content: space-between;
-    background: #1f222a7a;
+    background: #282a32;
     align-items: center;
     align-content: flex-start;
     @media screen and (max-width: 600px) {
-      flex-direction: column;
+      flex-direction: column-reverse;
-      .nav {
-        order: -1;
-      }
-      .filter-container {
-        order: 1;
-      }
     }
 }
 
@@ -94,6 +94,10 @@ section.top-section {
     font-style: italic;
     text-shadow: 1px 1px 2px #130f23;
   }
+  @media screen and (max-width: 600px) {
+    text-align: center;
+    padding: 0.25em 0;
+  }
 }
 
 .item-group-container {