jarv.is/assets/sass/components/_header.scss

@use "../abstracts/settings";
@use "../abstracts/themes";

// Global Header Styles
header {
  width: 100%;
  padding: 0.7em 1.5em;
  border-bottom: 1px solid;

  @include themes.themed(
    (
      border-color: "kinda-light",
    )
  );

  nav {
    width: 100%;
    max-width: settings.$max-width;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;

    a#header-logo {
      display: flex;
      align-items: center;

      @include themes.themed(
        (
          color: "medium-dark",
        )
      );

      img#header-selfie {
        width: 50px;
        height: 50px;
        border: 1px solid;
        border-radius: 50%;
        user-select: none;

        @include themes.themed(
          (
            border-color: "light",
          )
        );
      }

      span#header-name {
        margin: 0 0.6em;
        font-size: 1.25em;
        font-weight: 500;
        letter-spacing: -0.01em;
      }

      &:hover {
        @include themes.themed(
          (
            color: "links",
          )
        );

        img#header-selfie {
          opacity: 0.9;
        }
      }
    }

    // Horizontal emoji links
    ul {
      list-style: none;
      display: flex;
      align-items: baseline;
      margin: 0;
      padding: 0;

      li {
        margin-left: 1.75em;

        a {
          display: inline-flex;

          @include themes.themed(
            (
              color: "medium-dark",
            )
          );

          &:hover {
            @include themes.themed(
              (
                color: "links",
              )
            );
          }

          span {
            align-self: center;

            &.header-menu-icon {
              font-size: 1.3em;
              vertical-align: -0.085em;
              user-select: none;
            }

            &.header-menu-text {
              font-size: 0.95em;
              font-weight: 500;
              letter-spacing: -0.002em;
              margin-left: 0.65em;
            }
          }
        }

        // Dark mode toggle
        &#header-lightbulb {
          align-self: center;

          button {
            // native button reset
            border: 0;
            padding: 0;
            width: 1.56em; // 24.33px, don't ask
            height: 1.56em;
            margin: -0.075em -0.3em 0 1.4em; // weirdness w/ svg ratio
            cursor: pointer;

            // prepare for lightbulb symbol depending on active theme (set in components/_global)
            background-color: transparent;
            background-repeat: no-repeat;
            background-size: 100% 100%;
          }
        }

        // no margin on the first child to make more room on narrow windows (before responsiveness kicks in).
        // last child is the dark mode toggle -- margin is set directly on it in case it's hidden (if JS is disabled).
        &:first-child,
        &:last-child {
          margin-left: 0;
        }
      }
    }
  }
}

// Responsive
@mixin responsive() {
  header {
    padding: 0.5em 1.25em;

    nav {
      a#header-logo {
        img#header-selfie {
          width: 70px;
          height: 70px;
        }

        span#header-name {
          display: none;
        }

        &:hover {
          img#header-selfie {
            opacity: 1;
          }
        }
      }

      ul {
        font-size: 1.6em;

        li {
          margin-left: 1.15em;

          a.header-menu-item {
            span.header-menu-icon {
              font-size: 0.9em;
            }

            // hide text next to emojis on mobile
            span.header-menu-text {
              display: none;
            }
          }

          // Dark mode toggle
          &#header-lightbulb button.dark-mode-toggle {
            width: 1.08em; // ~27px, don't ask
            height: 1.08em;
            margin-left: 1em;
            margin-right: -0.2em; // weirdness w/ svg ratio
          }
        }
      }
    }
  }
}