github.com/projectcontour/contour@v1.28.2/site/themes/contour/assets/scss/_header.scss (about)

     1  @import 'variables';
     2  @import 'mixins';
     3  @import 'base';
     4  
     5  header {
     6      .wrapper {
     7          padding: 10px 20px;
     8          min-height: 52px;
     9          display: flex;
    10          align-items: center;
    11          justify-content: space-between;
    12      }
    13      .desktop-links {
    14          padding-left: 0px;
    15      }
    16      a {
    17          color: $darkgrey;
    18          font-family: $metropolis-light;
    19          &.active {
    20              font-family: $metropolis-medium;
    21          }
    22      }
    23      .image {
    24          height: 45px;
    25          width: auto;
    26      }
    27      li img {
    28          vertical-align: bottom;
    29          margin-right: 10px;
    30      }
    31      .mobile {
    32         display: none;
    33      }
    34      @include breakpoint(medium) {
    35          .desktop-links li {
    36              padding-right: 10px;
    37          }
    38      }
    39      @include breakpoint(small) {
    40          .expanded-icon {
    41              display: none;
    42              padding: 11px 3px 0px 0px;
    43          }
    44          .collapsed-icon {
    45              padding-top: 12px;
    46          }
    47          .mobile-menu-visible {
    48              .mobile {
    49                  display: block;
    50                  .collapsed-icon {
    51                      display: none;
    52                  }
    53                  .expanded-icon {
    54                      display: block;
    55                  }
    56              }
    57          }
    58          position: relative;
    59          .desktop-links {
    60              display: none;
    61          }
    62          .mobile {
    63              display: block;
    64          }
    65          button {
    66              float: right;
    67              &:focus {
    68                  outline: none;
    69              }
    70          }
    71          ul {
    72              padding-left: 0px;
    73              li {
    74                  display: block;
    75                  margin: 20px 0px;
    76              }
    77          }
    78          .mobile-menu {
    79              position: absolute;
    80              background-color: #fff;
    81              width: 100%;
    82              top: 70px;
    83              left: 0px;
    84              padding-bottom: 20px;
    85              display: none;
    86              z-index: 1;
    87              .header-links {
    88                  margin: 0px 20px;
    89              }
    90              .social {
    91                  margin: 0px 20px;
    92                  padding-top: 20px;
    93                  img {
    94                      vertical-align: middle;
    95                      padding-right: 10px;
    96                  }
    97                  a {
    98                      font-size: 14px;
    99                      padding-right: 35px;
   100                      margin-bottom: 20px;
   101                      &:last-of-type {
   102                          padding-right: 0px;
   103                      }
   104                  }
   105              }
   106          }
   107      }
   108  }