update styles
This commit is contained in:
parent
652b42c95f
commit
1f49a212d2
|
|
@ -1,232 +0,0 @@
|
|||
$duration: 1s;
|
||||
$delay: 0.3s;
|
||||
|
||||
$transition-img-in: opacity $duration $delay ease-in, transform $duration;
|
||||
$transition-img-out: opacity $duration $delay ease-out, transform $duration;
|
||||
|
||||
@mixin img-in {
|
||||
transition: $transition-img-in;
|
||||
opacity: 0.5;
|
||||
transform: none;
|
||||
}
|
||||
|
||||
@mixin img-out {
|
||||
transition: $transition-img-out;
|
||||
}
|
||||
|
||||
.c-block::before,
|
||||
.c-block__img {
|
||||
@include abs-full;
|
||||
}
|
||||
|
||||
.c-block {
|
||||
z-index: 1;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
&::before {
|
||||
//will-change: transform;
|
||||
z-index: 1;
|
||||
content: "";
|
||||
transition: transform $duration;
|
||||
background-color: currentColor;
|
||||
}
|
||||
|
||||
> .c-block__img {
|
||||
z-index: 2;
|
||||
//will-change: opacity, transform;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.c-block--1 {
|
||||
&::before {
|
||||
transform-origin: 100% 100%;
|
||||
|
||||
@at-root .state-0 & {
|
||||
transform: scale(1, 1);
|
||||
}
|
||||
|
||||
@at-root .state-1 & {
|
||||
transform: scale(0.5, 1);
|
||||
}
|
||||
|
||||
@at-root .state-2 & {
|
||||
transform: scale(0.5, 0.5);
|
||||
}
|
||||
}
|
||||
|
||||
> .c-block__img {
|
||||
transform-origin: 0 0;
|
||||
|
||||
@at-root .state-0 & {
|
||||
@include img-in;
|
||||
}
|
||||
|
||||
@at-root .state-1 & {
|
||||
@include img-out;
|
||||
transform: translate(50%, 0) scale(1.3);
|
||||
}
|
||||
|
||||
@at-root .state-2 & {
|
||||
transform: translate(50%, 50%) scale(2);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.c-block--2 {
|
||||
&::before {
|
||||
transform-origin: 100% 0;
|
||||
|
||||
@at-root .state-0 & {
|
||||
transform: scale(0.5, 0.5);
|
||||
}
|
||||
|
||||
@at-root .state-1 & {
|
||||
transform: scale(1, 1);
|
||||
}
|
||||
|
||||
@at-root .state-2 & {
|
||||
transform: scale(0.5, 1);
|
||||
}
|
||||
}
|
||||
|
||||
> .c-block__img {
|
||||
transform-origin: 0 100%;
|
||||
|
||||
@at-root .state-0 & {
|
||||
transform: translate(50%, 50%) scale(2);
|
||||
}
|
||||
|
||||
@at-root .state-1 & {
|
||||
@include img-in;
|
||||
}
|
||||
|
||||
@at-root .state-2 & {
|
||||
transform: translate(50%, 0) scale(1.3);
|
||||
@include img-out;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.c-block--3 {
|
||||
&::before {
|
||||
transform-origin: 100% 0;
|
||||
|
||||
@at-root .state-0 & {
|
||||
transform: scale(0.5, 1);
|
||||
}
|
||||
|
||||
@at-root .state-1 & {
|
||||
transform: scale(0.5, 0.5);
|
||||
}
|
||||
|
||||
@at-root .state-2 & {
|
||||
transform: scale(1, 1);
|
||||
}
|
||||
}
|
||||
|
||||
> .c-block__img {
|
||||
transform-origin: 0 100%;
|
||||
|
||||
@at-root .state-0 & {
|
||||
@include img-out;
|
||||
transform: translate(50%, 0) scale(1.3);
|
||||
}
|
||||
|
||||
@at-root .state-1 & {
|
||||
transform: translate(50%, 50%) scale(2);
|
||||
}
|
||||
|
||||
@at-root .state-2 & {
|
||||
@include img-in;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.c-block--4 {
|
||||
&::before {
|
||||
transform-origin: 100% 0;
|
||||
|
||||
@at-root .state-0 & {
|
||||
transform: scale(0.33, 1);
|
||||
}
|
||||
|
||||
@at-root .state-1 & {
|
||||
transform: scale(0.33, 0.25);
|
||||
}
|
||||
|
||||
@at-root .state-2 & {
|
||||
transform: scale(1, 1);
|
||||
}
|
||||
}
|
||||
|
||||
> .c-block__img {
|
||||
transform-origin: 0 100%;
|
||||
|
||||
@at-root .state-0 & {
|
||||
@include img-out;
|
||||
transform: translate(66.6%, 0) scale(1.3);
|
||||
}
|
||||
|
||||
@at-root .state-1 & {
|
||||
transform: translate(66.6%, 66.6%) scale(2);
|
||||
}
|
||||
|
||||
@at-root .state-2 & {
|
||||
@include img-in;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.c-block--5 {
|
||||
&::before {
|
||||
transform-origin: 100% 100%;
|
||||
|
||||
@at-root .state-0 & {
|
||||
transform: scale(1, 1);
|
||||
}
|
||||
|
||||
@at-root .state-1 & {
|
||||
transform: scale(0.5, 1);
|
||||
}
|
||||
|
||||
@at-root .state-2 & {
|
||||
transform: scale(0.5, 0.5);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.block-container {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
max-width: 110rem;
|
||||
height: 100%;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
|
||||
background-color: rgba(#000, 0.1);
|
||||
}
|
||||
|
||||
.block-grid {
|
||||
display: grid;
|
||||
grid-template-rows: 1fr 1fr 1fr;
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
|
||||
.c-block-tr {
|
||||
grid-column: 3/4;
|
||||
grid-row: 1/3;
|
||||
}
|
||||
|
||||
.c-block-br {
|
||||
grid-column: 2/4;
|
||||
grid-row: 3/3;
|
||||
}
|
||||
}
|
||||
|
||||
// vim:set filetype=scss:
|
||||
|
|
@ -1,75 +1,3 @@
|
|||
// a card
|
||||
.c-img-card {
|
||||
$bp-collapse: $bp-s;
|
||||
|
||||
z-index: 1;
|
||||
position: relative;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
|
||||
&__body {
|
||||
padding: 32px 48px;
|
||||
}
|
||||
|
||||
&__body-bg {
|
||||
z-index: -1;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
@media (max-width: $bp-collapse) {
|
||||
&__header,
|
||||
&__body,
|
||||
&__body-bg {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
&__header {
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
&__body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&__body-bg {
|
||||
opacity: 0.6;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: $bp-collapse) {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
&__header,
|
||||
&__body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
&__header {
|
||||
flex: 0 1 50%;
|
||||
}
|
||||
|
||||
&__body {
|
||||
position: relative;
|
||||
flex: 1 0 50%;
|
||||
}
|
||||
|
||||
&__body-bg {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
@import "block";
|
||||
@import "card";
|
||||
@import "menu-toggle";
|
||||
|
|
|
|||
|
|
@ -9,7 +9,6 @@
|
|||
@import "imports/base.scss";
|
||||
@import "imports/layout.scss";
|
||||
@import "imports/utility.scss";
|
||||
@import "imports/blocks.scss";
|
||||
|
||||
@import "imports/components/base.scss";
|
||||
|
||||
|
|
@ -339,6 +338,35 @@ html.is-animating .transition-fade {
|
|||
margin-bottom: 1.25rem;
|
||||
}
|
||||
|
||||
// hero
|
||||
|
||||
.block-container {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
max-width: 110rem;
|
||||
height: 100%;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
|
||||
background-color: rgba(#000, 0.1);
|
||||
}
|
||||
|
||||
.block-grid {
|
||||
display: grid;
|
||||
grid-template-rows: 1fr 1fr 1fr;
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
|
||||
.c-block-tr {
|
||||
grid-column: 3/4;
|
||||
grid-row: 1/3;
|
||||
}
|
||||
|
||||
.c-block-br {
|
||||
grid-column: 2/4;
|
||||
grid-row: 3/3;
|
||||
}
|
||||
}
|
||||
|
||||
// global
|
||||
|
||||
.site-title {
|
||||
|
|
|
|||
Reference in New Issue