SCSS cleanup and reorganization, editor config added
This commit is contained in:
David Miller
parent
7e90e736af
commit
ba21034d7c
13
.editorconfig
Normal file
13
.editorconfig
Normal file
@ -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
|
||||
1
dist/assets/img/logo.svg
vendored
Normal file
1
dist/assets/img/logo.svg
vendored
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 14 KiB |
1
dist/assets/img/navbar-logo.svg
vendored
Normal file
1
dist/assets/img/navbar-logo.svg
vendored
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 14 KiB |
442
dist/css/styles.css
vendored
442
dist/css/styles.css
vendored
File diff suppressed because it is too large
Load Diff
75
dist/index.html
vendored
75
dist/index.html
vendored
@ -5,12 +5,12 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
|
||||
<meta name="description" 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)-->
|
||||
<script src="https://use.fontawesome.com/releases/v5.12.1/js/all.js" crossorigin="anonymous"></script>
|
||||
<!-- 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=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=Roboto+Slab:400,100,300,700" rel="stylesheet" type="text/css" />
|
||||
<!-- Core theme CSS (includes Bootstrap)-->
|
||||
@ -20,7 +20,7 @@
|
||||
<!-- Navigation-->
|
||||
<nav class="navbar navbar-expand-lg navbar-dark fixed-top" id="mainNav">
|
||||
<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">
|
||||
<ul class="navbar-nav text-uppercase ml-auto">
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-lg-12">
|
||||
<form id="contactForm" name="sentMessage" novalidate="novalidate">
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<div class="form-group">
|
||||
<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>
|
||||
<form id="contactForm" name="sentMessage" novalidate="novalidate">
|
||||
<div class="row align-items-stretch mb-5">
|
||||
<div class="col-md-6">
|
||||
<div class="form-group">
|
||||
<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>
|
||||
</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 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>
|
||||
</section>
|
||||
<!-- Footer-->
|
||||
@ -398,7 +393,7 @@
|
||||
<li>Client: Threads</li>
|
||||
<li>Category: Illustration</li>
|
||||
</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>
|
||||
@ -427,7 +422,7 @@
|
||||
<li>Client: Explore</li>
|
||||
<li>Category: Graphic Design</li>
|
||||
</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>
|
||||
@ -456,7 +451,7 @@
|
||||
<li>Client: Finish</li>
|
||||
<li>Category: Identity</li>
|
||||
</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>
|
||||
@ -485,7 +480,7 @@
|
||||
<li>Client: Lines</li>
|
||||
<li>Category: Branding</li>
|
||||
</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>
|
||||
@ -514,7 +509,7 @@
|
||||
<li>Client: Southwest</li>
|
||||
<li>Category: Website Design</li>
|
||||
</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>
|
||||
@ -543,7 +538,7 @@
|
||||
<li>Client: Window</li>
|
||||
<li>Category: Photography</li>
|
||||
</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>
|
||||
|
||||
83
dist/js/scripts.js
vendored
83
dist/js/scripts.js
vendored
@ -3,45 +3,54 @@
|
||||
* Copyright 2013-2020 Start Bootstrap
|
||||
* Licensed under MIT (https://github.com/BlackrockDigital/startbootstrap-agency/blob/master/LICENSE)
|
||||
*/
|
||||
(function($) {
|
||||
"use strict"; // Start of use strict
|
||||
(function ($) {
|
||||
"use strict"; // Start of use strict
|
||||
|
||||
// Smooth scrolling using jQuery easing
|
||||
$('a.js-scroll-trigger[href*="#"]:not([href="#"])').click(function() {
|
||||
if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
|
||||
var target = $(this.hash);
|
||||
target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
|
||||
if (target.length) {
|
||||
$('html, body').animate({
|
||||
scrollTop: (target.offset().top - 54)
|
||||
}, 1000, "easeInOutExpo");
|
||||
return false;
|
||||
}
|
||||
}
|
||||
});
|
||||
// Smooth scrolling using jQuery easing
|
||||
$('a.js-scroll-trigger[href*="#"]:not([href="#"])').click(function () {
|
||||
if (
|
||||
location.pathname.replace(/^\//, "") ==
|
||||
this.pathname.replace(/^\//, "") &&
|
||||
location.hostname == this.hostname
|
||||
) {
|
||||
var target = $(this.hash);
|
||||
target = target.length
|
||||
? 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
|
||||
$('.js-scroll-trigger').click(function() {
|
||||
$('.navbar-collapse').collapse('hide');
|
||||
});
|
||||
// Closes responsive menu when a scroll trigger link is clicked
|
||||
$(".js-scroll-trigger").click(function () {
|
||||
$(".navbar-collapse").collapse("hide");
|
||||
});
|
||||
|
||||
// Activate scrollspy to add active class to navbar items on scroll
|
||||
$('body').scrollspy({
|
||||
target: '#mainNav',
|
||||
offset: 56
|
||||
});
|
||||
|
||||
// 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);
|
||||
// Activate scrollspy to add active class to navbar items on scroll
|
||||
$("body").scrollspy({
|
||||
target: "#mainNav",
|
||||
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);
|
||||
})(jQuery); // End of use strict
|
||||
|
||||
1
src/assets/img/navbar-logo.svg
Normal file
1
src/assets/img/navbar-logo.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 14 KiB |
@ -1,42 +1,51 @@
|
||||
(function($) {
|
||||
"use strict"; // Start of use strict
|
||||
(function ($) {
|
||||
"use strict"; // Start of use strict
|
||||
|
||||
// Smooth scrolling using jQuery easing
|
||||
$('a.js-scroll-trigger[href*="#"]:not([href="#"])').click(function() {
|
||||
if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
|
||||
var target = $(this.hash);
|
||||
target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
|
||||
if (target.length) {
|
||||
$('html, body').animate({
|
||||
scrollTop: (target.offset().top - 54)
|
||||
}, 1000, "easeInOutExpo");
|
||||
return false;
|
||||
}
|
||||
}
|
||||
});
|
||||
// Smooth scrolling using jQuery easing
|
||||
$('a.js-scroll-trigger[href*="#"]:not([href="#"])').click(function () {
|
||||
if (
|
||||
location.pathname.replace(/^\//, "") ==
|
||||
this.pathname.replace(/^\//, "") &&
|
||||
location.hostname == this.hostname
|
||||
) {
|
||||
var target = $(this.hash);
|
||||
target = target.length
|
||||
? 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
|
||||
$('.js-scroll-trigger').click(function() {
|
||||
$('.navbar-collapse').collapse('hide');
|
||||
});
|
||||
// Closes responsive menu when a scroll trigger link is clicked
|
||||
$(".js-scroll-trigger").click(function () {
|
||||
$(".navbar-collapse").collapse("hide");
|
||||
});
|
||||
|
||||
// Activate scrollspy to add active class to navbar items on scroll
|
||||
$('body').scrollspy({
|
||||
target: '#mainNav',
|
||||
offset: 56
|
||||
});
|
||||
|
||||
// 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);
|
||||
// Activate scrollspy to add active class to navbar items on scroll
|
||||
$("body").scrollspy({
|
||||
target: "#mainNav",
|
||||
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);
|
||||
})(jQuery); // End of use strict
|
||||
|
||||
@ -8,14 +8,15 @@ html(lang='en')
|
||||
meta(name='description', 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)
|
||||
script(src='https://use.fontawesome.com/releases/v5.12.1/js/all.js', crossorigin='anonymous')
|
||||
|
||||
// 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=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=Roboto+Slab:400,100,300,700', rel='stylesheet', type='text/css')
|
||||
|
||||
@ -27,10 +28,11 @@ html(lang='en')
|
||||
// Navigation
|
||||
nav#mainNav.navbar.navbar-expand-lg.navbar-dark.fixed-top
|
||||
.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')
|
||||
| Menu
|
||||
i.fas.fa-bars
|
||||
i.fas.fa-bars.ml-1
|
||||
#navbarResponsive.collapse.navbar-collapse
|
||||
ul.navbar-nav.text-uppercase.ml-auto
|
||||
li.nav-item
|
||||
@ -286,28 +288,25 @@ html(lang='en')
|
||||
.col-lg-12.text-center
|
||||
h2.section-heading.text-uppercase Contact Us
|
||||
h3.section-subheading.text-muted Lorem ipsum dolor sit amet consectetur.
|
||||
.row
|
||||
.col-lg-12
|
||||
form#contactForm(name='sentMessage', novalidate='novalidate')
|
||||
.row
|
||||
.col-md-6
|
||||
.form-group
|
||||
input#name.form-control(type='text', placeholder='Your Name *', required='required', data-validation-required-message='Please enter your name.')
|
||||
p.help-block.text-danger
|
||||
.form-group
|
||||
input#email.form-control(type='email', placeholder='Your Email *', required='required', data-validation-required-message='Please enter your email address.')
|
||||
p.help-block.text-danger
|
||||
.form-group
|
||||
input#phone.form-control(type='tel', placeholder='Your Phone *', required='required', data-validation-required-message='Please enter your phone number.')
|
||||
p.help-block.text-danger
|
||||
.col-md-6
|
||||
.form-group
|
||||
textarea#message.form-control(placeholder='Your Message *', required='required', data-validation-required-message='Please enter a message.')
|
||||
p.help-block.text-danger
|
||||
.clearfix
|
||||
.col-lg-12.text-center
|
||||
#success
|
||||
button#sendMessageButton.btn.btn-primary.btn-xl.text-uppercase(type='submit') Send Message
|
||||
form#contactForm(name='sentMessage', novalidate='novalidate')
|
||||
.row.align-items-stretch.mb-5
|
||||
.col-md-6
|
||||
.form-group
|
||||
input#name.form-control(type='text', placeholder='Your Name *', required='required', data-validation-required-message='Please enter your name.')
|
||||
p.help-block.text-danger
|
||||
.form-group
|
||||
input#email.form-control(type='email', placeholder='Your Email *', required='required', data-validation-required-message='Please enter your email address.')
|
||||
p.help-block.text-danger
|
||||
.form-group.mb-md-0
|
||||
input#phone.form-control(type='tel', placeholder='Your Phone *', required='required', data-validation-required-message='Please enter your phone number.')
|
||||
p.help-block.text-danger
|
||||
.col-md-6
|
||||
.form-group.form-group-textarea.mb-md-0
|
||||
textarea#message.form-control(placeholder='Your Message *', required='required', data-validation-required-message='Please enter a message.')
|
||||
p.help-block.text-danger
|
||||
.text-center
|
||||
#success
|
||||
button#sendMessageButton.btn.btn-primary.btn-xl.text-uppercase(type='submit') Send Message
|
||||
|
||||
// Footer
|
||||
footer.footer
|
||||
@ -356,7 +355,7 @@ html(lang='en')
|
||||
li Client: Threads
|
||||
li Category: Illustration
|
||||
button.btn.btn-primary(data-dismiss='modal', type='button')
|
||||
i.fas.fa-times
|
||||
i.fas.fa-times.mr-1
|
||||
| Close Project
|
||||
// Modal 2
|
||||
#portfolioModal2.portfolio-modal.modal.fade(tabindex='-1', role='dialog', aria-hidden='true')
|
||||
@ -380,7 +379,7 @@ html(lang='en')
|
||||
li Client: Explore
|
||||
li Category: Graphic Design
|
||||
button.btn.btn-primary(data-dismiss='modal', type='button')
|
||||
i.fas.fa-times
|
||||
i.fas.fa-times.mr-1
|
||||
| Close Project
|
||||
// Modal 3
|
||||
#portfolioModal3.portfolio-modal.modal.fade(tabindex='-1', role='dialog', aria-hidden='true')
|
||||
@ -404,7 +403,7 @@ html(lang='en')
|
||||
li Client: Finish
|
||||
li Category: Identity
|
||||
button.btn.btn-primary(data-dismiss='modal', type='button')
|
||||
i.fas.fa-times
|
||||
i.fas.fa-times.mr-1
|
||||
| Close Project
|
||||
// Modal 4
|
||||
#portfolioModal4.portfolio-modal.modal.fade(tabindex='-1', role='dialog', aria-hidden='true')
|
||||
@ -428,7 +427,7 @@ html(lang='en')
|
||||
li Client: Lines
|
||||
li Category: Branding
|
||||
button.btn.btn-primary(data-dismiss='modal', type='button')
|
||||
i.fas.fa-times
|
||||
i.fas.fa-times.mr-1
|
||||
| Close Project
|
||||
// Modal 5
|
||||
#portfolioModal5.portfolio-modal.modal.fade(tabindex='-1', role='dialog', aria-hidden='true')
|
||||
@ -452,7 +451,7 @@ html(lang='en')
|
||||
li Client: Southwest
|
||||
li Category: Website Design
|
||||
button.btn.btn-primary(data-dismiss='modal', type='button')
|
||||
i.fas.fa-times
|
||||
i.fas.fa-times.mr-1
|
||||
| Close Project
|
||||
// Modal 6
|
||||
#portfolioModal6.portfolio-modal.modal.fade(tabindex='-1', role='dialog', aria-hidden='true')
|
||||
@ -476,7 +475,7 @@ html(lang='en')
|
||||
li Client: Window
|
||||
li Category: Photography
|
||||
button.btn.btn-primary(data-dismiss='modal', type='button')
|
||||
i.fas.fa-times
|
||||
i.fas.fa-times.mr-1
|
||||
| Close Project
|
||||
|
||||
// Bootstrap core JS
|
||||
|
||||
49
src/scss/_global.scss
Normal file
49
src/scss/_global.scss
Normal file
@ -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;
|
||||
}
|
||||
4
src/scss/_variables.scss
Normal file
4
src/scss/_variables.scss
Normal file
@ -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
|
||||
|
||||
.btn-xl {
|
||||
@include heading-font;
|
||||
font-weight: 700;
|
||||
font-size: 1.125rem;
|
||||
padding: 1.25rem 2.5rem;
|
||||
}
|
||||
padding: 1.25rem 2.5rem;
|
||||
font-family: $headings-font-family;
|
||||
font-size: 1.125rem;
|
||||
font-weight: $headings-font-weight;
|
||||
}
|
||||
|
||||
@ -1,73 +1,78 @@
|
||||
// Styling for the navbar
|
||||
#mainNav {
|
||||
background-color: $gray-900;
|
||||
.navbar-toggler {
|
||||
font-size: 12px;
|
||||
right: 0;
|
||||
padding: 13px;
|
||||
text-transform: uppercase;
|
||||
color: white;
|
||||
border: 0;
|
||||
background-color: $primary;
|
||||
@include heading-font;
|
||||
}
|
||||
.navbar-brand {
|
||||
color: $primary;
|
||||
@include script-font;
|
||||
&.active,
|
||||
&:active,
|
||||
&:focus,
|
||||
&:hover {
|
||||
color: darken($primary, 10%);
|
||||
padding-top: 1rem;
|
||||
padding-bottom: 1rem;
|
||||
background-color: $gray-900;
|
||||
.navbar-toggler {
|
||||
padding: 0.75rem;
|
||||
font-family: $headings-font-family;
|
||||
font-size: 0.75rem;
|
||||
color: $white;
|
||||
text-transform: uppercase;
|
||||
background-color: $primary;
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
.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 {
|
||||
font-size: 1.75em;
|
||||
-webkit-transition: all 0.3s;
|
||||
-moz-transition: all 0.3s;
|
||||
transition: all 0.3s;
|
||||
color: $primary;
|
||||
font-family: $headings-font-family;
|
||||
font-weight: $headings-font-weight;
|
||||
letter-spacing: $headings-letter-spacing;
|
||||
text-transform: uppercase;
|
||||
img {
|
||||
height: 1.5rem;
|
||||
}
|
||||
}
|
||||
.navbar-nav {
|
||||
.nav-item {
|
||||
.nav-link {
|
||||
padding: 1.1em 1em !important;
|
||||
.nav-item {
|
||||
.nav-link {
|
||||
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
|
||||
section#contact {
|
||||
background-color: $gray-900;
|
||||
background-image: url('../assets/img/map-image.png');
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
.section-heading {
|
||||
color: $white;
|
||||
}
|
||||
.form-group {
|
||||
margin-bottom: 25px;
|
||||
input,
|
||||
textarea {
|
||||
padding: 20px;
|
||||
background-color: $gray-900;
|
||||
background-image: url("../assets/img/map-image.png");
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
.section-heading {
|
||||
color: $white;
|
||||
}
|
||||
input.form-control {
|
||||
height: auto;
|
||||
form#contactForm {
|
||||
.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
|
||||
.footer {
|
||||
padding: 25px 0;
|
||||
text-align: center;
|
||||
span.copyright {
|
||||
font-size: 90%;
|
||||
line-height: 40px;
|
||||
text-transform: none;
|
||||
@include heading-font;
|
||||
}
|
||||
ul.quicklinks {
|
||||
font-size: 90%;
|
||||
line-height: 40px;
|
||||
margin-bottom: 0;
|
||||
text-transform: none;
|
||||
@include heading-font;
|
||||
}
|
||||
padding: 25px 0;
|
||||
text-align: center;
|
||||
span.copyright {
|
||||
font-size: 90%;
|
||||
line-height: 40px;
|
||||
text-transform: none;
|
||||
font-family: $headings-font-family;
|
||||
}
|
||||
ul.quicklinks {
|
||||
font-size: 90%;
|
||||
line-height: 40px;
|
||||
margin-bottom: 0;
|
||||
text-transform: none;
|
||||
font-family: $headings-font-family;
|
||||
}
|
||||
}
|
||||
|
||||
ul.social-buttons {
|
||||
margin-bottom: 0;
|
||||
li {
|
||||
a {
|
||||
font-size: 20px;
|
||||
line-height: 50px;
|
||||
display: block;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
-webkit-transition: all 0.3s;
|
||||
-moz-transition: all 0.3s;
|
||||
transition: all 0.3s;
|
||||
color: white;
|
||||
border-radius: 100%;
|
||||
outline: none;
|
||||
background-color: $gray-900;
|
||||
&:active,
|
||||
&:focus,
|
||||
&:hover {
|
||||
background-color: $primary;
|
||||
}
|
||||
margin-bottom: 0;
|
||||
li {
|
||||
a {
|
||||
font-size: 20px;
|
||||
line-height: 50px;
|
||||
display: block;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
-webkit-transition: all 0.3s;
|
||||
-moz-transition: all 0.3s;
|
||||
transition: all 0.3s;
|
||||
color: $white;
|
||||
border-radius: 100%;
|
||||
outline: none;
|
||||
background-color: $gray-900;
|
||||
&:active,
|
||||
&:focus,
|
||||
&:hover {
|
||||
background-color: $primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,50 +1,48 @@
|
||||
// Styling for the masthead
|
||||
header.masthead {
|
||||
text-align: center;
|
||||
color: white;
|
||||
background-image: url('../assets/img/header-bg.jpg');
|
||||
background-repeat: no-repeat;
|
||||
background-attachment: scroll;
|
||||
background-position: center center;
|
||||
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 {
|
||||
text-align: center;
|
||||
color: $white;
|
||||
background-image: url("../assets/img/header-bg.jpg");
|
||||
background-repeat: no-repeat;
|
||||
background-attachment: scroll;
|
||||
background-position: center center;
|
||||
background-size: cover;
|
||||
.intro-text {
|
||||
padding-top: 300px;
|
||||
padding-bottom: 200px;
|
||||
.intro-lead-in {
|
||||
font-size: 40px;
|
||||
font-style: italic;
|
||||
line-height: 40px;
|
||||
margin-bottom: 25px;
|
||||
@include serif-font;
|
||||
}
|
||||
.intro-heading {
|
||||
font-size: 75px;
|
||||
font-weight: 700;
|
||||
line-height: 75px;
|
||||
margin-bottom: 50px;
|
||||
@include heading-font;
|
||||
}
|
||||
padding-top: 150px;
|
||||
padding-bottom: 100px;
|
||||
.intro-lead-in {
|
||||
font-size: 22px;
|
||||
font-style: italic;
|
||||
line-height: 22px;
|
||||
margin-bottom: 25px;
|
||||
font-family: $subheadings-font-family;
|
||||
}
|
||||
.intro-heading {
|
||||
font-size: 50px;
|
||||
font-weight: 700;
|
||||
line-height: 50px;
|
||||
margin-bottom: 25px;
|
||||
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
|
||||
#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 {
|
||||
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 {
|
||||
.modal-dialog {
|
||||
margin: 1rem;
|
||||
max-width: 100vw;
|
||||
}
|
||||
.modal-content {
|
||||
padding: 100px 0;
|
||||
text-align: center;
|
||||
h2 {
|
||||
font-size: 3em;
|
||||
margin-bottom: 15px;
|
||||
.modal-dialog {
|
||||
margin: 1rem;
|
||||
max-width: 100vw;
|
||||
}
|
||||
p {
|
||||
margin-bottom: 30px;
|
||||
.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;
|
||||
font-family: $subheadings-font-family;
|
||||
}
|
||||
ul.list-inline {
|
||||
margin-top: 0;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
img {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
button {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
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;
|
||||
}
|
||||
}
|
||||
.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;
|
||||
.close-modal {
|
||||
position: absolute;
|
||||
top: 25px;
|
||||
right: 25px;
|
||||
width: 75px;
|
||||
height: 75px;
|
||||
/* IE 9 */
|
||||
-webkit-transform: rotate(90deg);
|
||||
-ms-transform: rotate(90deg);
|
||||
transform: rotate(90deg);
|
||||
background-color: $gray-900;
|
||||
}
|
||||
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;
|
||||
/* 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
|
||||
.service-heading {
|
||||
margin: 15px 0;
|
||||
text-transform: none;
|
||||
margin: 15px 0;
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
@ -1,18 +1,18 @@
|
||||
// Styling for the team section
|
||||
.team-member {
|
||||
margin-bottom: 50px;
|
||||
text-align: center;
|
||||
img {
|
||||
width: 225px;
|
||||
height: 225px;
|
||||
border: 7px solid fade-out($black, 0.9);
|
||||
}
|
||||
h4 {
|
||||
margin-top: 25px;
|
||||
margin-bottom: 0;
|
||||
text-transform: none;
|
||||
}
|
||||
p {
|
||||
margin-top: 0;
|
||||
}
|
||||
margin-bottom: 50px;
|
||||
text-align: center;
|
||||
img {
|
||||
width: 225px;
|
||||
height: 225px;
|
||||
border: 7px solid fade-out($black, 0.9);
|
||||
}
|
||||
h4 {
|
||||
margin-top: 25px;
|
||||
margin-bottom: 0;
|
||||
text-transform: none;
|
||||
}
|
||||
p {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,178 +1,178 @@
|
||||
// Styling for the timeline section
|
||||
.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;
|
||||
min-height: 50px;
|
||||
margin-bottom: 50px;
|
||||
&:after,
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
&:before {
|
||||
display: table;
|
||||
content: ' ';
|
||||
}
|
||||
&:after {
|
||||
clear: both;
|
||||
}
|
||||
.timeline-panel {
|
||||
position: relative;
|
||||
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%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 40px;
|
||||
width: 2px;
|
||||
margin-left: -1.5px;
|
||||
content: "";
|
||||
background-color: $gray-200;
|
||||
}
|
||||
> 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;
|
||||
position: relative;
|
||||
min-height: 50px;
|
||||
margin-bottom: 50px;
|
||||
&:after,
|
||||
&:before {
|
||||
display: table;
|
||||
content: " ";
|
||||
}
|
||||
}
|
||||
&.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;
|
||||
&:after {
|
||||
clear: both;
|
||||
}
|
||||
}
|
||||
&.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-panel {
|
||||
position: relative;
|
||||
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 {
|
||||
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 "base/variables.scss";
|
||||
@import "base/mixins.scss";
|
||||
// Import variables
|
||||
@import "./variables.scss";
|
||||
|
||||
// Import Bootstrap
|
||||
@import "bootstrap/scss/bootstrap.scss";
|
||||
|
||||
// Global CSS
|
||||
@import "base/page.scss";
|
||||
@import "./global.scss";
|
||||
|
||||
// Components
|
||||
@import "components/buttons.scss";
|
||||
@import "components/navbar.scss";
|
||||
@import "./components/buttons.scss";
|
||||
@import "./components/navbar.scss";
|
||||
|
||||
// Layout
|
||||
@import "layout/masthead.scss";
|
||||
@import "layout/services.scss";
|
||||
@import "layout/portfolio.scss";
|
||||
@import "layout/timeline.scss";
|
||||
@import "layout/team.scss";
|
||||
@import "layout/contact.scss";
|
||||
@import "layout/footer.scss";
|
||||
@import "./layout/masthead.scss";
|
||||
@import "./layout/services.scss";
|
||||
@import "./layout/portfolio.scss";
|
||||
@import "./layout/timeline.scss";
|
||||
@import "./layout/team.scss";
|
||||
@import "./layout/contact.scss";
|
||||
@import "./layout/footer.scss";
|
||||
|
||||
11
src/scss/variables/_colors.scss
Normal file
11
src/scss/variables/_colors.scss
Normal file
@ -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;
|
||||
5
src/scss/variables/_grid.scss
Normal file
5
src/scss/variables/_grid.scss
Normal file
@ -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;
|
||||
7
src/scss/variables/_spacing.scss
Normal file
7
src/scss/variables/_spacing.scss
Normal file
@ -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;
|
||||
20
src/scss/variables/_typography.scss
Normal file
20
src/scss/variables/_typography.scss
Normal file
@ -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
Block a user