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

tidy up temporary blocks layout

This commit is contained in:
Ray Elliott 2020-03-29 19:58:33 +00:00
parent cb6cc081cb
commit b4daf39445
3 changed files with 45 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -2,17 +2,21 @@
<div class="c-block__img" style="background-image: url(/img/img.jpg)"></div> <div class="c-block__img" style="background-image: url(/img/img.jpg)"></div>
</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="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 class="c-block__img" style="background-image: url(/img/img.jpg)"></div>
</div> </div>
<div class="js-block c-block c-block--3 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 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>

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

@ -1,5 +1,7 @@
<article id="home"> <article id="home">
<div id="js-block-parent" class="l-screen-full l-relative l-flex l-flex-center l-flex-wrap l-justify-around u-overflow-hidden"> <div id="js-block-parent" class="l-screen-full l-relative l-flex l-flex-center l-flex-wrap l-justify-around u-overflow-hidden">
{{ partial "blocks.html" . }} <div class="block-container block-grid">
{{ partial "blocks.html" . }}
</div>
</div> </div>
</article> </article>

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

@ -150,8 +150,6 @@ $transition-img-out: opacity $duration $delay ease-out, transform $duration;
} }
.c-block--4 { .c-block--4 {
height: 24rem;
&::before { &::before {
transform-origin: 100% 0; transform-origin: 100% 0;
@ -204,4 +202,31 @@ $transition-img-out: opacity $duration $delay ease-out, transform $duration;
} }
} }
.block-container {
position: relative;
width: 100%;
max-width: 110rem;
height: 100%;
margin-left: auto;
margin-right: auto;
background-color: pink;
}
.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: // vim:set filetype=scss: