app/assets/stylesheets/header.scss

Summary

Maintainability
Test Coverage
#select-lang {
  position: absolute;
  top: 0;
  right: 0;
  margin: 0;
  padding: 0 1em;
  display: flex;

  li {
    list-style: none;
    margin: 0 0.3em;
  }
}

.front {
  $brand_width: 80%;

  .header-container {
    padding: 3em 0 0;
    position: relative;
  }

  #brand {
    width: $brand_width;
    margin: 0 auto;
  }

  #main_menu {
    display: flex;
    position: relative;
    //@include clearfix;

    .menu-item {
      width: 50%;
      padding: 1.6em 0 1.3em;
      text-align: center;
    }

    i {
      width: 100%;
      text-align: center;
      position: absolute;
      top: -0.25em;
      left: 0;
      z-index: 0;
    }
  }
}

.no-front {
  header {
    margin-bottom: 3.75rem;
    background: $kaki_yellow;
    position: relative;

    &:before {
      background: transparent asset-url('torn_edges_barra_menu.png') repeat-x 0 0;
      position: absolute;
      content: " ";
      width: 100%;
      height: 10px;
      top: -10px;
    }

    &:after {
      background: transparent asset-url('torn_edges_barra_menu.png') repeat-x 0 100%;
      position: absolute;
      content: " ";
      width: 100%;
      height: 10px;
      bottom: -10px;
      z-index: 0;
    }
  }

  .header-container {
    display: flex;
    position: relative;

    #brand {
      width: 5em;
      position: relative;
      top: .2em;
      margin: -1em 0 -2.2em;
      z-index: 1;
    }

    #main_menu {
      a {
        margin-left: 1em;
      }
    }

    #select_lang {
      top: -1.9em;
    }
  }
}