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 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>
|
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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:
|
||||||
|
|
Reference in New Issue