Compare commits

..

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

11 changed files with 71 additions and 445 deletions

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"> <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>
<div class="about-info"> <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>
<h2>About Heading One</h2> <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 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 about-card">
<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>
<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> </div>
</section> <div>
<img src="https://via.placeholder.com/200" alt="CARD IMAGE">
<section class="l-relative l-screen-min-full"> <h3>Card Heading</h3>
<div class="l-underlay about-bg about-bg--secondary"></div> <p>
<div class="l-section-pad l-wrapper l-flex-2-col-m"> 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
<div> </p>
<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> </div>
</section> </div>
</article> </article>

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>

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>

View File

@ -1,112 +1,46 @@
<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"> <li>
<ul class="l-list-bare"> <img src="https://via.placeholder.com/200" alt="SERVICE IMAGE">
<li class="service__header"> <h3>Service Heading</h3>
<img class="service__img" src="https://via.placeholder.com/200" alt="SERVICE IMAGE"> <p>
</li> <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>
<li> </p>
<h3 class="service__heading h4">Service Heading One</h3> <p>
<p class="h5">Service Sub-Heading</p> <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>
</li> </p>
<li class="service__body">
<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.
</p>
<p>
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>
<li><span class="social-icon"></span></li>
</ul>
</li>
</ul>
</li> </li>
<li class="service"> <li>
<ul class="l-list-bare"> <img src="https://via.placeholder.com/200" alt="SERVICE IMAGE">
<li class="service__header"> <h3>Service Heading</h3>
<img class="service__img" src="https://via.placeholder.com/200" alt="SERVICE IMAGE"> <p>
</li> <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>
<li> </p>
<h3 class="service__heading h4">Service Heading Two</h3> <p>
<p class="h5">Service Sub-Heading</p> <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>
</li> </p>
<li class="service__body">
<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.
</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.
</p>
<p>
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>
<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> </li>
<li class="service"> <li>
<ul class="l-list-bare"> <img src="https://via.placeholder.com/200" alt="SERVICE IMAGE">
<li class="service__header"> <h3>Service Heading</h3>
<img class="service__img" src="https://via.placeholder.com/200" alt="SERVICE IMAGE"> <p>
</li> <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>
<li> </p>
<h3 class="service__heading h4">Service Heading Three</h3> <p>
<p class="h5">Service Sub-Heading</p> <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>
</li> </p>
<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>
<li class="service"> <li>
<ul class="l-list-bare"> <img src="https://via.placeholder.com/200" alt="SERVICE IMAGE">
<li class="service__header"> <h3>Service Heading</h3>
<img class="service__img" src="https://via.placeholder.com/200" alt="SERVICE IMAGE"> <p>
</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> </p>
<h3 class="service__heading h4">Service Heading Four</h3> <p>
<p class="h5">Service Sub-Heading</p> <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>
</li> </p>
<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>
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>
<li><span class="social-icon"></span></li>
<li><span class="social-icon"></span></li>
</ul>
</li>
</ul>
</li> </li>
</ul> </ul>
</div> </div>

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);
}

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;
}
}
}

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;

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;

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:

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

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();
}); });