added gradient in site-header

This commit is contained in:
jorge-vitrubio 2022-12-23 23:12:24 +01:00
parent 8af80ae258
commit 688c628021
4 changed files with 42 additions and 3 deletions

View File

@ -1,11 +1,13 @@
$color__white: #fff;
$color__white-dark: #fdfdfd;
$color__white-transparent: rgba(255,255,255,0.95);
$color__grey-lighter: #eee;
$color__grey-light: #ccc;
$color__grey-dark: #666;
$color__black-light: #333;
$color__black-grey: #111;
$color__black: #000;
$color__black-transparent: rgba(0,0,0,0.95);
$color__orange: #ff8d76;
$color__yellow: #f6cc4c;
$color__pink: #f877c3;

View File

@ -15,7 +15,33 @@
position: sticky;
z-index: 900;
top: 0;
background-color: $color__white;
height: 10rem;
margin-bottom: 2rem;
background-color: hsla(0, 0%, 100%, 0.95);
&::after {
content: "";
display: inline-block;
width: 100%;
height: 5rem;
position: absolute;
top:10rem;
// https://css-tricks.com/easing-linear-gradients/
background-image: linear-gradient(
hsla(0, 0%, 100%, 0.95) 5%,
hsla(0, 0%, 100%, 0.738) 19%,
hsla(0, 0%, 100%, 0.541) 34%,
hsla(0, 0%, 100%, 0.382) 47%,
hsla(0, 0%, 100%, 0.278) 56.5%,
hsla(0, 0%, 100%, 0.194) 65%,
hsla(0, 0%, 100%, 0.126) 73%,
hsla(0, 0%, 100%, 0.075) 80.2%,
hsla(0, 0%, 100%, 0.042) 86.1%,
hsla(0, 0%, 100%, 0.021) 91%,
hsla(0, 0%, 100%, 0.008) 95.2%,
hsla(0, 0%, 100%, 0.002) 98.2%,
hsla(0, 0%, 100%, 0) 100%
);
}
.main {
display: flex;
flex-flow: row;

View File

@ -744,7 +744,18 @@ textarea {
position: sticky;
z-index: 900;
top: 0;
background-color: #fff;
height: 10rem;
margin-bottom: 2rem;
background-color: rgba(255, 255, 255, 0.95);
}
.no-sidebar .site-header::after {
content: "";
display: inline-block;
width: 100%;
height: 5rem;
position: absolute;
top: 10rem;
background-image: linear-gradient(rgba(255, 255, 255, 0.95) 5%, rgba(255, 255, 255, 0.738) 19%, rgba(255, 255, 255, 0.541) 34%, rgba(255, 255, 255, 0.382) 47%, rgba(255, 255, 255, 0.278) 56.5%, rgba(255, 255, 255, 0.194) 65%, rgba(255, 255, 255, 0.126) 73%, rgba(255, 255, 255, 0.075) 80.2%, rgba(255, 255, 255, 0.042) 86.1%, rgba(255, 255, 255, 0.021) 91%, rgba(255, 255, 255, 0.008) 95.2%, rgba(255, 255, 255, 0.002) 98.2%, rgba(255, 255, 255, 0) 100%);
}
.no-sidebar .site-header .main {
display: flex;

File diff suppressed because one or more lines are too long