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

header,footer,hero - all now templates

This commit is contained in:
Ray Elliott 2020-04-22 12:21:53 +00:00
parent 5a6c031ad1
commit c962085aeb
16 changed files with 120 additions and 218 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
site/layouts/partials/components/block.html
View File

@ -1,8 +0,0 @@
<!-- TODO convert to proper template -->
<div class="js-block anim-block anim-block--4 anim-block-br block-styles">
<div class="c-block__img" style="background-image: url(/img/img.jpg)"></div>
</div>
<div class="js-block anim-block anim-block--5>
</div>

15
site/layouts/partials/components/card.html
View File

@ -1,15 +0,0 @@
<!-- TODO convert to proper template -->
<div class="card-layout">
<div class="c-img-card about-card">
<div class="c-img-card__header background-image"></div>
<div class="c-img-card__body">
<div class="c-img-card__body-bg body-background"></div>
<h3>Card Heading</h3>
<p>
Amet recusandae optio quia velit quisquam. Dolorem ipsam non modi est quisquam? Quia inventore neque amet laudantium impedit a, dignissimos. Repellendus vero animi saepe tempora quibusdam! Repudiandae esse ex adipisci
</p>
</div>
</div>
</div>
</div>

2
site/layouts/partials/footer.html
View File

@ -1,3 +1,3 @@
<footer class="footer transition-fade"> <footer class="footer transition-fade">
{{ partial "components/footer/footer-2-1-1.html" . }} {{ partial "templates/footer/footer-2-1-1.html" . }}
</footer> </footer>

19
site/layouts/partials/header.html
View File

@ -1,18 +1 @@
<header class="header is-fixed"> {{ partial "templates/header/header.html" . }}
<div class="l-underlay body-bg header-bg"></div>
<div class="l-wrapper">
<nav class="nav site-nav">
<ul class="l-flex-list-row site-nav-title">
<li><a href="{{ .Site.BaseURL }}"><span class="site-title">{{ .Site.Title }}</span></a></li>
</ul>
<label class="menu-toggle site-nav-menu-btn" for="menu-toggle"><span class="site-nav-menu-btn-text menu-text a">Menu</span><span class="menu-icon"></span></label>
<input id="menu-toggle" class="menu-toggle-input" type="checkbox">
<ul class="l-flex-list-row nav-item menu-toggle-menu site-nav-nav-list">
<li><a class="nav-link nav-link" href="{{ .Site.BaseURL }}">Home</a></li>
<li><a class="nav-link nav-link" href="#about">About</a></li>
<li><a class="nav-link nav-link" href="#services">Services</a></li>
<li><a class="nav-link nav-link" href="#contact">Contact</a></li>
</ul>
</nav>
</div>
</header>

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

@ -1,12 +1,5 @@
<article id="home"> <article id="home">
<div class="l-screen-full hero-bg"> <div class="l-screen-full hero-bg">
<div class="hero"> {{ partial "templates/hero/hero.html" . }}
<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 class="hero__bg">
</div>
</div>
</div> </div>
</article> </article>

0
site/layouts/partials/components/footer/footer-2-1-1.html → site/layouts/partials/templates/footer/footer-2-1-1.html
View File

18
site/layouts/partials/templates/header/header.html Normal file
View File

@ -0,0 +1,18 @@
<header class="header is-fixed">
<div class="l-underlay body-bg header-bg"></div>
<div class="l-wrapper">
<nav class="nav site-nav">
<ul class="l-flex-list-row site-nav-title">
<li><a href="{{ .Site.BaseURL }}"><span class="site-title">{{ .Site.Title }}</span></a></li>
</ul>
<label class="menu-toggle site-nav-menu-btn" for="menu-toggle"><span class="site-nav-menu-btn-text menu-text a">Menu</span><span class="menu-icon"></span></label>
<input id="menu-toggle" class="menu-toggle-input" type="checkbox">
<ul class="l-flex-list-row nav-item menu-toggle-menu site-nav-nav-list">
<li><a class="nav-link nav-link" href="{{ .Site.BaseURL }}">Home</a></li>
<li><a class="nav-link nav-link" href="#about">About</a></li>
<li><a class="nav-link nav-link" href="#services">Services</a></li>
<li><a class="nav-link nav-link" href="#contact">Contact</a></li>
</ul>
</nav>
</div>
</header>

9
site/layouts/partials/templates/hero/hero.html Normal file
View File

@ -0,0 +1,9 @@
<div class="hero">
<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 class="hero__bg">
</div>
</div>

