angelovcom.net

Unnamed repository; edit this file 'description' to name the repository.
Log | Files | Refs

_menu-social-navigation.scss (1181B)

      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 }