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

add hero skeleton

This commit is contained in:
Ray Elliott 2020-04-20 16:50:41 +00:00
parent 499f10a107
commit 115c0545ef
2 changed files with 15 additions and 218 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,43 +1,12 @@
<article id="home">
<div class="l-screen-full hero-bg">
<div class="hero">
<div class="hero__body">
<h2 class="hero-title">How Can We Help You?</h2>
<div class="hero__fg">
<h1 class="hero-title">How Can We Help You?</h1>
<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 anim-block anim-block--1 hero-block-1">
<div class="anim-block__img" style="background-image: url(/img/img.jpg)"></div>
</div>
<div class="js-block anim-block anim-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 class="hero__bg">
</div>
</div>
</div>
</article>

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

@ -4,7 +4,9 @@
width: 100%;
height: 100%;
&__body {
background-color: rgba(pink, 0.5);
&__fg {
display: flex;
flex-direction: column;
justify-content: center;
@ -12,11 +14,13 @@
padding: 64px;
text-align: center;
background-color: rgba(pink, 0.5);
}
@media (max-width: $bp-hero) {
&__body,
&__aside {
&__fg,
&__bg {
position: absolute;
width: 100%;
height: 100%;
@ -24,11 +28,11 @@
left: 0;
}
&__body {
&__fg {
z-index: 10;
}
&__aside {
&__bg {
z-index: 5;
}
}
@ -37,186 +41,10 @@
display: flex;
flex-direction: row;
&__body,
&__aside {
&__fg,
&__bg {
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: repeat(16, 1fr);
grid-template-rows: repeat(16, 1fr);
@media (max-width: $bp-hero) and (orientation: landscape) {
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
}
}
@media (min-width: $bp-hero) {
grid-template-columns: repeat(16, 1fr);
grid-template-rows: repeat(16, 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: 5/9;
grid-row: 5/9;
}
.hero-block-2 {
grid-column: 1/5;
grid-row: 5/9;
}
.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;
}
}