rf-web/_sass/includes/header.scss

150 lines
2.7 KiB
SCSS
Raw Normal View History

2020-02-21 11:44:13 +00:00
header.page-header {
.nav-link,
.lang,
.sub-nav-link {
color: var(--colour-text);
2020-02-21 11:44:13 +00:00
background-color: white;
padding: var(--size-8);
2020-02-21 11:44:13 +00:00
transition: box-shadow 0.8s cubic-bezier(0.075, 0.82, 0.165, 1);
z-index: 1;
text-decoration: underline;
}
2020-02-21 11:44:13 +00:00
.lang:hover {
box-shadow: 5px 5px 0 rgba(var(--colour-white), 0.5), 10px 10px 0 rgba(var(--colour-white), 0.4),
15px 15px 0 rgba(var(--colour-white), 0.3);
transition: box-shadow 0.2s cubic-bezier(0.075, 0.82, 0.165, 1);
}
2020-02-21 11:44:13 +00:00
.nav-group {
cursor: default;
display: flex;
flex-direction: column;
align-items: flex-end;
.sub-nav-link {
opacity: 0;
pointer-events: none;
&:hover,
&:focus,
&:active {
opacity: 1;
pointer-events: all;
}
}
&:hover,
&:focus,
&:active {
.sub-nav-link {
opacity: 1;
pointer-events: all;
}
}
a {
cursor: pointer;
}
}
nav {
position: absolute;
top: var(--size-32);
right: var(--size-32);
display: flex;
2020-04-28 11:53:13 +00:00
@include touch {
position: relative;
top: 0;
left: 0;
right: initial;
margin-top: var(--size-16);
justify-content: flex-end;
}
.nofocus:focus {
outline: none;
}
}
.lang,
.nav-link,
.sub-nav-link {
margin: 0 4px 8px 0;
2020-02-21 11:44:13 +00:00
@include touch {
font-size: 0.8em;
}
}
2020-02-26 07:55:02 +00:00
h1.logo {
font-family: var(--font-logo);
margin: var(--size-128) 0;
color: var(--colour-text, var(--colour-graphite));
2020-02-26 07:55:02 +00:00
display: inline-block;
filter: drop-shadow(0px 0px 8px var(--colour-grey-light));
2020-07-29 13:02:51 +00:00
@include touch {
2020-11-22 14:16:14 +00:00
margin: var(--size-64) 0;
2020-07-29 13:02:51 +00:00
}
.subtitle {
font-family: var(--font-logo);
color: var(--colour-text, var(--colour-graphite));
font-size: var(--size-32);
}
2020-02-26 07:55:02 +00:00
}
2020-09-05 14:12:50 +00:00
&.header-collapsed {
h1.logo {
margin: 0;
font-size: var(--size-32);
margin: var(--size-32) 0;
}
2020-09-11 09:43:26 +00:00
@include touch {
nav.page-content {
flex-direction: column;
margin-right: var(--size-16);
}
#rf-logo-wrapper {
margin-left: var(--size-16);
}
}
2020-09-05 14:12:50 +00:00
}
2020-02-21 11:44:13 +00:00
}
#rf-logo-wrapper {
transition: all 0.8s ease-in-out;
a {
font-weight: normal;
&:hover,
&:visited {
font-style: normal;
}
2020-07-29 13:02:51 +00:00
@include darkMode {
h1,
.subtitle {
color: var(--colour-white);
filter: drop-shadow(0px 0px 8px var(--colour-graphite));
2020-07-29 13:02:51 +00:00
}
}
}
&.hidden {
opacity: 0.0001;
margin-top: -100px;
}
.rf-logo {
margin: var(--size-64) 0 var(--size-64) var(--size-32);
@include touch {
max-width: 90%;
margin-left: 5%;
}
}
}