rf-web/_sass/includes/header.scss

105 lines
1.7 KiB
SCSS

header.page-header {
.nav-link,
.lang,
.sub-nav-link {
color: $text;
background-color: white;
padding: $size-8;
transition: box-shadow 0.8s cubic-bezier(0.075, 0.82, 0.165, 1);
z-index: 1;
text-decoration: underline;
}
.lang:hover {
box-shadow: 5px 5px 0 rgba($white, 0.5), 10px 10px 0 rgba($white, 0.4), 15px 15px 0 rgba($white, 0.3);
transition: box-shadow 0.2s cubic-bezier(0.075, 0.82, 0.165, 1);
}
.nav-group {
cursor: default;
display: flex;
flex-direction: column;
align-items: flex-end;
.sub-nav-link {
opacity: 0;
}
&:hover {
.sub-nav-link {
opacity: 1;
}
}
a {
cursor: pointer;
}
}
nav {
position: absolute;
top: $size-32;
right: $size-32;
display: flex;
flex-direction: column;
align-items: flex-end;
@include touch {
top: $size-16;
right: $size-12;
}
.menu {
display: flex;
}
}
.lang,
.nav-link {
margin: 0 4px 8px 0;
@include touch {
font-size: 0.8em;
}
}
h1.logo {
font-family: $font-logo;
margin: $size-128 0;
// background-color: $bg;
display: inline-block;
@include touch {
margin: $size-128 0 $size-64 0;
}
}
}
#rf-logo-wrapper {
transition: all 0.8s ease-in-out;
a {
font-weight: normal;
&:hover,
&:visited {
font-style: normal;
}
@include darkMode {
h1 {
color: $white;
}
}
}
&.hidden {
opacity: 0.0001;
margin-top: -100px;
}
.rf-logo {
margin: $size-64 0 $size-64 $size-32;
@include touch {
max-width: 90%;
margin-left: 5%;
}
}
}