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

Compare commits

base: rayelliott:5a6c031ad13c60b320550edf2338761be459f69f
Branches Tags
rayelliott:master
..
compare: rayelliott:b7b4ab13b098c8967d5807d85821ed0433d44952
Branches Tags
rayelliott:master

2 Commits
5a6c031ad1 ... b7b4ab13b0

Author SHA1 Message Date
Ray Elliott b7b4ab13b0 modularise contact section 2020-04-22 12:36:56 +00:00
Ray Elliott c962085aeb header,footer,hero - all now templates 2020-04-22 12:21:53 +00:00
19 changed files with 151 additions and 245 deletions
Show Stats 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>

29
site/layouts/partials/contact.html
View File

@ -5,35 +5,10 @@
<h2 class="section-header">Contact Us</h2>
<div class="l-section-block no-margin no-pad-top">
<div class="l-wrapper contact-section">
<p class="h5">Complete this form and we will get back to you within one working day.</p>
<form action="https://mailthis.to/remailthis" method="POST" encType="multipart/form-data">
<ul class="u-no-list">
<li>
<label for="name">Name</label>
<input id="name" type="text" name="name">
</li>
<li>
<label for="email">E-mail:</label>
<input id="email" type="email" name="_replyto">
</li>
<li>
<label for="msg">Message:</label>
<textarea id="msg" name="message"></textarea>
</li>
<li><input type="hidden" name="_subject" value="Contact Form Submission"></li>
<li><input type="hidden" name="_honeypot" value=""></li>
<li><input type="hidden" name="_confirmation" value="Thank you, your message has been sent."></li> <li> <button id="js-form-send" type="submit">Send</button>
</li>
</ul>
</form>
</div>
{{ partial "templates/contact/form-basic.html" . }}
</div>
<div class="l-section-block no-margin no-pad-top">
<div class="l-wrapper contact-section">
<h3 class="h4">Remember to Generate Access Token for URL</h3>
<div id="mapbox"></div>
</div>
{{ partial "templates/map/mapbox-basic.html" . }}
</div>
</article>

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

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

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

@ -1,18 +1 @@
<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>
{{ partial "templates/header/header.html" . }}

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

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

24
site/layouts/partials/templates/contact/form-basic.html Normal file
View File

@ -0,0 +1,24 @@
<div class="l-wrapper contact-section">
<p class="h5">Complete this form and we will get back to you within one working day.</p>
<form action="https://mailthis.to/remailthis" method="POST" encType="multipart/form-data">
<ul class="u-no-list">
<li>
<label for="name">Name</label>
<input id="name" type="text" name="name">
</li>
<li>
<label for="email">E-mail:</label>
<input id="email" type="email" name="_replyto">
</li>
<li>
<label for="msg">Message:</label>
<textarea id="msg" name="message"></textarea>
</li>
<li><input type="hidden" name="_subject" value="Contact Form Submission"></li>
<li><input type="hidden" name="_honeypot" value=""></li>
<li><input type="hidden" name="_confirmation" value="Thank you, your message has been sent."></li> <li> <button id="js-form-send" type="submit">Send</button>
</li>
</ul>
</form>
</div>

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>

5
site/layouts/partials/templates/map/mapbox-basic.html Normal file
View File

@ -0,0 +1,5 @@
<div class="l-wrapper contact-section">
<h3 class="h4">Remember to Generate Access Token for URL</h3>
<div id="mapbox"></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 {
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;
}
@import "templates/header/header-checkbox";

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-checkbox.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/utility.scss";
@import "imports/components/base.scss";
@import "imports/header.scss";
@import "imports/hero.scss";
@import "imports/about.scss";