astro-ink/src/components/Header.astro at aba7ac852eb96b96f4f9d29f5a5b12bf2844000a · one-aalam/astro-ink · GitHub

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
42
43
44
45
46
47
48
49
50
51
---
    import { SITE } from '$/config'
    import SvgIcon from './SvgIcon.astro'
---

<header class="header">
    <div class="header__logo">
        <a href="/" class="avatar">
            <img class="header__logo-img" src="/assets/logo.svg" alt="Astro logo" />
        </a>
    </div>
    <div class="header__meta flex-1">
        <h3 class="header__title">
            <a href="">{ SITE.name }</a>
        </h3>
        <div class="header__meta-more flex">
            <p class="header__desc">
                { SITE.description }
            </p>
            <nav class="header__nav flex">
                <ul class="header__ref-list">
                    <li>
                        <a href={ SITE.githubUrl } title={`${ SITE.name }'s Github URL'`}>
                            <SvgIcon>
                                <path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"></path>
                            </SvgIcon>
                        </a>
                    </li>
                </ul>
            </nav>
        </div>
    </div>
</header>

<style>
    .header {
        @apply flex gap-4 border-b border-gray-200 dark:border-gray-700 py-3
    }
    .header__logo-img {
        @apply w-16 h-16 rounded-full overflow-hidden
    }
    .header__title {
        @apply text-4xl font-extrabold md:text-5xl text-primarySecondary dark:text-primarySecondaryDark
    }
    .header__desc {
        @apply text-xl flex-1 dark:text-gray-200
    }
    .header__ref-list {
        @apply flex gap-3 text-gray-400
    }
</style>