Browse Source

modified preloader and navigation

tags/v1.0.0
Somrat 6 years ago
parent
commit
7d1dc3db62
4 changed files with 274 additions and 239 deletions
  1. 1
    1
      layouts/partials/contact.html
  2. 18
    7
      layouts/partials/navigation.html
  3. 93
    68
      static/css/style.css
  4. 162
    163
      static/js/script.js

+ 1
- 1
layouts/partials/contact.html View File

@@ -6,7 +6,7 @@

{{"<!-- section title -->" | safeHTML}}
<div class="title text-center wow fadeIn" data-wow-duration="500ms">
<h2>{{ with .Site.Data.contact.heading }} {{ . }} {{ end }} <span class="color">{{ with .Site.Data.contact.heading }} {{ . }} {{ end }}</span></h2>
<h2>{{ with .Site.Data.contact.heading }} {{ . }} {{ end }} <span class="color">{{ with .Site.Data.contact.headingSpan }} {{ . }} {{ end }}</span></h2>
<div class="border"></div>
</div>
{{"<!-- /section title -->" | safeHTML}}

+ 18
- 7
layouts/partials/navigation.html View File

@@ -19,14 +19,25 @@
</div>

{{"<!-- main nav -->" | safeHTML}}
{{ if .IsHome }}
<nav class="collapse navbar-collapse navbar-right" role="Navigation">
<ul id="nav" class="nav navbar-nav navigation-menu">
<li><a data-scroll href="#body">{{ with .Site.Params.home }}{{ . }}{{ end }}</a></li>
{{ range .Site.Menus.nav }}
<li><a data-scroll href="#{{ .URL }}">{{ .Name }}</a></li>
{{ end }}
</ul>
</nav>
<ul id="nav" class="nav navbar-nav navigation-menu">
<li><a data-scroll href="#body">{{ with $.Site.Params.home }}{{ . }}{{ end }}</a></li>
{{ range $.Site.Menus.nav }}
<li><a data-scroll href="#{{ .URL }}">{{ .Name }}</a></li>
{{ end }}
</ul>
</nav>
{{ else }}
<nav class="collapse navbar-collapse navbar-right" role="Navigation">
<ul id="nav" class="nav navbar-nav navigation-menu">
<li><a data-scroll href="{{ $.Site.BaseURL }}#body">{{ with $.Site.Params.home }}{{ . }}{{ end }}</a></li>
{{ range $.Site.Menus.nav }}
<li><a data-scroll href="{{ $.Site.BaseURL }}#{{ .URL }}">{{ .Name }}</a></li>
{{ end }}
</ul>
</nav>
{{ end }}
{{"<!-- /main nav -->" | safeHTML}}

</div>

+ 93
- 68
static/css/style.css View File

@@ -9,6 +9,7 @@ Tags: one-page, single-page, portfolio, custom-colors, post-formats, responsive,
/*=== MEDIA QUERY ===*/
@import url("https://fonts.googleapis.com/css?family=Anaheim|Quattrocento+Sans:400,700");
@import url("https://fonts.googleapis.com/css?family=Montserrat:400,700|Open+Sans:300,400,600");

