<script lang="ts">
 import { version } from '$app/environment';
</script>

<div class="about d-flex col no-select">
    <h1 class="litechat">litechat<span class="plus">plus</span></h1>
    <p>A [<i>fedwave</i>] chat client.</p>
    <div class="d-flex build-info">
	<p class="version">Version: {version}</p>
	<div class="spacer" />
	<p class="commit">{__COMMIT__}</p>
    </div>
</div>

<style lang="scss">
 .about {
     height: var(--top-screen-cutout-height);
     width: var(--sidebar-width, 350px);
     text-align: center;
 }

 .litechat {
     color: var(--base-300);

     margin-bottom: 0px;

     & .plus {
	 vertical-align: super;
	 color: var(--cyan);
     }
 }

 .build-info {
     padding-left: 24px;
     padding-right: 24px;
     & > * {
	 user-select: text;
     }
 }

 .version {
     color: var(--base-400);
 }
</style>