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

Compare commits

base: rayelliott:dd60f943ddf48d0c8f2413a7895f00918b7c91cc
Branches Tags
rayelliott:master
..
compare: rayelliott:5a12828f176f77a0bef3132951ec4a16e65c4c07
Branches Tags
rayelliott:master

No commits in common. "dd60f943ddf48d0c8f2413a7895f00918b7c91cc" and "5a12828f176f77a0bef3132951ec4a16e65c4c07" have entirely different histories.
dd60f943dd ... 5a12828f17

10 changed files with 62 additions and 176 deletions
Show Stats Expand all files Collapse all files

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

@ -5,22 +5,12 @@
<h2 class="section-header">About</h2> <h2 class="section-header">About</h2>
<div class="l-section-block about-section"> <div class="l-section-pad l-wrapper about-section">
<div class="l-wrapper"> An about Section.
<p>An about Section.</p>
</div>
</div> </div>
<div class="l-section-block is-wide about-section"> <div class="l-section-pad l-wrapper about-section">
<div class="l-wrapper is-wide"> Another about Section.
<p>A wide about Section and a wide wrapper.</p>
</div>
</div>
<div class="l-section-block is-full-width about-section">
<div class="l-wrapper is-full-width">
<p>A full width about section and a full width wrapper.</p>
</div>
</div> </div>
</div> </div>

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

@ -4,36 +4,30 @@
<h2 class="section-header">Contact Us</h2> <h2 class="section-header">Contact Us</h2>
<div class="l-section-block no-margin"> <div class="l-section-pad l-wrapper contact-section">
<div class="l-wrapper contact-section"> <p class="h5">Complete this form and we will get back to you within one working day.</p>
<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> <label for="name">Name</label>
<label for="name">Name</label> <input id="name" type="text" name="name">
<input id="name" type="text" name="name"> </li>
</li> <li>
<li> <label for="email">E-mail:</label>
<label for="email">E-mail:</label> <input id="email" type="email" name="_replyto">
<input id="email" type="email" name="_replyto"> </li>
</li> <li>
<li> <label for="msg">Message:</label>
<label for="msg">Message:</label> <textarea id="msg" name="message"></textarea>
<textarea id="msg" name="message"></textarea> </li>
</li> <li><input type="hidden" name="_subject" value="Contact Form Submission"></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="_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><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>
</li> </ul>
</ul> </form>
</form>
</div>
</div>
<div class="l-section-block no-margin"> <h3 class="h4">Remember to Generate Access Token for URL</h3>
<div class="l-wrapper contact-section"> <div id="mapbox"></div>
<h3 class="h4">Remember to Generate Access Token for URL</h3>
<div id="mapbox"></div>
</div>
</div> </div>
</article> </article>

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

@ -1,6 +1,6 @@
<footer class="footer transition-fade"> <footer class="footer transition-fade">
<div class="l-underlay footer-bg"></div> <div class="l-underlay footer-bg"></div>
<div class="l-wrapper reduce-padding"> <div class="l-wrapper l-section-pad reduce-padding">
<ul class="l-flex-list-row footer__body"> <ul class="l-flex-list-row footer__body">
<li class="footer__body-section footer__body-section--m-left-align footer-section"> <li class="footer__body-section footer__body-section--m-left-align footer-section">
<h3 class="footer__heading">Let's keep in touch!</h3> <h3 class="footer__heading">Let's keep in touch!</h3>

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

@ -1,20 +1,15 @@
<article id="services" class="l-section l-relative"> <article id="services" class="l-section l-relative l-screen-min-full">
<div class="l-underlay services-bg"></div> <div class="l-underlay services-bg"></div>
<h2 class="section-header">Services</h2> <h2 class="section-header">Services</h2>
<div class="l-section-block is-wide services-section"> <div class="l-section-pad l-wrapper services-section">
<div class="l-wrapper"> A Services Section.
<p>A wide Services Section and a wide wrapper.</p>
</div>
</div> </div>
<div class="l-section-block is-full-width services-section"> <div class="l-section-pad l-wrapper services-section">
<div class="l-wrapper"> Another services Section.
<p>A full width Services section and a normal wrapper.</p>
</div>
</div> </div>
</article> </article>

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

