[Summary view] [Print] [Text view]

   1  // Site header
   2  
   3  .site-header {
   4      padding: 1em;
   5  
   6      &.featured-image {
   7          display: flex;
   8          flex-direction: column;
   9          justify-content: space-between;
  10          min-height: 90vh;
  11  
  12          .site-branding-container {
  13              margin-bottom: auto;
  14          }
  15      }
  16  
  17      @include media(tablet) {
  18          margin: 0;
  19          padding: 3rem 0;
  20  
  21          &.featured-image {
  22              min-height: 100vh;
  23              margin-bottom: 3rem;
  24          }
  25      }
  26  }
  27  
  28  // Site branding
  29  
  30  .site-branding {
  31  
  32      color: $color__text-light;
  33      -webkit-hyphens: auto;
  34      -moz-hyphens: auto;
  35      -ms-hyphens: auto;
  36      hyphens: auto;
  37      position: relative;
  38      word-wrap: break-word;
  39  
  40      @include media(tablet) {
  41          margin: 0 $size__site-margins;
  42      }
  43  }
  44  
  45  // Site logo
  46  
  47  .site-logo {
  48  
  49      position: relative;
  50      z-index: 999;
  51      margin-bottom: calc(.66 * #{$size__spacing-unit});
  52  
  53      @include media(tablet) {
  54          margin-bottom: 0;
  55          position: absolute;
  56          right: calc(100% + (1.25 * #{$size__spacing-unit}));
  57          top: 4px; // Accounts for box-shadow widths
  58          z-index: 999;
  59      }
  60  
  61      .custom-logo-link {
  62          border-radius: 100%;
  63          box-sizing: content-box;
  64          box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
  65          display: block;
  66          width: 50px;
  67          height: 50px;
  68          overflow: hidden;
  69          transition: box-shadow $background_transition ease-in-out;
  70  
  71          .custom-logo {
  72              min-height: inherit;
  73          }
  74  
  75          &:hover,
  76          &:active,
  77          &:focus {
  78              box-shadow: 0 0 0 2px rgba(0, 0, 0, 1);
  79          }
  80  
  81          @include media(tablet) {
  82              width: 64px;
  83              height: 64px;
  84          }
  85      }
  86  }
  87  
  88  // Site title
  89  
  90  .site-title {
  91      margin: auto;
  92      display: inline;
  93      color: $color__text-main;
  94  
  95      a {
  96          color: $color__text-main;
  97  
  98          &:link,
  99          &:visited {
 100              color: $color__text-main;
 101          }
 102  
 103          &:hover {
 104              color: $color__text-hover;
 105          }
 106      }
 107  
 108      .featured-image & {
 109          margin: 0;
 110  
 111          @include media(tablet) {
 112              display: inline-block;
 113          }
 114      }
 115  
 116      /* When there is no description set, make sure navigation appears below title. */
 117      + .main-navigation {
 118          display: block;
 119      }
 120  
 121      @include media(tablet) {
 122          display: inline;
 123      }
 124  
 125      &:not(:empty) + .site-description:not(:empty):before {
 126          content: "\2014";
 127          margin: 0 .2em;
 128      }
 129  }
 130  
 131  // Site description
 132  
 133  .site-description {
 134  
 135      display: inline;
 136      color: $color__text-light;
 137      font-weight: normal;
 138      margin: 0;
 139  }