src/components/molecules/layout/branding.module.scss


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

@use "@styles/abstracts/functions" as fun;

.wrapper {
  display: grid;
  grid-template-columns:
    var(--logo-size, fun.convert-px(100))
    minmax(0, 1fr);
  grid-template-rows: 1fr min-content;
  align-items: center;
  column-gap: var(--spacing-sm);
}

.logo {
  grid-row: span 2;
}

.title {
  font-size: var(--font-size-2xl);
}

.baseline {
  color: var(--color-fg-light);
}

.link {
  background: linear-gradient(
      to top,
      var(--color-primary-light) fun.convert-px(5),
      transparent fun.convert-px(5)
    )
    left / 0 100% no-repeat;
  text-decoration: none;
  transition: all 0.6s ease-out 0s;

  &:hover,
  &:focus {
    background-size: 100% 100%;
  }

  &:focus {
    color: var(--color-primary-light);
  }

  &:active {
    background-size: 0 100%;
    color: var(--color-primary-dark);
  }
}