quassel/apps/website/src/sections/Footer.astro at bcb93292920a8dcf395fd94285fccafbb0946fe0 · openscript-ch/quassel · 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
---
import { Image } from "astro:assets";
import UzhLogo from "../assets/logos/uzh-logo.svg";
import OpenScriptLogo from "../assets/logos/openscript-logo.svg";
---

<style>
  footer {
    display: grid;
    gap: 0 var(--spacing-xl);
    grid-template-columns: repeat(2, 1fr);
    background-color: var(--color-primary);
    margin-bottom: 0;
    padding: 0 var(--spacing-xl) var(--spacing-xl) var(--spacing-xl);

    @media (max-width: 768px) {
      display: flex;
      flex-direction: column;
    }
  }

  h2 {
    grid-column: 1 / 3;
    text-align: center;
    margin: var(--spacing-lg) 0;
  }

  h3 {
    margin-top: 0;
  }

  .contact {
    display: grid;
    grid-template-columns: 1fr 1fr;
    background-color: var(--color-card);
    padding: var(--spacing-lg);
  }

  .contact img {
    width: 10rem;
    height: 100%;
    grid-row: 1 / 3;
    grid-column: 2 / 3;
    align-self: center;
    justify-self: center;
  }
</style>

<footer>
  <h2>Interested in Using Quassel?</h2>
  <div class="contact">
    <Image src={UzhLogo} alt="University of Zurich logo" />
    <h3>Research collaboration</h3>
    <a href="https://www.psychology.uzh.ch/en/areas/dev/devpsy/Weltentdecker/Research-area-Multilingualism-and-Communication.html">
      Reach out to <strong>Stephanie</strong> from University of Zurich
    </a>
  </div>
  <div class="contact">
    <Image src={OpenScriptLogo} alt="openscript Ltd. logo" />
    <h3>Tech collaboration</h3>
    <a href="https://openscript.ch/en/">Contact <strong>Robin</strong> from openscript Ltd.</a>
  </div>
</footer>