frontend/src/scss/components/_header.scss

// Header

@use "../base/settings" as *;
@use "../utilities/mixins" as *;

header {
  padding: $section-padding;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid $grey;

  h1 {
    @include flatten;

    a {
      text-decoration: none;
      color: $dark;

      &:hover {
        color: $yellow;
      }
    }
  }

  nav {
    ul {
      @include flatten(true);
      display: flex;
      gap: 1rem;

      li {
        a {
          text-decoration: none;
          color: $dark;
          font-weight: bold;

          &:hover {
            color: $yellow;
          }
        }
      }
    }
  }
}