New material theme, additional fonts, more complete theme coverage, and bug fixes

src/components/LinkItems/Item.vue

@@ -12,6 +12,7 @@
       <div class="tile-title" :id="`tile-${id}`" >
         <span class="text">{{ title }}</span>
         <div class="overflow-dots">...</div>
+        <p class="description">{{ description }}</p>
       </div>
       <!-- Item Icon -->
       <Icon :icon="icon" :url="url" :size="itemSize" :color="color" v-bind:style="customStyles" />
@@ -205,7 +206,7 @@ export default {
     }
     .tile-title {
       height: fit-content;
-      min-height: 1rem;
+      min-height: 1.2rem;
       span.text {
         text-align: left;
         padding-left: 10%;
@@ -228,6 +229,10 @@ export default {
   &.size-large {
     height: 100px;
   }
+
+  p.description {
+    display: none;
+  }
 }
 
 </style>

src/components/LinkItems/ItemGroup.vue

@@ -126,5 +126,19 @@ export default {
     @include big-screen-up { grid-template-columns: repeat(5, 1fr); }
   }
 }
+.orientation-horizontal {
+  display: flex;
+  flex-direction: column;
+  .there-are-items {
+    display: grid;
+    grid-template-columns: repeat(5, 1fr);
+    @include phone { grid-template-columns: repeat(2, 1fr); }
+    @include tablet { grid-template-columns: repeat(4, 1fr); }
+    @include laptop { grid-template-columns: repeat(6, 1fr); }
+    @include monitor { grid-template-columns: repeat(8, 1fr); }
+    @include big-screen { grid-template-columns: repeat(10, 1fr); }
+    @include big-screen-up { grid-template-columns: repeat(12, 1fr); }
+  }
+}
 
 </style>