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

Compare commits

base: rayelliott:d5b6788f300ff99361075166a34b4b10c286de1f
Branches Tags
rayelliott:master
..
compare: rayelliott:55c1f24ebd88af752287d50c4c173edc548396c7
Branches Tags
rayelliott:master

No commits in common. "d5b6788f300ff99361075166a34b4b10c286de1f" and "55c1f24ebd88af752287d50c4c173edc548396c7" have entirely different histories.
d5b6788f30 ... 55c1f24ebd

11 changed files with 71 additions and 445 deletions
Show Stats Expand all files Collapse all files

43
site/layouts/partials/about.html
View File

@ -1,51 +1,18 @@
<article id="about"> <article id="about" class="l-relative l-screen-min-full">
<div class="l-section-pad l-wrapper">
<section class="l-relative l-screen-min-full"> <div>
<div class="l-underlay about-bg"></div> <h2>About Heading</h2>
<div class="l-section-pad l-wrapper l-flex-2-col-m about-section">
<div class="about-info">
<h2>About Heading One</h2>
<div class="section-icon"></div>
<p>Lorem fuga cupiditate quidem quia earum, hic. Iusto id beatae sit similique sequi! Earum veritatis mollitia iste ipsam totam deleniti Nam cupiditate recusandae tempore ab magnam! Officiis maxime incidunt asperiores?</p> <p>Lorem fuga cupiditate quidem quia earum, hic. Iusto id beatae sit similique sequi! Earum veritatis mollitia iste ipsam totam deleniti Nam cupiditate recusandae tempore ab magnam! Officiis maxime incidunt asperiores?</p>
<p>Amet sed ullam ea dolore corrupti sit. Alias aut doloribus explicabo perferendis fuga? Quas nostrum aut earum tempora voluptatem, magnam? Veritatis corrupti perspiciatis at aliquid perspiciatis Eligendi reprehenderit quidem veniam</p> <p>Amet sed ullam ea dolore corrupti sit. Alias aut doloribus explicabo perferendis fuga? Quas nostrum aut earum tempora voluptatem, magnam? Veritatis corrupti perspiciatis at aliquid perspiciatis Eligendi reprehenderit quidem veniam</p>
<p>Amet dolore atque iure inventore vitae Dolores fuga porro quo odit et autem. Sint est nesciunt unde non aliquid officiis fugit Repellat cum sequi cum fugiat fugit Voluptatem quaerat quibusdam.</p> <p>Amet dolore atque iure inventore vitae Dolores fuga porro quo odit et autem. Sint est nesciunt unde non aliquid officiis fugit Repellat cum sequi cum fugiat fugit Voluptatem quaerat quibusdam.</p>
</div> </div>
<div> <div>
<div class="c-img-card about-card"> <img src="https://via.placeholder.com/200" alt="CARD IMAGE">
<div class="c-img-card__header about-card-bg-img about-card-bg-img-1"></div>
<div class="c-img-card__body">
<div class="c-img-card__body-bg about-card-bg-1"></div>
<h3>Card Heading</h3> <h3>Card Heading</h3>
<p> <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 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> </p>
</div> </div>
</div> </div>
</div>
</div>
</section>
<section class="l-relative l-screen-min-full">
<div class="l-underlay about-bg about-bg--secondary"></div>
<div class="l-section-pad l-wrapper l-flex-2-col-m">
<div>
<h2>About Heading Two</h2>
<div class="section-icon"></div>
<p>Lorem fuga cupiditate quidem quia earum, hic. Iusto id beatae sit similique sequi! Earum veritatis mollitia iste ipsam totam deleniti Nam cupiditate recusandae tempore ab magnam! Officiis maxime incidunt asperiores?</p>
<p>Amet sed ullam ea dolore corrupti sit. Alias aut doloribus explicabo perferendis fuga? Quas nostrum aut earum tempora voluptatem, magnam? Veritatis corrupti perspiciatis at aliquid perspiciatis Eligendi reprehenderit quidem veniam</p>
<p>Amet dolore atque iure inventore vitae Dolores fuga porro quo odit et autem. Sint est nesciunt unde non aliquid officiis fugit Repellat cum sequi cum fugiat fugit Voluptatem quaerat quibusdam.</p>
</div>
<div>
<div class="c-img-card">
<img src="https://via.placeholder.com/300x400" alt="CARD IMAGE">
<h3>Another 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>
</section>
</article> </article>

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

