performance.timing ghost casper theme custom alternations

4/22/2019 - 9:33 AM

performance.timing ghost casper theme custom alternations

<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/0.0.1/prism.min.js"></script>
<style>
@font-face {
  font-family: OCR-B-web;
  src: url('https://iswebvrready.org/fonts/OCR-B-regular-web.eot');
  src: url('https://iswebvrready.org/fonts/OCR-B-regular-web.eot?#iefix') format('embedded-opentype'),
       url('https://iswebvrready.org/fonts/OCR-B-regular-web.svg#ocrbregular') format('svg'),
       url('https://iswebvrready.org/fonts/OCR-B-regular-web.woff') format('woff'),
       url('https://iswebvrready.org/fonts/OCR-B-regular-web.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: KlimaWeb;
  src: url('https://iswebvrready.org/fonts/klima-ultralight-web.eot');
  src: url('https://iswebvrready.org/fonts/klima-ultralight-web.eot?#iefix') format('embedded-opentype'),
       url('https://iswebvrready.org/fonts/klima-ultralight-web.svg#klimaultralight') format('svg'),
       url('https://iswebvrready.org/fonts/klima-ultralight-web.woff2') format('woff2'),
       url('https://iswebvrready.org/fonts/klima-ultralight-web.woff') format('woff'),
       url('https://iswebvrready.org/fonts/klima-ultralight-web.ttf') format('truetype');
  font-weight: 100;
  font-style: normal;
}
@font-face {
  font-family: KlimaWeb;
  src: url('https://iswebvrready.org/fonts/klima-ultralight-italic-web.eot');
  src: url('https://iswebvrready.org/fonts/klima-ultralight-italic-web.eot?#iefix') format('embedded-opentype'),
       url('https://iswebvrready.org/fonts/klima-ultralight-italic-web.svg#klimaultralight_italic') format('svg'),
       url('https://iswebvrready.org/fonts/klima-ultralight-italic-web.woff2') format('woff2'),
       url('https://iswebvrready.org/fonts/klima-ultralight-italic-web.woff') format('woff'),
       url('https://iswebvrready.org/fonts/klima-ultralight-italic-web.ttf') format('truetype');
  font-weight: 100;
  font-style: italic;
}
@font-face {
  font-family: KlimaWeb;
  src: url('https://iswebvrready.org/fonts/klima-light-web.eot');
  src: url('https://iswebvrready.org/fonts/klima-light-web.eot?#iefix') format('embedded-opentype'),
       url('https://iswebvrready.org/fonts/klima-light-web.svg#klimalight') format('svg'),
       url('https://iswebvrready.org/fonts/klima-light-web.woff2') format('woff2'),
       url('https://iswebvrready.org/fonts/klima-light-web.woff') format('woff'),
       url('https://iswebvrready.org/fonts/klima-light-web.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
}
@font-face {
  font-family: KlimaWeb;
  src: url('https://iswebvrready.org/fonts/klima-light-italic-web.eot');
  src: url('https://iswebvrready.org/fonts/klima-light-italic-web.eot?#iefix') format('embedded-opentype'),
       url('https://iswebvrready.org/fonts/klima-light-italic-web.svg#klimalight_italic') format('svg'),
       url('https://iswebvrready.org/fonts/klima-light-italic-web.woff2') format('woff2'),
       url('https://iswebvrready.org/fonts/klima-light-italic-web.woff') format('woff'),
       url('https://iswebvrready.org/fonts/klima-light-italic-web.ttf') format('truetype');
  font-weight: 300;
  font-style: italic;
}
@font-face {
  font-family: KlimaWeb;
  src: url('https://iswebvrready.org/fonts/klima-regular-web.eot');
  src: url('https://iswebvrready.org/fonts/klima-regular-web.eot?#iefix') format('embedded-opentype'),
       url('https://iswebvrready.org/fonts/klima-regular-web.svg#klimaregular') format('svg'),
       url('https://iswebvrready.org/fonts/klima-regular-web.woff2') format('woff2'),
       url('https://iswebvrready.org/fonts/klima-regular-web.woff') format('woff'),
  url('https://iswebvrready.org/fonts/klima-regular-web.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: KlimaWeb;
  src: url('https://iswebvrready.org/fonts/klima-regular-italic-web.eot');
  src: url('https://iswebvrready.org/fonts/klima-regular-italic-web.eot?#iefix') format('embedded-opentype'),
       url('https://iswebvrready.org/fonts/klima-regular-italic-web.svg#klimaregular_italic') format('svg'),
       url('https://iswebvrready.org/fonts/klima-regular-italic-web.woff2') format('woff2'),
       url('https://iswebvrready.org/fonts/klima-regular-italic-web.woff') format('woff'),
  url('https://iswebvrready.org/fonts/klima-regular-italic-web.ttf') format('truetype');
  font-weight: 400;
  font-style: italic;
}
@font-face {
  font-family: KlimaWeb;
  src: url('https://iswebvrready.org/fonts/klima-medium-web.eot');
  src: url('https://iswebvrready.org/fonts/klima-medium-web.eot?#iefix') format('embedded-opentype'),
       url('https://iswebvrready.org/fonts/klima-medium-web.svg#klimamedium') format('svg'),
       url('https://iswebvrready.org/fonts/klima-medium-web.woff2') format('woff2'),
       url('https://iswebvrready.org/fonts/klima-medium-web.woff') format('woff'),
       url('https://iswebvrready.org/fonts/klima-medium-web.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
}
@font-face {
  font-family: KlimaWeb;
  src: url('https://iswebvrready.org/fonts/klima-medium-italic-web.eot');
  src: url('https://iswebvrready.org/fonts/klima-medium-italic-web.eot?#iefix') format('embedded-opentype'),
       url('https://iswebvrready.org/fonts/klima-medium-italic-web.svg#klimamedium_italic') format('svg'),
       url('https://iswebvrready.org/fonts/klima-medium-italic-web.woff2') format('woff2'),
       url('https://iswebvrready.org/fonts/klima-medium-italic-web.woff') format('woff'),
       url('https://iswebvrready.org/fonts/klima-medium-italic-web.ttf') format('truetype');
  font-weight: 600;
  font-style: italic;
}
@font-face {
  font-family: KlimaWeb;
  src: url('https://iswebvrready.org/fonts/klima-bold-web.eot');
  src: url('https://iswebvrready.org/fonts/klima-bold-web.eot?#iefix') format('embedded-opentype'),
       url('https://iswebvrready.org/fonts/klima-bold-web.svg#klimabold') format('svg'),
       url('https://iswebvrready.org/fonts/klima-bold-web.woff2') format('woff2'),
       url('https://iswebvrready.org/fonts/klima-bold-web.woff') format('woff'),
       url('https://iswebvrready.org/fonts/klima-bold-web.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: KlimaWeb;
  src: url('https://iswebvrready.org/fonts/klima-bold-italic-web.eot');
  src: url('https://iswebvrready.org/fonts/klima-bold-italic-web.eot?#iefix') format('embedded-opentype'),
       url('https://iswebvrready.org/fonts/klima-bold-italic-web.svg#klimabold_italic') format('svg'),
       url('https://iswebvrready.org/fonts/klima-bold-italic-web.woff2') format('woff2'),
       url('https://iswebvrready.org/fonts/klima-bold-italic-web.woff') format('woff'),
       url('https://iswebvrready.org/fonts/klima-bold-italic-web.ttf') format('truetype');
  font-weight: 700;
  font-style: italic;
}
@font-face {
  font-family: KlimaWeb;
  src: url('https://iswebvrready.org/fonts/klima-heavy-web.eot');
  src: url('https://iswebvrready.org/fonts/klima-heavy-web.eot?#iefix') format('embedded-opentype'),
       url('https://iswebvrready.org/fonts/klima-heavy-web.svg#klimaheavy') format('svg'),
       url('https://iswebvrready.org/fonts/klima-heavy-web.woff2') format('woff2'),
       url('https://iswebvrready.org/fonts/klima-heavy-web.woff') format('woff'),
       url('https://iswebvrready.org/fonts/klima-heavy-web.ttf') format('truetype');
  font-weight: 800;
  font-style: normal;
}
@font-face {
  font-family: KlimaWeb;
  src: url('https://iswebvrready.org/fonts/klima-heavy-italic-web.eot');
  src: url('https://iswebvrready.org/fonts/klima-heavy-italic-web.eot?#iefix') format('embedded-opentype'),
       url('https://iswebvrready.org/fonts/klima-heavy-italic-web.svg#klimaheavy_italic') format('svg'),
       url('https://iswebvrready.org/fonts/klima-heavy-italic-web.woff2') format('woff2'),
       url('https://iswebvrready.org/fonts/klima-heavy-italic-web.woff') format('woff'),
       url('https://iswebvrready.org/fonts/klima-heavy-italic-web.ttf') format('truetype');
  font-weight: 800;
  font-style: italic;
}
</style>
<script>
(function () {
/* global ga, performance */
// Toggle this variable to output to the console debug GA messages.
var debug = true;
function initGoogleAnalytics (id, opts) {
  (function (c, v, a, n) {
    c.GoogleAnalyticsObject = n;

    c[n] = c[n] || function () {
      (c[n].q = c[n].q || []).push(arguments);
    };
    c[n].l = 1 * new Date();

    var s = v.createElement('script');
    s.async = true;
    s.src = a;
    s.addEventListener('load', enableDebug);

    var m = v.getElementsByTagName('script')[0];
    m.parentNode.insertBefore(s, m);
  })(window, document, 'https://www.google-analytics.com/analytics.js', 'ga');

  function enableDebug () {
    if (!debug) {
      return;
    }
    window.ga = ga = console.info.bind(console);
  }

  enableDebug();

  ga('create', id, opts);
  ga('set', 'forceSSL', true);
  ga('send', 'pageview');
}

function initGoogleAnalyticsEvents () {
  var indexPage = document.documentElement;
  var gdcPage = document.querySelector('html[data-gdc]');
  var unityPage = document.querySelector('canvas.emscripten, body[data-unity-loaded]');

  window.addEventListener('load', function () {
    setTimeout(function () {
      var t = performance.timing;
      // Credit to https://github.com/addyosmani/timing.js/blob/c58c164/timing.js#L67-L88:
      // Total time from start to load.
      gaSendPageTiming('loadTime', t.loadEventEnd - t.fetchStart);
      // Time spent constructing the DOM tree.
      gaSendPageTiming('domReadyTime', t.domComplete - t.domInteractive);
      // Time consumed preparing the new page.
      gaSendPageTiming('readyStart', t.fetchStart - t.navigationStart);
      // Time spent during redirection.
      gaSendPageTiming('redirectTime', t.redirectEnd - t.redirectStart);
      // AppCache.
      gaSendPageTiming('appcacheTime', t.domainLookupStart - t.fetchStart);
      // Time spent unloading documents.
      gaSendPageTiming('unloadEventTime', t.unloadEventEnd - t.unloadEventStart);
      // DNS query time.
      gaSendPageTiming('lookupDomainTime', t.domainLookupEnd - t.domainLookupStart);
      // TCP connection time.
      gaSendPageTiming('connectTime', t.connectEnd - t.connectStart);
      // Time spent during the request.
      gaSendPageTiming('requestTime', t.responseEnd - t.requestStart);
      // Request to completion of the DOM loading.
      gaSendPageTiming('initDomTreeTime', t.domInteractive - t.responseEnd);
      // Load event time.
      gaSendPageTiming('loadEventTime', t.loadEventEnd - t.loadEventStart);
    });
  });

  var gaSendTiming = function (timingCategory, timingLabel) {
    return function (timingVar, timeEnd) {
      if (typeof timeEnd === 'undefined') {
        timeEnd = performance.now();
      }
      ga('send', {
        hitType: 'timing',
        timingCategory: timingCategory,
        timingVar: timingVar,
        timingValue: timeEnd,
        timingLabel: timingLabel
      });
    };
  };

  var gaSendPageTiming = gaSendTiming('page');
  var gaSendEmscriptenTiming = gaSendTiming('emscripten', unityPage ? 'unity' : '<unknown>');

  if ('Module' in window && 'performance' in window) {
    gaSendEmscriptenTiming('preinit');
    Module.onRuntimeInitialized = gaSendEmscriptenTiming.bind(this, 'init');
    Module.postRun = [
      gaSendEmscriptenTiming.bind(this, 'load')
    ];
  }

  ga('send', 'event', 'pageload.title', document.title);
  ga('send', 'event', 'pageload.location', window.location.href);
  ga('send', 'event', 'pageload.pathname', window.location.pathname);
  ga('send', 'event', 'pageload.querystring', window.location.search);
  ga('send', 'event', 'pageload.hash', window.location.hash);

  ga('send', 'event', 'supports.getVRDisplays', 'getVRDisplays' in navigator);
  ga('send', 'event', 'supports.getVRDevices', 'getVRDevices' in navigator);

  var getDeviceNames = function (devices) {
    var names = (devices || []).map(function (device) {
      return device ? (device.displayName || device.deviceName || '<unknown>') : '<unknown>';
    });
    return JSON.stringify(names);
  };

  var getPresentationStates = function (devices) {
    var states = (devices || []).map(function (device) {
      return device.isPresenting;
    });
    return JSON.stringify(states);
  };

  if (document.body.requestFullscreen) {
    var fsElement = 'fullscreenElement';
    var fsEvent = 'fullscreenchange';
  } else if (document.body.mozRequestFullScreen) {
    var fsElement = 'mozFullScreenElement';
    var fsEvent = 'mozfullscreenchange';
  } else if (document.body.webkitRequestFullscreen) {
    var fsElement = 'webkitFullscreenElement';
    var fsEvent = 'webkitfullscreenchange';
  } else if (document.body.msRequestFullscreen) {
    var fsElement = 'msFullscreenElement';
    var fsEvent = 'MSFullscreenChange';
  }

  document.addEventListener(fsEvent, function () {
    var isFs = document[fsElement] instanceof HTMLElement;
    ga('send', 'event', 'modechange.fullscreen', isFs);
    if (navigator.getVRDevices) {
      // NOTE: With the old API, we unfortunately cannot discern between
      // entering/exiting fullscreen or VR mode - that is, whether
      // `requestFullscreen({vrDisplay: display})` or
      // `requestFullscreen(canvas)` was called.
      var devices = [{isPresenting: isFs}];
      ga('send', 'event', 'modechange.vr', getPresentationStates(devices));
    }
  });

  if (navigator.getVRDisplays) {
    window.addEventListener('vrdisplaypresentchange', function () {
      ga('send', 'event', 'modechange.vr', getPresentationStates(devices));
    });
    navigator.getVRDisplays().then(function (devices) {
      ga('send', 'event', 'pageload.getVRDisplays', getDeviceNames(devices));
    });
  } else if (navigator.getVRDevices) {
    navigator.getVRDevices().then(function (devices) {
      ga('send', 'event', 'pageload.getVRDevices', getDeviceNames(devices));
    });
  }

  window.addEventListener('click', function (e) {
    var el = e.target.closest && e.target.closest('a, input[type=button], button, img, picture');
    if (!el) { return; }
    var txt = getElText(el);
    if (txt) {
      ga('send', 'event', 'click.link', txt);
    }
  });
}

function getElText (el) {
  var txt = el.textContent.trim();
  if (txt) {
    return txt;
  }
  var img = el.tagName === 'IMG' ? el : el.querySelector('img');
  if (img) {
    return img.getAttribute('alt') || img.getAttribute('title');
  }
  return '';
}
initGoogleAnalytics('UA-74058648-3', {alwaysSendReferrer: true});
initGoogleAnalyticsEvents();
})();
</script>

header.html

<style>
/* fonts */

html {
    font-size: 12px;
}
    
body,
.page-description,
.author-profile .author-meta {
  font-family: KlimaWeb, Helvetica Neue, Helvetica, sans-serif;
}

h1, h2, h3,
h4, h5, h6,
textarea, select, input, button,
.main-nav a,
.subscribe-button,
.page-title,
.read-next-story .post:before,
.site-footer {
  font-family: OCR-B-web, Andale Mono, monospace;
}

h1, h2, h3, h4, h5, h6 {
    line-height: 1.4;
}   

h1,
h1.post-title {
    font-size: 3.75rem;
    line-height: 1.2;
}
   
h2 {
    font-size: 2.5rem;
    line-height: 1.3;
}

/* general */
    
pre + p { margin-top: 1.75em; }
pre[class*=language-] { font-size: 1.1rem; }
    
.home-template .blog-logo,
.nav li:before,
.nav li a:after,
.scroll-down,
.home-template .main-header:after {
  display: none;
}

.blog-logo {
    opacity: 0.8;
    transition: 0.1s border-width ease-in-out, 0.1s opacity ease-in-out, 0.1s transform ease-in-out;
}
.blog-logo img {
    border: 1px solid #ddd;
    border-radius: 3px;
    box-shadow: -3px 3px 0 0 rgba(0,0,0,0.05);
    height: auto;
    padding: 0;
    width: 48px;
}
.blog-logo:hover {
    opacity: 1;
    transform: scale(1.05);
}
.blog-logo:hover img {
    border-width: 0;
}
    
.main-header {
  height: auto;
  text-align: right;
}
    
.home-template .main-header {
  background-color: rgb(21,169,224);
  background-position: -5vw 50%;
}
    
.main-nav-overlay {
    background: linear-gradient(to bottom, rgba(0,0,0,0.6) 0%,rgba(0,0,0,0) 100%);
}
@media only screen and (max-width: 900px) {
  .main-header {
    min-height: auto;
    height: auto;
    padding: 1% 0;
    text-align: left;
  }
    .home-template .main-header {
        background-position: 33vw 50%;        
    }
}

@media only screen and (max-width: 500px) {
    .main-header {
        text-align: center;
    }
}
    
h1.page-title {
    background: #ffcd02;
    box-shadow: -3px 3px 0 0 rgba(0,0,0,.15);
    color: #333;
    display: inline-block;
    font: 200 italic 1.85rem Fira Sans, Helvetica, sans-serif;
    font-size: calc(1.85rem + 1vw);
    letter-spacing: 0.015em;
    text-transform: uppercase;
    margin: 6vw auto;
    padding: 1rem 2rem;
    text-align: center;
}
  
.page-description {
    display: none;
}

.post figure {
    margin: 1.75em 40px;
}

.post figcaption {
    color: #999;
    font-size: 1.5rem;
    line-height: 1.7;
}
    
.post .assets-link img {
    margin: 0 1rem 0 .5rem;
}

.post img,
.post-content img {
    max-width: 100%;
}

.w3 {
    width: 3rem;
}

.left {
    float: left;
}
    
.table {
  display: table;
  width: 100%;
}

.table-cell {
  display: table-cell;
  vertical-align: middle;
}

a.assets-link {
  background: rgba( 255, 205, 2, 1 );
  padding: 0.4rem 0 0.4rem 1.2rem;
  margin-right: 0.5rem;
  display: inline-block;
  box-sizing: border-box;
  /* border: 0.5rem solid rgba( 255, 205, 2, 1 ); */
  font: 500 1.5rem/1.5 monospace;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: black;
}

a.assets-link img {
  margin: 0 1rem 0 0.5rem;
  padding: 0;
}

a.assets-link:hover {
  background: rgba( 12, 153, 213, 1 );
  border-color: rgba( 12, 153, 213, 1 );
  color: #fff;
}

.assets-link:active {
  text-decoration: none;
  background: rgba( 0, 81, 137, 1 );
  border-color: rgba( 0, 81, 137, 1 );
  color: #fff;
}

.post .intro {
  font-weight: 400;
  font-size: 2.5rem;
  line-height: 1.5;
  padding: 0 0 2.5rem;
  margin: 0 0 2.5rem;
  border-bottom: 0.1rem dotted #c7c7c7;
}

.post-summary {
  background-color: #f4f4f4;
  padding: 1rem 2rem;
  margin: 3rem 0;
  border-left: 0.8rem solid rgba( 255, 205, 2, 1 );
}

.post-summary ol {
  margin: 0 0 2rem;
  padding: 0 1.65rem;
  font-weight: 300;
}

.post-summary li {
  line-height: 1.75;
  font-size: 1.35rem;
}

.post-excerpt p {
    color: #555;
}

body:not(.post-template) .post-title {
    font-size: 2.25rem;
}

.post-title,
.post-title a {
    color: #f37;  /* pink */
}

.post-title a {
    text-shadow: -2px 0 0 #fff, 2px 0 0 #fff, 0 -2px 0 #fff, 0 1px 0 #fff;
    transition: 0.1s background-image ease-in-out, 0.1s color ease-in-out;
}

@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
    .post-title a {
        background-repeat: repeat-x;
        background-size: 1px 0.3ch;
        background-position: 0 1.55ch;
    }
    .post-title a:hover {
        background-image: linear-gradient(to bottom, transparent 50%, currentColor 50%);
    }

}

body:not(.post-template) .post {
    opacity: 0.8;
    transition: 0.1s opacity ease-in-out;
}

body:not(.post-template) .post:hover {
    opacity: 1;
}

/* Add space between heading and byline on individual post pages */
.post-template .post-meta {
  margin-top: 0.25rem;
}

.post-footer .share h4 {
    font-size: 1.1rem;
    font-weight: 300;
    margin-top: 0.75rem;
}

.poweredby { display: none; }

/* Not sure why needed */
.copyright { margin-left: 15px; }
.author-image { top: -80px; }
</style>
<link async rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/0.0.1/prism.min.css">
<link async rel="stylesheet" href="https://mozilla.github.io/Fira/fira.css">

Cacher is the code snippet organizer for pro developers

We empower you and your team to get more done, faster

performance.timing ghost casper theme custom alternations