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

style basic grid layout for hero blocks

This commit is contained in:
Ray Elliott 2020-04-03 16:43:06 +00:00
parent ce17adc512
commit b5bcf019bc
4 changed files with 318 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
site/layouts/partials/blocks.html
View File

@ -1,22 +0,0 @@
<div class="js-block c-block c-block--1 bg-gray-300 w-64 h-64 text-red-500">
<div class="c-block__img" style="background-image: url(/img/img.jpg)"></div>
</div>
<div class="js-block c-block c-block--3 c-block-tr bg-gray-300 w-64 h-64 text-yellow-500">
<div class="c-block__img" style="background-image: url(/img/img.jpg)"></div>
</div>
<div class="js-block c-block c-block--4 c-block-br bg-gray-300 w-64 text-green-500">
<div class="c-block__img" style="background-image: url(/img/img.jpg)"></div>
</div>
<div class="js-block c-block c-block--5 bg-gray-300 w-64 h-64 text-blue-500">
</div>
<div class="js-block c-block c-block--3 c-block-tr bg-gray-300 w-64 h-64 text-yellow-500">
<div class="c-block__img" style="background-image: url(/img/img.jpg)"></div>
</div>
<div class="js-block c-block c-block--2 bg-gray-300 w-64 h-64 text-orange-500">
<div class="c-block__img" style="background-image: url(/img/img.jpg)"></div>
</div>

34
site/layouts/partials/hero.html
View File

@ -3,10 +3,40 @@
<div class="hero">
<div class="hero__body">
<h2 class="hero-title">How Can We Help You?</h2>
<p class="h4">Lorem itaque a nesciunt neque porro! Hic at expedita dignissimos nostrum omnis.<p>
<p class="h4 hero-sub-title">Lorem itaque a nesciunt neque porro! Hic at expedita dignissimos nostrum omnis.<p>
</div>
<div id="js-block-parent" class="hero__aside block-grid">
{{ partial "blocks.html" }}
<div class="js-block c-block c-block--1 hero-block-1">
<div class="c-block__img" style="background-image: url(/img/img.jpg)"></div>
</div>
<div class="js-block c-block c-block--2 hero-block-2">
<div class="c-block__img" style="background-image: url(/img/img.jpg)"></div>
</div>
<div class="js-block c-block c-block--3 hero-block-3">
</div>
<div class="js-block c-block c-block--4 hero-block-4">
</div>
<div class="js-block c-block c-block--5 hero-block-5">
<div class="c-block__img" style="background-image: url(/img/img.jpg)"></div>
</div>
<div class="js-block c-block c-block--6 hero-block-6">
</div>
<div class="js-block c-block c-block--7 hero-block-7">
<div class="c-block__img" style="background-image: url(/img/img.jpg)"></div>
</div>
<div class="js-block c-block c-block--8 hero-block-8">
</div>
<div class="js-block c-block c-block--9 hero-block-9">
<div class="c-block__img" style="background-image: url(/img/img.jpg)"></div>
</div>
</div>
</div>
</div>

147
src/css/imports/components/block.scss
View File