@ -1,7 +1,6 @@
<article id="contact" class="l-relative l-screen-min-full contact-bg"> <article id="contact" class="l-relative l-screen-min-full contact-bg">
<div class="l-section-pad l-wrapper"> <div class="l-section-pad l-wrapper">
<h2 class="l-section-header contact-heading">Contact Us</h2> <h2>Contact</h2>
<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"> <form action="https://mailthis.to/remailthis" method="POST" encType="multipart/form-data">
<ul class="u-no-list"> <ul class="u-no-list">
<li> <li>
@ -23,7 +22,7 @@
</ul> </ul>
</form> </form>
<h3 class="h4">Remember to Generate Access Token for URL</h3> <h3>Remember to Generate Access Token for URL</h3>
<div id="mapbox"></div> <div id="mapbox"></div>
</div> </div>
</article> </article>

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

@ -35,6 +35,6 @@
<li class="footer__term"><a class="footer__link" href="{{ "terms-and-conditions" | relURL }}">Terms and Conditions</a></li> <li class="footer__term"><a class="footer__link" href="{{ "terms-and-conditions" | relURL }}">Terms and Conditions</a></li>
<li class="footer__term"><a class="footer__link" href="{{ "privacy-policy" | relURL }}">Privacy Policy</a></li> <li class="footer__term"><a class="footer__link" href="{{ "privacy-policy" | relURL }}">Privacy Policy</a></li>
</ul> </ul>
<p class="footer__attr">Copyright &copy; <span id="js-copy-date">2019</span> &dash; <a class="footer__link" rel="nofollow" href="https://rayelliott.dev">rayelliott.dev</a></p> <p class="footer__attr">Copyright &copy; <span id="js-copy-date">2020</span> &dash; <a class="footer__link" rel="nofollow" href="https://rayelliott.dev">rayelliott.dev</a></p>
</div> </div>
</footer> </footer>

114
site/layouts/partials/services.html
View File

