_menu-social-navigation.scss 1.0 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162
  1. /* Social menu */
  2. .social-navigation {
  3. margin-top: calc(#{$size__spacing-unit} / 2 );
  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. &#ui-icon-link {
  38. transform: rotate(-45deg);
  39. }
  40. }
  41. }
  42. }
  43. }
  44. }
  45. .site-title + .social-navigation,
  46. .site-description + .social-navigation {
  47. @include media(tablet) {
  48. margin-top: calc(#{$size__spacing-unit} / 5 );
  49. }
  50. }