302 lines
7.7 KiB
SCSS
302 lines
7.7 KiB
SCSS
.logo {
|
|
display: flex;
|
|
flex-direction: row;
|
|
text-decoration: none;
|
|
|
|
&-image {
|
|
width: auto;
|
|
height: 55px;
|
|
display: block;
|
|
flex: 0 0 auto;
|
|
overflow: hidden;
|
|
}
|
|
}
|
|
|
|
.header {
|
|
background-position: center;
|
|
@extend .section_bg-gradient;
|
|
@if $header-mobile-sticky {
|
|
top: 0;
|
|
position: sticky;
|
|
z-index: 2;
|
|
|
|
@media(min-width: $screen-md){
|
|
z-index: auto;
|
|
position: relative;
|
|
}
|
|
} @else {
|
|
position: relative;
|
|
z-index: 2;
|
|
}
|
|
&_home {
|
|
body & {
|
|
background-image: none;
|
|
z-index: auto;
|
|
}
|
|
|
|
&:before,
|
|
&:after {
|
|
content: "";
|
|
position: absolute;
|
|
left: 0;
|
|
right: 0;
|
|
z-index: -1;
|
|
background-position: center;
|
|
background-image: $background-image_gradient;
|
|
height: 140px;
|
|
top: -12px;
|
|
}
|
|
&:after {
|
|
top: -10px;
|
|
background-image: $background-image_shape-wave-xs;
|
|
background-position: center bottom;
|
|
background-size: 100% auto;
|
|
background-repeat: no-repeat;
|
|
}
|
|
|
|
@media(min-width: $screen-sm){
|
|
&:before,
|
|
&:after {
|
|
background-image: $background-image_gradient;
|
|
height: 280px;
|
|
}
|
|
&:after {
|
|
background-image: $background-image_shape-wave;
|
|
background-size: auto;
|
|
background-position: left bottom;
|
|
}
|
|
|
|
}
|
|
.page-home & {
|
|
@media(min-width: $screen-lg){
|
|
margin-bottom: 5 * $spacer;
|
|
}
|
|
@media(min-width: $screen-xl){
|
|
margin-bottom: $spacer;
|
|
}
|
|
}
|
|
@media (min-width: $screen-xl) {
|
|
&:before,
|
|
&:after {
|
|
min-height: 320px;
|
|
height: 23vw;
|
|
}
|
|
&:after {
|
|
background-size: cover;
|
|
background-position: center bottom;
|
|
}
|
|
}
|
|
@media (min-width: $screen-xl + 180px){
|
|
&:before,
|
|
&:after {
|
|
height: 20vw;
|
|
transform: translate3d(0,-2%,0);
|
|
}
|
|
}
|
|
@media (min-width: 2200px){
|
|
&:before,
|
|
&:after {
|
|
transform: translate3d(0,-10%,0);
|
|
}
|
|
}
|
|
@media (min-width: 2200px){
|
|
&:before,
|
|
&:after {
|
|
transform: translate3d(0,-20%,0);
|
|
}
|
|
}
|
|
}
|
|
|
|
.logo-caption {
|
|
color: $white;
|
|
}
|
|
.nav-link {
|
|
text-decoration: none;
|
|
}
|
|
.nav-item {
|
|
font-weight: $font-weight-bold;
|
|
}
|
|
.nav-item,
|
|
.nav-link {
|
|
@media(min-width: $screen-md){
|
|
color: inherit;
|
|
}
|
|
}
|
|
.navbar{
|
|
padding-top: $spacer * 1.5;
|
|
padding-bottom: $spacer * 1.5;
|
|
@media(min-width: $screen-md){
|
|
color: $white;
|
|
}
|
|
}
|
|
.btn-menu {
|
|
appearance: none;
|
|
width: 44px;
|
|
height: 44px;
|
|
min-width: 44px;
|
|
display: block;
|
|
border-radius: $border-radius;
|
|
position: absolute;
|
|
background: transparent;
|
|
border: none;
|
|
outline: none;
|
|
top: $spacer * 1.5;
|
|
right: $spacer * 1.5;
|
|
z-index: 1;
|
|
|
|
&:before {
|
|
content: "";
|
|
width: 100%;
|
|
height: 100%;
|
|
min-width: 44px;
|
|
background: url("../img/icons/burger_menu.svg") center no-repeat;
|
|
display: block;
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
}
|
|
@media(min-width: $screen-md){
|
|
display: none;
|
|
}
|
|
&_close:before {
|
|
background-image: url("../img/icons/burger_menu_close.svg");
|
|
}
|
|
}
|
|
&-nav {
|
|
display: none;
|
|
&.active {
|
|
display: block;
|
|
position: fixed;
|
|
height: 100vh;
|
|
width: 100%;
|
|
left: 0;
|
|
top:0;
|
|
background-color: $body-bg;
|
|
padding-top: $spacer * 1.3;
|
|
padding-left: $spacer;
|
|
padding-right: $spacer;
|
|
z-index: $zindex-modal;
|
|
|
|
.nav {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
}
|
|
|
|
.nav-item {
|
|
font-size: $font-size-lg;
|
|
color: $body-color;
|
|
font-weight: $font-weight-bold;
|
|
order: 1;
|
|
|
|
.nav-link {
|
|
&,
|
|
&:hover {
|
|
color: inherit;
|
|
}
|
|
&.disabled {
|
|
opacity: 0.7;
|
|
}
|
|
}
|
|
|
|
&.lang {
|
|
display: flex;
|
|
align-items: center;
|
|
font-size: $font-size-base;
|
|
position: relative;
|
|
top: 0.08rem;
|
|
order: 0;
|
|
padding-left: $spacer * 0.8;
|
|
padding-right: $spacer * 0.8;
|
|
margin-bottom: $spacer;
|
|
text-transform: uppercase;
|
|
|
|
.nav-link {
|
|
&,
|
|
&:hover {
|
|
padding-left: 0.3rem;
|
|
padding-right: 0.3rem;
|
|
opacity: 0.7;
|
|
}
|
|
|
|
&-delimiter {
|
|
position: relative;
|
|
top: -0.08rem;
|
|
}
|
|
&.active {
|
|
&,
|
|
&:hover {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@media(min-width: $screen-md){
|
|
&,
|
|
&.active {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
align-items: center;
|
|
position: static;
|
|
background: transparent;
|
|
height: auto;
|
|
width: auto;
|
|
padding: 0;
|
|
|
|
.nav {
|
|
flex-direction: row;
|
|
color: $white;
|
|
|
|
&-item.lang {
|
|
padding-left: 0;
|
|
padding-right: 0;
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
}
|
|
.nav-item,
|
|
.nav-item.lang {
|
|
order: 1;
|
|
color: inherit;
|
|
}
|
|
.btn-menu {
|
|
display: none;
|
|
}
|
|
.nav-link {
|
|
&.active {
|
|
position: relative;
|
|
&:after {
|
|
content: "";
|
|
position: absolute;
|
|
bottom: $spacer * 0.6;
|
|
border-top: 2px solid $white;
|
|
left: $spacer;
|
|
right: $spacer;
|
|
}
|
|
}
|
|
}
|
|
.nav-link-icon {
|
|
&.icon_github {
|
|
position: relative;
|
|
margin-right: 10px;
|
|
&:before {
|
|
content: "";
|
|
background-image: url("../img/icons/github_white.svg");
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
top: 0.01rem;
|
|
}
|
|
img {
|
|
visibility: hidden;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|