@ -1,113 +1,47 @@
<article id="services" class="l-relative l-screen-min-full services-bg"> <article id="services" class="l-relative l-screen-min-full services-bg">
<div class="l-section-pad l-wrapper l-wrapper--wide"> <div class="l-section-pad l-wrapper">
<h2 class="l-section-header">Services</h2> <h2>Services</h2>
<ul class="l-flex-list-row service-list"> <ul>
<li class="service">
<ul class="l-list-bare">
<li class="service__header">
<img class="service__img" src="https://via.placeholder.com/200" alt="SERVICE IMAGE">
</li>
<li> <li>
<h3 class="service__heading h4">Service Heading One</h3> <img src="https://via.placeholder.com/200" alt="SERVICE IMAGE">
<p class="h5">Service Sub-Heading</p> <h3>Service Heading</h3>
</li>
<li class="service__body">
<p> <p>
Dolor ad velit illum adipisicing laborum! Unde assumenda corporis dolore iure earum Sit ipsum exercitationem nisi dolore a repellendus! Nostrum accusamus laborum in sapiente velit Recusandae facere esse et natus. <span>Dolor ad velit illum adipisicing laborum! Unde assumenda corporis dolore iure earum Sit ipsum exercitationem nisi dolore a repellendus! Nostrum accusamus laborum in sapiente velit Recusandae facere esse et natus.</span>
</p> </p>
<p> <p>
Deleniti debitis reprehenderit est magni modi Veniam cumque officia quas ex veniam Voluptates molestias eaque dolorem ratione. <span>Sit minima sapiente quidem ipsam animi? Nesciunt officiis amet facilis repellat nulla maiores? Deleniti debitis reprehenderit est magni modi Veniam cumque officia quas ex veniam Voluptates molestias eaque dolorem ratione</span>
</p> </p>
</li> </li>
<li> <li>
<ul class="l-flex-list-row service__social-list"> <img src="https://via.placeholder.com/200" alt="SERVICE IMAGE">
<li><span class="social-icon"></span></li> <h3>Service Heading</h3>
<li><span class="social-icon"></span></li>
<li><span class="social-icon"></span></li>
</ul>
</li>
</ul>
</li>
<li class="service">
<ul class="l-list-bare">
<li class="service__header">
<img class="service__img" src="https://via.placeholder.com/200" alt="SERVICE IMAGE">
</li>
<li>
<h3 class="service__heading h4">Service Heading Two</h3>
<p class="h5">Service Sub-Heading</p>
</li>
<li class="service__body">
<p> <p>
Dolor ad velit illum adipisicing laborum! Unde assumenda corporis dolore iure earum Sit ipsum exercitationem nisi dolore a repellendus! Nostrum accusamus laborum in sapiente velit Recusandae facere esse et natus. <span>Elit rem consequatur magnam magnam et voluptatem laborum? Maxime recusandae assumenda ratione ratione nisi laudantium! Recusandae accusantium eaque dolorum corporis quod. Excepturi provident commodi adipisci distinctio voluptatibus. Nulla ullam vitae.</span>
</p> </p>
<p> <p>
Dolor ad velit illum adipisicing laborum! Unde assumenda corporis dolore iure earum Sit ipsum exercitationem nisi dolore a repellendus! Nostrum accusamus laborum in sapiente velit Recusandae facere esse et natus. <span>Consectetur provident modi corporis reprehenderit incidunt? Vel illo dolor minima excepturi accusamus nostrum? Illo dignissimos aliquid perspiciatis corrupti possimus fuga. Reiciendis excepturi commodi voluptatum molestias magnam Accusantium totam illo harum</span>
</p>
</li>
<li>
<img src="https://via.placeholder.com/200" alt="SERVICE IMAGE">
<h3>Service Heading</h3>
<p>
<span>Amet illo expedita facere nihil vero, ab Deserunt doloremque commodi error aperiam laborum. Placeat omnis possimus est ipsam voluptas. Incidunt officia atque nisi dicta voluptates laborum Iusto exercitationem tempora dicta.</span>
</p> </p>
<p> <p>
Deleniti debitis reprehenderit est magni modi Veniam cumque officia quas ex veniam Voluptates molestias eaque dolorem ratione. <span>Amet architecto praesentium cumque delectus exercitationem Repudiandae facere quia sed id inventore? Vel tempore fugit iusto ab magnam. Consequatur iure ex temporibus odio ab eligendi dolore? Dignissimos ipsum non sit</span>
</p> </p>
</li> </li>
<li> <li>
<ul class="l-flex-list-row service__social-list"> <img src="https://via.placeholder.com/200" alt="SERVICE IMAGE">
<li><span class="social-icon"></span></li> <h3>Service Heading</h3>
<li><span class="social-icon"></span></li> <p>
<li><span class="social-icon"></span></li> <span>Ipsum perferendis perspiciatis velit ut commodi accusantium Dignissimos quisquam quam voluptatum perspiciatis optio? Beatae molestiae quisquam esse ut cum? Ab praesentium ad eius recusandae nisi. Laudantium eos minima ex quod?</span>
<li><span class="social-icon"></span></li>
<li><span class="social-icon"></span></li>
</ul>
</li>
</ul>
</li>
<li class="service">
<ul class="l-list-bare">
<li class="service__header">
<img class="service__img" src="https://via.placeholder.com/200" alt="SERVICE IMAGE">
</li>
<li>
<h3 class="service__heading h4">Service Heading Three</h3>
<p class="h5">Service Sub-Heading</p>
</li>
<li>
<p class="service__body">
Deleniti debitis reprehenderit est magni modi Veniam cumque officia quas ex veniam Voluptates molestias eaque dolorem ratione.
</p>
</li>
<li>
<ul class="l-flex-list-row service__social-list">
<li><span class="social-icon"></span></li>
<li><span class="social-icon"></span></li>
</ul>
</li>
</ul>
</li>
<li class="service">
<ul class="l-list-bare">
<li class="service__header">
<img class="service__img" src="https://via.placeholder.com/200" alt="SERVICE IMAGE">
</li>
<li>
<h3 class="service__heading h4">Service Heading Four</h3>
<p class="h5">Service Sub-Heading</p>
</li>
<li>
<p class="service__body">
Dolor ad velit illum adipisicing laborum! Unde assumenda corporis dolore iure earum Sit ipsum exercitationem nisi dolore a repellendus! Nostrum accusamus laborum in sapiente velit Recusandae facere esse et natus.
</p> </p>
<p> <p>
Deleniti debitis reprehenderit est magni modi Veniam cumque officia quas ex veniam Voluptates molestias eaque dolorem ratione. <span>Lorem nisi facilis corrupti sunt nihil! Ipsum soluta possimus expedita commodi expedita. Reprehenderit sed fugit hic amet maxime velit? Repellat saepe quasi iure laborum quasi. Pariatur dolorem reprehenderit laboriosam dolorum</span>
</p> </p>
</li> </li>
<li>
<ul class="l-flex-list-row service__social-list">
<li><span class="social-icon"></span></li>
<li><span class="social-icon"></span></li>
<li><span class="social-icon"></span></li>
<li><span class="social-icon"></span></li>
</ul>
</li>
</ul>
</li>
</ul> </ul>
</div> </div>
</article> </article>

