David Miller
6 years ago
28 changed files with 1002 additions and 972 deletions
@ -0,0 +1,13 @@ |
|||||||
|
# Editor configuration, see https://editorconfig.org |
||||||
|
root = true |
||||||
|
|
||||||
|
[*] |
||||||
|
charset = utf-8 |
||||||
|
indent_style = space |
||||||
|
indent_size = 4 |
||||||
|
insert_final_newline = true |
||||||
|
trim_trailing_whitespace = true |
||||||
|
|
||||||
|
[*.md] |
||||||
|
max_line_length = off |
||||||
|
trim_trailing_whitespace = false |
||||||
|
After Width: | Height: | Size: 14 KiB |
|
After Width: | Height: | Size: 14 KiB |
|
After Width: | Height: | Size: 14 KiB |
@ -1,42 +1,51 @@ |
|||||||
(function($) { |
(function ($) { |
||||||
"use strict"; // Start of use strict
|
"use strict"; // Start of use strict
|
||||||
|
|
||||||
// Smooth scrolling using jQuery easing
|
// Smooth scrolling using jQuery easing
|
||||||
$('a.js-scroll-trigger[href*="#"]:not([href="#"])').click(function() { |
$('a.js-scroll-trigger[href*="#"]:not([href="#"])').click(function () { |
||||||
if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) { |
if ( |
||||||
var target = $(this.hash); |
location.pathname.replace(/^\//, "") == |
||||||
target = target.length ? target : $('[name=' + this.hash.slice(1) + ']'); |
this.pathname.replace(/^\//, "") && |
||||||
if (target.length) { |
location.hostname == this.hostname |
||||||
$('html, body').animate({ |
) { |
||||||
scrollTop: (target.offset().top - 54) |
var target = $(this.hash); |
||||||
}, 1000, "easeInOutExpo"); |
target = target.length |
||||||
return false; |
? target |
||||||
} |
: $("[name=" + this.hash.slice(1) + "]"); |
||||||
} |
if (target.length) { |
||||||
}); |
$("html, body").animate( |
||||||
|
{ |
||||||
|
scrollTop: target.offset().top - 72, |
||||||
|
}, |
||||||
|
1000, |
||||||
|
"easeInOutExpo" |
||||||
|
); |
||||||
|
return false; |
||||||
|
} |
||||||
|
} |
||||||
|
}); |
||||||
|
|
||||||
// Closes responsive menu when a scroll trigger link is clicked
|
// Closes responsive menu when a scroll trigger link is clicked
|
||||||
$('.js-scroll-trigger').click(function() { |
$(".js-scroll-trigger").click(function () { |
||||||
$('.navbar-collapse').collapse('hide'); |
$(".navbar-collapse").collapse("hide"); |
||||||
}); |
}); |
||||||
|
|
||||||
// Activate scrollspy to add active class to navbar items on scroll
|
// Activate scrollspy to add active class to navbar items on scroll
|
||||||
$('body').scrollspy({ |
$("body").scrollspy({ |
||||||
target: '#mainNav', |
target: "#mainNav", |
||||||
offset: 56 |
offset: 74, |
||||||
}); |
}); |
||||||
|
|
||||||
// Collapse Navbar
|
|
||||||
var navbarCollapse = function() { |
|
||||||
if ($("#mainNav").offset().top > 100) { |
|
||||||
$("#mainNav").addClass("navbar-shrink"); |
|
||||||
} else { |
|
||||||
$("#mainNav").removeClass("navbar-shrink"); |
|
||||||
} |
|
||||||
}; |
|
||||||
// Collapse now if page is not at top
|
|
||||||
navbarCollapse(); |
|
||||||
// Collapse the navbar when page is scrolled
|
|
||||||
$(window).scroll(navbarCollapse); |
|
||||||
|
|
||||||
|
// Collapse Navbar
|
||||||
|
var navbarCollapse = function () { |
||||||
|
if ($("#mainNav").offset().top > 100) { |
||||||
|
$("#mainNav").addClass("navbar-shrink"); |
||||||
|
} else { |
||||||
|
$("#mainNav").removeClass("navbar-shrink"); |
||||||
|
} |
||||||
|
}; |
||||||
|
// Collapse now if page is not at top
|
||||||
|
navbarCollapse(); |
||||||
|
// Collapse the navbar when page is scrolled
|
||||||
|
$(window).scroll(navbarCollapse); |
||||||
})(jQuery); // End of use strict
|
})(jQuery); // End of use strict
|
||||||
|
|||||||
@ -0,0 +1,49 @@ |
|||||||
|
// Global styling for this template |
||||||
|
body { |
||||||
|
overflow-x: hidden; |
||||||
|
} |
||||||
|
|
||||||
|
p { |
||||||
|
line-height: 1.75; |
||||||
|
} |
||||||
|
|
||||||
|
.page-section { |
||||||
|
padding: 100px 0; |
||||||
|
h2.section-heading { |
||||||
|
font-size: 40px; |
||||||
|
margin-top: 0; |
||||||
|
margin-bottom: 15px; |
||||||
|
} |
||||||
|
h3.section-subheading { |
||||||
|
font-size: 16px; |
||||||
|
font-weight: 400; |
||||||
|
font-style: italic; |
||||||
|
margin-bottom: 75px; |
||||||
|
text-transform: none; |
||||||
|
font-family: $subheadings-font-family; |
||||||
|
} |
||||||
|
} |
||||||
|
@media (min-width: 768px) { |
||||||
|
section { |
||||||
|
padding: 150px 0; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
// Highlight color customization |
||||||
|
::-moz-selection { |
||||||
|
background: $primary; |
||||||
|
text-shadow: none; |
||||||
|
} |
||||||
|
|
||||||
|
::selection { |
||||||
|
background: $primary; |
||||||
|
text-shadow: none; |
||||||
|
} |
||||||
|
|
||||||
|
img::selection { |
||||||
|
background: transparent; |
||||||
|
} |
||||||
|
|
||||||
|
img::-moz-selection { |
||||||
|
background: transparent; |
||||||
|
} |
||||||
@ -0,0 +1,4 @@ |
|||||||
|
@import "./variables/colors.scss"; |
||||||
|
@import "./variables/typography.scss"; |
||||||
|
@import "./variables/spacing.scss"; |
||||||
|
@import "./variables/grid.scss"; |
||||||
@ -1,13 +0,0 @@ |
|||||||
// Font Mixins |
|
||||||
@mixin serif-font { |
|
||||||
font-family: 'Droid Serif', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; |
|
||||||
} |
|
||||||
@mixin script-font { |
|
||||||
font-family: 'Kaushan Script', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; |
|
||||||
} |
|
||||||
@mixin body-font { |
|
||||||
font-family: 'Roboto Slab', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; |
|
||||||
} |
|
||||||
@mixin heading-font { |
|
||||||
font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; |
|
||||||
} |
|
||||||
@ -1,71 +0,0 @@ |
|||||||
// Global styling for this template |
|
||||||
body { |
|
||||||
overflow-x: hidden; |
|
||||||
@include body-font; |
|
||||||
} |
|
||||||
|
|
||||||
p { |
|
||||||
line-height: 1.75; |
|
||||||
} |
|
||||||
|
|
||||||
a { |
|
||||||
color: $primary; |
|
||||||
&:hover { |
|
||||||
color: darken($primary, 10%); |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
.text-primary { |
|
||||||
color: $primary !important; |
|
||||||
} |
|
||||||
|
|
||||||
h1, |
|
||||||
h2, |
|
||||||
h3, |
|
||||||
h4, |
|
||||||
h5, |
|
||||||
h6 { |
|
||||||
font-weight: 700; |
|
||||||
@include heading-font; |
|
||||||
} |
|
||||||
|
|
||||||
.page-section { |
|
||||||
padding: 100px 0; |
|
||||||
h2.section-heading { |
|
||||||
font-size: 40px; |
|
||||||
margin-top: 0; |
|
||||||
margin-bottom: 15px; |
|
||||||
} |
|
||||||
h3.section-subheading { |
|
||||||
font-size: 16px; |
|
||||||
font-weight: 400; |
|
||||||
font-style: italic; |
|
||||||
margin-bottom: 75px; |
|
||||||
text-transform: none; |
|
||||||
@include serif-font; |
|
||||||
} |
|
||||||
} |
|
||||||
@media(min-width:768px) { |
|
||||||
section { |
|
||||||
padding: 150px 0; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
// Highlight color customization |
|
||||||
::-moz-selection { |
|
||||||
background: $primary; |
|
||||||
text-shadow: none; |
|
||||||
} |
|
||||||
|
|
||||||
::selection { |
|
||||||
background: $primary; |
|
||||||
text-shadow: none; |
|
||||||
} |
|
||||||
|
|
||||||
img::selection { |
|
||||||
background: transparent; |
|
||||||
} |
|
||||||
|
|
||||||
img::-moz-selection { |
|
||||||
background: transparent; |
|
||||||
} |
|
||||||
@ -1,17 +0,0 @@ |
|||||||
// Variables |
|
||||||
|
|
||||||
// Restated Bootstrap Variables |
|
||||||
|
|
||||||
$white: #fff !default; |
|
||||||
$gray-100: #f8f9fa !default; |
|
||||||
$gray-200: #e9ecef !default; |
|
||||||
$gray-300: #dee2e6 !default; |
|
||||||
$gray-400: #ced4da !default; |
|
||||||
$gray-500: #adb5bd !default; |
|
||||||
$gray-600: #868e96 !default; |
|
||||||
$gray-700: #495057 !default; |
|
||||||
$gray-800: #343a40 !default; |
|
||||||
$gray-900: #212529 !default; |
|
||||||
$black: #000 !default; |
|
||||||
|
|
||||||
$primary: #fed136 !default; |
|
||||||
@ -1,8 +1,8 @@ |
|||||||
// Button Styles |
// Button Styles |
||||||
|
|
||||||
.btn-xl { |
.btn-xl { |
||||||
@include heading-font; |
padding: 1.25rem 2.5rem; |
||||||
font-weight: 700; |
font-family: $headings-font-family; |
||||||
font-size: 1.125rem; |
font-size: 1.125rem; |
||||||
padding: 1.25rem 2.5rem; |
font-weight: $headings-font-weight; |
||||||
} |
} |
||||||
|
|||||||
@ -1,73 +1,78 @@ |
|||||||
// Styling for the navbar |
// Styling for the navbar |
||||||
#mainNav { |
#mainNav { |
||||||
background-color: $gray-900; |
padding-top: 1rem; |
||||||
.navbar-toggler { |
padding-bottom: 1rem; |
||||||
font-size: 12px; |
background-color: $gray-900; |
||||||
right: 0; |
.navbar-toggler { |
||||||
padding: 13px; |
padding: 0.75rem; |
||||||
text-transform: uppercase; |
font-family: $headings-font-family; |
||||||
color: white; |
font-size: 0.75rem; |
||||||
border: 0; |
color: $white; |
||||||
background-color: $primary; |
text-transform: uppercase; |
||||||
@include heading-font; |
background-color: $primary; |
||||||
} |
border: 0; |
||||||
.navbar-brand { |
|
||||||
color: $primary; |
|
||||||
@include script-font; |
|
||||||
&.active, |
|
||||||
&:active, |
|
||||||
&:focus, |
|
||||||
&:hover { |
|
||||||
color: darken($primary, 10%); |
|
||||||
} |
} |
||||||
} |
|
||||||
.navbar-nav { |
|
||||||
.nav-item { |
|
||||||
.nav-link { |
|
||||||
font-size: 90%; |
|
||||||
font-weight: 400; |
|
||||||
padding: 0.75em 0; |
|
||||||
letter-spacing: 1px; |
|
||||||
color: white; |
|
||||||
@include heading-font; |
|
||||||
&.active, |
|
||||||
&:hover { |
|
||||||
color: $primary; |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
@media(min-width:992px) { |
|
||||||
#mainNav { |
|
||||||
padding-top: 25px; |
|
||||||
padding-bottom: 25px; |
|
||||||
-webkit-transition: padding-top 0.3s, padding-bottom 0.3s; |
|
||||||
-moz-transition: padding-top 0.3s, padding-bottom 0.3s; |
|
||||||
transition: padding-top 0.3s, padding-bottom 0.3s; |
|
||||||
border: none; |
|
||||||
background-color: transparent; |
|
||||||
.navbar-brand { |
.navbar-brand { |
||||||
font-size: 1.75em; |
color: $primary; |
||||||
-webkit-transition: all 0.3s; |
font-family: $headings-font-family; |
||||||
-moz-transition: all 0.3s; |
font-weight: $headings-font-weight; |
||||||
transition: all 0.3s; |
letter-spacing: $headings-letter-spacing; |
||||||
|
text-transform: uppercase; |
||||||
|
img { |
||||||
|
height: 1.5rem; |
||||||
|
} |
||||||
} |
} |
||||||
.navbar-nav { |
.navbar-nav { |
||||||
.nav-item { |
.nav-item { |
||||||
.nav-link { |
.nav-link { |
||||||
padding: 1.1em 1em !important; |
font-family: $headings-font-family; |
||||||
|
font-size: 0.95rem; |
||||||
|
color: $white; |
||||||
|
letter-spacing: $headings-letter-spacing; |
||||||
|
&.active, |
||||||
|
&:hover { |
||||||
|
color: $primary; |
||||||
|
} |
||||||
|
} |
||||||
} |
} |
||||||
} |
|
||||||
} |
} |
||||||
&.navbar-shrink { |
} |
||||||
padding-top: 0; |
|
||||||
padding-bottom: 0; |
// Responsive styling for screen width equal to or greater than the large breakpoint |
||||||
background-color: $gray-900; |
@include media-breakpoint-up(lg) { |
||||||
.navbar-brand { |
#mainNav { |
||||||
font-size: 1.25em; |
padding-top: 1.5rem; |
||||||
padding: 12px 0; |
padding-bottom: 1.5rem; |
||||||
} |
border: none; |
||||||
|
background-color: transparent; |
||||||
|
transition: padding-top 0.3s ease-in-out, |
||||||
|
padding-bottom 0.3s ease-in-out; |
||||||
|
.navbar-brand { |
||||||
|
font-size: 1.5em; |
||||||
|
transition: font-size 0.3s ease-in-out; |
||||||
|
img { |
||||||
|
height: 2rem; |
||||||
|
transition: height 0.3s ease-in-out; |
||||||
|
} |
||||||
|
} |
||||||
|
// Styling for when the navbar shrinks on larger screens |
||||||
|
&.navbar-shrink { |
||||||
|
padding-top: 1rem; |
||||||
|
padding-bottom: 1rem; |
||||||
|
background-color: $gray-900; |
||||||
|
.navbar-brand { |
||||||
|
font-size: 1.25em; |
||||||
|
svg, |
||||||
|
img { |
||||||
|
height: 1.5rem; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
.navbar-nav .nav-item { |
||||||
|
margin-right: 1rem; |
||||||
|
&:last-child { |
||||||
|
margin-right: 0; |
||||||
|
} |
||||||
|
} |
||||||
} |
} |
||||||
} |
|
||||||
} |
} |
||||||
|
|||||||
@ -1,47 +1,56 @@ |
|||||||
// Styling for the contact section |
// Styling for the contact section |
||||||
section#contact { |
section#contact { |
||||||
background-color: $gray-900; |
background-color: $gray-900; |
||||||
background-image: url('../assets/img/map-image.png'); |
background-image: url("../assets/img/map-image.png"); |
||||||
background-repeat: no-repeat; |
background-repeat: no-repeat; |
||||||
background-position: center; |
background-position: center; |
||||||
.section-heading { |
.section-heading { |
||||||
color: $white; |
color: $white; |
||||||
} |
|
||||||
.form-group { |
|
||||||
margin-bottom: 25px; |
|
||||||
input, |
|
||||||
textarea { |
|
||||||
padding: 20px; |
|
||||||
} |
} |
||||||
input.form-control { |
form#contactForm { |
||||||
height: auto; |
.form-group { |
||||||
|
margin-bottom: $grid-gutter-width; |
||||||
|
input, |
||||||
|
textarea { |
||||||
|
padding: 1.25rem; |
||||||
|
} |
||||||
|
input.form-control { |
||||||
|
height: auto; |
||||||
|
} |
||||||
|
} |
||||||
|
.form-group-textarea { |
||||||
|
height: 100%; |
||||||
|
textarea { |
||||||
|
height: 100%; |
||||||
|
min-height: 10rem; |
||||||
|
} |
||||||
|
} |
||||||
|
p.help-block { |
||||||
|
margin: 0; |
||||||
|
} |
||||||
|
.form-control:focus { |
||||||
|
border-color: $primary; |
||||||
|
box-shadow: none; |
||||||
|
} |
||||||
|
::-webkit-input-placeholder { |
||||||
|
font-family: $headings-font-family; |
||||||
|
font-weight: $headings-font-weight; |
||||||
|
color: $gray-400; |
||||||
|
} |
||||||
|
:-moz-placeholder { |
||||||
|
font-family: $headings-font-family; |
||||||
|
font-weight: $headings-font-weight; |
||||||
|
color: $gray-400; |
||||||
|
} |
||||||
|
::-moz-placeholder { |
||||||
|
font-family: $headings-font-family; |
||||||
|
font-weight: $headings-font-weight; |
||||||
|
color: $gray-400; |
||||||
|
} |
||||||
|
:-ms-input-placeholder { |
||||||
|
font-family: $headings-font-family; |
||||||
|
font-weight: $headings-font-weight; |
||||||
|
color: $gray-400; |
||||||
|
} |
||||||
} |
} |
||||||
textarea.form-control { |
|
||||||
height: 248px; |
|
||||||
} |
|
||||||
} |
|
||||||
.form-control:focus { |
|
||||||
border-color: $primary; |
|
||||||
box-shadow: none; |
|
||||||
} |
|
||||||
::-webkit-input-placeholder { |
|
||||||
font-weight: 700; |
|
||||||
color: $gray-400; |
|
||||||
@include heading-font; |
|
||||||
} |
|
||||||
:-moz-placeholder { |
|
||||||
font-weight: 700; |
|
||||||
color: $gray-400; |
|
||||||
@include heading-font; |
|
||||||
} |
|
||||||
::-moz-placeholder { |
|
||||||
font-weight: 700; |
|
||||||
color: $gray-400; |
|
||||||
@include heading-font; |
|
||||||
} |
|
||||||
:-ms-input-placeholder { |
|
||||||
font-weight: 700; |
|
||||||
color: $gray-400; |
|
||||||
@include heading-font; |
|
||||||
} |
|
||||||
} |
} |
||||||
|
|||||||
@ -1,43 +1,43 @@ |
|||||||
// Styling for the footer |
// Styling for the footer |
||||||
.footer { |
.footer { |
||||||
padding: 25px 0; |
padding: 25px 0; |
||||||
text-align: center; |
text-align: center; |
||||||
span.copyright { |
span.copyright { |
||||||
font-size: 90%; |
font-size: 90%; |
||||||
line-height: 40px; |
line-height: 40px; |
||||||
text-transform: none; |
text-transform: none; |
||||||
@include heading-font; |
font-family: $headings-font-family; |
||||||
} |
} |
||||||
ul.quicklinks { |
ul.quicklinks { |
||||||
font-size: 90%; |
font-size: 90%; |
||||||
line-height: 40px; |
line-height: 40px; |
||||||
margin-bottom: 0; |
margin-bottom: 0; |
||||||
text-transform: none; |
text-transform: none; |
||||||
@include heading-font; |
font-family: $headings-font-family; |
||||||
} |
} |
||||||
} |
} |
||||||
|
|
||||||
ul.social-buttons { |
ul.social-buttons { |
||||||
margin-bottom: 0; |
margin-bottom: 0; |
||||||
li { |
li { |
||||||
a { |
a { |
||||||
font-size: 20px; |
font-size: 20px; |
||||||
line-height: 50px; |
line-height: 50px; |
||||||
display: block; |
display: block; |
||||||
width: 50px; |
width: 50px; |
||||||
height: 50px; |
height: 50px; |
||||||
-webkit-transition: all 0.3s; |
-webkit-transition: all 0.3s; |
||||||
-moz-transition: all 0.3s; |
-moz-transition: all 0.3s; |
||||||
transition: all 0.3s; |
transition: all 0.3s; |
||||||
color: white; |
color: $white; |
||||||
border-radius: 100%; |
border-radius: 100%; |
||||||
outline: none; |
outline: none; |
||||||
background-color: $gray-900; |
background-color: $gray-900; |
||||||
&:active, |
&:active, |
||||||
&:focus, |
&:focus, |
||||||
&:hover { |
&:hover { |
||||||
background-color: $primary; |
background-color: $primary; |
||||||
} |
} |
||||||
|
} |
||||||
} |
} |
||||||
} |
|
||||||
} |
} |
||||||
|
|||||||
@ -1,50 +1,48 @@ |
|||||||
// Styling for the masthead |
// Styling for the masthead |
||||||
header.masthead { |
header.masthead { |
||||||
text-align: center; |
text-align: center; |
||||||
color: white; |
color: $white; |
||||||
background-image: url('../assets/img/header-bg.jpg'); |
background-image: url("../assets/img/header-bg.jpg"); |
||||||
background-repeat: no-repeat; |
background-repeat: no-repeat; |
||||||
background-attachment: scroll; |
background-attachment: scroll; |
||||||
background-position: center center; |
background-position: center center; |
||||||
background-size: cover; |
background-size: cover; |
||||||
.intro-text { |
.intro-text { |
||||||
padding-top: 150px; |
padding-top: 150px; |
||||||
padding-bottom: 100px; |
padding-bottom: 100px; |
||||||
.intro-lead-in { |
.intro-lead-in { |
||||||
font-size: 22px; |
font-size: 22px; |
||||||
font-style: italic; |
font-style: italic; |
||||||
line-height: 22px; |
line-height: 22px; |
||||||
margin-bottom: 25px; |
margin-bottom: 25px; |
||||||
@include serif-font; |
font-family: $subheadings-font-family; |
||||||
} |
} |
||||||
.intro-heading { |
.intro-heading { |
||||||
font-size: 50px; |
font-size: 50px; |
||||||
font-weight: 700; |
font-weight: 700; |
||||||
line-height: 50px; |
line-height: 50px; |
||||||
margin-bottom: 25px; |
margin-bottom: 25px; |
||||||
@include heading-font; |
font-family: $headings-font-family; |
||||||
|
} |
||||||
} |
} |
||||||
} |
|
||||||
} |
} |
||||||
@media(min-width:768px) { |
@media (min-width: 768px) { |
||||||
header.masthead { |
header.masthead { |
||||||
.intro-text { |
.intro-text { |
||||||
padding-top: 300px; |
padding-top: 300px; |
||||||
padding-bottom: 200px; |
padding-bottom: 200px; |
||||||
.intro-lead-in { |
.intro-lead-in { |
||||||
font-size: 40px; |
font-size: 40px; |
||||||
font-style: italic; |
font-style: italic; |
||||||
line-height: 40px; |
line-height: 40px; |
||||||
margin-bottom: 25px; |
margin-bottom: 25px; |
||||||
@include serif-font; |
} |
||||||
} |
.intro-heading { |
||||||
.intro-heading { |
font-size: 75px; |
||||||
font-size: 75px; |
font-weight: 700; |
||||||
font-weight: 700; |
line-height: 75px; |
||||||
line-height: 75px; |
margin-bottom: 50px; |
||||||
margin-bottom: 50px; |
} |
||||||
@include heading-font; |
} |
||||||
} |
|
||||||
} |
} |
||||||
} |
|
||||||
} |
} |
||||||
|
|||||||
@ -1,140 +1,140 @@ |
|||||||
// Styling for the portfolio section |
// Styling for the portfolio section |
||||||
#portfolio { |
#portfolio { |
||||||
.portfolio-item { |
.portfolio-item { |
||||||
right: 0; |
right: 0; |
||||||
margin: 0 0 15px; |
margin: 0 0 15px; |
||||||
.portfolio-link { |
.portfolio-link { |
||||||
position: relative; |
position: relative; |
||||||
display: block; |
display: block; |
||||||
max-width: 400px; |
max-width: 400px; |
||||||
margin: 0 auto; |
margin: 0 auto; |
||||||
cursor: pointer; |
cursor: pointer; |
||||||
.portfolio-hover { |
.portfolio-hover { |
||||||
position: absolute; |
position: absolute; |
||||||
width: 100%; |
width: 100%; |
||||||
height: 100%; |
height: 100%; |
||||||
-webkit-transition: all ease 0.5s; |
-webkit-transition: all ease 0.5s; |
||||||
-moz-transition: all ease 0.5s; |
-moz-transition: all ease 0.5s; |
||||||
transition: all ease 0.5s; |
transition: all ease 0.5s; |
||||||
opacity: 0; |
opacity: 0; |
||||||
background: fade-out($primary, .1); |
background: fade-out($primary, 0.1); |
||||||
&:hover { |
&:hover { |
||||||
opacity: 1; |
opacity: 1; |
||||||
|
} |
||||||
|
.portfolio-hover-content { |
||||||
|
font-size: 20px; |
||||||
|
position: absolute; |
||||||
|
top: 50%; |
||||||
|
width: 100%; |
||||||
|
height: 20px; |
||||||
|
margin-top: -12px; |
||||||
|
text-align: center; |
||||||
|
color: white; |
||||||
|
i { |
||||||
|
margin-top: -12px; |
||||||
|
} |
||||||
|
h3, |
||||||
|
h4 { |
||||||
|
margin: 0; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
} |
} |
||||||
.portfolio-hover-content { |
.portfolio-caption { |
||||||
font-size: 20px; |
max-width: 400px; |
||||||
position: absolute; |
margin: 0 auto; |
||||||
top: 50%; |
padding: 25px; |
||||||
width: 100%; |
text-align: center; |
||||||
height: 20px; |
background-color: $white; |
||||||
margin-top: -12px; |
h4 { |
||||||
text-align: center; |
margin: 0; |
||||||
color: white; |
text-transform: none; |
||||||
i { |
} |
||||||
margin-top: -12px; |
p { |
||||||
} |
font-size: 16px; |
||||||
h3, |
font-style: italic; |
||||||
h4 { |
margin: 0; |
||||||
margin: 0; |
font-family: $subheadings-font-family; |
||||||
} |
} |
||||||
} |
} |
||||||
} |
|
||||||
} |
} |
||||||
.portfolio-caption { |
* { |
||||||
max-width: 400px; |
z-index: 2; |
||||||
margin: 0 auto; |
|
||||||
padding: 25px; |
|
||||||
text-align: center; |
|
||||||
background-color: $white; |
|
||||||
h4 { |
|
||||||
margin: 0; |
|
||||||
text-transform: none; |
|
||||||
} |
|
||||||
p { |
|
||||||
font-size: 16px; |
|
||||||
font-style: italic; |
|
||||||
margin: 0; |
|
||||||
@include serif-font; |
|
||||||
} |
|
||||||
} |
} |
||||||
} |
|
||||||
* { |
|
||||||
z-index: 2; |
|
||||||
} |
|
||||||
} |
} |
||||||
@media(min-width:767px) { |
@media (min-width: 767px) { |
||||||
#portfolio { |
#portfolio { |
||||||
.portfolio-item { |
.portfolio-item { |
||||||
margin: 0 0 30px; |
margin: 0 0 30px; |
||||||
|
} |
||||||
} |
} |
||||||
} |
|
||||||
} |
} |
||||||
|
|
||||||
.portfolio-modal { |
.portfolio-modal { |
||||||
.modal-dialog { |
.modal-dialog { |
||||||
margin: 1rem; |
margin: 1rem; |
||||||
max-width: 100vw; |
max-width: 100vw; |
||||||
} |
|
||||||
.modal-content { |
|
||||||
padding: 100px 0; |
|
||||||
text-align: center; |
|
||||||
h2 { |
|
||||||
font-size: 3em; |
|
||||||
margin-bottom: 15px; |
|
||||||
} |
|
||||||
p { |
|
||||||
margin-bottom: 30px; |
|
||||||
} |
|
||||||
p.item-intro { |
|
||||||
font-size: 16px; |
|
||||||
font-style: italic; |
|
||||||
margin: 20px 0 30px; |
|
||||||
@include serif-font; |
|
||||||
} |
|
||||||
ul.list-inline { |
|
||||||
margin-top: 0; |
|
||||||
margin-bottom: 30px; |
|
||||||
} |
|
||||||
img { |
|
||||||
margin-bottom: 30px; |
|
||||||
} |
|
||||||
button { |
|
||||||
cursor: pointer; |
|
||||||
} |
} |
||||||
} |
.modal-content { |
||||||
.close-modal { |
padding: 100px 0; |
||||||
position: absolute; |
text-align: center; |
||||||
top: 25px; |
h2 { |
||||||
right: 25px; |
font-size: 3em; |
||||||
width: 75px; |
margin-bottom: 15px; |
||||||
height: 75px; |
} |
||||||
cursor: pointer; |
p { |
||||||
background-color: transparent; |
margin-bottom: 30px; |
||||||
&:hover { |
} |
||||||
opacity: 0.3; |
p.item-intro { |
||||||
|
font-size: 16px; |
||||||
|
font-style: italic; |
||||||
|
margin: 20px 0 30px; |
||||||
|
font-family: $subheadings-font-family; |
||||||
|
} |
||||||
|
ul.list-inline { |
||||||
|
margin-top: 0; |
||||||
|
margin-bottom: 30px; |
||||||
|
} |
||||||
|
img { |
||||||
|
margin-bottom: 30px; |
||||||
|
} |
||||||
|
button { |
||||||
|
cursor: pointer; |
||||||
|
} |
||||||
} |
} |
||||||
.lr { |
.close-modal { |
||||||
/* Safari and Chrome */ |
position: absolute; |
||||||
z-index: 1051; |
top: 25px; |
||||||
width: 1px; |
right: 25px; |
||||||
height: 75px; |
width: 75px; |
||||||
margin-left: 35px; |
|
||||||
/* IE 9 */ |
|
||||||
-webkit-transform: rotate(45deg); |
|
||||||
-ms-transform: rotate(45deg); |
|
||||||
transform: rotate(45deg); |
|
||||||
background-color: $gray-900; |
|
||||||
.rl { |
|
||||||
/* Safari and Chrome */ |
|
||||||
z-index: 1052; |
|
||||||
width: 1px; |
|
||||||
height: 75px; |
height: 75px; |
||||||
/* IE 9 */ |
cursor: pointer; |
||||||
-webkit-transform: rotate(90deg); |
background-color: transparent; |
||||||
-ms-transform: rotate(90deg); |
&:hover { |
||||||
transform: rotate(90deg); |
opacity: 0.3; |
||||||
background-color: $gray-900; |
} |
||||||
} |
.lr { |
||||||
|
/* Safari and Chrome */ |
||||||
|
z-index: 1051; |
||||||
|
width: 1px; |
||||||
|
height: 75px; |
||||||
|
margin-left: 35px; |
||||||
|
/* IE 9 */ |
||||||
|
-webkit-transform: rotate(45deg); |
||||||
|
-ms-transform: rotate(45deg); |
||||||
|
transform: rotate(45deg); |
||||||
|
background-color: $gray-900; |
||||||
|
.rl { |
||||||
|
/* Safari and Chrome */ |
||||||
|
z-index: 1052; |
||||||
|
width: 1px; |
||||||
|
height: 75px; |
||||||
|
/* IE 9 */ |
||||||
|
-webkit-transform: rotate(90deg); |
||||||
|
-ms-transform: rotate(90deg); |
||||||
|
transform: rotate(90deg); |
||||||
|
background-color: $gray-900; |
||||||
|
} |
||||||
|
} |
||||||
} |
} |
||||||
} |
|
||||||
} |
} |
||||||
|
|||||||
@ -1,5 +1,5 @@ |
|||||||
// Styling for the services section |
// Styling for the services section |
||||||
.service-heading { |
.service-heading { |
||||||
margin: 15px 0; |
margin: 15px 0; |
||||||
text-transform: none; |
text-transform: none; |
||||||
} |
} |
||||||
|
|||||||
@ -1,18 +1,18 @@ |
|||||||
// Styling for the team section |
// Styling for the team section |
||||||
.team-member { |
.team-member { |
||||||
margin-bottom: 50px; |
margin-bottom: 50px; |
||||||
text-align: center; |
text-align: center; |
||||||
img { |
img { |
||||||
width: 225px; |
width: 225px; |
||||||
height: 225px; |
height: 225px; |
||||||
border: 7px solid fade-out($black, 0.9); |
border: 7px solid fade-out($black, 0.9); |
||||||
} |
} |
||||||
h4 { |
h4 { |
||||||
margin-top: 25px; |
margin-top: 25px; |
||||||
margin-bottom: 0; |
margin-bottom: 0; |
||||||
text-transform: none; |
text-transform: none; |
||||||
} |
} |
||||||
p { |
p { |
||||||
margin-top: 0; |
margin-top: 0; |
||||||
} |
} |
||||||
} |
} |
||||||
|
|||||||
@ -1,178 +1,178 @@ |
|||||||
// Styling for the timeline section |
// Styling for the timeline section |
||||||
.timeline { |
.timeline { |
||||||
position: relative; |
|
||||||
padding: 0; |
|
||||||
list-style: none; |
|
||||||
&:before { |
|
||||||
position: absolute; |
|
||||||
top: 0; |
|
||||||
bottom: 0; |
|
||||||
left: 40px; |
|
||||||
width: 2px; |
|
||||||
margin-left: -1.5px; |
|
||||||
content: ''; |
|
||||||
background-color: $gray-200; |
|
||||||
} |
|
||||||
> li { |
|
||||||
position: relative; |
position: relative; |
||||||
min-height: 50px; |
padding: 0; |
||||||
margin-bottom: 50px; |
list-style: none; |
||||||
&:after, |
|
||||||
&:before { |
&:before { |
||||||
display: table; |
position: absolute; |
||||||
content: ' '; |
top: 0; |
||||||
|
bottom: 0; |
||||||
|
left: 40px; |
||||||
|
width: 2px; |
||||||
|
margin-left: -1.5px; |
||||||
|
content: ""; |
||||||
|
background-color: $gray-200; |
||||||
} |
} |
||||||
&:after { |
> li { |
||||||
clear: both; |
position: relative; |
||||||
} |
min-height: 50px; |
||||||
.timeline-panel { |
margin-bottom: 50px; |
||||||
position: relative; |
&:after, |
||||||
float: right; |
&:before { |
||||||
width: 100%; |
display: table; |
||||||
padding: 0 20px 0 100px; |
content: " "; |
||||||
text-align: left; |
} |
||||||
&:before { |
&:after { |
||||||
right: auto; |
clear: both; |
||||||
left: -15px; |
} |
||||||
border-right-width: 15px; |
.timeline-panel { |
||||||
border-left-width: 0; |
position: relative; |
||||||
} |
float: right; |
||||||
&:after { |
width: 100%; |
||||||
right: auto; |
padding: 0 20px 0 100px; |
||||||
left: -14px; |
text-align: left; |
||||||
border-right-width: 14px; |
&:before { |
||||||
border-left-width: 0; |
right: auto; |
||||||
} |
left: -15px; |
||||||
} |
border-right-width: 15px; |
||||||
.timeline-image { |
border-left-width: 0; |
||||||
position: absolute; |
} |
||||||
z-index: 100; |
&:after { |
||||||
left: 0; |
right: auto; |
||||||
width: 80px; |
left: -14px; |
||||||
height: 80px; |
border-right-width: 14px; |
||||||
margin-left: 0; |
border-left-width: 0; |
||||||
text-align: center; |
} |
||||||
color: white; |
} |
||||||
border: 7px solid $gray-200; |
.timeline-image { |
||||||
border-radius: 100%; |
position: absolute; |
||||||
background-color: $primary; |
z-index: 100; |
||||||
h4 { |
left: 0; |
||||||
font-size: 10px; |
width: 80px; |
||||||
line-height: 14px; |
height: 80px; |
||||||
margin-top: 12px; |
margin-left: 0; |
||||||
} |
text-align: center; |
||||||
} |
color: white; |
||||||
&.timeline-inverted > .timeline-panel { |
border: 7px solid $gray-200; |
||||||
float: right; |
border-radius: 100%; |
||||||
padding: 0 20px 0 100px; |
background-color: $primary; |
||||||
text-align: left; |
h4 { |
||||||
&:before { |
font-size: 10px; |
||||||
right: auto; |
line-height: 14px; |
||||||
left: -15px; |
margin-top: 12px; |
||||||
border-right-width: 15px; |
} |
||||||
border-left-width: 0; |
} |
||||||
} |
&.timeline-inverted > .timeline-panel { |
||||||
&:after { |
float: right; |
||||||
right: auto; |
padding: 0 20px 0 100px; |
||||||
left: -14px; |
text-align: left; |
||||||
border-right-width: 14px; |
&:before { |
||||||
border-left-width: 0; |
right: auto; |
||||||
} |
left: -15px; |
||||||
} |
border-right-width: 15px; |
||||||
&:last-child { |
border-left-width: 0; |
||||||
margin-bottom: 0; |
} |
||||||
|
&:after { |
||||||
|
right: auto; |
||||||
|
left: -14px; |
||||||
|
border-right-width: 14px; |
||||||
|
border-left-width: 0; |
||||||
|
} |
||||||
|
} |
||||||
|
&:last-child { |
||||||
|
margin-bottom: 0; |
||||||
|
} |
||||||
} |
} |
||||||
} |
.timeline-heading { |
||||||
.timeline-heading { |
h4 { |
||||||
h4 { |
margin-top: 0; |
||||||
margin-top: 0; |
color: inherit; |
||||||
color: inherit; |
&.subheading { |
||||||
&.subheading { |
text-transform: none; |
||||||
text-transform: none; |
} |
||||||
} |
} |
||||||
} |
} |
||||||
} |
.timeline-body { |
||||||
.timeline-body { |
> ul, |
||||||
> ul, |
> p { |
||||||
> p { |
margin-bottom: 0; |
||||||
margin-bottom: 0; |
} |
||||||
} |
} |
||||||
} |
|
||||||
} |
} |
||||||
@media(min-width:768px) { |
@media (min-width: 768px) { |
||||||
.timeline { |
.timeline { |
||||||
&:before { |
&:before { |
||||||
left: 50%; |
left: 50%; |
||||||
} |
} |
||||||
> li { |
> li { |
||||||
min-height: 100px; |
min-height: 100px; |
||||||
margin-bottom: 100px; |
margin-bottom: 100px; |
||||||
.timeline-panel { |
.timeline-panel { |
||||||
float: left; |
float: left; |
||||||
width: 41%; |
width: 41%; |
||||||
padding: 0 20px 20px 30px; |
padding: 0 20px 20px 30px; |
||||||
text-align: right; |
text-align: right; |
||||||
} |
} |
||||||
.timeline-image { |
.timeline-image { |
||||||
left: 50%; |
left: 50%; |
||||||
width: 100px; |
width: 100px; |
||||||
height: 100px; |
height: 100px; |
||||||
margin-left: -50px; |
margin-left: -50px; |
||||||
h4 { |
h4 { |
||||||
font-size: 13px; |
font-size: 13px; |
||||||
line-height: 18px; |
line-height: 18px; |
||||||
margin-top: 16px; |
margin-top: 16px; |
||||||
|
} |
||||||
|
} |
||||||
|
&.timeline-inverted > .timeline-panel { |
||||||
|
float: right; |
||||||
|
padding: 0 30px 20px 20px; |
||||||
|
text-align: left; |
||||||
|
} |
||||||
} |
} |
||||||
} |
|
||||||
&.timeline-inverted > .timeline-panel { |
|
||||||
float: right; |
|
||||||
padding: 0 30px 20px 20px; |
|
||||||
text-align: left; |
|
||||||
} |
|
||||||
} |
} |
||||||
} |
|
||||||
} |
} |
||||||
@media(min-width:992px) { |
@media (min-width: 992px) { |
||||||
.timeline { |
.timeline { |
||||||
> li { |
> li { |
||||||
min-height: 150px; |
min-height: 150px; |
||||||
.timeline-panel { |
.timeline-panel { |
||||||
padding: 0 20px 20px; |
padding: 0 20px 20px; |
||||||
} |
} |
||||||
.timeline-image { |
.timeline-image { |
||||||
width: 150px; |
width: 150px; |
||||||
height: 150px; |
height: 150px; |
||||||
margin-left: -75px; |
margin-left: -75px; |
||||||
h4 { |
h4 { |
||||||
font-size: 18px; |
font-size: 18px; |
||||||
line-height: 26px; |
line-height: 26px; |
||||||
margin-top: 30px; |
margin-top: 30px; |
||||||
|
} |
||||||
|
} |
||||||
|
&.timeline-inverted > .timeline-panel { |
||||||
|
padding: 0 20px 20px; |
||||||
|
} |
||||||
} |
} |
||||||
} |
|
||||||
&.timeline-inverted > .timeline-panel { |
|
||||||
padding: 0 20px 20px; |
|
||||||
} |
|
||||||
} |
} |
||||||
} |
|
||||||
} |
} |
||||||
@media(min-width:1200px) { |
@media (min-width: 1200px) { |
||||||
.timeline { |
.timeline { |
||||||
> li { |
> li { |
||||||
min-height: 170px; |
min-height: 170px; |
||||||
.timeline-panel { |
.timeline-panel { |
||||||
padding: 0 20px 20px 100px; |
padding: 0 20px 20px 100px; |
||||||
} |
} |
||||||
.timeline-image { |
.timeline-image { |
||||||
width: 170px; |
width: 170px; |
||||||
height: 170px; |
height: 170px; |
||||||
margin-left: -85px; |
margin-left: -85px; |
||||||
h4 { |
h4 { |
||||||
margin-top: 40px; |
margin-top: 40px; |
||||||
|
} |
||||||
|
} |
||||||
|
&.timeline-inverted > .timeline-panel { |
||||||
|
padding: 0 100px 20px 20px; |
||||||
|
} |
||||||
} |
} |
||||||
} |
|
||||||
&.timeline-inverted > .timeline-panel { |
|
||||||
padding: 0 100px 20px 20px; |
|
||||||
} |
|
||||||
} |
} |
||||||
} |
|
||||||
} |
} |
||||||
|
|||||||
@ -1,22 +1,21 @@ |
|||||||
// Core variables and mixins |
// Import variables |
||||||
@import "base/variables.scss"; |
@import "./variables.scss"; |
||||||
@import "base/mixins.scss"; |
|
||||||
|
|
||||||
// Import Bootstrap |
// Import Bootstrap |
||||||
@import "bootstrap/scss/bootstrap.scss"; |
@import "bootstrap/scss/bootstrap.scss"; |
||||||
|
|
||||||
// Global CSS |
// Global CSS |
||||||
@import "base/page.scss"; |
@import "./global.scss"; |
||||||
|
|
||||||
// Components |
// Components |
||||||
@import "components/buttons.scss"; |
@import "./components/buttons.scss"; |
||||||
@import "components/navbar.scss"; |
@import "./components/navbar.scss"; |
||||||
|
|
||||||
// Layout |
// Layout |
||||||
@import "layout/masthead.scss"; |
@import "./layout/masthead.scss"; |
||||||
@import "layout/services.scss"; |
@import "./layout/services.scss"; |
||||||
@import "layout/portfolio.scss"; |
@import "./layout/portfolio.scss"; |
||||||
@import "layout/timeline.scss"; |
@import "./layout/timeline.scss"; |
||||||
@import "layout/team.scss"; |
@import "./layout/team.scss"; |
||||||
@import "layout/contact.scss"; |
@import "./layout/contact.scss"; |
||||||
@import "layout/footer.scss"; |
@import "./layout/footer.scss"; |
||||||
|
|||||||
@ -0,0 +1,11 @@ |
|||||||
|
// Override Bootstrap color system |
||||||
|
|
||||||
|
$yellow: #fed136; |
||||||
|
|
||||||
|
// Override Bootstrap default state colors |
||||||
|
|
||||||
|
$primary: $yellow; |
||||||
|
|
||||||
|
// Override Bootstrap yiq lightness value |
||||||
|
|
||||||
|
$yiq-contrasted-threshold: 205; |
||||||
@ -0,0 +1,5 @@ |
|||||||
|
// Override Bootstrap grid column variables |
||||||
|
// |
||||||
|
// Override the spacing between columns to add symmetry to the layout |
||||||
|
|
||||||
|
$grid-gutter-width: $spacer * 1.5; |
||||||
@ -0,0 +1,7 @@ |
|||||||
|
// Restate and add to the Bootstrap default spacing variables |
||||||
|
// |
||||||
|
// The spacer is restated in order to add new entries to the $spacers map |
||||||
|
// The 10 and n1 through n10 spacers are newly added allowing for larger |
||||||
|
// spacing options and negative padding and margin utilities |
||||||
|
|
||||||
|
$spacer: 1rem; |
||||||
@ -0,0 +1,20 @@ |
|||||||
|
// Override Bootstrap typography variables |
||||||
|
|
||||||
|
$font-family-base: "Roboto Slab", -apple-system, BlinkMacSystemFont, "Segoe UI", |
||||||
|
Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", |
||||||
|
"Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; |
||||||
|
|
||||||
|
$headings-font-family: "Montserrat", -apple-system, BlinkMacSystemFont, |
||||||
|
"Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", |
||||||
|
"Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; |
||||||
|
|
||||||
|
$subheadings-font-family: "Droid Serif", -apple-system, BlinkMacSystemFont, |
||||||
|
"Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", |
||||||
|
"Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; |
||||||
|
|
||||||
|
$font-family-script: "Kaushan Script", -apple-system, BlinkMacSystemFont, |
||||||
|
"Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", |
||||||
|
"Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; |
||||||
|
|
||||||
|
$headings-font-weight: 700; |
||||||
|
$headings-letter-spacing: 0.0625em; |
||||||
Loading…
Reference in new issue