<template>
	<div class="author">

		<h1 v-if="showTitle" class="author__site-title">
			{{ $static.metaData.siteName }}
		</h1>

		<p class="author__intro">
      <em>They/Their</em><br />
      <strong>Programming, art, design, and other queer things.</strong><br />
      <small>Web Engineer by day who pretends to be a dog.<br />Dog by night who pretends to be a programmer.</small>
		</p>

		<p class="author__links">
			<a href="https://www.wroten.me">Portfolio</a>
			<a href="https://gitlab.com/gaiety">Gitlab</a>
		</p>

	</div>
</template>

<static-query>
query {
  metaData {
    siteName
  }
}
</static-query>

<script>
export default {
	props: ['showTitle']
}
</script>

<style lang="scss">
.author {
	margin: 0 auto;
	max-width: 500px;
	text-align: center;
	padding-bottom: calc(var(--space) / 2);

	&__image {
		border-radius: 100%;
		width: 90px;
		height: 90px;
		margin-bottom: 1em;
	}

	&__intro {
		opacity: .8;
	}

	&__site-title {
		margin: 0 auto;
		font-size: 1.5em;
		max-width: 400px;
	}

	&__links {
		margin-top: -.5em;
		a {
			margin: 0 .5em;
		}
	}
}
</style>
