wip:

* Dark theme by default
* Re-arranged vue files structure
* Re-arranged the layout file to make it easier to extend

1 files changed, 65 insertions, 65 deletions

diff --git a/src/site/components/home/links/Links.vue b/src/site/components/home/links/Links.vue
index 1a1f077..41bd271 100644
--- a/src/site/components/home/links/Links.vue
+++ b/src/site/components/home/links/Links.vue
@@ -1,67 +1,3 @@
-<style lang="scss" scoped>
-	@import '~/assets/styles/_colors.scss';
-	.links {
-		margin-bottom: 3em;
-		align-items: stretch;
-		display: flex;
-		justify-content: space-between;
-
-		div.link { cursor: pointer; }
-		.link {
-			background: $backgroundAccent;
-			display: block;
-			width: calc(25% - 2rem);
-			border-radius: 6px;
-			box-shadow: 0 1.5rem 1.5rem -1.25rem rgba(10,10,10,.05);
-			transition-duration: 86ms;
-			transition-property: box-shadow,-webkit-transform;
-			transition-property: box-shadow,transform;
-			transition-property: box-shadow,transform,-webkit-transform;
-			will-change: box-shadow,transform;
-
-			header.bd-footer-star-header {
-				padding: 1.5rem;
-
-				&:hover .bd-footer-subtitle { color: $textColorHighlight; }
-
-				h4.bd-footer-title {
-					color: $textColorHighlight;
-					font-size: 1.5rem;
-					line-height: 1.25;
-					margin-bottom: .5rem;
-					transition-duration: 86ms;
-					transition-property: color;
-					font-weight: 700;
-				}
-
-				p.bd-footer-subtitle {
-					color: $textColor;
-					margin-top: -.5rem;
-					transition-duration: 86ms;
-					transition-property: color;
-					font-weight: 400;
-				}
-			}
-
-			&:hover {
-				box-shadow: 0 3rem 3rem -1.25rem rgba(10,10,10,.1);
-				-webkit-transform: translateY(-.5rem);
-				transform: translateY(-.5rem);
-			}
-		}
-	}
-
-	@media screen and (max-width: 768px) {
-		.links {
-			display: block;
-			padding: 0px 2em;
-			.link {
-				width: 100%;
-				margin-bottom: 1.5em;
-			}
-		}
-	}
-</style>
 <template>
 	<div class="links">
 		<a href="https://github.com/WeebDev/lolisafe"
@@ -92,7 +28,7 @@
 			class="link">
 			<header class="bd-footer-star-header">
 				<h4 class="bd-footer-title">FAQ</h4>
-				<p class="bd-footer-subtitle">dunno</p>
+				<p class="bd-footer-subtitle">We got you covered</p>
 			</header>
 		</router-link>
 	</div>
@@ -127,3 +63,67 @@ export default {
 	}
 };
 </script>
+<style lang="scss" scoped>
+	@import '~/assets/styles/_colors.scss';
+	.links {
+		margin: 7rem 0 3rem 0;
+		align-items: stretch;
+		display: flex;
+		justify-content: space-between;
+
+		div.link { cursor: pointer; }
+		.link {
+			background: $backgroundAccent;
+			display: block;
+			width: calc(25% - 2rem);
+			border-radius: 6px;
+			box-shadow: 0 1.5rem 1.5rem -1.25rem rgba(10,10,10,.05);
+			transition-duration: 86ms;
+			transition-property: box-shadow,-webkit-transform;
+			transition-property: box-shadow,transform;
+			transition-property: box-shadow,transform,-webkit-transform;
+			will-change: box-shadow,transform;
+
+			header.bd-footer-star-header {
+				padding: 1.5rem;
+
+				&:hover .bd-footer-subtitle { color: $textColorHighlight; }
+
+				h4.bd-footer-title {
+					color: $textColorHighlight;
+					font-size: 1.5rem;
+					line-height: 1.25;
+					margin-bottom: .5rem;
+					transition-duration: 86ms;
+					transition-property: color;
+					font-weight: 700;
+				}
+
+				p.bd-footer-subtitle {
+					color: $textColor;
+					margin-top: -.5rem;
+					transition-duration: 86ms;
+					transition-property: color;
+					font-weight: 400;
+				}
+			}
+
+			&:hover {
+				box-shadow: 0 3rem 3rem -1.25rem rgba(10,10,10,.1);
+				-webkit-transform: translateY(-.5rem);
+				transform: translateY(-.5rem);
+			}
+		}
+	}
+
+	@media screen and (max-width: 768px) {
+		.links {
+			display: block;
+			padding: 0px 2em;
+			.link {
+				width: 100%;
+				margin-bottom: 1.5em;
+			}
+		}
+	}
+</style>