added gradient in site-header
This commit is contained in:
parent
8af80ae258
commit
688c628021
|
@ -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;
|
||||
|
|
|
@ -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;
|
||||
|
|
13
style.css
13
style.css
|
@ -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
Loading…
Reference in New Issue