_menu-social-navigation.scss 1.1 KB

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