Better display layout and further visual improvments

src/App.vue

@@ -20,6 +20,12 @@ export default {
 @import '../src/styles/global-styles.scss';
 @import '../src/styles/color-pallet.scss';
 
+body {
+  background: $background;
+  margin: 0;
+  padding: 0;
+}
+
 #app {
   .footer {
     text-align: center;

src/components/Collapsable.vue

@@ -9,7 +9,7 @@
             tabIndex="-1"
         >
         <label :for="`collapsible-${uniqueKey}`" class="lbl-toggle" tabindex="-1">
-            <h2>{{ title }}</h2>
+            <h3>{{ title }}</h3>
         </label>
         <div class="collapsible-content">
           <div class="content-inner">
@@ -102,14 +102,14 @@ export default {
 
     .lbl-toggle {
         display: block;
-        padding: 1rem;
+        padding: 0.25rem;
         cursor: pointer;
         border-radius: 7px;
         transition: all 0.25s ease-out;
         text-align: left;
         color:$bg-with-opacity;
 
-        h2 {
+        h3 {
             margin: 0;
             padding: 0;
             display: inline;

src/components/Item.vue

@@ -52,22 +52,20 @@ export default {
       if (isOverflowing) {
         tileElem.className += ' is-overflowing';
       }
-    }
+    } // Not from present me to past me: WTF?!
   },
 };
 </script>
 
-<!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped lang="scss">
 @import '../../src/styles/color-pallet.scss';
 
 .item {
-    width: 120px;
+    flex-grow: 1;
     height: 100px;
     color: $ascent;
-    display: inline-block;
     vertical-align: middle;
-    margin: 8px;
+    margin: 0.5rem;
     background: #607d8b33;
     text-align: center;
     padding: 2px;
@@ -92,7 +90,7 @@ export default {
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
-    width: 120px;
+    min-width: 120px;
     height: 30px;
     overflow: hidden;
     position: relative;
@@ -109,7 +107,6 @@ export default {
         width: 100%;
     }
     .overflow-dots {
-        // display: none;
         opacity: 0;
     }
 }
@@ -121,7 +118,7 @@ export default {
     .overflow-dots {
         display: block;
         opacity: 1;
-        background: #1b3550;
+        background: $overflow-ellipse;
         position: absolute;
         z-index: 5;
         right: 0;
@@ -129,9 +126,8 @@ export default {
     }
 }
 
-.item:hover .tile-title{
+.item:hover .tile-title.is-overflowing{
     .overflow-dots {
-        // display: none;
         opacity: 0;
     }
     span.text {

src/components/ItemGroup.vue

@@ -55,6 +55,8 @@ export default {
 
 .there-are-items {
   height: 100%;
+  display: flex;
+  flex-wrap: wrap;
 }
 
 </style>

src/components/PageTitle.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="page-titles">
-    <h1>Alicia App</h1>
-    <span class="subtitle">Dashboard of all the things</span>
+    <h1>Networking Services</h1>
+    <span class="subtitle">Local network management and moniroting</span>
   </div>
 </template>
 

src/styles/color-pallet.scss

@@ -2,10 +2,11 @@
 
 /* Core Pallet */
 $background: #0b1021;
-$ascent: #0875c3;
+$ascent: #5cabca;
 
 /* Action Colors */
 $transparent-black: #0000008a;
+$overflow-ellipse: #283e51;
 
 /* Modified Colors */
 $bg-with-opacity: rgba($background, 0.8);

src/styles/global-styles.scss

@@ -1,22 +1,23 @@
-@import url('https://fonts.googleapis.com/css?family=Montserrat&display=swap');
 
 
+@font-face {
+    font-family: 'Inconsolata';
+    src: url('./assets/Inconsolata-Light.ttf');
+}
+
 html {
     margin: 0;
     padding: 0;
 }
 
 body {
-    margin: 0;
-    padding: 0;
-    background: #282a32;
-    font-family: 'Montserrat', sans-serif;
+    font-family: 'Inconsolata', sans-serif;
 }
 
 h1, h2, h3, h4, h5 {
-    font-family: 'Montserrat', sans-serif;
+    font-family: 'Inconsolata', sans-serif;
 }
 
 p, a, span, div, input {
-    font-family: 'Montserrat', sans-serif;
+    font-family: 'Inconsolata', sans-serif;
 }