11
src/css/imports/base.scss
View File

@ -10,14 +10,3 @@ body {
} }
} }
// NOTE these correspond to base styles in milligram/src/_Base.css
h1,
h2,
h3,
h4,
h5,
h6 {
@include font-title($weight: 300);
}

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

@ -1,75 +0,0 @@
// a card
.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;
}
}
}

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

@ -1,49 +1,19 @@
.l-wrapper { .l-wrapper {
width: 100%; width: 100%;
max-width: 90rem; max-width: 70rem;
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
padding-left: 8px;
padding-right: 8px;
@media (min-width: $bp-s) {
padding-left: 32px;
padding-right: 32px;
}
@media (min-width: $bp-m) {
padding-left: 64px;
padding-right: 64px;
}
@media (min-width: $bp-l) {
padding-left: 96px;
padding-right: 96px;
}
&--wide {
max-width: 110rem;
}
} }
.l-section-pad { .l-section-pad {
padding-top: 24px; padding: 24px 8px;
padding-bottom: 24px;
@media (min-width: $bp-s) {
padding-top: 32px;
padding-bottom: 32px;
}
@media (min-width: $bp-m) { @media (min-width: $bp-m) {
padding-top: 64px; padding: 32px 32px;
padding-bottom: 64px;
} }
@media (min-width: $bp-l) { @media (min-width: $bp-l) {
padding-top: 96px; padding: 48px 32px;
padding-bottom: 96px;
} }
// reduce padding bottom // reduce padding bottom
@ -56,13 +26,6 @@
} }
} }
.l-section-header {
font-size: 2.875rem;
line-height: 1.2;
text-align: center;
margin-bottom: 3.75rem;
}
// #position // #position
.l-absolute { .l-absolute {
@ -121,31 +84,6 @@
flex-wrap: wrap; flex-wrap: wrap;
} }
.l-flex-2-col-m {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: stretch;
flex-wrap: wrap;
> * {
flex: 0 0 100%;
@media (min-width: $bp-m) {
flex: 0 0 50%;
}
}
}
.l-flex-list-col {
display: flex;
flex-direction: column;
justify-content: center;
padding-left: 0;
list-style: none;
margin: 0;
}
.l-flex-list-row { .l-flex-list-row {
display: flex; display: flex;
flex-direction: row; flex-direction: row;

5
src/css/imports/mixins.scss
View File

@ -3,11 +3,6 @@
font-weight: $weight; font-weight: $weight;
} }
@mixin font-title($weight: normal) {
font-family: "Montserrat", sans-serif;
font-weight: $weight;
}
@mixin font-link($weight: normal) { @mixin font-link($weight: normal) {
font-family: "Montserrat", sans-serif; font-family: "Montserrat", sans-serif;
font-weight: $weight; font-weight: $weight;

132
src/css/main.css
View File

@ -11,8 +11,6 @@
@import "imports/utility.scss"; @import "imports/utility.scss";
@import "imports/blocks.scss"; @import "imports/blocks.scss";
@import "imports/components/base.scss";
@import "mapbox-gl/dist/mapbox-gl.css"; @import "mapbox-gl/dist/mapbox-gl.css";
// swup transition classes // swup transition classes
@ -160,7 +158,6 @@ html.is-animating .transition-fade {
} }
.footer__social-list { .footer__social-list {
font-size: 3em;
justify-content: center; justify-content: center;
} }
@ -175,119 +172,25 @@ html.is-animating .transition-fade {
} }
} }
.social-icon {
display: block;
width: 3em;
height: 3em;
background-color: red;
margin: 0 0.25em;
border-radius: 50%;
}
// hero // hero
.hero-bg { .hero-bg {
background-color: var(--primary-500); background-color: var(--primary-500);
} }
// about
.about-bg {
background-color: var(--page-bg);
&--secondary {
background-color: var(--neutral-200);
}
}
.about-section {
align-items: flex-end;
}
.about-info {
padding: 0;
@media (min-width: $bp-m) {
padding-right: 64px;
}
}
.about-card {
height: 30em;
width: 100%;
max-width: 30em;
margin-left: auto;
margin-right: auto;
font-size: 0.9em;
@media (min-width: $bp-m) {
width: 100%;
max-width: 26em;
height: 40em;
margin-left: auto;
}
}
.about-card-bg-img {
background-size: cover;
background-position: center center;
}
.about-card-bg-1 {
background-color: pink;
}
.about-card-bg-img-1 {
background-image: url(https://via.placeholder.com/300x400);
}
// services // services
.services-bg { .services-bg {
color: var(--neutral-300); background-color: var(--accent-primary-100);
background-color: var(--primary-700);
}
.service-list {
flex-wrap: wrap;
justify-content: space-between;
}
.service {
flex: 0 0 100%;
text-align: center;
margin-bottom: 2.5rem;
&:last-child {
margin-bottom: 0;
}
@media (min-width: $bp-m) {
flex: 0 0 calc(50% - 2.5rem);
}
@media (min-width: $bp-l) {
flex: 0 0 calc(25% - 2.5rem);
}
}
.service__header {
display: inline-block;
width: 7em;
height: 7em;
margin-bottom: 1.25rem;
}
.service__img {
width: 100%;
height: auto;
border-radius: 50%;
}
.service__heading {
margin-bottom: 0.125em;
}
.service__body {
@media (min-width: $bp-s) {
font-size: 0.9em;
}
}
.service__social-list {
font-size: 2em;
} }
// contact // contact
@ -296,11 +199,6 @@ html.is-animating .transition-fade {
background-color: var(--primary-100); background-color: var(--primary-100);
} }
.contact-heading {
text-align: left;
margin-bottom: 1.25rem;
}
// global // global
.site-title { .site-title {
@ -311,14 +209,4 @@ html.is-animating .transition-fade {
background-color: var(--color-bg); background-color: var(--color-bg);
} }
.social-icon {
display: block;
width: 1em;
height: 1em;
background-color: var(--accent-secondary-700);
opacity: 0.9;
margin: 0 0.25em;
border-radius: 50%;
}
// vim:set filetype=scss: // vim:set filetype=scss:

2
src/css/milligram

@ -1 +1 @@
Subproject commit c35a87ff9231f275cda52b2853b7ff98b0785b41 Subproject commit aa63878e1cd82f40ea590bc607313f5ec6a701ff

9
src/index.js
View File

@ -49,14 +49,6 @@ function initMapbox() {
.addTo(map); .addTo(map);
} }
function setCopyDate() {
const el = document.getElementById("js-copy-date");
if (el) {
const year = new Date().getFullYear();
el.innerHTML = year;
}
}
window.addEventListener("DOMContentLoaded", () => { window.addEventListener("DOMContentLoaded", () => {
const swup = new Swup({ const swup = new Swup({
plugins: [new SwupPreloadPlugin(), new SwupScrollPlugin()] plugins: [new SwupPreloadPlugin(), new SwupScrollPlugin()]
@ -68,7 +60,6 @@ window.addEventListener("DOMContentLoaded", () => {
initMapbox(); initMapbox();
}); });
setCopyDate();
initBlocks(); initBlocks();
initMapbox(); initMapbox();
}); });