Auto-shrinking pagination. Various Teen Core Club curations.

assets/components/tags/tag.vue

@@ -1,24 +1,21 @@
 <template>
 	<div
 		v-if="tag"
-		class="content"
+		class="tag content"
 	>
-		<div
-			class="tag"
-			:class="{ nomedia: !hasMedia }"
-		>
-			<div class="header">
-				<h2 class="title">
-					<Icon icon="price-tag4" />
-					{{ tag.name }}
-				</h2>
+		<div class="header">
+			<h2 class="title">
+				<Icon icon="price-tag4" />
+				{{ tag.name }}
+			</h2>
+		</div>
 
-				<div
-					v-if="description"
-					class="description header-description"
-					v-html="description"
-				/>
-			</div>
+		<div class="content-inner">
+			<div
+				v-if="description"
+				class="description header-description"
+				v-html="description"
+			/>
 
 			<Scroll
 				v-if="hasMedia"
@@ -32,10 +29,8 @@
 				/>
 			</Scroll>
 
-			<div class="content-inner">
-				<FilterBar :fetch-releases="fetchReleases" />
-				<Releases :releases="tag.releases" />
-			</div>
+			<FilterBar :fetch-releases="fetchReleases" />
+			<Releases :releases="tag.releases" />
 		</div>
 	</div>
 </template>
@@ -111,8 +106,8 @@ export default {
     }
 }
 
-.header .description,
-.header .description p {
+.description,
+.description p {
     padding: 0;
     margin: 0;
 }
@@ -128,7 +123,7 @@ export default {
 }
 
 .title {
-    padding: 1rem;
+    padding: .75rem 1rem;
     margin: 0;
     flex-shrink: 0;
     text-transform: capitalize;
@@ -141,7 +136,9 @@ export default {
 }
 
 .description {
-	padding: 0 1rem 1rem 1rem;
+	padding: 0 1rem .5rem 1rem;
     line-height: 1.5;
+	color: var(--text-light);
+	background: var(--profile);
 }
 </style>