2
src/css/imports/components/base.scss
View File

@ -1,2 +0,0 @@
@import "card";
@import "menu-toggle";

74
src/css/imports/components/card.scss
View File

@ -1,74 +0,0 @@
.c-img-card {
$bp-collapse: $bp-s;
z-index: 1;
position: relative;
border-radius: 8px;
overflow: hidden;
&__body {
padding: 32px 48px;
}
&__body-bg {
z-index: -1;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
@media (max-width: $bp-collapse) {
&__header,
&__body,
&__body-bg {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
&__header {
z-index: -1;
}
&__body {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
}
&__body-bg {
opacity: 0.6;
}
}
@media (min-width: $bp-collapse) {
display: flex;
flex-direction: column;
&__header,
&__body {
display: flex;
flex-direction: column;
justify-content: center;
}
&__header {
flex: 0 1 50%;
}
&__body {
position: relative;
flex: 1 0 50%;
}
&__body-bg {
opacity: 1;
}
}
}

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

@ -1 +1 @@
@import "components/footer/footer-2-1-1"; @import "templates/footer/footer-2-1-1";

90
src/css/imports/header.scss
View File

@ -1,89 +1 @@
.header-bg { @import "templates/header/header";
background-color: rgba(pink, 0.5);
opacity: 0.6;
}
.header {
z-index: $z-index__header;
position: relative;
top: 0;
left: 0;
width: 100%;
&.is-fixed {
position: fixed;
.header-bg {
}
}
&.is-absolute {
position: absolute;
}
}
.nav {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
li {
margin-bottom: 0;
}
}
.nav-item {
margin: 0;
}
.nav-link {
display: block;
padding: 0.5 * $unit-size $unit-size;
@media (min-width: $bp-m) {
padding: 0.5 * $unit-size 2 * $unit-size;
}
&:last-child {
padding-right: 0;
}
}
.site-nav {
&-menu-btn {
@media (max-width: $bp-s) {
margin: 0;
padding: 6px 0 6px;
display: flex;
flex-direction: row;
align-items: center;
}
}
&-nav-list {
@media (max-width: $bp-s) {
position: fixed;
top: 4rem;
bottom: 2rem;
left: 2rem;
right: 2rem;
background-color: rgba(pink, 0.5);
}
}
}
.menu-text {
margin-right: 0.5rem;
}
.menu-icon {
display: block;
height: 1.6rem;
width: 1.6rem;
border-radius: 3px;
background-color: currentColor;
}

0
src/css/imports/components/footer/footer-2-1-1.scss → src/css/imports/templates/footer/footer-2-1-1.scss
View File

88
src/css/imports/templates/header/header.scss Normal file
View File

@ -0,0 +1,88 @@
@import "menu-toggle";
.header-bg {
background-color: rgba(pink, 0.5);
opacity: 0.6;
}
.header {
z-index: $z-index__header;
position: relative;
top: 0;
left: 0;
width: 100%;
&.is-fixed {
position: fixed;
}
&.is-absolute {
position: absolute;
}
}
.nav {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
li {
margin-bottom: 0;
}
}
.nav-item {
margin: 0;
}
.nav-link {
display: block;
padding: 0.5 * $unit-size $unit-size;
@media (min-width: $bp-m) {
padding: 0.5 * $unit-size 2 * $unit-size;
}
&:last-child {
padding-right: 0;
}
}
.site-nav {
&-menu-btn {
@media (max-width: $bp-s) {
margin: 0;
padding: 6px 0 6px;
display: flex;
flex-direction: row;
align-items: center;
}
}
&-nav-list {
@media (max-width: $bp-s) {
position: fixed;
top: 4rem;
bottom: 2rem;
left: 2rem;
right: 2rem;
background-color: rgba(pink, 0.5);
}
}
}
.menu-text {
margin-right: 0.5rem;
}
.menu-icon {
display: block;
height: 1.6rem;
width: 1.6rem;
border-radius: 3px;
background-color: currentColor;
}

0
src/css/imports/components/menu-toggle.scss → src/css/imports/templates/header/menu-toggle.scss
View File

2
src/css/main.css
View File

@ -9,8 +9,6 @@
@import "imports/layout.scss"; @import "imports/layout.scss";
@import "imports/utility.scss"; @import "imports/utility.scss";
@import "imports/components/base.scss";
@import "imports/header.scss"; @import "imports/header.scss";
@import "imports/hero.scss"; @import "imports/hero.scss";
@import "imports/about.scss"; @import "imports/about.scss";