tidy up temporary blocks layout
This commit is contained in:
parent
cb6cc081cb
commit
b4daf39445
|
@ -2,17 +2,21 @@
|
|||
<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>
|
||||
|
||||
<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>
|
||||
|
|
|
@ -1,5 +1,7 @@
|
|||
<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">
|
||||
{{ partial "blocks.html" . }}
|
||||
<div class="block-container block-grid">
|
||||
{{ partial "blocks.html" . }}
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
|
|
|
@ -150,8 +150,6 @@ $transition-img-out: opacity $duration $delay ease-out, transform $duration;
|
|||
}
|
||||
|
||||
.c-block--4 {
|
||||
height: 24rem;
|
||||
|
||||
&::before {
|
||||
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:
|
||||
|
|
Reference in New Issue