rayelliott
/
victor-hugo
Archived
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

update styles

This commit is contained in:
Ray Elliott 2020-04-02 18:28:36 +00:00
parent 652b42c95f
commit 1f49a212d2
3 changed files with 32 additions and 308 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

232
src/css/imports/blocks.scss
View File

@ -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:

78
src/css/imports/components/base.scss
View File

@ -1,75 +1,3 @@
// a card @import "block";
.c-img-card { @import "card";
$bp-collapse: $bp-s; @import "menu-toggle";
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;
}
}
}

30
src/css/main.css
View File

@ -9,7 +9,6 @@
@import "imports/base.scss"; @import "imports/base.scss";
@import "imports/layout.scss"; @import "imports/layout.scss";
@import "imports/utility.scss"; @import "imports/utility.scss";
@import "imports/blocks.scss";
@import "imports/components/base.scss"; @import "imports/components/base.scss";
@ -339,6 +338,35 @@ html.is-animating .transition-fade {
margin-bottom: 1.25rem; 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 // global
.site-title { .site-title {