styles/main/_header.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

.header {
  height: 2em;
  background-color: var(--color-glass);
  border-bottom: 1px solid  var(--color-window-border-bottom);

  nav {
    display: flex;

    & > ul:first-of-type {
      flex-grow: 1;
      overflow: auto;
    }

    & > ul {
      display: block;

      & > li {
        display: inline-block;

        & > span,
        & > a {
          display: inline-block;
          color: var(--color-text);
          text-decoration: none;
          align-items: center;
          padding: .25em .5em;
          margin: .25em;
          border-radius: .5em;
          transition: .3s background, .3s color;

          &:hover {
            background-color: var(--color-selected);
            color: var(--color-text-alt);
          }
        }
      }
    }
  }
}