Compare commits

...

5 Commits

8 changed files with 416 additions and 70 deletions

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>

View File

@ -1,6 +1,43 @@
<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 hero-bg">
<div class="block-container block-grid">
<div class="l-screen-full hero-bg">
<div class="hero">
<div class="hero__body">
<h2 class="hero-title">How Can We Help You?</h2>
<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">
<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>
</article>

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 & {
transform: translate(66.6%, 66.6%) scale(2);
}
@at-root .state-2 & {
@include img-in;
transform: translate(66.6%, 66.6%) scale(2);
}
}
}
.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:

View File

@ -6,7 +6,19 @@ $bp-menu-collpase: $bp-s;
input.c-menu-toggle__toggle[type="checkbox"],
input.c-menu-toggle__toggle[type="radio"] {
display: none;
// display: none;
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
opacity: 0;
pointer-events: none;
&:checked {
pointer-events: auto;
}
}
@media (max-width: $bp-menu-collpase) {

222
src/css/imports/hero.scss Normal file
View File

@ -0,0 +1,222 @@
.hero {
z-index: 1;
position: relative;
width: 100%;
height: 100%;
&__body {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 64px;
text-align: center;
}
@media (max-width: $bp-hero) {
&__body,
&__aside {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
&__body {
z-index: 10;
}
&__aside {
z-index: 5;
}
}
@media (min-width: $bp-hero) {
display: flex;
flex-direction: row;
&__body,
&__aside {
flex: 0 0 50%;
}
&__body {
}
&__aside {
}
}
}
.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 {
}
.hero__aside {
}
.block-grid {
display: grid;
@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;
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;
}
}

View File

@ -157,9 +157,6 @@
.l-flex-list-col,
.l-flex-list-row {
> li {
margin: 0;
}
}
.l-list-bare {

View File

@ -6,6 +6,8 @@ $bp-l: 80em;
$bp-footer-s: 28em;
$bp-footer-m: 60em;
$bp-hero: $bp-m;
$z-index__header: 100;
:root {

View File

@ -12,6 +12,8 @@
@import "imports/components/base.scss";
@import "imports/hero.scss";
@import "mapbox-gl/dist/mapbox-gl.css";
// swup transition classes
@ -50,6 +52,10 @@ html.is-animating .transition-fade {
flex-direction: row;
justify-content: space-between;
align-items: center;
li {
margin-bottom: 0;
}
}
.nav__item {
@ -379,35 +385,6 @@ html.is-animating .transition-fade {
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
.site-title {