Day 9: Header ☝️ ✣ S.Bistrović

A header usually consists of navigation that has links to different parts of the website.

The example component is visible below.

A few notes about this header component:

CSS Variables are used for colors,
CSS Flexbox is used for layout,
the gap property is used to add spacing between flex items,
text-decoration-color, text-decoration-style, and text-decoration-thickness properties are used to style the link hover state.

The code:

<header class="advent-header">
  <nav>
    <ul>
      <li><a href="/#home">🎄 🎄 🎄</a></li>
      <li><a href="/#home">Home</a></li>
      <li><a href="/link-blog">Blog</a></li>
      <li><a href="/link-portfolio">Portfolio</a></li>
      <li><a href="/link-about">About</a></li>
      <li><a href="/link-contact">Contact</a></li>
      <li><a href="/link-search">Search</a></li>
    </ul>
  </nav>
</header>

.advent-header {
  --color-xmas-alpha: #f7efef;
  --color-xmas-beta: #d72621;
  background-color: var(--color-xmas-alpha);
  padding: 1rem;
}

.advent-header ul {
  list-style: none;

  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1rem;

  padding: 0;
  margin: 0;
}

.advent-header li:first-child {
  margin-right: 1rem;
}

.advent-header a {
  color: inherit;
  text-decoration: none;
}

.advent-header a:hover,
.advent-header a:focus,
.advent-header a:active {
  text-decoration: underline;
  text-decoration-color: var(--color-xmas-beta);
  text-decoration-style: wavy;
  text-decoration-thickness: from-font;
}

@media (min-width: 40em) {
  .advent-header {
    justify-content: start;
  }

  .advent-header li:last-child {
    margin-left: auto;
  }
}