Update landing components

resources/assets/components/landing/Index.vue

@@ -31,7 +31,7 @@
 						<div class="server-header">
 							<p class="server-header-domain">{{ config.domain }}</p>
 							<p class="server-header-attribution">
-								Decentralized photo sharing social media powered by <a href="https://pixelfed.org">Pixelfed</a>
+								Decentralized photo sharing social media powered by <a href="https://pixelfed.org" target="_blank">Pixelfed</a>
 							</p>
 						</div>
 
@@ -56,7 +56,7 @@
 							<div class="list-group">
 								<div v-if="config.contact.account" class="list-group-item bg-transparent">
 									<p class="item-label">Managed By</p>
-									<a :href="config.contact.account.url" class="admin-card">
+									<a :href="config.contact.account.url" class="admin-card" target="_blank">
 										<div class="d-flex">
 											<img
 												:src="config.contact.account.avatar"
@@ -77,7 +77,7 @@
 
 								<div v-if="config.contact.email" class="list-group-item bg-transparent">
 									<p class="item-label">Contact</p>
-									<a :href="`mailto:${config.contact.email}`" class="admin-email">{{ config.contact.email }}</a>
+									<a :href="`mailto:${config.contact.email}?subject=Regarding ${config.domain}`" class="admin-email" target="_blank">{{ config.contact.email }}</a>
 								</div>
 							</div>
 						</div>

resources/assets/components/landing/partials/PostCard.vue

@@ -3,18 +3,18 @@
 		<div class="card bg-bluegray-800 landing-post-card" style="border-radius: 15px;">
 			<div class="card-header border-0 bg-bluegray-700" style="border-top-left-radius: 15px;border-top-right-radius: 15px;">
 				<div class="media align-items-center">
-					<a :href="post.account.url" class="mr-2">
+					<a :href="post.account.url" class="mr-2" target="_blank">
 						<img :src="post.account.avatar" style="border-radius:30px;" width="30" height="30" onerror="this.src='/storage/avatars/default.jpg?v=0';this.onerror=null;">
 					</a>
 
 					<div class="media-body d-flex justify-content-between align-items-center">
 						<p class="font-weight-bold username mb-0">
-							<a :href="post.account.url" class="text-white">&commat;{{ post.account.username }}</a>
+							<a :href="post.account.url" class="text-white" target="_blank">&commat;{{ post.account.username }}</a>
 						</p>
 
 						<p class="font-weight-bold mb-0">
-							<a v-if="range === 'daily'" :href="post.url" class="text-bluegray-500">Posted {{ timeago(post.created_at) }} ago</a>
-							<a v-else :href="post.url" class="text-bluegray-400">View Post</a>
+							<a v-if="range === 'daily'" :href="post.url" class="text-bluegray-500" target="_blank">Posted {{ timeago(post.created_at) }} ago</a>
+							<a v-else :href="post.url" class="text-bluegray-400" target="_blank">View Post</a>
 						</p>
 					</div>
 				</div>

resources/assets/components/landing/partials/UserCard.vue

@@ -3,23 +3,23 @@
 		<div class="card-body">
 			<div class="d-flex" style="gap: 15px;">
 				<div class="flex-shrink-1">
-					<a :href="account.url">
+					<a :href="account.url" target="_blank">
 						<img class="rounded-circle" :src="account.avatar" onerror="this.src='/storage/avatars/default.jpg';this.onerror=null;" width="50" height="50">
 					</a>
 				</div>
 
 				<div class="flex-grow-1">
 					<div v-if="account.name" class="display-name">
-						<a :href="account.url">{{ account.name }}</a>
+						<a :href="account.url" target="_blank">{{ account.name }}</a>
 					</div>
 					<p class="username">
-						<a :href="account.url">&commat;{{ account.username }}</a>
+						<a :href="account.url" target="_blank">&commat;{{ account.username }}</a>
 					</p>
 
 					<div class="user-stats">
