feat: apply layout fixes from last commit

assets/css/general/general.css

@@ -46,26 +46,30 @@ a:focus,
 }
 
 .material-container {
-  @apply bg-elevation border-util rounded-lg overflow-hidden m-5 shadow;
+  @apply overflow-hidden rounded-lg shadow bg-elevation border-util;
   /* Override transition with these */
   transition: var(--transition--transform), var(--transition--border-color);
 }
 
+.container--separator > * {
+  @apply my-4;
+}
+
 /* ---------------- Component specific ---------------- */
 
 .icon {
   stroke-width: 1.6;
   /* Align middle is necessary for some reason for mobile devices */
-  @apply text-default align-middle overflow-visible;
+  @apply overflow-visible align-middle text-default;
 }
 
 .tag-container {
-  @apply flex flex-wrap items-start content-start p-1 bg-depth overflow-hidden;
+  @apply flex flex-wrap items-start content-start p-1 overflow-hidden bg-depth;
 }
 
 .tag {
   transition: var(--transition--border-color), var(--transition--color);
-  @apply select-none border border-primary-hover rounded overflow-hidden px-1 m-1;
+  @apply px-1 m-1 overflow-hidden border rounded select-none border-primary-hover;
 }
 
 .tag:hover,

pages/faq.vue

@@ -1,5 +1,5 @@
 <template>
-  <main>
+  <main class="container--separator">
     <ContentContainer
       :separator="true"
       title="General"

pages/index.vue

@@ -7,11 +7,14 @@
       <Notifications />
     </div>
 
-    <Errors />
+    <!-- Content -->
+    <div class="container--separator">
+      <Errors />
 
-    <Post v-for="post in posts.data" :key="post.id" :post="post" />
+      <Post v-for="post in posts.data" :key="post.id" :post="post" />
 
-    <Controls />
+      <Controls />
+    </div>
   </main>
 </template>
 

pages/legal.vue

@@ -1,5 +1,5 @@
 <template>
-  <main>
+  <main class="container--separator">
     <!-- Separator -->
     <ContentContainer :separator="true" title="Disclaimer" />
 

pages/premium.vue

@@ -1,14 +1,12 @@
 @@ -0,0 +1,172 @@
 <template>
-  <main>
-    <ControlPannel
-      v-if="hasValidLicenseKey"
-      class="h-full min-h-screen mx-auto"
-    />
-
-    <!-- Log In -->
-    <div v-else class="grid min-h-screen" style="place-items: center;">
-      <div class="w-full max-w-screen-sm">
+  <main class="flex h-screen">
+    <template v-if="hasValidLicenseKey">
+    </template>
+
+    <template v-else>
+      <div class="w-full m-auto">
+        <!-- Log In -->
         <errors />
 
         <login />
@@ -18,7 +16,7 @@
 
         <subscription />
       </div>
-    </div>
+    </template>
   </main>
 </template>
 

pages/usage.vue

@@ -1,5 +1,5 @@
 <template>
-  <main>
+  <main class="container--separator">
     <!-- General Usage -->
 
     <ContentContainer