WebsiteFluffy/src/styles/_header.scss

51 lines
857 B
SCSS

@use "vars";
.header {
margin: -32px -32px 32px;
padding: 32px;
display: flex;
flex-direction: column;
gap: 16px;
border-bottom: 2px solid vars.$gray;
background-color: vars.$dark;
z-index: 999;
> h1 {
margin-bottom: calc((16px - 4px) * -1);
}
&.sticky {
position: sticky;
top: 0;
}
}
.header-follow {
margin: calc(-32px - 50px + 2px) 0 0;
height: 0;
position: sticky;
top: 0;
> div {
padding: 0 32px;
width: calc(100% + 64px);
height: 50px;
position: absolute;
left: -32px;
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
border-bottom: 2px solid vars.$gray;
background-color: vars.$dark;
color: vars.$light;
}
}