-						<div class="user-stats-item">{{ formatCount(account.statuses_count) }} Posts</div>
-						<div class="user-stats-item">{{ formatCount(account.followers_count) }} Followers</div>
-						<div class="user-stats-item">{{ formatCount(account.following_count) }} Following</div>
+						<div class="user-stats-item user-select-none">{{ formatCount(account.statuses_count) }} Posts</div>
+						<div class="user-stats-item user-select-none">{{ formatCount(account.followers_count) }} Followers</div>
+						<div class="user-stats-item user-select-none">{{ formatCount(account.following_count) }} Following</div>
 					</div>
 
 					<div v-if="account.bio" class="user-bio">

resources/assets/components/landing/sections/footer.vue

@@ -1,21 +1,22 @@
 <template>
-	<div class="py-5">
-		<p class="text-center text-uppercase font-weight-bold small text-justify">
-			<a href="/site/help" class="text-bluegray-400 p-2">Help</a>
-			<span class="mx-2 text-muted">·</span>
-			<a href="/site/terms" class="text-bluegray-400 p-2">Terms</a>
-			<span class="mx-2 text-muted">·</span>
-			<a href="/site/privacy" class="text-bluegray-400 p-2">Privacy</a>
-			<span class="mx-2 text-muted">·</span>
-			<a href="https://pixelfed.org/mobile-apps" class="text-bluegray-400 p-2" target="_blank">Mobile Apps</a>
-		</p>
-		<p class="text-center text-bluegray-500 small mb-0">
-			<span class="text-bluegray-500">© {{ getYear() }} {{config.domain}}</span>
-			<span class="mx-2 text-muted">·</span>
-			<a href="https://pixelfed.org" class="text-bluegray-500 font-weight-bold">Powered by Pixelfed</a>
-			<span class="mx-2 text-muted">·</span>
-			<span class="text-bluegray-500">v{{config.version}}</span>
-		</p>
+	<div class="footer-component">
+		<div class="footer-component-links">
+			<a href="/site/help">Help</a>
+			<div class="spacer">·</div>
+			<a href="/site/terms">Terms</a>
+			<div class="spacer">·</div>
+			<a href="/site/privacy">Privacy</a>
+			<div class="spacer">·</div>
+			<a href="https://pixelfed.org/mobile-apps" target="_blank">Mobile Apps</a>
+		</div>
+
+		<div class="footer-component-attribution">
+			<div><span>© {{ getYear() }} {{config.domain}}</span></div>
+			<div class="spacer">·</div>
+			<div><a href="https://pixelfed.org" class="text-bluegray-500 font-weight-bold">Powered by Pixelfed</a></div>
+			<div class="spacer">·</div>
+			<div><span>v{{config.version}}</span></div>
+		</div>
 	</div>
 </template>
 

resources/assets/sass/landing.scss

@@ -206,6 +206,75 @@ body {
 	}
 }
 
+.footer-component {
+	padding: 3rem 1rem 1rem 1rem;
+
+	&-links {
+		display: flex;
+		flex-direction: column;
+		gap: 1rem;
+		align-items: center;
+		margin-bottom: 3rem;
+		font-size: 15px;
+
+		a {
+			color: #94a3b8;
+			font-weight: 700;
+			text-transform: uppercase;
+		}
+
+		.spacer {
+			display: none;
+
+			@include media-breakpoint-up(md) {
+				color: #64748b;
+				display: block !important;
+			}
+		}
+	}
+
+	&-attribution {
+		display: flex;
+		flex-direction: column;
+		gap: 0.5rem;
+		align-items: center;
+		color: #64748b;
+		font-size: 13px;
+
+		a {
+			color: #64748b;
+			font-weight: 700;
+		}
+
+		.spacer {
+			display: none;
+
+			@include media-breakpoint-up(md) {
+				color: #64748b;
+				display: block !important;
+			}
+		}
+	}
+
+	@include media-breakpoint-up(md) {
+		padding: 3rem 0;
+
+		&-links {
+			margin-bottom: 1rem;
+			flex-direction: row;
+			justify-content: center;
+			font-size: 13px;
+		}
+
+		&-attribution {
+			flex-direction: row;
+			justify-content: center;
+			font-size: 11.5px;
+		}
+	}
+
+}
+
 .landing-index-component {
 	width: 100%;
 	overflow: hidden;