Shade images with project/title color; remove on hover
See https://gitlab.com/agaric/resources/raw-notes/blob/master/2018-11-14-putting-a-stylesheet-defined-but-user-selected-color-at-a-partial-opacity-over-a-user-uploaded-background-image.md
This commit is contained in:
parent
70af84d0a3
commit
c2f7bee2bd
1 changed files with 43 additions and 0 deletions
|
@ -16,72 +16,115 @@ a.card {
|
||||||
.card.is-blue {
|
.card.is-blue {
|
||||||
color: $white;
|
color: $white;
|
||||||
background-color: $blue;
|
background-color: $blue;
|
||||||
|
& > .card-image {
|
||||||
|
box-shadow: inset 0 0 0 100vmax rgba($blue, .5);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
a.card.is-blue:hover {
|
a.card.is-blue:hover {
|
||||||
color: $white;
|
color: $white;
|
||||||
background-color: darken($blue, 5%);
|
background-color: darken($blue, 5%);
|
||||||
|
& > .card-image {
|
||||||
|
box-shadow: none;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.card.is-marine {
|
.card.is-marine {
|
||||||
color: $white;
|
color: $white;
|
||||||
background-color: $marine;
|
background-color: $marine;
|
||||||
|
& > .card-image {
|
||||||
|
box-shadow: inset 0 0 0 100vmax rgba($marine, .5);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
a.card.is-marine:hover {
|
a.card.is-marine:hover {
|
||||||
color: $white;
|
color: $white;
|
||||||
background-color: darken($marine, 5%);
|
background-color: darken($marine, 5%);
|
||||||
|
& > .card-image {
|
||||||
|
box-shadow: none;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.card.is-berry {
|
.card.is-berry {
|
||||||
color: $white;
|
color: $white;
|
||||||
background-color: $berry;
|
background-color: $berry;
|
||||||
|
& > .card-image {
|
||||||
|
box-shadow: inset 0 0 0 100vmax rgba($berry, .5);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
a.card.is-berry:hover {
|
a.card.is-berry:hover {
|
||||||
color: $white;
|
color: $white;
|
||||||
background-color: darken($berry, 5%);
|
background-color: darken($berry, 5%);
|
||||||
|
& > .card-image {
|
||||||
|
box-shadow: none;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.card.is-cinnamon {
|
.card.is-cinnamon {
|
||||||
color: $white;
|
color: $white;
|
||||||
background-color: $cinnamon;
|
background-color: $cinnamon;
|
||||||
|
& > .card-image {
|
||||||
|
box-shadow: inset 0 0 0 100vmax rgba($cinnamon, .5);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
a.card.is-cinnamon:hover {
|
a.card.is-cinnamon:hover {
|
||||||
color: $white;
|
color: $white;
|
||||||
background-color: darken($cinnamon, 5%);
|
background-color: darken($cinnamon, 5%);
|
||||||
|
& > .card-image {
|
||||||
|
box-shadow: none;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.card.is-dark {
|
.card.is-dark {
|
||||||
color: $white;
|
color: $white;
|
||||||
background-color: $dark;
|
background-color: $dark;
|
||||||
|
& > .card-image {
|
||||||
|
box-shadow: inset 0 0 0 100vmax rgba($dark, .5);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
a.card.is-dark:hover {
|
a.card.is-dark:hover {
|
||||||
color: $white;
|
color: $white;
|
||||||
background-color: darken($dark, 5%);
|
background-color: darken($dark, 5%);
|
||||||
|
& > .card-image {
|
||||||
|
box-shadow: none;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.card.is-grey {
|
.card.is-grey {
|
||||||
color: $white;
|
color: $white;
|
||||||
background-color: $grey;
|
background-color: $grey;
|
||||||
|
& > .card-image {
|
||||||
|
box-shadow: inset 0 0 0 100vmax rgba($grey, .5);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
a.card.is-grey:hover {
|
a.card.is-grey:hover {
|
||||||
color: $white;
|
color: $white;
|
||||||
background-color: darken($grey, 5%);
|
background-color: darken($grey, 5%);
|
||||||
|
& > .card-image {
|
||||||
|
box-shadow: none;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.card.is-dandelion {
|
.card.is-dandelion {
|
||||||
color: $white;
|
color: $white;
|
||||||
background-color: $dandelion;
|
background-color: $dandelion;
|
||||||
|
& > .card-image {
|
||||||
|
box-shadow: inset 0 0 0 100vmax rgba($dandelion, .5);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
a.card.is-dandelion:hover {
|
a.card.is-dandelion:hover {
|
||||||
color: $white;
|
color: $white;
|
||||||
background-color: darken($dandelion, 5%);
|
background-color: darken($dandelion, 5%);
|
||||||
|
& > .card-image {
|
||||||
|
box-shadow: none;
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
// Project
|
// Project
|
||||||
.card-project {
|
.card-project {
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
Loading…
Reference in a new issue