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

Compare commits

base: rayelliott:b5bcf019bc7905a8f12096d9af5579a76d6e4c06
Branches Tags
rayelliott:master
..
compare: rayelliott:0490fbdd6e865f9d4cc743f47ab104d4944cc183
Branches Tags
rayelliott:master

No commits in common. "b5bcf019bc7905a8f12096d9af5579a76d6e4c06" and "0490fbdd6e865f9d4cc743f47ab104d4944cc183" have entirely different histories.
b5bcf019bc ... 0490fbdd6e

8 changed files with 70 additions and 416 deletions
Show Stats Expand all files Collapse all files

22
site/layouts/partials/blocks.html Normal file
View File

@ -0,0 +1,22 @@
<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>

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

@ -1,43 +1,6 @@
<article id="home"> <article id="home">
<div class="l-screen-full hero-bg"> <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="hero"> <div class="block-container block-grid">
<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>
</div> </div>
</article> </article>

147
src/css/imports/components/block.scss
View File

@ -6,7 +6,7 @@ $transition-img-out: opacity $duration $delay ease-out, transform $duration;
@mixin img-in { @mixin img-in {
transition: $transition-img-in; transition: $transition-img-in;
opacity: 1; opacity: 0.5;
transform: none; transform: none;
} }
@ -115,59 +115,6 @@ $transition-img-out: opacity $duration $delay ease-out, transform $duration;
} }
.c-block--3 { .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 { &::before {
transform-origin: 100% 0; transform-origin: 100% 0;
@ -202,77 +149,42 @@ $transition-img-out: opacity $duration $delay ease-out, transform $duration;
} }
} }
.c-block--6 { .c-block--4 {
&::before { &::before {
transform-origin: 100% 0; transform-origin: 100% 0;
@at-root .state-0 & { @at-root .state-0 & {
transform: scale(1.333, 0.666); transform: scale(0.33, 1);
} }
@at-root .state-1 & { @at-root .state-1 & {
transform: scale(0.5, 0.666); transform: scale(0.33, 0.25);
} }
@at-root .state-2 & { @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); 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 { > .c-block__img {
transform-origin: 0 100%; transform-origin: 0 100%;
@at-root .state-0 & { @at-root .state-0 & {
@include img-in;
}
@at-root .state-1 & {
@include img-out; @include img-out;
transform: translate(66.6%, 0) scale(1.3); transform: translate(66.6%, 0) scale(1.3);
} }
@at-root .state-2 & { @at-root .state-1 & {
transform: translate(66.6%, 66.6%) scale(2); transform: translate(66.6%, 66.6%) scale(2);
} }
@at-root .state-2 & {
@include img-in;
}
} }
} }
.c-block--8 { .c-block--5 {
&::before { &::before {
transform-origin: 100% 100%; transform-origin: 100% 100%;
@ -289,40 +201,7 @@ $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: // vim:set filetype=scss:

14
src/css/imports/components/menu-toggle.scss
View File

@ -6,19 +6,7 @@ $bp-menu-collpase: $bp-s;
input.c-menu-toggle__toggle[type="checkbox"], input.c-menu-toggle__toggle[type="checkbox"],
input.c-menu-toggle__toggle[type="radio"] { 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) { @media (max-width: $bp-menu-collpase) {

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

@ -1,222 +0,0 @@
.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;
}
}

3
src/css/imports/layout.scss
View File

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

2
src/css/imports/variables.scss
View File

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

35
src/css/main.css
View File

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