Local-Connectivity-Lab.github.io/src/lib/components/Footer.svelte at c7a57791f47757f4fd7240d2eb157de531ab70d8 · Local-Connectivity-Lab/Local-Connectivity-Lab.github.io · 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
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
<script>
    import { m } from '$lib/paraglide/messages.js';
    import Button from './Button.svelte';
    import Socials from './Socials.svelte';
    import Wrapper from './Wrapper.svelte';
    import Analytics from './Analytics.svelte';

    let analytics;

    const buttons = [
        {
            href : m['buttons.discord.href'](),
            cta : m['buttons.discord.cta']()
        }
    ];
</script>

<div class="footer" data-test="site-footer">
    <Wrapper>
        <footer>
            <div>
                <h3>{m['common.address.header']()}</h3>
                <p>{m['common.address.physical']()}</p>
                <p>{m['common.address.email']()}</p>

                <Socials />
            </div>
            <div>
                <h3>{m['common.mission.header']()}</h3>
                <p>{m['common.mission.desc']()}</p>
            </div>
            <div class="ctas">
                {#each buttons as { href, cta}}
                    <div>
                        <Button {href} type="medium">{cta}</Button>
                    </div>
                {/each}

                <div>
                    <Button type="medium" onclick={() => analytics?.reopenBanner()}>
                        {m["cookieBanner.settings"]()}
                    </Button>
                </div>
            </div>

            <!-- <button onclick={() => setLocale('en')}>en</button> -->
        </footer>
    </Wrapper>
</div>

<Analytics bind:this={analytics} />

<style lang="postcss">
    .footer {
        background-color: var(--color-brand-primary);

        h3,
        p {
            text-align: left;
            color: var(--color-text2);
        }

        h3 {
            margin: 0 0 0.3em;
        }
        p {
            margin: 0;
        }
    }

    footer {
        display: flex;
        flex-direction: column;
        gap: 2em;

        padding: 2em 0;

        @media screen and (width >= 1024px) {
            display: grid;
            grid-template-columns: repeat(2, 3fr) 2fr;
            gap: 2em;
        }
    }

    .ctas {
        > :global(*) {
            margin-bottom: 1em;
        }
    }

</style>