78 lines
1.4 KiB
SCSS
78 lines
1.4 KiB
SCSS
@import './../../../../styles/global';
|
|
|
|
.c-header-nav {
|
|
$self: &;
|
|
|
|
display: flex;
|
|
flex-direction: column;
|
|
width: 75px;
|
|
|
|
&__link {
|
|
padding-bottom: 100%;
|
|
position: relative;
|
|
width: 100%;
|
|
|
|
border: 0.2em solid transparent;
|
|
|
|
|
|
&,&-inner {
|
|
transition: all $s-animation--time-fast $s-animation--ease-out;
|
|
}
|
|
|
|
&-inner {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
position: absolute;
|
|
height: 100%;
|
|
width: 100%;
|
|
|
|
font-family: $s-font--family-heading;
|
|
}
|
|
|
|
&:hover #{$self}__link-inner {
|
|
transform: translateX(5%);
|
|
}
|
|
|
|
&.is-active {
|
|
border-right-color: $s-color--primary;
|
|
}
|
|
}
|
|
|
|
&__nav {}
|
|
|
|
&__social {
|
|
display: flex;
|
|
flex: 1;
|
|
flex-wrap: wrap;
|
|
|
|
align-content: flex-end;
|
|
justify-content: space-between;
|
|
|
|
padding: $s-gutter--small;
|
|
|
|
&-link {
|
|
width: 50%;
|
|
width: calc(50% - #{$s-gutter--xsmall / 2});
|
|
margin-top: $s-gutter--xsmall;
|
|
padding: $s-gutter--xsmall;
|
|
border-radius: 100%;
|
|
transition: all $s-animation--time-fast $s-animation--ease-out;
|
|
|
|
&:hover { transform: scale(1.05); }
|
|
|
|
&.is-github { background: $s-social--github-background; }
|
|
}
|
|
}
|
|
|
|
@include t-media-query($s-small-up) {
|
|
width: 100px;
|
|
&__link-inner { font-size: $s-font--size-4; }
|
|
}
|
|
|
|
@include t-media-query($s-large-up) {
|
|
width: 125px;
|
|
}
|
|
}
|