aboutsummaryrefslogtreecommitdiff
path: root/lib/components/AppTitle.svelte
blob: ce5c8594dbe680bb3dfe6d10a854dc4e0fd4bae7 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<script lang="ts">
  interface Props {
    size?: number
    subtitle?: string | null
    letterSpacing?: number
  }

  let { size = 38, subtitle = null, letterSpacing = 2 }: Props = $props()
</script>

<div class="app-title">
  <p class="name" style:font-size="{size}px" style:letter-spacing="{letterSpacing}px">
    Hollowdark
  </p>
  {#if subtitle}
    <p class="subtitle">{subtitle}</p>
  {/if}
</div>

<style>
  .app-title {
    text-align: center;
  }

  .name {
    font-family: var(--font-body);
    font-style: italic;
    font-weight: 400;
    color: var(--color-text);
    margin: 0 0 var(--space-6);
  }

  .subtitle {
    font-family: var(--font-ui);
    font-size: 11px;
    color: var(--color-text-tertiary);
    letter-spacing: 2px;
    text-transform: uppercase;
    margin: 0;
  }
</style>