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

Compare commits

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

No commits in common. "b7b4ab13b098c8967d5807d85821ed0433d44952" and "5a6c031ad13c60b320550edf2338761be459f69f" have entirely different histories.
b7b4ab13b0 ... 5a6c031ad1

19 changed files with 245 additions and 151 deletions
Show Stats Expand all files Collapse all files

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

@ -0,0 +1,8 @@
<!-- 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 Normal file
View File

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

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

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

@ -5,10 +5,35 @@
<h2 class="section-header">Contact Us</h2>
<div class="l-section-block no-margin no-pad-top">
{{ partial "templates/contact/form-basic.html" . }}
<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>
</div>
<div class="l-section-block no-margin no-pad-top">
{{ partial "templates/map/mapbox-basic.html" . }}
<div class="l-wrapper contact-section">
<h3 class="h4">Remember to Generate Access Token for URL</h3>
<div id="mapbox"></div>
</div>
</div>
</article>

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

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

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

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

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

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

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

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

@ -1,18 +0,0 @@
<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
View File

@ -1,9 +0,0 @@
<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
View File

@ -1,5 +0,0 @@
<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 Normal file
View File

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

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

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

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

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

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

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

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

@ -1 +1,89 @@
@import "templates/header/header-checkbox";
.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;
}

88
src/css/imports/templates/header/header-checkbox.scss
View File

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

2
src/css/main.css
View File

@ -9,6 +9,8 @@
@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";