Created
April 27, 2018 09:32
-
-
Save matt-barker/c6dfdf1366b42c9b4e0f6e5a755b9f19 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> | |
<script> | |
$(function() { | |
$( "figure:eq(0)" ).wrapInner( "<div class='movementimg'></div>" ); | |
$("figure:eq(0)").mousemove(function(event) { | |
var mx = event.pageX - $('figure:eq(0)').width(); | |
var my = event.pageY - $('figure:eq(0)').height(); | |
var mmovex = (mx)/800; | |
var mmovey = (my)/800; | |
$(".movementimg").css("transform", "translate(" + mmovex + "vw," + mmovey + "vh)"); | |
}); | |
}); | |
</script> | |
<style> | |
.movementimg { | |
width: 100vw !important; | |
height: 100vh !important; | |
top: 0 !important; | |
left: 0 !important; | |
transform: translate(0.05vw, 0.05vh); | |
-ms-transform: translate(0.05vw, 0.05vh); | |
-webkit-transform: translate(0.05vw, 0.05vh); | |
-moz-transform: translate(0.05vw, 0.05vh); | |
} | |
.movementimg img { | |
box-sizing: content-box; | |
position: absolute !important; | |
object-fit: cover; | |
width: 100vw; | |
height: 100vh; | |
top: 50% !important; | |
left: 50% !important; | |
-webkit-transform: translate(-50%, -50%) scale(1.1); | |
-ms-transform: translate(-50%, -50%) scale(1.1); | |
-moz-transform: translate(-50%, -50%) scale(1.1); | |
transform: translate(-50%, -50%) scale(1.1); | |
} | |
</style> | |
<script> | |
$(function(){ | |
$('footer .sqs-block-search:eq(0)').appendTo('#mainNavWrapper .nav-item:nth-last-child(1)'); | |
$('footer .sqs-block-newsletter').appendTo('#mainNavWrapper .nav-item:nth-last-child(2)'); | |
/*scroll top nav*/ | |
$(window).scroll(function() { | |
if ($(window).scrollTop() >= 50) { | |
$("#header").addClass('scrolled') | |
} | |
else { | |
$("#header").removeClass('scrolled') | |
} | |
}); | |
//search and cart icons for mobile | |
$(".mobile-primary-nav-links .external:nth-last-child(1)").appendTo('.mobile-bar-wrapper'); | |
$(".mobile-primary-nav-links .external:nth-last-child(2)").appendTo('.mobile-bar-wrapper'); | |
//search | |
$('footer .sqs-block-search:eq(0)').appendTo('.mobile-bar-wrapper .external:nth-last-child(2)'); | |
$('.mobile-bar-wrapper .external:nth-last-child(2) a').click(function(){ | |
$(this).parent().find('.sqs-block-search').toggleClass('show') | |
}) | |
//get secondary nav out | |
$("#secondaryNavWrapper").prependTo("#site"); | |
}) | |
</script> | |
<!--Secondary Nav--> | |
<div class="secondary-nav-toggle-wrapper"> | |
<img class="secondary-nav-hamburger" src="https://static1.squarespace.com/static/5a82d622edaed8f0ec094f50/t/5adf433603ce643ebcb1b3ca/1524581174858/hamburger-menu.png"> | |
<img class="secondary-menu-close" src="https://static1.squarespace.com/static/5a82d622edaed8f0ec094f50/t/5adf432f6d2a73c9dc947b73/1524581167558/close-menu.png"> | |
</div> | |
<div id="sideTrayWrapper" style=""> | |
<div class="sidetray-nav-wrapper"> | |
</div> | |
<div class="sidetray-block-wrapper"> | |
<div class="side-tray-block-container"> | |
<div class="side-tray-image"> | |
<img src="http://via.placeholder.com/120x120"> | |
</div> | |
<div class="side-tray-text"> | |
<h2>Hi.</h2> | |
<p>Welcome to my blog. I document my adventures in travel, style, and food. Hope you have a nice stay!</p> | |
</div> | |
<div class="side-tray-social"> | |
<span><a href="https://www.twitter.com"><img src="https://static1.squarespace.com/static/5a82d622edaed8f0ec094f50/t/5ae2d942f950b7bc94188695/1524816194951/instagram_64.png"></a></span> | |
<span><a href="https://www.instagram.com"><img src="https://static1.squarespace.com/static/5a82d622edaed8f0ec094f50/t/5ae2d93a6d2a73772f722949/1524816186937/twitter_64.png"></a></span> | |
</div> | |
</div> | |
</div> | |
</div> | |
<div class="secondary-nav-mobile-bar"> | |
<div class="secondary-nav-toggle-wrapper"> | |
<img class="secondary-nav-hamburger" src="https://static1.squarespace.com/static/5a82d622edaed8f0ec094f50/t/5adf433603ce643ebcb1b3ca/1524581174858/hamburger-menu.png"> | |
<img class="secondary-menu-close" src="https://static1.squarespace.com/static/5a82d622edaed8f0ec094f50/t/5adf432f6d2a73c9dc947b73/1524581167558/close-menu.png"> | |
</div> | |
<div class="social-icons-elipses"> | |
<img class="social-icons" src="https://static1.squarespace.com/static/5a82d622edaed8f0ec094f50/t/5adf43272b6a2868833f0f47/1524581159779/horizontal-ellipsis.png"> | |
<img class="social-close" src="https://static1.squarespace.com/static/5a82d622edaed8f0ec094f50/t/5adf432f6d2a73c9dc947b73/1524581167558/close-menu.png"> | |
</div> | |
<div class="secondary-nav-search"> | |
<img class="search" src="https://static1.squarespace.com/static/5a82d622edaed8f0ec094f50/t/5adf4321562fa7d69f8584cb/1524581153648/search.png"> | |
<img class="search-close" src="https://static1.squarespace.com/static/5a82d622edaed8f0ec094f50/t/5adf432f6d2a73c9dc947b73/1524581167558/close-menu.png"> | |
</div> | |
</div> | |
<div class="full-screen-social"> | |
<div class="full-screen-social-icons"> | |
<span><a href="https://www.twitter.com"><img src="https://static1.squarespace.com/static/5a82d622edaed8f0ec094f50/t/5ae2d942f950b7bc94188695/1524816194951/instagram_64.png"></a></span> | |
<span><a href="https://www.instagram.com"><img src="https://static1.squarespace.com/static/5a82d622edaed8f0ec094f50/t/5ae2d93a6d2a73772f722949/1524816186937/twitter_64.png"></a></span> | |
</div> | |
</div> | |
<div class="full-screen-search"> | |
<form class="header-search-form" id="headerSearch" action="/search" method="get" _lpchecked="1"> | |
<input class="header-search-form-input" name="q" placeholder="Search" type="text" spellcheck="false" value="" autocomplete="off"> | |
</form> | |
</div> | |
<script> | |
$(document).ready(function(){ | |
$('#secondaryNavWrapper').appendTo('.sidetray-nav-wrapper'); | |
$('.secondary-nav-toggle-wrapper').click(function(){ | |
$(this).toggleClass('active'); | |
$('#sideTrayWrapper').toggleClass('active'); | |
$('.social-icons-elipses, .secondary-nav-search, .full-screen-social, .full-screen-search').removeClass('active'); | |
}); | |
$('.social-icons-elipses').click(function(){ | |
$(this).toggleClass('active'); | |
$('.full-screen-social').toggleClass('active'); | |
$('.secondary-nav-search, .secondary-nav-toggle-wrapper, .full-screen-search, #sideTrayWrapper').removeClass('active'); | |
}); | |
$('.secondary-nav-search').click(function(){ | |
$(this).toggleClass('active'); | |
$('.full-screen-search').toggleClass('active'); | |
$('.social-icons-elipses, .secondary-nav-toggle-wrapper, .full-screen-social, #sideTrayWrapper').removeClass('active'); | |
}); | |
});//document.ready | |
</script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
//squarestudio custom code | |
body { | |
margin-top: 42px | |
} | |
#header { | |
background: #f6f6f6; | |
position: fixed; | |
top: 0px; | |
height: 42px; | |
width: 100% !important; | |
padding: 0px; | |
margin: 0px; | |
//this needs fixing | |
.logo-wrapper { | |
display: ; | |
display: block; | |
position: absolute; | |
width: auto; | |
height: auto; | |
left: 50vw; | |
transform:translate(-50%); | |
top: 5vh; | |
} | |
div[data-nc-container="center"] { | |
float: left !important; | |
left: 0px; | |
position: relative; | |
display: block !important; | |
width: 100%; | |
height: 100%; | |
#mainNavWrapper { | |
margin: 0px; | |
height: 100%; | |
display: block; | |
.site-navigation { | |
display: block; | |
height: 100%; | |
.nav-item { | |
float: left !important; | |
} | |
.nav-item:nth-last-child(1), .nav-item:nth-last-child(2), .nav-item:nth-last-child(3) { | |
float: right !important; | |
} | |
} | |
} | |
//styling the buttons | |
.nav-item { | |
border-right: 1px solid #D0CEC9; | |
height: 100% !important; | |
position: relative; | |
margin-left: 0px; | |
.nav-item-index, .nav-item-project, a { | |
height: 100%; | |
display: block; | |
color: #212721 !important; | |
font-family: "adobe-devanagari",Times,serif; | |
font-size: 11px; | |
letter-spacing: 1px; | |
padding: 0px 16px; | |
text-transform: uppercase; | |
span { | |
top: 50%; | |
display: block; | |
position: relative; | |
margin-top: -5px !important; | |
} | |
} | |
} | |
.active { | |
box-shadow: inset 0 1px 3px rgba(0,0,0,0.35); | |
border-bottom: 1px solid white; | |
opacity: 1; | |
} | |
//hover effect | |
.nav-item:hover { | |
box-shadow: inset 0 1px 3px rgba(0,0,0,0.35); | |
} | |
//remove for last items | |
.nav-item:nth-last-child(1):hover, .nav-item:nth-last-child(2):hover, .nav-item:nth-last-child(3):hover { | |
box-shadow: none; | |
} | |
//logo - hidden | |
.nav-item:first-of-type { | |
display: block; | |
span { | |
display: ; | |
font-size: 0px; | |
} | |
background: url(//static1.squarespace.com/static/5a82d622edaed8f0ec094f50/t/5ae05a5a562fa79909c9460e/1524509326123/?format=1500w) no-repeat; | |
background-size: contain | |
} | |
} | |
//search bar | |
.nav-item:nth-last-child(1){ | |
a { | |
display: none !important | |
} | |
.sqs-block-search { | |
padding: 6px 15px; | |
.spinner-wrapper { | |
display: none; | |
} | |
input { | |
padding: 0px; | |
height: 30px; | |
background: #fff; | |
background: #fff; | |
width: 160px; | |
transition: all 500ms linear; | |
height: 1.875rem; | |
border: 0px none; | |
color: #787878; | |
font-size: 0.875rem; | |
box-shadow: none; | |
padding: 0 35px 0 0.5rem; | |
letter-spacing: 1px; | |
border: 1px solid #D0CEC9; | |
} | |
input:focus { | |
width: 190px | |
} | |
::-webkit-input-placeholder { /* Chrome */ | |
padding-left: 0px; | |
text-transform: uppercase; | |
} | |
} | |
} | |
//subscribe | |
//mail icon | |
.nav-item:nth-last-child(2) { | |
a span:after { | |
content: ''; | |
background: url(https://static1.squarespace.com/static/5a82d622edaed8f0ec094f50/t/5ace2380aa4a999da4861a86/1523458944708/mail.png) no-repeat; | |
background-size: contain; | |
display: inline-block; | |
height: 40px; | |
top: -15px; | |
right: -0px; | |
width: 40px; | |
position: absolute; | |
} | |
} | |
@media (max-width: 1000px) { | |
//hide subscribe text for smaller screens | |
.nav-item:nth-last-child(2) { | |
width: 70px !important; | |
span { | |
font-size: 0px | |
} | |
} | |
//make search smaller | |
.nav-item:nth-last-child(1) { | |
.sqs-block-search input { | |
width: 110px !important | |
} | |
} | |
} | |
.nav-item:nth-last-child(2) { | |
width: 160px; | |
span { | |
margin-left: -40px; | |
} | |
.sqs-block-newsletter { | |
position: absolute; | |
display: none; | |
width: 50vw; | |
left: -50vw; | |
margin-left: 160px; | |
background: #f6f6f6; | |
border: 1px solid #D0CEC9; | |
padding: 0px; | |
top: 42px; | |
.newsletter-form-header { | |
width: 100%; | |
} | |
.newsletter-form-fields-wrapper { | |
text-align: left ; | |
margin: 0px; | |
margin-left: 2%; | |
float: left; | |
width: 72% !important; | |
.newsletter-form-field-wrapper { | |
width: 100% !important; | |
padding: 0px !important; | |
} | |
input { | |
padding: 8px; | |
border: ; | |
} | |
} | |
.newsletter-form-button-wrapper { | |
width: 20%; | |
display: inline-block; | |
margin: 0px 0px; | |
padding: 0px; | |
.newsletter-form-button:hover { | |
background: #586a2b | |
} | |
.newsletter-form-button { | |
background: #677C32; | |
padding: 0px 0px; | |
min-height: 38px; | |
display: block; | |
padding: 8px !important; | |
border: 0px !important; | |
color: #fff; | |
margin: 0px; | |
border-radius: 0px; | |
width: 100%; | |
box-shadow: none !important; | |
* { | |
border: 0px !important; | |
} | |
} | |
} | |
} | |
} | |
.nav-item:nth-last-child(2):hover { | |
.sqs-block-newsletter { | |
display: block; | |
} | |
} | |
} | |
//mobile top nav | |
@media (max-width: 768px) { | |
.mobile-bar-wrapper { | |
//center logo | |
.mobile-branding-wrapper { | |
width: 100vw; | |
margin: auto; | |
transform:translate(-50%); | |
left: 50%; | |
position: relative; | |
a { | |
margin: auto; | |
} | |
} | |
.mobile-nav-toggle-label { | |
position: absolute; | |
} | |
} | |
//open state | |
body { | |
transition: all 300ms !important; | |
position: relative; | |
left: 0vw !important; | |
#site { | |
opacity: 1 !important; | |
height: 100% !important; | |
} | |
.overflow-wrapper { | |
overflow:visible !important; | |
.overlay-nav-container { | |
left: -300px !important; | |
.overlay-nav-wrapper, * { | |
opacity: 1 !important; | |
visibility: visible !important; | |
overflow-y: scroll; | |
width: 100% !important; | |
left: 0 !important; | |
} | |
} | |
} | |
} | |
//make always visible | |
.overlay-nav-container { | |
display: block !important; | |
z-index: 11111; | |
position: relative; | |
padding-top: 50px !important; | |
background: #f6f6f6; | |
top: -45px !important; | |
//erode shadow | |
margin-left: 0px; | |
box-shadow: rgba(0, 0, 0, 0.3) 3px 0px 4px; | |
max-width: 300px !important; | |
} | |
.mobile-menu-open { | |
//arbitrary | |
left: 300px !important; | |
} | |
//hide subscribe | |
.mobile-primary-nav-links .external:nth-last-child(1) { | |
display: none | |
} | |
//search and cart icons | |
.mobile-bar-wrapper { | |
height: 50px; | |
.mobile-branding-wrapper { | |
padding: 0px; | |
top: -25px; | |
height: 30px; | |
} | |
.external a { | |
display: block; | |
font-size: 0px; | |
position: relative; | |
font-size: ; | |
top: 10px; | |
right: 20px; | |
display: inline-block; | |
height: 30px; | |
top: 10px; | |
right: 20px; | |
width: 40px; | |
} | |
//cart | |
.external:nth-last-of-type(1) a { | |
background: url(https://d30y9cdsu7xlg0.cloudfront.net/png/2370-200.png) no-repeat; | |
background-size: contain; | |
} | |
//search | |
.external:nth-last-of-type(2) a { | |
background: url(http://icons.iconarchive.com/icons/icons8/ios7/256/Very-Basic-Search-icon.png) no-repeat; | |
background-size: contain; | |
} | |
} | |
//search bar click effect | |
.mobile-bar-wrapper .external { | |
.sqs-block-search { | |
display: none; | |
position: absolute; | |
right: 0px; | |
top: 50px; | |
width: 100%; | |
box-sizing: border-box; | |
padding: 10px 4%; | |
background: #eee; | |
.spinner-wrapper { | |
display: none | |
} | |
input { | |
background: #fff; | |
padding-left: 10px; | |
} | |
::placeholder { | |
} | |
} | |
} | |
.show { | |
display: block !important | |
} | |
} | |
//scroll top nav | |
.scrolled { | |
.nav-item:nth-last-child(2), .nav-item:nth-last-child(3) { | |
display: none | |
} | |
.nav-item:nth-last-child(1) { | |
.sqs-block-search input { | |
width: 130px !important | |
} | |
} | |
} | |
//secondary nav | |
#sideTrayWrapper { | |
//display:none; | |
opacity:0; | |
left:-100%; | |
max-width:1024px; | |
background-color:white; | |
z-index:0; | |
height:100%; | |
position:fixed; | |
top:0; | |
overflow-y: hidden; | |
overflow-x: hidden; | |
padding: 0; | |
border-right: solid 1px #f0f0f0; | |
transition:400ms; | |
&.active { | |
left:0; | |
opacity:1; | |
z-index:9991; | |
} | |
@media(max-width:768px) { | |
overflow-y:auto; | |
} | |
#secondaryNavWrapper { | |
position:relative; | |
top:50%; | |
transform:translatey(-50%); | |
@media(max-width:768px) { | |
top:initial; | |
transform:translatey(0); | |
} | |
} | |
.sidetray-nav-wrapper { | |
display: inline-block; | |
position: relative; | |
width: 55%; | |
padding-left: 100px; | |
padding-right: 100px; | |
border-right: solid 1px #f0f0f0; | |
box-sizing: border-box; | |
z-index: 1110; | |
padding-top:95px; | |
padding-bottom:95px; | |
height:100%; | |
overflow:auto; | |
@media(max-width:768px) { | |
display: block; | |
width: 100%; | |
height:auto; | |
padding-left:25px; | |
padding-right:25px; | |
} | |
nav { | |
font-size: 28px; | |
line-height: 1.25em; | |
.nav-item { | |
display:block; | |
margin-left:0; | |
text-align:center; | |
padding:0.5em 0; | |
} | |
} | |
} | |
.sidetray-block-wrapper { | |
display: inline-block; | |
width: 44%; | |
padding-left: 100px; | |
padding-right: 100px; | |
box-sizing: border-box; | |
position: relative; | |
overflow: auto; | |
z-index: 1110; | |
padding-top:95px; | |
padding-bottom:95px; | |
height:100%; | |
@media(max-width:768px) { | |
display: block; | |
width: 100%; | |
height:auto; | |
padding-left:25px; | |
padding-right:25px; | |
} | |
.side-tray-block-container { | |
position:relative; | |
top:50%; | |
transform:translatey(-50%); | |
@media(max-width:768px) { | |
top:initial; | |
transform:translatey(0); | |
} | |
div { | |
text-align:center; | |
} | |
.side-tray-image { | |
padding:0 17px 17px 17px; | |
img { | |
width:120px; | |
height:120px; | |
border-radius:100% | |
} | |
} | |
.side-tray-social { | |
transition:0ms!important; | |
a { | |
display:inline-block; | |
} | |
img { | |
width:24px; | |
} | |
&:hover { | |
img { | |
opacity:0.5; | |
&:hover { | |
opacity:1; | |
} | |
} | |
} | |
} | |
h2 { | |
font-size:26px; | |
letter-spacing:0.1em; | |
line-height:28px; | |
text-transform:none; | |
} | |
p { | |
color:black; | |
font-size:16px | |
} | |
} | |
} | |
} | |
.secondary-nav-toggle-wrapper { | |
width:24px; | |
height:24px; | |
display:inline-block; | |
position:fixed; | |
padding:10px; | |
cursor:pointer; | |
z-index:99999; | |
@media(max-width:768px) { | |
display:none; | |
} | |
img { | |
position:absolute; | |
width:24px; | |
} | |
.secondary-menu-close { | |
display:none; | |
} | |
} | |
.secondary-nav-toggle-wrapper.active { | |
.secondary-menu-close { | |
display:block; | |
margin-left:30px; | |
} | |
.secondary-nav-hamburger { | |
display:none; | |
} | |
} | |
.secondary-nav-mobile-bar { | |
border-top: solid 1px #f0f0f0; | |
background: white; | |
position: fixed; | |
width: 100%; | |
height: 62px; | |
bottom: 0; | |
z-index: 99999; | |
display: flex; | |
justify-content: space-between; | |
div { | |
display:inline-block; | |
width:24px; | |
height:24px; | |
padding:20px; | |
} | |
img { | |
position:absolute; | |
width:24px; | |
} | |
.secondary-nav-toggle-wrapper { | |
position:relative; | |
} | |
@media(min-width:769px){ | |
display:none; | |
} | |
} | |
.secondary-nav-mobile-bar { | |
.secondary-nav-toggle-wrapper.active { | |
.secondary-menu-close { | |
margin-left:0; | |
} | |
} | |
} | |
.full-screen-social { | |
opacity:0; | |
display:none; | |
position:fixed; | |
width:100vw; | |
height:100vh; | |
top:0; | |
z-index:99994; | |
background:white; | |
transition:100ms; | |
.full-screen-social-icons { | |
position:relative; | |
width:105px; | |
margin:0 auto; | |
top:50%; | |
transform:translateY(-50%); | |
img {width:50px;} | |
a { | |
display:inline-block; | |
} | |
} | |
&.active { | |
display:block; | |
opacity:1; | |
} | |
} | |
.social-icons-elipses { | |
.social-close { | |
display:none; | |
} | |
&.active { | |
.social-close { | |
display:block; | |
} | |
.social-icons { | |
display:none; | |
} | |
} | |
} | |
.full-screen-search { | |
opacity:0; | |
display:none; | |
position:fixed; | |
width:100vw; | |
height:100vh; | |
top:0; | |
z-index:99994; | |
background:white; | |
transition:100ms; | |
.search-close { | |
display:none; | |
} | |
&.active { | |
display:block; | |
opacity:1; | |
} | |
.header-search-form { | |
width:100%; | |
height:100%; | |
.header-search-form-input { | |
position:absolute; | |
top:50%; | |
left:50%; transform:translate(-50%,-50%); | |
border:0; | |
text-align:center; | |
font-size:4em; | |
font-family: "ltc-bodoni-175"; | |
font-weight:400; | |
letter-spacing:0px; | |
@media(max-width:768px){ | |
width:90%; | |
} | |
} | |
} | |
} | |
.secondary-nav-search { | |
.search-close{ | |
display:none; | |
} | |
&.active { | |
.search { | |
display:none; | |
} | |
.search-close { | |
display:block; | |
} | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment