Compare commits
10 Commits
55c1f24ebd
...
d5b6788f30
| Author | SHA1 | Date |
|---|---|---|
 Ray Elliott
|
d5b6788f30 | |
|
Ray Elliott
|
86ceebe6a9 | |
|
Ray Elliott
|
b8cdc43891 | |
|
Ray Elliott
|
c55794e29f | |
|
Ray Elliott
|
965296bea6 | |
|
Ray Elliott
|
34316b980f | |
|
Ray Elliott
|
6bbfcfa558 | |
|
Ray Elliott
|
a88b39076d | |
|
Ray Elliott
|
d410e1141b | |
|
Ray Elliott
|
4684ccd512 |
|
|
@ -1,18 +1,51 @@
|
||||||
<article id="about" class="l-relative l-screen-min-full">
|
<article id="about">
|
||||||
<div class="l-section-pad l-wrapper">
|
|
||||||
<div>
|
<section class="l-relative l-screen-min-full">
|
||||||
<h2>About Heading</h2>
|
<div class="l-underlay about-bg"></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>
|
<div class="l-section-pad l-wrapper l-flex-2-col-m about-section">
|
||||||
<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>
|
<div class="about-info">
|
||||||
<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>
|
<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>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>
|
||||||
<div>
|
</section>
|
||||||
<img src="https://via.placeholder.com/200" alt="CARD IMAGE">
|
|
||||||
<h3>Card Heading</h3>
|
<section class="l-relative l-screen-min-full">
|
||||||
<p>
|
<div class="l-underlay about-bg about-bg--secondary"></div>
|
||||||
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 class="l-section-pad l-wrapper l-flex-2-col-m">
|
||||||
</p>
|
<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>
|
</div>
|
||||||
</div>
|
</section>
|
||||||
|
|
||||||
</article>
|
</article>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,7 @@
|
||||||
<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>Contact</h2>
|
<h2 class="l-section-header contact-heading">Contact Us</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>
|
||||||
|
|
@ -22,7 +23,7 @@
|
||||||
</ul>
|
</ul>
|
||||||
</form>
|
</form>
|
||||||
|
|
||||||
<h3>Remember to Generate Access Token for URL</h3>
|
<h3 class="h4">Remember to Generate Access Token for URL</h3>
|
||||||
<div id="mapbox"></div>
|
<div id="mapbox"></div>
|
||||||
</div>
|
</div>
|
||||||
</article>
|
</article>
|
||||||
|
|
|
||||||
|
|
@ -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 © <span id="js-copy-date">2020</span> ‐ <a class="footer__link" rel="nofollow" href="https://rayelliott.dev">rayelliott.dev</a></p>
|
<p class="footer__attr">Copyright © <span id="js-copy-date">2019</span> ‐ <a class="footer__link" rel="nofollow" href="https://rayelliott.dev">rayelliott.dev</a></p>
|
||||||
</div>
|
</div>
|
||||||
</footer>
|
</footer>
|
||||||
|
|
|
||||||
|
|
@ -1,46 +1,112 @@
|
||||||
<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">
|
<div class="l-section-pad l-wrapper l-wrapper--wide">
|
||||||
<h2>Services</h2>
|
<h2 class="l-section-header">Services</h2>
|
||||||
<ul>
|
<ul class="l-flex-list-row service-list">
|
||||||
<li>
|
<li class="service">
|
||||||
<img src="https://via.placeholder.com/200" alt="SERVICE IMAGE">
|
<ul class="l-list-bare">
|
||||||
<h3>Service Heading</h3>
|
<li class="service__header">
|
||||||
<p>
|
<img class="service__img" src="https://via.placeholder.com/200" alt="SERVICE IMAGE">
|
||||||
<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>
|
<li>
|
||||||
<p>
|
<h3 class="service__heading h4">Service Heading One</h3>
|
||||||
<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 class="h5">Service Sub-Heading</p>
|
||||||
</p>
|
</li>
|
||||||
|
<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>
|
<li class="service">
|
||||||
<img src="https://via.placeholder.com/200" alt="SERVICE IMAGE">
|
<ul class="l-list-bare">
|
||||||
<h3>Service Heading</h3>
|
<li class="service__header">
|
||||||
<p>
|
<img class="service__img" src="https://via.placeholder.com/200" alt="SERVICE IMAGE">
|
||||||
<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>
|
<li>
|
||||||
<p>
|
<h3 class="service__heading h4">Service Heading Two</h3>
|
||||||
<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 class="h5">Service Sub-Heading</p>
|
||||||
</p>
|
</li>
|
||||||
|
<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>
|
<li class="service">
|
||||||
<img src="https://via.placeholder.com/200" alt="SERVICE IMAGE">
|
<ul class="l-list-bare">
|
||||||
<h3>Service Heading</h3>
|
<li class="service__header">
|
||||||
<p>
|
<img class="service__img" src="https://via.placeholder.com/200" alt="SERVICE IMAGE">
|
||||||
<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>
|
<li>
|
||||||
<p>
|
<h3 class="service__heading h4">Service Heading Three</h3>
|
||||||
<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 class="h5">Service Sub-Heading</p>
|
||||||
</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>
|
||||||
<li>
|
<li class="service">
|
||||||
<img src="https://via.placeholder.com/200" alt="SERVICE IMAGE">
|
<ul class="l-list-bare">
|
||||||
<h3>Service Heading</h3>
|
<li class="service__header">
|
||||||
<p>
|
<img class="service__img" src="https://via.placeholder.com/200" alt="SERVICE IMAGE">
|
||||||
<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>
|
<li>
|
||||||
<p>
|
<h3 class="service__heading h4">Service Heading Four</h3>
|
||||||
<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 class="h5">Service Sub-Heading</p>
|
||||||
</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>
|
||||||
|
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>
|
||||||
|
|
|
||||||
|
|
@ -10,3 +10,14 @@ body {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// NOTE these correspond to base styles in milligram/src/_Base.css
|
||||||
|
|
||||||
|
h1,
|
||||||
|
h2,
|
||||||
|
h3,
|
||||||
|
h4,
|
||||||
|
h5,
|
||||||
|
h6 {
|
||||||
|
@include font-title($weight: 300);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,75 @@
|
||||||
|
// 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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -1,19 +1,49 @@
|
||||||
.l-wrapper {
|
.l-wrapper {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
max-width: 70rem;
|
max-width: 90rem;
|
||||||
margin-left: auto;
|
margin-left: auto;
|
||||||
margin-right: auto;
|
margin-right: auto;
|
||||||
}
|
|
||||||
|
|
||||||
.l-section-pad {
|
padding-left: 8px;
|
||||||
padding: 24px 8px;
|
padding-right: 8px;
|
||||||
|
|
||||||
|
@media (min-width: $bp-s) {
|
||||||
|
padding-left: 32px;
|
||||||
|
padding-right: 32px;
|
||||||
|
}
|
||||||
|
|
||||||
@media (min-width: $bp-m) {
|
@media (min-width: $bp-m) {
|
||||||
padding: 32px 32px;
|
padding-left: 64px;
|
||||||
|
padding-right: 64px;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width: $bp-l) {
|
@media (min-width: $bp-l) {
|
||||||
padding: 48px 32px;
|
padding-left: 96px;
|
||||||
|
padding-right: 96px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&--wide {
|
||||||
|
max-width: 110rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.l-section-pad {
|
||||||
|
padding-top: 24px;
|
||||||
|
padding-bottom: 24px;
|
||||||
|
|
||||||
|
@media (min-width: $bp-s) {
|
||||||
|
padding-top: 32px;
|
||||||
|
padding-bottom: 32px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: $bp-m) {
|
||||||
|
padding-top: 64px;
|
||||||
|
padding-bottom: 64px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: $bp-l) {
|
||||||
|
padding-top: 96px;
|
||||||
|
padding-bottom: 96px;
|
||||||
}
|
}
|
||||||
|
|
||||||
// reduce padding bottom
|
// reduce padding bottom
|
||||||
|
|
@ -26,6 +56,13 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.l-section-header {
|
||||||
|
font-size: 2.875rem;
|
||||||
|
line-height: 1.2;
|
||||||
|
text-align: center;
|
||||||
|
margin-bottom: 3.75rem;
|
||||||
|
}
|
||||||
|
|
||||||
// #position
|
// #position
|
||||||
|
|
||||||
.l-absolute {
|
.l-absolute {
|
||||||
|
|
@ -84,6 +121,31 @@
|
||||||
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;
|
||||||
|
|
|
||||||
|
|
@ -3,6 +3,11 @@
|
||||||
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
132
src/css/main.css
|
|
@ -11,6 +11,8 @@
|
||||||
@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
|
||||||
|
|
@ -158,6 +160,7 @@ html.is-animating .transition-fade {
|
||||||
}
|
}
|
||||||
|
|
||||||
.footer__social-list {
|
.footer__social-list {
|
||||||
|
font-size: 3em;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -172,25 +175,119 @@ 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 {
|
||||||
background-color: var(--accent-primary-100);
|
color: var(--neutral-300);
|
||||||
|
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
|
||||||
|
|
@ -199,6 +296,11 @@ 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 {
|
||||||
|
|
@ -209,4 +311,14 @@ 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 aa63878e1cd82f40ea590bc607313f5ec6a701ff
|
Subproject commit c35a87ff9231f275cda52b2853b7ff98b0785b41
|
||||||
|
|
@ -49,6 +49,14 @@ 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()]
|
||||||
|
|
@ -60,6 +68,7 @@ window.addEventListener("DOMContentLoaded", () => {
|
||||||
initMapbox();
|
initMapbox();
|
||||||
});
|
});
|
||||||
|
|
||||||
|
setCopyDate();
|
||||||
initBlocks();
|
initBlocks();
|
||||||
initMapbox();
|
initMapbox();
|
||||||
});
|
});
|
||||||
|
|
|
||||||
Reference in New Issue