From 7ddd74c4a27edf032d2ac080916cb7f8f167acb4 Mon Sep 17 00:00:00 2001 From: DaveParr Date: Sat, 31 Oct 2020 19:34:59 +0000 Subject: [PATCH] include missing styling assets --- layouts/partials/js.html | 2 +- static/css/satrday.css | 968 +++++++++++++++++++++++++++++++++++++++ static/js/satrday.js | 82 ++++ 3 files changed, 1051 insertions(+), 1 deletion(-) create mode 100644 static/js/satrday.js diff --git a/layouts/partials/js.html b/layouts/partials/js.html index 19714ea..f7a524a 100644 --- a/layouts/partials/js.html +++ b/layouts/partials/js.html @@ -8,7 +8,7 @@ {{ "" | safeHTML }} - + {{ template "_internal/google_analytics_async.html" . }} diff --git a/static/css/satrday.css b/static/css/satrday.css index 1e95868..24c4185 100644 --- a/static/css/satrday.css +++ b/static/css/satrday.css @@ -1,3 +1,971 @@ +/*! + * Start Bootstrap - Agency Bootstrap Theme (http://startbootstrap.com) + * Code licensed under the Apache License v2.0. + * For details, see http://www.apache.org/licenses/LICENSE-2.0. + */ + + body { + overflow-x: hidden; + font-family: "Roboto Slab","Helvetica Neue",Helvetica,Arial,sans-serif; +} + +.text-muted { + color: #777; +} + +.text-primary { + color: #fed136; +} + +p { + font-size: 14px; + line-height: 1.75; +} + +p.large { + font-size: 16px; +} + +a, +a:hover, +a:focus, +a:active, +a.active { + outline: 0; +} + +a { + color: #fed136; +} + +a:hover, +a:focus, +a:active, +a.active { + color: #fec503; +} + +h1, +h2, +h3, +h4, +h5, +h6 { + text-transform: uppercase; + font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif; + font-weight: 700; +} + +.img-centered { + margin: 0 auto; +} + +.bg-light-gray { + background-color: #f7f7f7; +} + +.bg-darkest-gray { + background-color: #222; +} + +.btn-primary { + border-color: #fed136; + text-transform: uppercase; + font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif; + font-weight: 700; + color: #fff; + background-color: #fed136; +} + +.btn-primary:hover, +.btn-primary:focus, +.btn-primary:active, +.btn-primary.active, +.open .dropdown-toggle.btn-primary { + border-color: #f6bf01; + color: #fff; + background-color: #fec503; +} + +.btn-primary:active, +.btn-primary.active, +.open .dropdown-toggle.btn-primary { + background-image: none; +} + +.btn-primary.disabled, +.btn-primary[disabled], +fieldset[disabled] .btn-primary, +.btn-primary.disabled:hover, +.btn-primary[disabled]:hover, +fieldset[disabled] .btn-primary:hover, +.btn-primary.disabled:focus, +.btn-primary[disabled]:focus, +fieldset[disabled] .btn-primary:focus, +.btn-primary.disabled:active, +.btn-primary[disabled]:active, +fieldset[disabled] .btn-primary:active, +.btn-primary.disabled.active, +.btn-primary[disabled].active, +fieldset[disabled] .btn-primary.active { + border-color: #fed136; + background-color: #fed136; +} + +.btn-primary .badge { + color: #fed136; + background-color: #fff; +} + +.btn-xl { + padding: 20px 40px; + border-color: #fed136; + border-radius: 3px; + text-transform: uppercase; + font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif; + font-size: 18px; + font-weight: 700; + color: #fff; + background-color: #fed136; +} + +.btn-xl:hover, +.btn-xl:focus, +.btn-xl:active, +.btn-xl.active, +.open .dropdown-toggle.btn-xl { + border-color: #f6bf01; + color: #fff; + background-color: #fec503; +} + +.btn-xl:active, +.btn-xl.active, +.open .dropdown-toggle.btn-xl { + background-image: none; +} + +.btn-xl.disabled, +.btn-xl[disabled], +fieldset[disabled] .btn-xl, +.btn-xl.disabled:hover, +.btn-xl[disabled]:hover, +fieldset[disabled] .btn-xl:hover, +.btn-xl.disabled:focus, +.btn-xl[disabled]:focus, +fieldset[disabled] .btn-xl:focus, +.btn-xl.disabled:active, +.btn-xl[disabled]:active, +fieldset[disabled] .btn-xl:active, +.btn-xl.disabled.active, +.btn-xl[disabled].active, +fieldset[disabled] .btn-xl.active { + border-color: #fed136; + background-color: #fed136; +} + +.btn-xl .badge { + color: #fed136; + background-color: #fff; +} + +.navbar-default { + border-color: transparent; + background-color: #222; +} + +.navbar-default .navbar-brand { + font-family: "Kaushan Script","Helvetica Neue",Helvetica,Arial,cursive; + color: #fed136; +} + +.navbar-default .navbar-brand:hover, +.navbar-default .navbar-brand:focus, +.navbar-default .navbar-brand:active, +.navbar-default .navbar-brand.active { + color: #fec503; +} + +.navbar-brand>img { + height: 50px; + max-width: 250px; + margin: -15px; +} + +@media(min-width:768px) { + .navbar-brand>img { + height: 50px; + max-width: 300px; + margin: -15px; + } +} + +@media(min-width:992px) { + .navbar-brand>img { + height: 50px; + max-width: 400px; + margin: -15px; + } +} + +.navbar-default .navbar-collapse { + border-color: rgba(255,255,255,.02); +} + +.navbar-default .navbar-toggle { + border-color: #fed136; + background-color: #fed136; +} + +.navbar-default .navbar-toggle .icon-bar { + background-color: #fff; +} + +.navbar-default .navbar-toggle:hover, +.navbar-default .navbar-toggle:focus { + background-color: #fed136; +} + +.navbar-default .nav li a { + text-transform: uppercase; + font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif; + font-weight: 400; + letter-spacing: 1px; + color: #fff; +} + +.navbar-default .nav li a:hover, +.navbar-default .nav li a:focus { + outline: 0; + color: #fed136; +} + +.navbar-default .navbar-nav>.active>a { + border-radius: 0; + color: #fff; + background-color: #fed136; +} + +.navbar-default .navbar-nav>.active>a:hover, +.navbar-default .navbar-nav>.active>a:focus { + color: #fff; + background-color: #fec503; +} + +@media(min-width:768px) { + .navbar-default { + padding: 25px 0; + border: 0; + background-color: transparent; + -webkit-transition: padding .3s; + -moz-transition: padding .3s; + transition: padding .3s; + } + + .navbar-default .navbar-brand { + font-size: 2em; + -webkit-transition: all .3s; + -moz-transition: all .3s; + transition: all .3s; + } + + .navbar-default .navbar-nav>.active>a { + border-radius: 3px; + } + + .navbar-default.navbar-shrink { + padding: 10px 0; + background-color: #222; + } + + .navbar-default.navbar-shrink .navbar-brand { + font-size: 1.5em; + } +} + +header { + text-align: center; + color: #fff; + background-attachment: scroll; + background-image: url(../img/header-bg.jpg); + background-position: center center; + background-repeat: none; + -webkit-background-size: cover; + -moz-background-size: cover; + background-size: cover; + -o-background-size: cover; +} + +header .intro-text { + padding-top: 100px; + padding-bottom: 50px; +} + +header .intro-text .intro-lead-in { + margin-bottom: 25px; + font-family: "Droid Serif","Helvetica Neue",Helvetica,Arial,sans-serif; + font-size: 22px; + font-style: italic; + line-height: 22px; +} + +header .intro-text .intro-heading { + margin-bottom: 25px; + text-transform: uppercase; + font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif; + font-size: 50px; + font-weight: 700; + line-height: 50px; +} + +@media(min-width:768px) { + header .intro-text { + padding-top: 300px; + padding-bottom: 200px; + } + + header .intro-text .intro-lead-in { + margin-bottom: 25px; + font-family: "Droid Serif","Helvetica Neue",Helvetica,Arial,sans-serif; + font-size: 40px; + font-style: italic; + line-height: 40px; + } + + header .intro-text .intro-heading { + margin-bottom: 50px; + text-transform: uppercase; + font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif; + font-size: 75px; + font-weight: 700; + line-height: 75px; + } +} + +section { + padding: 100px 0; +} + +section h2.section-heading { + margin-top: 0; + margin-bottom: 15px; + font-size: 40px; +} + +section h3.section-subheading { + margin-bottom: 75px; + text-transform: none; + font-family: "Droid Serif","Helvetica Neue",Helvetica,Arial,sans-serif; + font-size: 16px; + font-style: italic; + font-weight: 400; +} + +@media(min-width:768px) { + section { + padding: 150px 0; + } +} + +.service-heading { + margin: 15px 0; + text-transform: none; +} + +#portfolio .portfolio-item { + right: 0; + margin: 0 0 15px; +} + +#portfolio .portfolio-item .portfolio-link { + display: block; + position: relative; + margin: 0 auto; + max-width: 400px; +} + +#portfolio .portfolio-item .portfolio-link img { + height: 240px; +} + +#portfolio .portfolio-item .portfolio-link .portfolio-hover { + position: absolute; + width: 100%; + height: 100%; + opacity: 0; + background: rgba(254,209,54,.9); + -webkit-transition: all ease .5s; + -moz-transition: all ease .5s; + transition: all ease .5s; +} + +#portfolio .portfolio-item .portfolio-link .portfolio-hover:hover { + opacity: 1; +} + +#portfolio .portfolio-item .portfolio-link .portfolio-hover .portfolio-hover-content { + position: absolute; + top: 50%; + width: 100%; + height: 20px; + margin-top: -12px; + text-align: center; + font-size: 20px; + color: #fff; +} + +#portfolio .portfolio-item .portfolio-link .portfolio-hover .portfolio-hover-content i { + margin-top: -12px; +} + +#portfolio .portfolio-item .portfolio-link .portfolio-hover .portfolio-hover-content h3, +#portfolio .portfolio-item .portfolio-link .portfolio-hover .portfolio-hover-content h4 { + margin: 0; +} + +#portfolio .portfolio-item .portfolio-caption { + margin: 0 auto; + padding: 25px; + max-width: 400px; + text-align: center; + background-color: #fff; +} + +#portfolio .portfolio-item .portfolio-caption h4 { + margin: 0; + text-transform: none; +} + +#portfolio .portfolio-item .portfolio-caption p { + margin: 0; + font-family: "Droid Serif","Helvetica Neue",Helvetica,Arial,sans-serif; + font-size: 16px; + font-style: italic; +} + +#portfolio * { + z-index: 2; +} + +@media(min-width:767px) { + #portfolio .portfolio-item { + margin: 0 0 30px; + } +} + +.timeline { + position: relative; + padding: 0; + list-style: none; +} + +.timeline:before { + content: ""; + position: absolute; + top: 0; + bottom: 0; + left: 40px; + width: 2px; + margin-left: -1.5px; + background-color: #f1f1f1; +} + +.timeline>li { + position: relative; + margin-bottom: 50px; + min-height: 50px; +} + +.timeline>li:before, +.timeline>li:after { + content: " "; + display: table; +} + +.timeline>li:after { + clear: both; +} + +.timeline>li .timeline-panel { + float: right; + position: relative; + width: 100%; + padding: 0 20px 0 100px; + text-align: left; +} + +.timeline>li .timeline-panel:before { + right: auto; + left: -15px; + border-right-width: 15px; + border-left-width: 0; +} + +.timeline>li .timeline-panel:after { + right: auto; + left: -14px; + border-right-width: 14px; + border-left-width: 0; +} + +.timeline>li .timeline-image { + z-index: 100; + position: absolute; + left: 0; + width: 80px; + height: 80px; + margin-left: 0; + border: 7px solid #f1f1f1; + border-radius: 100%; + text-align: center; + color: #fff; + background-color: #fed136; +} + +.timeline>li .timeline-image h4 { + margin-top: 12px; + font-size: 10px; + line-height: 14px; +} + +.timeline>li.timeline-inverted>.timeline-panel { + float: right; + padding: 0 20px 0 100px; + text-align: left; +} + +.timeline>li.timeline-inverted>.timeline-panel:before { + right: auto; + left: -15px; + border-right-width: 15px; + border-left-width: 0; +} + +.timeline>li.timeline-inverted>.timeline-panel:after { + right: auto; + left: -14px; + border-right-width: 14px; + border-left-width: 0; +} + +.timeline>li:last-child { + margin-bottom: 0; +} + +.timeline .timeline-heading h4 { + margin-top: 0; + color: inherit; +} + +.timeline .timeline-heading h4.subheading { + text-transform: none; +} + +.timeline .timeline-body>p, +.timeline .timeline-body>ul { + margin-bottom: 0; +} + +@media(min-width:768px) { + .timeline:before { + left: 50%; + } + + .timeline>li { + margin-bottom: 100px; + min-height: 100px; + } + + .timeline>li .timeline-panel { + float: left; + width: 41%; + padding: 0 20px 20px 30px; + text-align: right; + } + + .timeline>li .timeline-image { + left: 50%; + width: 100px; + height: 100px; + margin-left: -50px; + } + + .timeline>li .timeline-image h4 { + margin-top: 16px; + font-size: 13px; + line-height: 18px; + } + + .timeline>li.timeline-inverted>.timeline-panel { + float: right; + padding: 0 30px 20px 20px; + text-align: left; + } +} + +@media(min-width:992px) { + .timeline>li { + min-height: 150px; + } + + .timeline>li .timeline-panel { + padding: 0 20px 20px; + } + + .timeline>li .timeline-image { + width: 150px; + height: 150px; + margin-left: -75px; + } + + .timeline>li .timeline-image h4 { + margin-top: 30px; + font-size: 18px; + line-height: 26px; + } + + .timeline>li.timeline-inverted>.timeline-panel { + padding: 0 20px 20px; + } +} + +@media(min-width:1200px) { + .timeline>li { + min-height: 170px; + } + + .timeline>li .timeline-panel { + padding: 0 20px 20px 100px; + } + + .timeline>li .timeline-image { + width: 170px; + height: 170px; + margin-left: -85px; + } + + .timeline>li .timeline-image h4 { + margin-top: 40px; + } + + .timeline>li.timeline-inverted>.timeline-panel { + padding: 0 100px 20px 20px; + } +} + +.flexbox { + display: -webkit-box; + display: -moz-box; + display: -ms-flexbox; + display: -webkit-flex; + display: flex; + -webkit-flex-flow: row wrap; + flex-flow: row wrap; + justify-content: flex-start; + align-items: stretch; +} + +.flexbox-center { + justify-content: center; +} + +.team-member { + margin-bottom: 50px; + text-align: center; +} + +.team-member img { + margin: 0 auto; + border: 7px solid #fff; +} + +.team-member p { + margin-top: 0; +} +.team-member h3 { + text-transform: none; + font-weight: 600; + color: #333; +} + +.team-member h4 { + font-size: 16px; + text-transform: none; + font-weight: 400; + color: #777; + margin-bottom: 0px; +} + +.team-member h4 a { + text-transform: none; +} + +.team-member h5 { + font-size: 14px; + text-transform: none; + font-style: italic; + font-weight: 200; + color: #777; + margin-bottom: 15px +} + +.team-member .report { + margin-top: 0px; +} + +.team-member h5 a { + text-transform: none; +} + +.team-member ul { + list-style: none; + text-align: center; + margin-top: 15px; + margin-bottom: 15px; + padding: 0; +} + +.team-bio { + padding: 15px +} + +@media(min-width:992px) { + aside.clients img { + margin: 50px auto; + } +} + +aside.clients img { + margin-top: 50px; +} + +aside .heading { + text-transform: none; + color: #777; + margin-top: 20px; + margin-bottom: -40px; +} + +section#contact { + background-color: #222; + background-image: url(../img/map-image.png); + background-position: center; + background-repeat: no-repeat; +} + +section#contact .section-heading { + color: #fff; +} + +section#contact .form-group { + margin-bottom: 25px; +} + +section#contact .form-group input, +section#contact .form-group textarea { + padding: 20px; +} + +section#contact .form-group input.form-control { + height: auto; +} + +section#contact .form-group textarea.form-control { + height: 236px; +} + +section#contact .form-control:focus { + border-color: #fed136; + box-shadow: none; +} + +section#contact::-webkit-input-placeholder { + text-transform: uppercase; + font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif; + font-weight: 700; + color: #bbb; +} + +section#contact:-moz-placeholder { + text-transform: uppercase; + font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif; + font-weight: 700; + color: #bbb; +} + +section#contact::-moz-placeholder { + text-transform: uppercase; + font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif; + font-weight: 700; + color: #bbb; +} + +section#contact:-ms-input-placeholder { + text-transform: uppercase; + font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif; + font-weight: 700; + color: #bbb; +} + +section#contact .text-danger { + color: #e74c3c; +} + +section#contact .text-success { + color: #ffffff; +} + +footer { + padding: 25px 0; + text-align: center; +} + +footer span.copyright { + text-transform: uppercase; + text-transform: none; + font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif; + line-height: 40px; +} + +footer ul.quicklinks { + margin-bottom: 0; + text-transform: uppercase; + text-transform: none; + font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif; + line-height: 40px; +} + +ul.social-buttons { + margin-top: 20px; + margin-bottom: 10px; +} + +ul.social-buttons li a { + display: block; + width: 40px; + height: 40px; + border-radius: 100%; + font-size: 20px; + line-height: 40px; + outline: 0; + color: #fff; + background-color: #222; + -webkit-transition: all .3s; + -moz-transition: all .3s; + transition: all .3s; +} + +ul.social-buttons li a:hover, +ul.social-buttons li a:focus, +ul.social-buttons li a:active { + background-color: #fed136; +} + +.btn:focus, +.btn:active, +.btn.active, +.btn:active:focus { + outline: 0; +} + +.portfolio-modal .modal-content { + padding: 100px 0; + min-height: 100%; + border: 0; + border-radius: 0; + text-align: center; + background-clip: border-box; + -webkit-box-shadow: none; + box-shadow: none; +} + +.portfolio-modal .modal-content h2 { + margin-bottom: 15px; + font-size: 3em; +} + +.portfolio-modal .modal-content p { + margin-bottom: 30px; +} + +.portfolio-modal .modal-content p.item-intro { + margin: 20px 0 30px; + font-family: "Droid Serif","Helvetica Neue",Helvetica,Arial,sans-serif; + font-size: 16px; + font-style: italic; +} + +.portfolio-modal .modal-content ul.list-inline { + margin-top: 0; + margin-bottom: 30px; +} + +.portfolio-modal .modal-content img { + margin-bottom: 30px; +} + +.portfolio-modal .close-modal { + position: absolute; + top: 25px; + right: 25px; + width: 75px; + height: 75px; + background-color: transparent; + cursor: pointer; +} + +.portfolio-modal .close-modal:hover { + opacity: .3; +} + +.portfolio-modal .close-modal .lr { + z-index: 1051; + width: 1px; + height: 75px; + margin-left: 35px; + background-color: #222; + -webkit-transform: rotate(45deg); + -ms-transform: rotate(45deg); + transform: rotate(45deg); +} + +.portfolio-modal .close-modal .lr .rl { + z-index: 1052; + width: 1px; + height: 75px; + background-color: #222; + -webkit-transform: rotate(90deg); + -ms-transform: rotate(90deg); + transform: rotate(90deg); +} + +.portfolio-modal .modal-backdrop { + display: none; + opacity: 0; +} + +::-moz-selection { + text-shadow: none; + background: #fed136; +} + +::selection { + text-shadow: none; + background: #fed136; +} + +img::selection { + background: 0 0; +} + +img::-moz-selection { + background: 0 0; +} + +body { + webkit-tap-highlight-color: #fed136; +} + /* Colours work */ header { diff --git a/static/js/satrday.js b/static/js/satrday.js new file mode 100644 index 0000000..b03d2d2 --- /dev/null +++ b/static/js/satrday.js @@ -0,0 +1,82 @@ +// Smooth scrolling via animate() +$(document).ready(function(){ + if ($('.g-recaptcha')) { + checkReCaptcha() + } + + $("a").on('click', function(event) { + if (this.hash && window.location.pathname == "/") { + event.preventDefault(); + var hash = this.hash; + $('html, body').animate({ + scrollTop: $(hash).offset().top + }, 800, function(){ + window.location.hash = hash; + }); + } + }); + + // Navigation change on scroll + var maxOffset = 300; + $(window).scroll(function() { + if ($(window).scrollTop() >= maxOffset) { + $('.navbar-default').addClass('navbar-shrink'); + } + else { + $('.navbar-default').removeClass('navbar-shrink'); + } + }); + + var maxOffset = 300; + if ($(window).scrollTop() >= maxOffset) { + $('.navbar-default').addClass('navbar-shrink'); + } + else { + $('.navbar-default').removeClass('navbar-shrink'); + } + }); + + // Highlight the top nav as scrolling occurs + $('body').scrollspy({ + target: '.navbar-fixed-top' + }) + + // Closes the Responsive Menu on Menu Item Click + $('.navbar-collapse ul li a').click(function() { + $('.navbar-toggle:visible').click(); + }); + + // Async contact form + $('form[id=contactForm]').submit(function(){ + $.post($(this).attr('action'), $(this).serialize(), function(data, textStatus, jqXHR){ + $('form[id=contactForm] #success').hide(); + $('form[id=contactForm] #error').hide(); + if (jqXHR.status == 200) { + $('form[id=contactForm] #success').show(); + }}).fail(function(){ + $('form[id=contactForm] #success').hide(); + $('form[id=contactForm] #error').hide(); + $('form[id=contactForm] #error').show(); + }); + return false; + }); + + // Contact form validation + $.validate({ + modules : 'html5, toggleDisabled' + }); + + function onContactCaptcha($form) { + $('form#contactForm').submit(); + } + + function checkReCaptcha() { + if (typeof grecaptcha === "undefined") { + $('.captcha-error').show(); + setTimeout(checkReCaptcha, 200); + } else { + $('.captcha-error').hide(); + $('.g-recaptcha-filler').hide(); + $('.g-recaptcha').attr('disabled', true); + } + } \ No newline at end of file