Get initial mockup of new server list up

resources/assets/styles/components/animations.css

@@ -16,3 +16,21 @@
   from { opacity: 0; }
   to   { opacity: 1; }
 }
+
+@keyframes onlineblink {
+  0% {
+    @apply .bg-green;
+  }
+  100% {
+    @apply .bg-green-dark;
+  }
+}
+
+@keyframes offlineblink {
+  0% {
+    @apply .bg-red;
+  }
+  100% {
+    @apply .bg-red-dark;
+  }
+}

resources/assets/styles/components/miscellaneous.css

@@ -0,0 +1,28 @@
+code {
+    @apply .font-mono .px-2 .py-1;
+    background-color: #eef1f6;
+    color: #596981;
+    border-radius: 2px;
+    border: 1px solid rgba(0, 0, 0, .1);
+    display: inline-block;
+}
+
+/**
+ * Indicators for server online status.
+ */
+.indicator {
+    @apply .bg-grey-darker .border .border-grey;
+    border-radius: 50%;
+    width: 16px;
+    height: 16px;
+
+    &.online {
+        @apply .bg-green-dark .border-green;
+        animation: onlineblink 2s infinite alternate;
+    }
+
+    &.offline {
+        @apply .bg-green-dark .border-red;
+        animation: offlineblink 2s infinite alternate;
+    }
+}

resources/assets/styles/components/navigation.css

@@ -0,0 +1,28 @@
+.nav {
+    @apply .bg-blue;
+    height: 48px;
+
+    & > .logo {
+        @apply .mx-8 .font-sans .font-thin .text-2xl .text-white .inline-block .pt-2;
+    }
+
+    & > .menu {
+        @apply .float-right .mx-8 .inline-block;
+
+        & > ul {
+            @apply .list-reset;
+            & > li {
+                @apply .inline-block;
+                & > a {
+                    @apply .block .h-full .no-underline .text-grey-lighter .font-light .text-sm;
+                    padding: 15px;
+
+                    &:hover {
+                        @apply .bg-blue-dark;
+
+                    }
+                }
+            }
+        }
+    }
+}