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>
<div class="l-section-block about-section">
<div class="l-wrapper">
<p>An about Section.</p>
</div>
<div class="l-section-pad l-wrapper about-section">
An about Section.
</div>
<div class="l-section-block is-wide about-section">
<div class="l-wrapper is-wide">
<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 class="l-section-pad l-wrapper about-section">
Another about Section.
</div>
</div>

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

@ -4,8 +4,7 @@
<h2 class="section-header">Contact Us</h2>
<div class="l-section-block no-margin">
<div class="l-wrapper contact-section">
<div class="l-section-pad 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">
@ -27,13 +26,8 @@
</li>
</ul>
</form>
</div>
</div>
<div class="l-section-block no-margin">
<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,6 +1,6 @@
<footer class="footer transition-fade">
<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">
<li class="footer__body-section footer__body-section--m-left-align footer-section">
<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>
<h2 class="section-header">Services</h2>
<div class="l-section-block is-wide services-section">
<div class="l-wrapper">
<p>A wide Services Section and a wide wrapper.</p>
</div>
<div class="l-section-pad l-wrapper services-section">
A Services Section.
</div>
<div class="l-section-block is-full-width services-section">
<div class="l-wrapper">
<p>A full width Services section and a normal wrapper.</p>
<div class="l-section-pad l-wrapper services-section">
Another services Section.
</div>
</div>
</article>

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

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

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

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

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

@ -1,5 +1,5 @@
.l-wrapper {
width: $wrapper-width;
width: 100%;
max-width: $wrapper-max-width;
margin-left: auto;
margin-right: auto;
@ -13,7 +13,6 @@
}
@media (min-width: $bp-m) {
width: $wrapper-width-m;
padding-left: $padding-horizontal-m;
padding-right: $padding-horizontal-m;
}
@ -23,35 +22,27 @@
padding-right: $padding-horizontal-l;
}
&.is-wide {
&--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 {
padding-top: 3.75rem;
}
.l-section-pad {
padding-top: $padding-vertical-xs;
padding-bottom: $padding-vertical-xs;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
@media (min-width: $bp-s) {
padding-top: $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
.l-absolute {

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

@ -8,21 +8,11 @@ $bp-menu-collpase: $bp-s;
$z-index__header: 100;
$font-size-body: 1em;
$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: 80rem;
$wrapper-max-width--wide: 110rem;
$font-size-h1--xs: 2.875rem;
$font-size-h1--s: 2.875rem;
$font-size-h1--m: 2.875rem;
$font-size-h1--l: 2.875rem;
$font-size-body: 1em;
$font-size-body--xxs: 0.9em;
// lerft, right padding of sections
$padding-horizontal-xs: 8px;
@ -31,10 +21,10 @@ $padding-horizontal-m: 64px;
$padding-horizontal-l: 96px;
// top, bottom padding of sections
$padding-vertical-xs: 1 * $unit-size;
$padding-vertical-s: 1 * $unit-size;
$padding-vertical-m: 2 * $unit-size;
$padding-vertical-l: 2 * $unit-size;
$padding-vertical-xs: 24px;
$padding-vertical-s: 32px;
$padding-vertical-m: 64px;
$padding-vertical-l: 96px;
$color-primary-100: #eff8ff;
$color-primary-200: #aad4f5;

21
src/css/main.css
View File

@ -31,31 +31,16 @@ html.is-animating .transition-fade {
}
.section-header {
font-size: $font-size-h1--xs;
font-size: 2.875rem;
line-height: 1.2;
text-align: center;
margin-bottom: $padding-vertical-xs;
@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;
}
margin-bottom: 3.75rem;
}
// mapbox
.mapboxgl-map {
height: 18 * $unit-size;
height: 30em;
}
.social-icon {