@ -4,7 +4,6 @@ body {
background-color: var(--color-bg); background-color: var(--color-bg);
font-size: $font-size-body--xxs; font-size: $font-size-body--xxs;
line-height: $line-height-body;
@media (min-width: $bp-xs) { @media (min-width: $bp-xs) {
font-size: $font-size-body; font-size: $font-size-body;

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

@ -3,6 +3,6 @@
} }
.contact-section { .contact-section {
// background-color: rgba(aqua, 0.5); background-color: rgba(aqua, 0.5);
} }

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

@ -39,11 +39,7 @@
.nav-link { .nav-link {
display: block; display: block;
padding: 0.5 * $unit-size $unit-size; padding: 0.6em 1.5em;
@media (min-width: $bp-m) {
padding: 0.5 * $unit-size 2 * $unit-size;
}
&:last-child { &:last-child {
padding-right: 0; padding-right: 0;
@ -80,8 +76,8 @@
.menu-icon { .menu-icon {
display: block; display: block;
height: 1.6rem; height: 1.2em;
width: 1.6rem; width: 1.2em;
border-radius: 3px; border-radius: 3px;
background-color: currentColor; background-color: currentColor;

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

@ -1,5 +1,5 @@
.l-wrapper { .l-wrapper {
width: $wrapper-width; width: 100%;
max-width: $wrapper-max-width; max-width: $wrapper-max-width;
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
@ -13,7 +13,6 @@
} }
@media (min-width: $bp-m) { @media (min-width: $bp-m) {
width: $wrapper-width-m;
padding-left: $padding-horizontal-m; padding-left: $padding-horizontal-m;
padding-right: $padding-horizontal-m; padding-right: $padding-horizontal-m;
} }
@ -23,35 +22,27 @@
padding-right: $padding-horizontal-l; padding-right: $padding-horizontal-l;
} }
&.is-wide { &--wide {
max-width: $wrapper-max-width--wide; max-width: $wrapper-max-width--wide;
} }
&.is-full-width {
max-width: initial;
}
@media (min-width: $wrapper-max-width) and (max-width: $wrapper-max-width--wide) {
padding-left: $padding-horizontal-s;
padding-right: $padding-horizontal-s;
}
@media (min-width: $wrapper-max-width--wide) {
width: 100%;
padding-left: $padding-horizontal-s;
padding-right: $padding-horizontal-s;
}
} }
// TODO - need to move .l-section-pad rules into .l-section - so there is
// only the .l-section rules. Then that needs to be applied ONLY to the actual
// top level of a page section.
// then sub sections can have a margin-bottom on them to sort out the margins
// for them
// sub sections with individual backgrounds will have a padding applied to them
// that padding will be top, bottom and left, right
.l-section { .l-section {
padding-top: 3.75rem;
}
.l-section-pad {
padding-top: $padding-vertical-xs; padding-top: $padding-vertical-xs;
padding-bottom: $padding-vertical-xs; padding-bottom: $padding-vertical-xs;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
@media (min-width: $bp-s) { @media (min-width: $bp-s) {
padding-top: $padding-vertical-s; padding-top: $padding-vertical-s;
padding-bottom: $padding-vertical-s; padding-bottom: $padding-vertical-s;
@ -68,60 +59,6 @@
} }
} }
.l-section-inline {
margin-bottom: $unit-size;
@media (min-width: $bp-m) {
margin-bottom: 2 * $unit-size;
}
&:last-child {
margin-bottom: 0;
}
}
.l-section-block {
margin-bottom: $unit-size;
padding-top: 0.5 * $unit-size;
padding-bottom: 0.5 * $unit-size;
width: 100%;
max-width: $wrapper-width;
@media (min-width: $bp-s) {
padding-top: $unit-size;
padding-bottom: $unit-size;
}
@media (min-width: $bp-m) {
margin-bottom: 2 * $unit-size;
padding-top: 2 * $unit-size;
padding-bottom: 2 * $unit-size;
}
@media (min-width: $bp-l) {
width: $wrapper-max-width;
}
&:last-child {
margin-bottom: 0;
}
&.is-wide {
width: $wrapper-max-width--wide;
}
&.is-full-width {
width: 100%;
max-width: initial;
}
&.no-margin,
> p:last-child,
> .l-wrapper > p:last-child {
margin-bottom: 0;
}
}
// #position // #position
.l-absolute { .l-absolute {

24
src/css/imports/variables.scss
View File

@ -8,21 +8,11 @@ $bp-menu-collpase: $bp-s;
$z-index__header: 100; $z-index__header: 100;
$font-size-body: 1em; $wrapper-max-width: 80rem;
$font-size-body--xxs: 0.9em;
$line-height-body: 1.6;
$unit-size: 1.6rem;
$wrapper-width: calc(100vw - #{$unit-size / 2});
$wrapper-width-m: calc(100vw - #{$unit-size});
$wrapper-max-width: $bp-l;
$wrapper-max-width--wide: 110rem; $wrapper-max-width--wide: 110rem;
$font-size-h1--xs: 2.875rem; $font-size-body: 1em;
$font-size-h1--s: 2.875rem; $font-size-body--xxs: 0.9em;
$font-size-h1--m: 2.875rem;
$font-size-h1--l: 2.875rem;
// lerft, right padding of sections // lerft, right padding of sections
$padding-horizontal-xs: 8px; $padding-horizontal-xs: 8px;
@ -31,10 +21,10 @@ $padding-horizontal-m: 64px;
$padding-horizontal-l: 96px; $padding-horizontal-l: 96px;
// top, bottom padding of sections // top, bottom padding of sections
$padding-vertical-xs: 1 * $unit-size; $padding-vertical-xs: 24px;
$padding-vertical-s: 1 * $unit-size; $padding-vertical-s: 32px;
$padding-vertical-m: 2 * $unit-size; $padding-vertical-m: 64px;
$padding-vertical-l: 2 * $unit-size; $padding-vertical-l: 96px;
$color-primary-100: #eff8ff; $color-primary-100: #eff8ff;
$color-primary-200: #aad4f5; $color-primary-200: #aad4f5;

21
src/css/main.css
View File

@ -31,31 +31,16 @@ html.is-animating .transition-fade {
} }
.section-header { .section-header {
font-size: $font-size-h1--xs; font-size: 2.875rem;
line-height: 1.2; line-height: 1.2;
text-align: center; text-align: center;
margin-bottom: $padding-vertical-xs; margin-bottom: 3.75rem;
@media (min-width: $bp-s) {
font-size: $font-size-h1--s;
margin-bottom: $padding-vertical-s;
}
@media (min-width: $bp-m) {
font-size: $font-size-h1--m;
margin-bottom: $padding-vertical-m;
}
@media (min-width: $bp-l) {
font-size: $font-size-h1--l;
margin-bottom: $padding-vertical-l;
}
} }
// mapbox // mapbox
.mapboxgl-map { .mapboxgl-map {
height: 18 * $unit-size; height: 30em;
} }
.social-icon { .social-icon {