michaelwhyte

/* This code from this CSS-Tricks article: 

https://css-tricks.com/full-width-containers-limited-width-parents/

*/
.full-width {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;

michaelwhyte

const $nav = $('nav');

// The following JS modified from 
// JS found at this per: http://codepen.io/laviperchik/pen/dlcBt
$.fn.accessibleDropDown = function () {
    
	var el = $(this);

    /* Make dropdown menus keyboard accessible */

michaelwhyte

html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}

michaelwhyte

// Code from this stackoverflow question
// https://stackoverflow.com/questions/175739/is-there-a-built-in-way-in-javascript-to-check-if-a-string-is-a-valid-number
function isNumeric(num){
  return !isNaN(num)
}

michaelwhyte

// If you have experience with animation in other media, CSS
// animation’s percentage-based keyframe syntax can feel pretty
// alien, especially if you want to be very precise about timing.
// This Sass function lets you forget about percentages and
// express keyframes in terms of actual frames:

@function f($frame) {
	@return percentage( $frame / $totalframes )
}

michaelwhyte

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  -webkit-clip-path: inset(50%);
  clip-path: inset(50%);

michaelwhyte

# OS generated files #
######################

# Windows image file caches
Thumbs.db
ehthumbs.db

# Folder config file
Desktop.ini

michaelwhyte

.img-02:-webkit-full-screen img {
    display: block;
    margin: 0; /* overide pre-existing margin styles */	
}

.img-02:-moz-full-screen img {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);

michaelwhyte

var img02 = document.querySelector('.img-02');

img01.addEventListener('click', function(){
	
    if(fullscreenAvailable){
        launchFullscreen(img01);	
    }else{
        alert('Sorry, fullscreen not available...');	  
    }	

michaelwhyte

<div class="img-02">
    <img src="birds-on-jericho-beach.jpg" width="320" height="320" alt=""  />
</div>