SCSS cleanup and reorganization, editor config added
This commit is contained in:
David Miller
parent
7e90e736af
commit
ba21034d7c
|
|
@ -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
|
||||||
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 14 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 14 KiB |
File diff suppressed because it is too large
Load Diff
|
|
@ -5,12 +5,12 @@
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
|
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
|
||||||
<meta name="description" content="" />
|
<meta name="description" content="" />
|
||||||
<meta name="author" content="" />
|
<meta name="author" content="" />
|
||||||
<title>Freelancer - Start Bootstrap Theme</title>
|
<title>Agency - Start Bootstrap Theme</title>
|
||||||
|
<link rel="icon" type="image/png" sizes="32x32" href="https://startbootstrap.com/assets/img/icons/favicon-32x32.png" />
|
||||||
<!-- Font Awesome icons (free version)-->
|
<!-- Font Awesome icons (free version)-->
|
||||||
<script src="https://use.fontawesome.com/releases/v5.12.1/js/all.js" crossorigin="anonymous"></script>
|
<script src="https://use.fontawesome.com/releases/v5.12.1/js/all.js" crossorigin="anonymous"></script>
|
||||||
<!-- Google fonts-->
|
<!-- Google fonts-->
|
||||||
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css" />
|
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css" />
|
||||||
<link href="https://fonts.googleapis.com/css?family=Kaushan+Script" rel="stylesheet" type="text/css" />
|
|
||||||
<link href="https://fonts.googleapis.com/css?family=Droid+Serif:400,700,400italic,700italic" rel="stylesheet" type="text/css" />
|
<link href="https://fonts.googleapis.com/css?family=Droid+Serif:400,700,400italic,700italic" rel="stylesheet" type="text/css" />
|
||||||
<link href="https://fonts.googleapis.com/css?family=Roboto+Slab:400,100,300,700" rel="stylesheet" type="text/css" />
|
<link href="https://fonts.googleapis.com/css?family=Roboto+Slab:400,100,300,700" rel="stylesheet" type="text/css" />
|
||||||
<!-- Core theme CSS (includes Bootstrap)-->
|
<!-- Core theme CSS (includes Bootstrap)-->
|
||||||
|
|
@ -20,7 +20,7 @@
|
||||||
<!-- Navigation-->
|
<!-- Navigation-->
|
||||||
<nav class="navbar navbar-expand-lg navbar-dark fixed-top" id="mainNav">
|
<nav class="navbar navbar-expand-lg navbar-dark fixed-top" id="mainNav">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<a class="navbar-brand js-scroll-trigger" href="#page-top">Start Bootstrap</a><button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">Menu<i class="fas fa-bars"></i></button>
|
<a class="navbar-brand js-scroll-trigger" href="#page-top"><img src="assets/img/navbar-logo.svg" /></a><button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">Menu<i class="fas fa-bars ml-1"></i></button>
|
||||||
<div class="collapse navbar-collapse" id="navbarResponsive">
|
<div class="collapse navbar-collapse" id="navbarResponsive">
|
||||||
<ul class="navbar-nav text-uppercase ml-auto">
|
<ul class="navbar-nav text-uppercase ml-auto">
|
||||||
<li class="nav-item"><a class="nav-link js-scroll-trigger" href="#services">Services</a></li>
|
<li class="nav-item"><a class="nav-link js-scroll-trigger" href="#services">Services</a></li>
|
||||||
|
|
@ -315,39 +315,34 @@
|
||||||
<h3 class="section-subheading text-muted">Lorem ipsum dolor sit amet consectetur.</h3>
|
<h3 class="section-subheading text-muted">Lorem ipsum dolor sit amet consectetur.</h3>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="row">
|
<form id="contactForm" name="sentMessage" novalidate="novalidate">
|
||||||
<div class="col-lg-12">
|
<div class="row align-items-stretch mb-5">
|
||||||
<form id="contactForm" name="sentMessage" novalidate="novalidate">
|
<div class="col-md-6">
|
||||||
<div class="row">
|
<div class="form-group">
|
||||||
<div class="col-md-6">
|
<input class="form-control" id="name" type="text" placeholder="Your Name *" required="required" data-validation-required-message="Please enter your name." />
|
||||||
<div class="form-group">
|
<p class="help-block text-danger"></p>
|
||||||
<input class="form-control" id="name" type="text" placeholder="Your Name *" required="required" data-validation-required-message="Please enter your name." />
|
|
||||||
<p class="help-block text-danger"></p>
|
|
||||||
</div>
|
|
||||||
<div class="form-group">
|
|
||||||
<input class="form-control" id="email" type="email" placeholder="Your Email *" required="required" data-validation-required-message="Please enter your email address." />
|
|
||||||
<p class="help-block text-danger"></p>
|
|
||||||
</div>
|
|
||||||
<div class="form-group">
|
|
||||||
<input class="form-control" id="phone" type="tel" placeholder="Your Phone *" required="required" data-validation-required-message="Please enter your phone number." />
|
|
||||||
<p class="help-block text-danger"></p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="col-md-6">
|
|
||||||
<div class="form-group">
|
|
||||||
<textarea class="form-control" id="message" placeholder="Your Message *" required="required" data-validation-required-message="Please enter a message."></textarea>
|
|
||||||
<p class="help-block text-danger"></p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="clearfix"></div>
|
|
||||||
<div class="col-lg-12 text-center">
|
|
||||||
<div id="success"></div>
|
|
||||||
<button class="btn btn-primary btn-xl text-uppercase" id="sendMessageButton" type="submit">Send Message</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</form>
|
<div class="form-group">
|
||||||
|
<input class="form-control" id="email" type="email" placeholder="Your Email *" required="required" data-validation-required-message="Please enter your email address." />
|
||||||
|
<p class="help-block text-danger"></p>
|
||||||
|
</div>
|
||||||
|
<div class="form-group mb-md-0">
|
||||||
|
<input class="form-control" id="phone" type="tel" placeholder="Your Phone *" required="required" data-validation-required-message="Please enter your phone number." />
|
||||||
|
<p class="help-block text-danger"></p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-md-6">
|
||||||
|
<div class="form-group form-group-textarea mb-md-0">
|
||||||
|
<textarea class="form-control" id="message" placeholder="Your Message *" required="required" data-validation-required-message="Please enter a message."></textarea>
|
||||||
|
<p class="help-block text-danger"></p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<div class="text-center">
|
||||||
|
<div id="success"></div>
|
||||||
|
<button class="btn btn-primary btn-xl text-uppercase" id="sendMessageButton" type="submit">Send Message</button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
<!-- Footer-->
|
<!-- Footer-->
|
||||||
|
|
@ -398,7 +393,7 @@
|
||||||
<li>Client: Threads</li>
|
<li>Client: Threads</li>
|
||||||
<li>Category: Illustration</li>
|
<li>Category: Illustration</li>
|
||||||
</ul>
|
</ul>
|
||||||
<button class="btn btn-primary" data-dismiss="modal" type="button"><i class="fas fa-times"></i>Close Project</button>
|
<button class="btn btn-primary" data-dismiss="modal" type="button"><i class="fas fa-times mr-1"></i>Close Project</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -427,7 +422,7 @@
|
||||||
<li>Client: Explore</li>
|
<li>Client: Explore</li>
|
||||||
<li>Category: Graphic Design</li>
|
<li>Category: Graphic Design</li>
|
||||||
</ul>
|
</ul>
|
||||||
<button class="btn btn-primary" data-dismiss="modal" type="button"><i class="fas fa-times"></i>Close Project</button>
|
<button class="btn btn-primary" data-dismiss="modal" type="button"><i class="fas fa-times mr-1"></i>Close Project</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -456,7 +451,7 @@
|
||||||
<li>Client: Finish</li>
|
<li>Client: Finish</li>
|
||||||
<li>Category: Identity</li>
|
<li>Category: Identity</li>
|
||||||
</ul>
|
</ul>
|
||||||
<button class="btn btn-primary" data-dismiss="modal" type="button"><i class="fas fa-times"></i>Close Project</button>
|
<button class="btn btn-primary" data-dismiss="modal" type="button"><i class="fas fa-times mr-1"></i>Close Project</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -485,7 +480,7 @@
|
||||||
<li>Client: Lines</li>
|
<li>Client: Lines</li>
|
||||||
<li>Category: Branding</li>
|
<li>Category: Branding</li>
|
||||||
</ul>
|
</ul>
|
||||||
<button class="btn btn-primary" data-dismiss="modal" type="button"><i class="fas fa-times"></i>Close Project</button>
|
<button class="btn btn-primary" data-dismiss="modal" type="button"><i class="fas fa-times mr-1"></i>Close Project</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -514,7 +509,7 @@
|
||||||
<li>Client: Southwest</li>
|
<li>Client: Southwest</li>
|
||||||
<li>Category: Website Design</li>
|
<li>Category: Website Design</li>
|
||||||
</ul>
|
</ul>
|
||||||
<button class="btn btn-primary" data-dismiss="modal" type="button"><i class="fas fa-times"></i>Close Project</button>
|
<button class="btn btn-primary" data-dismiss="modal" type="button"><i class="fas fa-times mr-1"></i>Close Project</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -543,7 +538,7 @@
|
||||||
<li>Client: Window</li>
|
<li>Client: Window</li>
|
||||||
<li>Category: Photography</li>
|
<li>Category: Photography</li>
|
||||||
</ul>
|
</ul>
|
||||||
<button class="btn btn-primary" data-dismiss="modal" type="button"><i class="fas fa-times"></i>Close Project</button>
|
<button class="btn btn-primary" data-dismiss="modal" type="button"><i class="fas fa-times mr-1"></i>Close Project</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -3,45 +3,54 @@
|
||||||
* Copyright 2013-2020 Start Bootstrap
|
* Copyright 2013-2020 Start Bootstrap
|
||||||
* Licensed under MIT (https://github.com/BlackrockDigital/startbootstrap-agency/blob/master/LICENSE)
|
* Licensed under MIT (https://github.com/BlackrockDigital/startbootstrap-agency/blob/master/LICENSE)
|
||||||
*/
|
*/
|
||||||
(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
|
||||||
|
|
|
||||||
File diff suppressed because one or more lines are too long
|
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
|
||||||
|
|
|
||||||
|
|
@ -8,14 +8,15 @@ html(lang='en')
|
||||||
meta(name='description', content='')
|
meta(name='description', content='')
|
||||||
meta(name='author', content='')
|
meta(name='author', content='')
|
||||||
|
|
||||||
title Freelancer - Start Bootstrap Theme
|
title Agency - Start Bootstrap Theme
|
||||||
|
|
||||||
|
link(rel='icon', type='image/png', sizes='32x32', href='https://startbootstrap.com/assets/img/icons/favicon-32x32.png')
|
||||||
|
|
||||||
// Font Awesome icons (free version)
|
// Font Awesome icons (free version)
|
||||||
script(src='https://use.fontawesome.com/releases/v5.12.1/js/all.js', crossorigin='anonymous')
|
script(src='https://use.fontawesome.com/releases/v5.12.1/js/all.js', crossorigin='anonymous')
|
||||||
|
|
||||||
// Google fonts
|
// Google fonts
|
||||||
link(href='https://fonts.googleapis.com/css?family=Montserrat:400,700', rel='stylesheet', type='text/css')
|
link(href='https://fonts.googleapis.com/css?family=Montserrat:400,700', rel='stylesheet', type='text/css')
|
||||||
link(href='https://fonts.googleapis.com/css?family=Kaushan+Script', rel='stylesheet', type='text/css')
|
|
||||||
link(href='https://fonts.googleapis.com/css?family=Droid+Serif:400,700,400italic,700italic', rel='stylesheet', type='text/css')
|
link(href='https://fonts.googleapis.com/css?family=Droid+Serif:400,700,400italic,700italic', rel='stylesheet', type='text/css')
|
||||||
link(href='https://fonts.googleapis.com/css?family=Roboto+Slab:400,100,300,700', rel='stylesheet', type='text/css')
|
link(href='https://fonts.googleapis.com/css?family=Roboto+Slab:400,100,300,700', rel='stylesheet', type='text/css')
|
||||||
|
|
||||||
|
|
@ -27,10 +28,11 @@ html(lang='en')
|
||||||
// Navigation
|
// Navigation
|
||||||
nav#mainNav.navbar.navbar-expand-lg.navbar-dark.fixed-top
|
nav#mainNav.navbar.navbar-expand-lg.navbar-dark.fixed-top
|
||||||
.container
|
.container
|
||||||
a.navbar-brand.js-scroll-trigger(href='#page-top') Start Bootstrap
|
a.navbar-brand.js-scroll-trigger(href='#page-top')
|
||||||
|
img(src='assets/img/navbar-logo.svg')
|
||||||
button.navbar-toggler.navbar-toggler-right(type='button', data-toggle='collapse', data-target='#navbarResponsive', aria-controls='navbarResponsive', aria-expanded='false', aria-label='Toggle navigation')
|
button.navbar-toggler.navbar-toggler-right(type='button', data-toggle='collapse', data-target='#navbarResponsive', aria-controls='navbarResponsive', aria-expanded='false', aria-label='Toggle navigation')
|
||||||
| Menu
|
| Menu
|
||||||
i.fas.fa-bars
|
i.fas.fa-bars.ml-1
|
||||||
#navbarResponsive.collapse.navbar-collapse
|
#navbarResponsive.collapse.navbar-collapse
|
||||||
ul.navbar-nav.text-uppercase.ml-auto
|
ul.navbar-nav.text-uppercase.ml-auto
|
||||||
li.nav-item
|
li.nav-item
|
||||||
|
|
@ -286,28 +288,25 @@ html(lang='en')
|
||||||
.col-lg-12.text-center
|
.col-lg-12.text-center
|
||||||
h2.section-heading.text-uppercase Contact Us
|
h2.section-heading.text-uppercase Contact Us
|
||||||
h3.section-subheading.text-muted Lorem ipsum dolor sit amet consectetur.
|
h3.section-subheading.text-muted Lorem ipsum dolor sit amet consectetur.
|
||||||
.row
|
form#contactForm(name='sentMessage', novalidate='novalidate')
|
||||||
.col-lg-12
|
.row.align-items-stretch.mb-5
|
||||||
form#contactForm(name='sentMessage', novalidate='novalidate')
|
.col-md-6
|
||||||
.row
|
.form-group
|
||||||
.col-md-6
|
input#name.form-control(type='text', placeholder='Your Name *', required='required', data-validation-required-message='Please enter your name.')
|
||||||
.form-group
|
p.help-block.text-danger
|
||||||
input#name.form-control(type='text', placeholder='Your Name *', required='required', data-validation-required-message='Please enter your name.')
|
.form-group
|
||||||
p.help-block.text-danger
|
input#email.form-control(type='email', placeholder='Your Email *', required='required', data-validation-required-message='Please enter your email address.')
|
||||||
.form-group
|
p.help-block.text-danger
|
||||||
input#email.form-control(type='email', placeholder='Your Email *', required='required', data-validation-required-message='Please enter your email address.')
|
.form-group.mb-md-0
|
||||||
p.help-block.text-danger
|
input#phone.form-control(type='tel', placeholder='Your Phone *', required='required', data-validation-required-message='Please enter your phone number.')
|
||||||
.form-group
|
p.help-block.text-danger
|
||||||
input#phone.form-control(type='tel', placeholder='Your Phone *', required='required', data-validation-required-message='Please enter your phone number.')
|
.col-md-6
|
||||||
p.help-block.text-danger
|
.form-group.form-group-textarea.mb-md-0
|
||||||
.col-md-6
|
textarea#message.form-control(placeholder='Your Message *', required='required', data-validation-required-message='Please enter a message.')
|
||||||
.form-group
|
p.help-block.text-danger
|
||||||
textarea#message.form-control(placeholder='Your Message *', required='required', data-validation-required-message='Please enter a message.')
|
.text-center
|
||||||
p.help-block.text-danger
|
#success
|
||||||
.clearfix
|
button#sendMessageButton.btn.btn-primary.btn-xl.text-uppercase(type='submit') Send Message
|
||||||
.col-lg-12.text-center
|
|
||||||
#success
|
|
||||||
button#sendMessageButton.btn.btn-primary.btn-xl.text-uppercase(type='submit') Send Message
|
|
||||||
|
|
||||||
// Footer
|
// Footer
|
||||||
footer.footer
|
footer.footer
|
||||||
|
|
@ -356,7 +355,7 @@ html(lang='en')
|
||||||
li Client: Threads
|
li Client: Threads
|
||||||
li Category: Illustration
|
li Category: Illustration
|
||||||
button.btn.btn-primary(data-dismiss='modal', type='button')
|
button.btn.btn-primary(data-dismiss='modal', type='button')
|
||||||
i.fas.fa-times
|
i.fas.fa-times.mr-1
|
||||||
| Close Project
|
| Close Project
|
||||||
// Modal 2
|
// Modal 2
|
||||||
#portfolioModal2.portfolio-modal.modal.fade(tabindex='-1', role='dialog', aria-hidden='true')
|
#portfolioModal2.portfolio-modal.modal.fade(tabindex='-1', role='dialog', aria-hidden='true')
|
||||||
|
|
@ -380,7 +379,7 @@ html(lang='en')
|
||||||
li Client: Explore
|
li Client: Explore
|
||||||
li Category: Graphic Design
|
li Category: Graphic Design
|
||||||
button.btn.btn-primary(data-dismiss='modal', type='button')
|
button.btn.btn-primary(data-dismiss='modal', type='button')
|
||||||
i.fas.fa-times
|
i.fas.fa-times.mr-1
|
||||||
| Close Project
|
| Close Project
|
||||||
// Modal 3
|
// Modal 3
|
||||||
#portfolioModal3.portfolio-modal.modal.fade(tabindex='-1', role='dialog', aria-hidden='true')
|
#portfolioModal3.portfolio-modal.modal.fade(tabindex='-1', role='dialog', aria-hidden='true')
|
||||||
|
|
@ -404,7 +403,7 @@ html(lang='en')
|
||||||
li Client: Finish
|
li Client: Finish
|
||||||
li Category: Identity
|
li Category: Identity
|
||||||
button.btn.btn-primary(data-dismiss='modal', type='button')
|
button.btn.btn-primary(data-dismiss='modal', type='button')
|
||||||
i.fas.fa-times
|
i.fas.fa-times.mr-1
|
||||||
| Close Project
|
| Close Project
|
||||||
// Modal 4
|
// Modal 4
|
||||||
#portfolioModal4.portfolio-modal.modal.fade(tabindex='-1', role='dialog', aria-hidden='true')
|
#portfolioModal4.portfolio-modal.modal.fade(tabindex='-1', role='dialog', aria-hidden='true')
|
||||||
|
|
@ -428,7 +427,7 @@ html(lang='en')
|
||||||
li Client: Lines
|
li Client: Lines
|
||||||
li Category: Branding
|
li Category: Branding
|
||||||
button.btn.btn-primary(data-dismiss='modal', type='button')
|
button.btn.btn-primary(data-dismiss='modal', type='button')
|
||||||
i.fas.fa-times
|
i.fas.fa-times.mr-1
|
||||||
| Close Project
|
| Close Project
|
||||||
// Modal 5
|
// Modal 5
|
||||||
#portfolioModal5.portfolio-modal.modal.fade(tabindex='-1', role='dialog', aria-hidden='true')
|
#portfolioModal5.portfolio-modal.modal.fade(tabindex='-1', role='dialog', aria-hidden='true')
|
||||||
|
|
@ -452,7 +451,7 @@ html(lang='en')
|
||||||
li Client: Southwest
|
li Client: Southwest
|
||||||
li Category: Website Design
|
li Category: Website Design
|
||||||
button.btn.btn-primary(data-dismiss='modal', type='button')
|
button.btn.btn-primary(data-dismiss='modal', type='button')
|
||||||
i.fas.fa-times
|
i.fas.fa-times.mr-1
|
||||||
| Close Project
|
| Close Project
|
||||||
// Modal 6
|
// Modal 6
|
||||||
#portfolioModal6.portfolio-modal.modal.fade(tabindex='-1', role='dialog', aria-hidden='true')
|
#portfolioModal6.portfolio-modal.modal.fade(tabindex='-1', role='dialog', aria-hidden='true')
|
||||||
|
|
@ -476,7 +475,7 @@ html(lang='en')
|
||||||
li Client: Window
|
li Client: Window
|
||||||
li Category: Photography
|
li Category: Photography
|
||||||
button.btn.btn-primary(data-dismiss='modal', type='button')
|
button.btn.btn-primary(data-dismiss='modal', type='button')
|
||||||
i.fas.fa-times
|
i.fas.fa-times.mr-1
|
||||||
| Close Project
|
| Close Project
|
||||||
|
|
||||||
// Bootstrap core JS
|
// Bootstrap core JS
|
||||||
|
|
|
||||||
|
|
@ -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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Responsive styling for screen width equal to or greater than the large breakpoint
|
||||||
|
@include media-breakpoint-up(lg) {
|
||||||
|
#mainNav {
|
||||||
|
padding-top: 1.5rem;
|
||||||
|
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;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
}
|
}
|
||||||
&.navbar-shrink {
|
|
||||||
padding-top: 0;
|
|
||||||
padding-bottom: 0;
|
|
||||||
background-color: $gray-900;
|
|
||||||
.navbar-brand {
|
|
||||||
font-size: 1.25em;
|
|
||||||
padding: 12px 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 {
|
|
||||||
padding-top: 150px;
|
|
||||||
padding-bottom: 100px;
|
|
||||||
.intro-lead-in {
|
|
||||||
font-size: 22px;
|
|
||||||
font-style: italic;
|
|
||||||
line-height: 22px;
|
|
||||||
margin-bottom: 25px;
|
|
||||||
@include serif-font;
|
|
||||||
}
|
|
||||||
.intro-heading {
|
|
||||||
font-size: 50px;
|
|
||||||
font-weight: 700;
|
|
||||||
line-height: 50px;
|
|
||||||
margin-bottom: 25px;
|
|
||||||
@include heading-font;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@media(min-width:768px) {
|
|
||||||
header.masthead {
|
|
||||||
.intro-text {
|
.intro-text {
|
||||||
padding-top: 300px;
|
padding-top: 150px;
|
||||||
padding-bottom: 200px;
|
padding-bottom: 100px;
|
||||||
.intro-lead-in {
|
.intro-lead-in {
|
||||||
font-size: 40px;
|
font-size: 22px;
|
||||||
font-style: italic;
|
font-style: italic;
|
||||||
line-height: 40px;
|
line-height: 22px;
|
||||||
margin-bottom: 25px;
|
margin-bottom: 25px;
|
||||||
@include serif-font;
|
font-family: $subheadings-font-family;
|
||||||
}
|
}
|
||||||
.intro-heading {
|
.intro-heading {
|
||||||
font-size: 75px;
|
font-size: 50px;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
line-height: 75px;
|
line-height: 50px;
|
||||||
margin-bottom: 50px;
|
margin-bottom: 25px;
|
||||||
@include heading-font;
|
font-family: $headings-font-family;
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media (min-width: 768px) {
|
||||||
|
header.masthead {
|
||||||
|
.intro-text {
|
||||||
|
padding-top: 300px;
|
||||||
|
padding-bottom: 200px;
|
||||||
|
.intro-lead-in {
|
||||||
|
font-size: 40px;
|
||||||
|
font-style: italic;
|
||||||
|
line-height: 40px;
|
||||||
|
margin-bottom: 25px;
|
||||||
|
}
|
||||||
|
.intro-heading {
|
||||||
|
font-size: 75px;
|
||||||
|
font-weight: 700;
|
||||||
|
line-height: 75px;
|
||||||
|
margin-bottom: 50px;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,140 +1,140 @@
|
||||||
// Styling for the portfolio section
|
// Styling for the portfolio section
|
||||||
#portfolio {
|
#portfolio {
|
||||||
.portfolio-item {
|
|
||||||
right: 0;
|
|
||||||
margin: 0 0 15px;
|
|
||||||
.portfolio-link {
|
|
||||||
position: relative;
|
|
||||||
display: block;
|
|
||||||
max-width: 400px;
|
|
||||||
margin: 0 auto;
|
|
||||||
cursor: pointer;
|
|
||||||
.portfolio-hover {
|
|
||||||
position: absolute;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
-webkit-transition: all ease 0.5s;
|
|
||||||
-moz-transition: all ease 0.5s;
|
|
||||||
transition: all ease 0.5s;
|
|
||||||
opacity: 0;
|
|
||||||
background: fade-out($primary, .1);
|
|
||||||
&:hover {
|
|
||||||
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-caption {
|
|
||||||
max-width: 400px;
|
|
||||||
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) {
|
|
||||||
#portfolio {
|
|
||||||
.portfolio-item {
|
.portfolio-item {
|
||||||
margin: 0 0 30px;
|
right: 0;
|
||||||
|
margin: 0 0 15px;
|
||||||
|
.portfolio-link {
|
||||||
|
position: relative;
|
||||||
|
display: block;
|
||||||
|
max-width: 400px;
|
||||||
|
margin: 0 auto;
|
||||||
|
cursor: pointer;
|
||||||
|
.portfolio-hover {
|
||||||
|
position: absolute;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
-webkit-transition: all ease 0.5s;
|
||||||
|
-moz-transition: all ease 0.5s;
|
||||||
|
transition: all ease 0.5s;
|
||||||
|
opacity: 0;
|
||||||
|
background: fade-out($primary, 0.1);
|
||||||
|
&:hover {
|
||||||
|
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-caption {
|
||||||
|
max-width: 400px;
|
||||||
|
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;
|
||||||
|
font-family: $subheadings-font-family;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
* {
|
||||||
|
z-index: 2;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media (min-width: 767px) {
|
||||||
|
#portfolio {
|
||||||
|
.portfolio-item {
|
||||||
|
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 {
|
.modal-content {
|
||||||
margin-bottom: 30px;
|
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;
|
||||||
|
font-family: $subheadings-font-family;
|
||||||
|
}
|
||||||
|
ul.list-inline {
|
||||||
|
margin-top: 0;
|
||||||
|
margin-bottom: 30px;
|
||||||
|
}
|
||||||
|
img {
|
||||||
|
margin-bottom: 30px;
|
||||||
|
}
|
||||||
|
button {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
p.item-intro {
|
.close-modal {
|
||||||
font-size: 16px;
|
position: absolute;
|
||||||
font-style: italic;
|
top: 25px;
|
||||||
margin: 20px 0 30px;
|
right: 25px;
|
||||||
@include serif-font;
|
width: 75px;
|
||||||
}
|
|
||||||
ul.list-inline {
|
|
||||||
margin-top: 0;
|
|
||||||
margin-bottom: 30px;
|
|
||||||
}
|
|
||||||
img {
|
|
||||||
margin-bottom: 30px;
|
|
||||||
}
|
|
||||||
button {
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.close-modal {
|
|
||||||
position: absolute;
|
|
||||||
top: 25px;
|
|
||||||
right: 25px;
|
|
||||||
width: 75px;
|
|
||||||
height: 75px;
|
|
||||||
cursor: pointer;
|
|
||||||
background-color: transparent;
|
|
||||||
&:hover {
|
|
||||||
opacity: 0.3;
|
|
||||||
}
|
|
||||||
.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;
|
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;
|
||||||
&:after {
|
left: 40px;
|
||||||
clear: both;
|
width: 2px;
|
||||||
}
|
margin-left: -1.5px;
|
||||||
.timeline-panel {
|
content: "";
|
||||||
position: relative;
|
background-color: $gray-200;
|
||||||
float: right;
|
|
||||||
width: 100%;
|
|
||||||
padding: 0 20px 0 100px;
|
|
||||||
text-align: left;
|
|
||||||
&:before {
|
|
||||||
right: auto;
|
|
||||||
left: -15px;
|
|
||||||
border-right-width: 15px;
|
|
||||||
border-left-width: 0;
|
|
||||||
}
|
|
||||||
&:after {
|
|
||||||
right: auto;
|
|
||||||
left: -14px;
|
|
||||||
border-right-width: 14px;
|
|
||||||
border-left-width: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.timeline-image {
|
|
||||||
position: absolute;
|
|
||||||
z-index: 100;
|
|
||||||
left: 0;
|
|
||||||
width: 80px;
|
|
||||||
height: 80px;
|
|
||||||
margin-left: 0;
|
|
||||||
text-align: center;
|
|
||||||
color: white;
|
|
||||||
border: 7px solid $gray-200;
|
|
||||||
border-radius: 100%;
|
|
||||||
background-color: $primary;
|
|
||||||
h4 {
|
|
||||||
font-size: 10px;
|
|
||||||
line-height: 14px;
|
|
||||||
margin-top: 12px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
&.timeline-inverted > .timeline-panel {
|
|
||||||
float: right;
|
|
||||||
padding: 0 20px 0 100px;
|
|
||||||
text-align: left;
|
|
||||||
&:before {
|
|
||||||
right: auto;
|
|
||||||
left: -15px;
|
|
||||||
border-right-width: 15px;
|
|
||||||
border-left-width: 0;
|
|
||||||
}
|
|
||||||
&:after {
|
|
||||||
right: auto;
|
|
||||||
left: -14px;
|
|
||||||
border-right-width: 14px;
|
|
||||||
border-left-width: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
&:last-child {
|
|
||||||
margin-bottom: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.timeline-heading {
|
|
||||||
h4 {
|
|
||||||
margin-top: 0;
|
|
||||||
color: inherit;
|
|
||||||
&.subheading {
|
|
||||||
text-transform: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.timeline-body {
|
|
||||||
> ul,
|
|
||||||
> p {
|
|
||||||
margin-bottom: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@media(min-width:768px) {
|
|
||||||
.timeline {
|
|
||||||
&:before {
|
|
||||||
left: 50%;
|
|
||||||
}
|
}
|
||||||
> li {
|
> li {
|
||||||
min-height: 100px;
|
position: relative;
|
||||||
margin-bottom: 100px;
|
min-height: 50px;
|
||||||
.timeline-panel {
|
margin-bottom: 50px;
|
||||||
float: left;
|
&:after,
|
||||||
width: 41%;
|
&:before {
|
||||||
padding: 0 20px 20px 30px;
|
display: table;
|
||||||
text-align: right;
|
content: " ";
|
||||||
}
|
|
||||||
.timeline-image {
|
|
||||||
left: 50%;
|
|
||||||
width: 100px;
|
|
||||||
height: 100px;
|
|
||||||
margin-left: -50px;
|
|
||||||
h4 {
|
|
||||||
font-size: 13px;
|
|
||||||
line-height: 18px;
|
|
||||||
margin-top: 16px;
|
|
||||||
}
|
}
|
||||||
}
|
&:after {
|
||||||
&.timeline-inverted > .timeline-panel {
|
clear: both;
|
||||||
float: right;
|
|
||||||
padding: 0 30px 20px 20px;
|
|
||||||
text-align: left;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@media(min-width:992px) {
|
|
||||||
.timeline {
|
|
||||||
> li {
|
|
||||||
min-height: 150px;
|
|
||||||
.timeline-panel {
|
|
||||||
padding: 0 20px 20px;
|
|
||||||
}
|
|
||||||
.timeline-image {
|
|
||||||
width: 150px;
|
|
||||||
height: 150px;
|
|
||||||
margin-left: -75px;
|
|
||||||
h4 {
|
|
||||||
font-size: 18px;
|
|
||||||
line-height: 26px;
|
|
||||||
margin-top: 30px;
|
|
||||||
}
|
}
|
||||||
}
|
.timeline-panel {
|
||||||
&.timeline-inverted > .timeline-panel {
|
position: relative;
|
||||||
padding: 0 20px 20px;
|
float: right;
|
||||||
}
|
width: 100%;
|
||||||
}
|
padding: 0 20px 0 100px;
|
||||||
}
|
text-align: left;
|
||||||
}
|
&:before {
|
||||||
@media(min-width:1200px) {
|
right: auto;
|
||||||
.timeline {
|
left: -15px;
|
||||||
> li {
|
border-right-width: 15px;
|
||||||
min-height: 170px;
|
border-left-width: 0;
|
||||||
.timeline-panel {
|
}
|
||||||
padding: 0 20px 20px 100px;
|
&:after {
|
||||||
}
|
right: auto;
|
||||||
.timeline-image {
|
left: -14px;
|
||||||
width: 170px;
|
border-right-width: 14px;
|
||||||
height: 170px;
|
border-left-width: 0;
|
||||||
margin-left: -85px;
|
}
|
||||||
h4 {
|
}
|
||||||
margin-top: 40px;
|
.timeline-image {
|
||||||
|
position: absolute;
|
||||||
|
z-index: 100;
|
||||||
|
left: 0;
|
||||||
|
width: 80px;
|
||||||
|
height: 80px;
|
||||||
|
margin-left: 0;
|
||||||
|
text-align: center;
|
||||||
|
color: white;
|
||||||
|
border: 7px solid $gray-200;
|
||||||
|
border-radius: 100%;
|
||||||
|
background-color: $primary;
|
||||||
|
h4 {
|
||||||
|
font-size: 10px;
|
||||||
|
line-height: 14px;
|
||||||
|
margin-top: 12px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.timeline-inverted > .timeline-panel {
|
||||||
|
float: right;
|
||||||
|
padding: 0 20px 0 100px;
|
||||||
|
text-align: left;
|
||||||
|
&:before {
|
||||||
|
right: auto;
|
||||||
|
left: -15px;
|
||||||
|
border-right-width: 15px;
|
||||||
|
border-left-width: 0;
|
||||||
|
}
|
||||||
|
&:after {
|
||||||
|
right: auto;
|
||||||
|
left: -14px;
|
||||||
|
border-right-width: 14px;
|
||||||
|
border-left-width: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&:last-child {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.timeline-heading {
|
||||||
|
h4 {
|
||||||
|
margin-top: 0;
|
||||||
|
color: inherit;
|
||||||
|
&.subheading {
|
||||||
|
text-transform: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.timeline-body {
|
||||||
|
> ul,
|
||||||
|
> p {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media (min-width: 768px) {
|
||||||
|
.timeline {
|
||||||
|
&:before {
|
||||||
|
left: 50%;
|
||||||
|
}
|
||||||
|
> li {
|
||||||
|
min-height: 100px;
|
||||||
|
margin-bottom: 100px;
|
||||||
|
.timeline-panel {
|
||||||
|
float: left;
|
||||||
|
width: 41%;
|
||||||
|
padding: 0 20px 20px 30px;
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
.timeline-image {
|
||||||
|
left: 50%;
|
||||||
|
width: 100px;
|
||||||
|
height: 100px;
|
||||||
|
margin-left: -50px;
|
||||||
|
h4 {
|
||||||
|
font-size: 13px;
|
||||||
|
line-height: 18px;
|
||||||
|
margin-top: 16px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.timeline-inverted > .timeline-panel {
|
||||||
|
float: right;
|
||||||
|
padding: 0 30px 20px 20px;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media (min-width: 992px) {
|
||||||
|
.timeline {
|
||||||
|
> li {
|
||||||
|
min-height: 150px;
|
||||||
|
.timeline-panel {
|
||||||
|
padding: 0 20px 20px;
|
||||||
|
}
|
||||||
|
.timeline-image {
|
||||||
|
width: 150px;
|
||||||
|
height: 150px;
|
||||||
|
margin-left: -75px;
|
||||||
|
h4 {
|
||||||
|
font-size: 18px;
|
||||||
|
line-height: 26px;
|
||||||
|
margin-top: 30px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.timeline-inverted > .timeline-panel {
|
||||||
|
padding: 0 20px 20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media (min-width: 1200px) {
|
||||||
|
.timeline {
|
||||||
|
> li {
|
||||||
|
min-height: 170px;
|
||||||
|
.timeline-panel {
|
||||||
|
padding: 0 20px 20px 100px;
|
||||||
|
}
|
||||||
|
.timeline-image {
|
||||||
|
width: 170px;
|
||||||
|
height: 170px;
|
||||||
|
margin-left: -85px;
|
||||||
|
h4 {
|
||||||
|
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