Compare commits
5 Commits
0490fbdd6e
...
b5bcf019bc
Author | SHA1 | Date |
---|---|---|
Ray Elliott | b5bcf019bc | |
Ray Elliott | ce17adc512 | |
Ray Elliott | eab1e295d2 | |
Ray Elliott | 208cc8bb26 | |
Ray Elliott | 9f339713c7 |
|
@ -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>
|
|
@ -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>
|
||||
|
|
|
@ -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:
|
||||
|
|
|
@ -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) {
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
@ -157,9 +157,6 @@
|
|||
|
||||
.l-flex-list-col,
|
||||
.l-flex-list-row {
|
||||
> li {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.l-list-bare {
|
||||
|
|
|
@ -6,6 +6,8 @@ $bp-l: 80em;
|
|||
$bp-footer-s: 28em;
|
||||
$bp-footer-m: 60em;
|
||||
|
||||
$bp-hero: $bp-m;
|
||||
|
||||
$z-index__header: 100;
|
||||
|
||||
:root {
|
||||
|
|
|
@ -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 {
|
||||
|
|
Reference in New Issue