@ -6,7 +6,7 @@ $transition-img-out: opacity $duration $delay ease-out, transform $duration;
@mixin img-in {
transition: $transition-img-in;
opacity: 0.5;
opacity: 1;
transform: none;
}
@ -115,6 +115,59 @@ $transition-img-out: opacity $duration $delay ease-out, transform $duration;
}
.c-block--3 {
&::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 100%;
//
// @at-root .state-0 & {
// @include img-in;
// }
//
// @at-root .state-1 & {
// @include img-out;
// transform: translate(66.6%, 0) scale(1.3);
// }
//
// @at-root .state-2 & {
// transform: translate(66.6%, 66.6%) scale(2);
// }
// }
}
.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--5 {
&::before {
transform-origin: 100% 0;
@ -149,42 +202,77 @@ $transition-img-out: opacity $duration $delay ease-out, transform $duration;
}
}
.c-block--4 {
.c-block--6 {
&::before {
transform-origin: 100% 0;
@at-root .state-0 & {
transform: scale(0.33, 1);
transform: scale(1.333, 0.666);
}
@at-root .state-1 & {
transform: scale(0.33, 0.25);
transform: scale(0.5, 0.666);
}
@at-root .state-2 & {
transform: scale(0.5, 0.5);
}
}
// > .c-block__img {
// transform-origin: 0 100%;
//
// @at-root .state-0 & {
// @include img-in;
// }
//
// @at-root .state-1 & {
// @include img-out;
// transform: translate(66.6%, 0) scale(1.3);
// }
//
// @at-root .state-2 & {
// transform: translate(66.6%, 66.6%) scale(2);
// }
// }
}
.c-block--7 {
&::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 100%;
@at-root .state-0 & {
@include img-in;
}
@at-root .state-1 & {
@include img-out;
transform: translate(66.6%, 0) scale(1.3);
}
@at-root .state-1 & {
@at-root .state-2 & {
transform: translate(66.6%, 66.6%) scale(2);
}
@at-root .state-2 & {
@include img-in;
}
}
}
.c-block--5 {
.c-block--8 {
&::before {
transform-origin: 100% 100%;
@ -201,7 +289,40 @@ $transition-img-out: opacity $duration $delay ease-out, transform $duration;
}
}
}
//
//
//
.c-block--9 {
&::before {
transform-origin: 100% 100%;
@at-root .state-0 & {
transform: scale(1, 1);
}
@at-root .state-1 & {
transform: scale(0.375, 1);
}
@at-root .state-2 & {
transform: scale(0.375, 0.375);
}
}
> .c-block__img {
transform-origin: 0 100%;
@at-root .state-0 & {
@include img-in;
}
@at-root .state-1 & {
@include img-out;
transform: translate(66.6%, 0) scale(1.3);
}
@at-root .state-2 & {
transform: translate(66.6%, 66.6%) scale(2);
}
}
}
// vim:set filetype=scss:

166
src/css/imports/hero.scss
View File

@ -50,31 +50,173 @@
}
}
.hero-title,
.hero-sub-title {
color: #fff;
}
.hero-title {
margin-bottom: 1.25rem;
@media (max-width: $bp-hero) {
font-size: 1.4em;
}
}
.hero-sub-title {
margin-bottom: 1.25rem;
@media (max-width: $bp-hero) {
font-size: 1.2em;
}
}
.hero__body {
background-color: rgba(yellow, 0.2);
}
.hero__aside {
background-color: red;
}
.block-grid {
display: grid;
grid-template-rows: 1fr 1fr 1fr;
@media (max-width: $bp-hero) {
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
@media (max-width: $bp-hero) and (orientation: landscape) {
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;
grid-template-rows: 1fr 1fr;
}
}
@media (min-width: $bp-hero) {
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
}
}
.c-block {
outline: 1px dotted red;
opacity: 0.8;
}
@media (max-width: $bp-hero) {
.hero-block-1 {
display: none;
}
.hero-block-2 {
display: none;
}
.hero-block-3 {
display: none;
}
.hero-block-4 {
display: none;
}
.hero-block-5 {
display: none;
}
.hero-block-6 {
display: none;
}
.hero-block-7 {
display: none;
}
.hero-block-8 {
display: none;
}
.hero-block-9 {
display: none;
}
}
@media (max-width: $bp-hero) and (orientation: landscape) {
.hero-block-1 {
}
.hero-block-2 {
}
.hero-block-3 {
}
.hero-block-4 {
}
.hero-block-5 {
}
.hero-block-6 {
}
.hero-block-7,
.hero-block-8,
.hero-block-9 {
@media (max-width: $bp-hero) {
display: none;
}
}
}
@media (min-width: $bp-hero) {
// row 1
////////
.hero-block-1 {
grid-column: 1/4;
grid-row: 1/4;
}
.hero-block-2 {
grid-column: 4/7;
grid-row: 1/4;
}
.hero-block-3 {
grid-column: 7/10;
grid-row: 1/4;
}
// row 2
////////
.hero-block-4 {
grid-column: 1/4;
grid-row: 4/7;
}
.hero-block-5 {
grid-column: 4/7;
grid-row: 4/7;
}
.hero-block-6 {
grid-column: 7/10;
grid-row: 4/7;
}
// row 3
////////
.hero-block-7 {
grid-column: 1/4;
grid-row: 7/10;
}
.hero-block-8 {
grid-column: 4/7;
grid-row: 7/10;
}
.hero-block-9 {
grid-column: 6/10;
grid-row: 6/10;
}
}