refactor: class names

components/app/Contributors.vue

@@ -164,12 +164,10 @@
 
 <style scoped lang="scss">
 .contributors {
-  @apply flex;
+  @apply flex flex-wrap;
   @apply items-center;
-  @apply flex-wrap;
   @apply overflow-auto;
   @apply m-2;
-  @apply space-x-2;
-  @apply space-y-2;
+  @apply space-x-2 space-y-2;
 }
 </style>

components/app/Footer.vue

@@ -85,13 +85,8 @@ export default {
 <style scoped lang="scss">
 .footer-link {
   @apply flex-shrink-0;
-  @apply my-2;
-  @apply mx-4;
-  @apply text-secondaryLight;
-  @apply text-sm;
-
-  &:hover {
-    @apply text-secondary;
-  }
+  @apply my-2 mx-4;
+  @apply text-secondaryLight text-sm;
+  @apply hover:text-secondary;
 }
 </style>

components/app/Header.vue

@@ -310,10 +310,7 @@ export default {
   @apply transition-colors;
   @apply ease-in-out;
   @apply duration-150;
-
-  &:hover {
-    @apply text-accent;
-  }
+  @apply hover:text-accent;
 }
 
 @keyframes slideIn {

components/app/Shortcuts.vue

@@ -94,9 +94,8 @@ kbd {
   @apply inline-flex;
   @apply resize-none;
   @apply m-2;
+  @apply py-2 px-4;
   @apply rounded-lg;
-  @apply py-2;
-  @apply px-4;
   @apply text-sm;
 }
 </style>

components/app/Sidenav.vue

@@ -199,9 +199,7 @@ export default {
 }
 
 nav.primary-nav {
-  @apply flex;
-  @apply flex-col;
-  @apply flex-nowrap;
+  @apply flex flex-col flex-nowrap;
   @apply items-center;
   @apply justify-center;
   @apply space-y-2;
@@ -258,14 +256,10 @@ nav.primary-nav::-webkit-scrollbar,
 }
 
 nav.secondary-nav {
-  @apply flex;
-  @apply flex-col;
-  @apply flex-nowrap;
+  @apply flex flex-col flex-nowrap;
   @apply items-center;
   @apply justify-center;
-  @apply border-t-2;
-  @apply border-dashed;
-  @apply border-divider;
+  @apply border-t-2 border-dashed border-divider;
   @apply pt-2;
   @apply space-y-2;
 
@@ -310,8 +304,7 @@ nav.secondary-nav {
   }
 
   nav.primary-nav {
-    @apply flex-row;
-    @apply flex-nowrap;
+    @apply flex-row flex-nowrap;
     @apply overflow-auto;
     @apply bg-primaryDark;
     @apply space-y-0;