Site

1 files changed, 100 insertions, 0 deletions

diff --git a/src/site/components/home/links/Links.vue b/src/site/components/home/links/Links.vue
new file mode 100644
index 0000000..ba1e493
--- /dev/null
+++ b/src/site/components/home/links/Links.vue
@@ -0,0 +1,100 @@
+<style lang="scss" scoped>
+	@import '../../../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"
+			target="_blank"
+			class="link">
+			<header class="bd-footer-star-header">
+				<h4 class="bd-footer-title">GitHub</h4>
+				<p class="bd-footer-subtitle">Deploy your own lolisafe</p>
+			</header>
+		</a>
+		<div class="link">
+			<header class="bd-footer-star-header">
+				<h4 class="bd-footer-title">ShareX</h4>
+				<p class="bd-footer-subtitle">Upload from your Desktop</p>
+			</header>
+		</div>
+		<a href="https://chrome.google.com/webstore/detail/lolisafe-uploader/enkkmplljfjppcdaancckgilmgoiofnj"
+			target="_blank"
+			class="link">
+			<header class="bd-footer-star-header">
+				<h4 class="bd-footer-title">Extension</h4>
+				<p class="bd-footer-subtitle">Upload from any website</p>
+			</header>
+		</a>
+		<router-link to="faq"
+			class="link">
+			<header class="bd-footer-star-header">
+				<h4 class="bd-footer-title">FAQ</h4>
+				<p class="bd-footer-subtitle">dunno</p>
+			</header>
+		</router-link>
+	</div>
+</template>
+<script>
+export default {}
+</script>