154 lines
2.7 KiB
SCSS
154 lines
2.7 KiB
SCSS
@import 'buefy';
|
|
@import 'base';
|
|
|
|
.page-title {
|
|
@include font-title();
|
|
color: $color__neutral-900;
|
|
text-align: center;
|
|
|
|
@media (min-width: $bp__layout) {
|
|
font-size: 3.7vw;
|
|
text-align: left;
|
|
}
|
|
|
|
@media (min-width: 90em) {
|
|
font-size: 3.5rem;
|
|
}
|
|
}
|
|
|
|
.page-heading {
|
|
margin: 1rem;
|
|
|
|
@media (min-width: $bp__layout) {
|
|
width: 14em;
|
|
max-width: calc(50% - #{$site-menu__header-width} - 3rem);
|
|
margin: 2rem 1rem 1rem 2rem;
|
|
}
|
|
}
|
|
|
|
.thumb-overlay {
|
|
$color: $color__neutral-100; // color of overlay
|
|
|
|
box-shadow: 0 0 12px 0 $color__neutral-100 inset,
|
|
0 2px 12px 3px rgba($color__neutral-100, .5);
|
|
|
|
transition: filter 1s;
|
|
filter: grayscale(.5);
|
|
|
|
@media (min-width: $bp__layout) {
|
|
box-shadow: 0 0 12px 0 $color__neutral-400 inset,
|
|
0 2px 12px 3px rgba($color__neutral-300, .5);
|
|
|
|
filter: grayscale(.95);
|
|
&:hover {
|
|
filter: grayscale(.5);
|
|
}
|
|
}
|
|
|
|
&::before,
|
|
&::after {
|
|
content: '';
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
top: 0;
|
|
left: 0;
|
|
}
|
|
|
|
&::before {
|
|
background: linear-gradient(
|
|
to bottom,
|
|
rgba($color, .5),
|
|
rgba($color, 0),
|
|
rgba($color, .7)
|
|
);
|
|
}
|
|
|
|
&::after {
|
|
background: linear-gradient(
|
|
to left,
|
|
rgba($color, .2),
|
|
rgba($color, 0),
|
|
rgba($color, .2)
|
|
);
|
|
}
|
|
}
|
|
|
|
.btn-link {
|
|
padding: .4em .8em;
|
|
color: $color__neutral-900;
|
|
border: 2px solid $color__neutral-900;
|
|
@include font-title();
|
|
|
|
&::before {
|
|
content: '';
|
|
z-index: -1;
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
left: 0;
|
|
top: 0;
|
|
background-color: $color__neutral-200;
|
|
background: linear-gradient(
|
|
to bottom left,
|
|
$color__neutral-400,
|
|
$color__neutral-200
|
|
);
|
|
|
|
transition: opacity .3s;
|
|
opacity: .4;
|
|
}
|
|
|
|
&:link, &:visited {
|
|
color: $color__neutral-900;
|
|
}
|
|
|
|
&:hover, &:active {
|
|
|
|
&::before {
|
|
opacity: .8;
|
|
}
|
|
}
|
|
|
|
&:focus {
|
|
|
|
}
|
|
}
|
|
|
|
.background-tint {
|
|
background-color: rgba($color__primary-100, .7);
|
|
}
|
|
|
|
.selected-indicator {
|
|
@media (min-width: $bp__layout) {
|
|
&::before {
|
|
content: '';
|
|
display: block;
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
top: 0;
|
|
left: 0;
|
|
|
|
transition: opacity 1s;
|
|
opacity: 0;
|
|
|
|
border: 1px solid $color__neutral-700;;
|
|
}
|
|
}
|
|
|
|
&.is-active::before {
|
|
transition: opacity 2s .2s;
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
.page-enter-active, .page-leave-active {
|
|
transition: opacity .5s;
|
|
}
|
|
|
|
.page-enter, .page-leave-active {
|
|
opacity: 0;
|
|
}
|
|
|