html {
background-color: #353b43;
color: #737f8a;
@@ -21,7 +22,12 @@ body {
-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
h1,
h2,
h3,
h4,
h5,
h6 {
font-weight: 400;
font-family: "Quattrocento Sans", sans-serif;
color: #afbac4;
@@ -45,7 +51,8 @@ p {
background: #57cbcc;
}

ol, ul {
ol,
ul {
margin: 0;
padding: 0;
list-style: none;
@@ -64,12 +71,15 @@ iframe {
border: 0;
}

a, a:focus, a:hover {
a,
a:focus,
a:hover {
text-decoration: none;
outline: 0;
}

a:focus, a:hover {
a:focus,
a:hover {
color: #6CB670;
}

@@ -81,6 +91,10 @@ a:focus, a:hover {
padding: 0 !important;
}

.mb-50{
margin-bottom: 50px;
}

.btn {
background-color: transparent;
color: #fff;
@@ -97,7 +111,8 @@ a:focus, a:hover {
border: 1px solid #4e595f;
}

.btn-transparent:hover, .btn-transparent:focus {
.btn-transparent:hover,
.btn-transparent:focus {
background-color: #57cbcc;
border: 1px solid transparent;
color: #fff;
@@ -184,7 +199,7 @@ a:focus, a:hover {
padding: 0 0 50px;
}

.sub-title > h3 {
.sub-title>h3 {
border-left: 3px solid #ddd;
border-right: 3px solid #ddd;
display: inline-block;
@@ -192,7 +207,9 @@ a:focus, a:hover {
text-transform: uppercase;
}

.btn.active:focus, .btn:active:focus, .btn:focus {
.btn.active:focus,
.btn:active:focus,
.btn:focus {
outline: 0;
}

@@ -219,7 +236,8 @@ a:focus, a:hover {
display: inline-block;
}

ol, ul {
ol,
ul {
margin: 0;
padding: 0;
list-style: none;
@@ -229,10 +247,6 @@ figure {
margin: 0;
}

.mb-50{
margin-bottom: 50px;
}

a {
transition: all .2s ease-in 0s;
}
@@ -241,12 +255,15 @@ iframe {
border: 0;
}

a, a:focus, a:hover {
a,
a:focus,
a:hover {
text-decoration: none;
outline: 0;
}

a:focus, a:hover {
a:focus,
a:hover {
color: #57cbcc;
}

@@ -301,7 +318,9 @@ a:focus, a:hover {
position: relative;
}

.btn.active:focus, .btn:active:focus, .btn:focus {
.btn.active:focus,
.btn:active:focus,
.btn:focus {
outline: 0;
}

@@ -313,25 +332,16 @@ a:focus, a:hover {
}

#preloader {
background: #fff;
height: 100%;
left: 0;
opacity: 1;
filter: alpha(opacity=100);
position: fixed;
text-align: center;
top: 0;
width: 100%;
z-index: 999999999;
}

.preloader {
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
position: absolute;
left: 0;
right: 0;
bottom: 0;
background-color: #fff;
z-index: 999;
display: flex;
align-items: center;
justify-content: center;
}

.sk-cube-grid {
@@ -395,10 +405,14 @@ a:focus, a:hover {
}

@-webkit-keyframes sk-cubeGridScaleDelay {
0%, 70%, 100% {

0%,
70%,
100% {
-webkit-transform: scale3D(1, 1, 1);
transform: scale3D(1, 1, 1);
}

35% {
-webkit-transform: scale3D(0, 0, 1);
transform: scale3D(0, 0, 1);
@@ -406,10 +420,14 @@ a:focus, a:hover {
}

@keyframes sk-cubeGridScaleDelay {
0%, 70%, 100% {

0%,
70%,
100% {
-webkit-transform: scale3D(1, 1, 1);
transform: scale3D(1, 1, 1);
}

35% {
-webkit-transform: scale3D(0, 0, 1);
transform: scale3D(0, 0, 1);
@@ -465,7 +483,8 @@ a:focus, a:hover {
background: transparent;
}

.header-bradcrumb a, .header-bradcrumb .active {
.header-bradcrumb a,
.header-bradcrumb .active {
color: #cfcfcf;
font-weight: 200;
font-family: "Quattrocento Sans", sans-serif;
@@ -547,7 +566,8 @@ a:focus, a:hover {
color: #737f8a;
}

.navigation .navigation-menu li a:hover, .navigation .navigation-menu li a:focus {
.navigation .navigation-menu li a:hover,
.navigation .navigation-menu li a:focus {
background: transparent;
color: #57cbcc;
}
@@ -698,7 +718,7 @@ a:focus, a:hover {

.about .block:hover .icon-box {
-webkit-transform: translateY(-10px);
transform: translateY(-10px);
transform: translateY(-10px);
}

.about .block .icon-box {
@@ -712,14 +732,15 @@ a:focus, a:hover {
border-right: 2px solid rgba(236, 239, 241, 0.07);
font-size: 50px;
-webkit-transform: translateZ(0px);
transform: translateZ(0px);
transform: translateZ(0px);
transition-duration: 0.3s;
transition-property: -webkit-transform;
transition-property: transform;
transition-property: transform, -webkit-transform;
}

.about .block .icon-box:after, .about .block .icon-box:before {
.about .block .icon-box:after,
.about .block .icon-box:before {
content: "";
position: absolute;
z-index: 1;
@@ -728,7 +749,7 @@ a:focus, a:hover {
background-color: inherit;
left: 20.4315px;
-webkit-transform: scaleY(0.5774) rotate(-45deg);
transform: scaleY(0.5774) rotate(-45deg);
transform: scaleY(0.5774) rotate(-45deg);
}

.about .block .icon-box:before {
@@ -1037,7 +1058,7 @@ a:focus, a:hover {
left: 50%;
opacity: 0;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
z-index: 9;
transition: all 0.2s ease-in-out;
text-align: center;
@@ -1154,7 +1175,7 @@ a:focus, a:hover {
opacity: 1;
filter: alpha(opacity=100);
-webkit-transform: rotateY(0deg) scale(1, 1);
transform: rotateY(0deg) scale(1, 1);
transform: rotateY(0deg) scale(1, 1);
}

.member-photo {
@@ -1170,7 +1191,7 @@ a:focus, a:hover {

.member-photo:hover img {
-webkit-transform: scale(1.2);
transform: scale(1.2);
transform: scale(1.2);
}

.member-photo img {
@@ -1195,7 +1216,7 @@ a:focus, a:hover {
filter: alpha(opacity=0);
transition: all .5s ease-out 0s;
-webkit-transform: rotateY(180deg) scale(0.5, 0.5);
transform: rotateY(180deg) scale(0.5, 0.5);
transform: rotateY(180deg) scale(0.5, 0.5);
}

.member-photo .mask ul {
@@ -1395,7 +1416,7 @@ a:focus, a:hover {
color: #57cbcc;
}

.post-meta > span {
.post-meta>span {
color: #666;
border-right: 1px solid #dedede;
display: inline-block;
@@ -1404,11 +1425,11 @@ a:focus, a:hover {
padding-right: 10px;
}

.post-meta > span:last-child {
.post-meta>span:last-child {
border-right: 0;
}

.post-meta > span i {
.post-meta>span i {
margin-right: 5px;
}

@@ -1491,7 +1512,7 @@ a:focus, a:hover {
margin-right: 20px;
}

.post-author > img {
.post-author>img {
border: 1px solid #dedede;
max-width: 120px;
padding: 5px;
@@ -1541,18 +1562,21 @@ a:focus, a:hover {
margin-top: 80px;
}

.comment-reply-form input, .comment-reply-form textarea {
.comment-reply-form input,
.comment-reply-form textarea {
height: 35px;
border-radius: 0;
box-shadow: none;
}

.comment-reply-form input:focus, .comment-reply-form textarea:focus {
.comment-reply-form input:focus,
.comment-reply-form textarea:focus {
box-shadow: none;
border: 1px solid #57cbcc;
}

.comment-reply-form textarea, .comment-reply-form .btn-main {
.comment-reply-form textarea,
.comment-reply-form .btn-main {
height: auto;
}

@@ -1574,7 +1598,7 @@ a:focus, a:hover {
.social-icon ul li:hover a {
background-color: #57cbcc;
-webkit-transform: rotateY(0deg);
transform: rotateY(0deg);
transform: rotateY(0deg);
}

.social-icon ul li:hover a i {
@@ -1582,7 +1606,7 @@ a:focus, a:hover {
opacity: 1;
filter: alpha(opacity=100);
-webkit-transform: rotateY(0deg);
transform: rotateY(0deg);
transform: rotateY(0deg);
}

.social-icon ul li a {
@@ -1592,7 +1616,7 @@ a:focus, a:hover {
height: 70px;
width: 70px;
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
transform: rotateY(180deg);
transition: all 400ms ease-out 0s;
}

@@ -1612,7 +1636,7 @@ a:focus, a:hover {
opacity: 0.3;
filter: alpha(opacity=30);
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
transform: rotateY(180deg);
transition: all 400ms ease-out 0s;
}

@@ -1763,7 +1787,7 @@ a:focus, a:hover {
padding: 0 20px 10px;
}

.post-meta > span {
.post-meta>span {
border-right: 1px solid #4e595f;
display: inline-block;
font-size: 12px;
@@ -1771,11 +1795,11 @@ a:focus, a:hover {
padding-right: 10px;
}

.post-meta > span:last-child {
.post-meta>span:last-child {
border-right: 0;
}

.post-meta > span > i {
.post-meta>span>i {
margin-right: 5px;
}

@@ -1802,7 +1826,7 @@ aside.widget {
margin-bottom: 25px;
}

.widget-title > h3 {
.widget-title>h3 {
color: #fff;
margin-bottom: 15px;
margin-top: 0;
@@ -1851,7 +1875,7 @@ aside.widget {
margin-bottom: 25px;
}

.tab-excerpt > span {
.tab-excerpt>span {
display: block;
font-size: 12px;
margin-bottom: 10px;
@@ -1878,12 +1902,12 @@ aside.widget {
transition: all .5s ease-in 0s;
}

.categories > li:hover a {
.categories>li:hover a {
padding-left: 10px;
color: #6CB670;
}

.categories > li:last-child {
.categories>li:last-child {
border-bottom: 0;
}

@@ -1984,16 +2008,16 @@ blockquote {
margin-right: 20px;
}

.post-author > img {
.post-author>img {
border: 1px solid #4e595f;
max-width: 120px;
padding: 5px;
width: 100%;
}

.comment-reply-form > h3,
.author-about > h4,
.comments > h4 {
.comment-reply-form>h3,
.author-about>h4,
.comments>h4 {
border-bottom: 1px solid #4e595f;
margin-bottom: 15px;
margin-top: 0;
@@ -2035,7 +2059,8 @@ blockquote {
overflow: hidden;
}

.author-comment cite a:hover, .replay:hover {
.author-comment cite a:hover,
.replay:hover {
color: #6CB670;
text-decoration: underline;
}
@@ -2070,4 +2095,4 @@ blockquote {
margin: 0;
}

/*# sourceMappingURL=maps/style.css.map */
/*# sourceMappingURL=maps/style.css.map */

+ 162
- 163
static/js/script.js View File

@@ -1,31 +1,33 @@
jQuery(function ($) { "use strict";
jQuery(function ($) {
"use strict";

/* ========================================================================= */
/* Page Preloader
/* ========================================================================= */
window.onload = function () {
document.getElementById('preloader').style.display = 'none';
}

// Preloader js
$(window).on('load', function () {
$('#preloader').fadeOut(700);
});


/* ========================================================================= */
/* Post image slider
/* ========================================================================= */
$("#post-thumb, #gallery-post").slick({
infinite: true,
arrows:false,
arrows: false,
autoplay: true,
autoplaySpeed: 4000
autoplaySpeed: 4000
});
$("#features").slick({
infinite: true,
arrows:false,
arrows: false,
autoplay: true,
autoplaySpeed: 4000
autoplaySpeed: 4000
});


@@ -35,44 +37,44 @@ jQuery(function ($) { "use strict";


$("#navigation").sticky({
topSpacing : 0
topSpacing: 0
});

/* ========================================================================= */
/* Magnific popup
/* ========================================================================= */
$('.image-popup').magnificPopup({
type: 'image',
removalDelay: 160, //delay removal by X to allow out-animation
callbacks: {
beforeOpen: function () {
// just a hack that adds mfp-anim class to markup
this.st.image.markup = this.st.image.markup.replace('mfp-figure', 'mfp-figure mfp-with-anim');
this.st.mainClass = this.st.el.attr('data-effect');
}
},
closeOnContentClick: true,
midClick: true,
fixedContentPos: false,
fixedBgPos: true
});
type: 'image',
removalDelay: 160, //delay removal by X to allow out-animation
callbacks: {
beforeOpen: function () {
// just a hack that adds mfp-anim class to markup
this.st.image.markup = this.st.image.markup.replace('mfp-figure', 'mfp-figure mfp-with-anim');
this.st.mainClass = this.st.el.attr('data-effect');
}
},
closeOnContentClick: true,
midClick: true,
fixedContentPos: false,
fixedBgPos: true
});
/* ========================================================================= */
/* Portfolio Filtering Hook
/* ========================================================================= */

var mixer = mixitup('.portfolio-items-wrapper');
var mixer = mixitup('.portfolio-items-wrapper');
/* ========================================================================= */
/* Testimonial Carousel
/* ========================================================================= */
//Init the carousel
$("#testimonials").slick({
infinite: true,
arrows:false,
arrows: false,
autoplay: true,
autoplaySpeed: 4000
autoplaySpeed: 4000
});


@@ -166,144 +168,141 @@ jQuery(function ($) { "use strict";
// End Jquery Function


/* ========================================================================= */
/* Animated section
/* ========================================================================= */

var wow = new WOW(
{
offset: 100, // distance to the element when triggering the animation (default is 0)
mobile: false // trigger animations on mobile devices (default is true)
}
);
wow.init();


/* ========================================================================= */
/* Smooth Scroll
/* ========================================================================= */
var scroll = new SmoothScroll('a[href*="#"]');



/* ========================================================================= */
/* Google Map Customization
/* ========================================================================= */

function initialize() {
/* ========================================================================= */
/* Animated section
/* ========================================================================= */

var latitude = $('#map-canvas').attr('data-latitude');
var longitude = $('#map-canvas').attr('data-longitude');
var myLatLng = new google.maps.LatLng(latitude, longitude);

var roadAtlasStyles = [{
"featureType": "landscape",
"elementType": "geometry.fill",
"stylers": [{
"color": "#2F3238"
}]
}, {
"elementType": "labels.text.fill",
"stylers": [{
"color": "#FFFFFF"
}]
}, {
"elementType": "labels.text.stroke",
"stylers": [{
"visibility": "off"
}]
}, {
"featureType": "road",
"elementType": "geometry.fill",
"stylers": [{
"color": "#50525f"
}]
}, {
"featureType": "road",
"elementType": "geometry.stroke",
"stylers": [{
"visibility": "on"
}, {
"color": "#808080"
}]
}, {
"featureType": "poi",
"elementType": "labels",
"stylers": [{
"visibility": "off"
}]
}, {
"featureType": "transit",
"elementType": "labels.icon",
"stylers": [{
"visibility": "off"
}]
}, {
"featureType": "poi",
"elementType": "geometry",
"stylers": [{
"color": "#808080"
}]
}, {
"featureType": "water",
"elementType": "geometry.fill",
"stylers": [{
"color": "#3071a7"
}, {
"saturation": -65
}]
var wow = new WOW({
offset: 100, // distance to the element when triggering the animation (default is 0)
mobile: false // trigger animations on mobile devices (default is true)
});
wow.init();


/* ========================================================================= */
/* Smooth Scroll
/* ========================================================================= */
var scroll = new SmoothScroll('a[href*="#"]');



/* ========================================================================= */
/* Google Map Customization
/* ========================================================================= */

function initialize() {

var latitude = $('#map-canvas').attr('data-latitude');
var longitude = $('#map-canvas').attr('data-longitude');
var myLatLng = new google.maps.LatLng(latitude, longitude);

var roadAtlasStyles = [{
"featureType": "landscape",
"elementType": "geometry.fill",
"stylers": [{
"color": "#2F3238"
}]
}, {
"elementType": "labels.text.fill",
"stylers": [{
"color": "#FFFFFF"
}]
}, {
"elementType": "labels.text.stroke",
"stylers": [{
"visibility": "off"
}]
}, {
"featureType": "road",
"elementType": "geometry.fill",
"stylers": [{
"color": "#50525f"
}]
}, {
"featureType": "road",
"elementType": "geometry.stroke",
"stylers": [{
"visibility": "on"
}, {
"featureType": "road",
"elementType": "labels.icon",
"stylers": [{
"visibility": "off"
}]
"color": "#808080"
}]
}, {
"featureType": "poi",
"elementType": "labels",
"stylers": [{
"visibility": "off"
}]
}, {
"featureType": "transit",
"elementType": "labels.icon",
"stylers": [{
"visibility": "off"
}]
}, {
"featureType": "poi",
"elementType": "geometry",
"stylers": [{
"color": "#808080"
}]
}, {
"featureType": "water",
"elementType": "geometry.fill",
"stylers": [{
"color": "#3071a7"
}, {
"featureType": "landscape",
"elementType": "geometry.stroke",
"stylers": [{
"color": "#bbbbbb"
}]
}];

var mapOptions = {
zoom: 14,
center: myLatLng,
disableDefaultUI: true,
scrollwheel: false,
navigationControl: false,
mapTypeControl: false,
scaleControl: false,
draggable: false,
mapTypeControlOptions: {
mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'roadatlas']
}
};

var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
"saturation": -65
}]
}, {
"featureType": "road",
"elementType": "labels.icon",
"stylers": [{
"visibility": "off"
}]
}, {
"featureType": "landscape",
"elementType": "geometry.stroke",
"stylers": [{
"color": "#bbbbbb"
}]
}];

var mapOptions = {
zoom: 14,
center: myLatLng,
disableDefaultUI: true,
scrollwheel: false,
navigationControl: false,
mapTypeControl: false,
scaleControl: false,
draggable: false,
mapTypeControlOptions: {
mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'roadatlas']
}
};

var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

var marker = new google.maps.Marker({
position: myLatLng,
map: map,
title: '',
});

var marker = new google.maps.Marker({
position: myLatLng,
map: map,
title: '',
});

google.maps.event.addListener(marker, 'click', function () {
infowindow.open(map, marker);
});

var styledMapOptions = {
name: 'US Road Atlas'
};
google.maps.event.addListener(marker, 'click', function () {
infowindow.open(map, marker);
});

var usRoadMapType = new google.maps.StyledMapType(
roadAtlasStyles, styledMapOptions);
var styledMapOptions = {
name: 'US Road Atlas'
};

map.mapTypes.set('roadatlas', usRoadMapType);
map.setMapTypeId('roadatlas');
}
var usRoadMapType = new google.maps.StyledMapType(
roadAtlasStyles, styledMapOptions);

google.maps.event.addDomListener(window, "load", initialize);
map.mapTypes.set('roadatlas', usRoadMapType);
map.setMapTypeId('roadatlas');
}

google.maps.event.addDomListener(window, "load", initialize);

Loading…
Cancel
Save