[Summary view] [Print] [Text view]

   1  /* Social menu */
   2  
   3  .social-navigation {
   4      margin-top: calc(#{$size__spacing-unit} / 2 );
   5      text-align: left;
   6  
   7      ul.social-links-menu {
   8          @include clearfix;
   9  
  10          display: inline-block;
  11          margin: 0;
  12          padding: 0;
  13  
  14          li {
  15              display: inline-block;
  16              vertical-align: bottom;
  17              vertical-align: -webkit-baseline-middle;
  18              list-style: none;
  19  
  20              &:nth-child(n+2) {
  21                  margin-left: 0.1em;
  22              }
  23  
  24              a {
  25                  border-bottom: 1px solid transparent;
  26                  display: block;
  27                  color: $color__text-main;
  28                  margin-bottom: -1px;
  29                  transition: opacity $link_transition ease-in-out;
  30  
  31                  &:hover,
  32                  &:active {
  33                      color: $color__text-main;
  34                      opacity: 0.6;
  35                  }
  36  
  37                  &:focus {
  38                      color: $color__text-main;
  39                      opacity: 1;
  40                      border-bottom: 1px solid $color__text-main;
  41                  }
  42  
  43                  svg {
  44                      display: block;
  45                      width: 32px;
  46                      height: 32px;
  47  
  48                      // Prevent icons from jumping in Safari using hardware acceleration.
  49                      transform: translateZ(0);
  50  
  51                      &#ui-icon-link {
  52                          transform: rotate(-45deg);
  53                      }
  54                  }
  55              }
  56          }
  57      }
  58  }
  59  
  60  .site-title + .social-navigation,
  61  .site-description + .social-navigation {
  62  
  63      @include media(tablet) {
  64          margin-top: calc(#{$size__spacing-unit} / 5 );
  65      }
  66  }