sloyless

<!-- WP Template Dir -->
<?php bloginfo('template_directory'); ?>

<!-- WP Child Theme Template Dir -->
<?php get_stylesheet_directory_uri(); ?>

<!-- WP Home Link -->
<?php echo get_option('home') ?>

<!-- WP Search Form -->

sloyless

<!-- originally from http://cssdeck.com/labs/css3-flipping-cube -->
<style>
/* Set-up */
body {
	color: rgb(6, 106, 117);
	text-transform: uppercase;
	font-family: sans-serif;
	font-size: 100%;
	background: #F4F6F8;
	padding: 3em 0 0 0;

sloyless

transition: -webkit-filter 500ms, filter 500ms

sloyless

<?php
/*
Plugin Name: Custom Plugin
Description: Custom text and image widgets
Version: 1.0
Author: Sean Loyless
Author URI: http://seanloyless.info
*/

/* Widgets */

sloyless

<img src="logo.png" alt="" onerror="if (this.src != 'default.png') this.src = 'default.png';"/>

sloyless

<input id="quantity" class="form-control" type="number" name="quantity" placeholder="Enter Number" inputmode="numeric" pattern="[0-9]*" />

sloyless

img {
  animation-name: rotate;
  animation-duration: 0.75s;
  animation-fill-mode: none;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

@keyframes rotate {
  0% {

sloyless

@keyframes blink {
  /**
   * At the start of the animation the dot
   * has an opacity of .2
   */
  0% {
    opacity: .2;
  }
  /**
   * At 20% the dot is fully visible and

sloyless

// Based on https://css-tricks.com/browser-compatibility-css-grid-layouts-simple-sass-mixins/
// This CSS Grid mixin and styles allow modern browsers to use the newer display: grid functionality, 
// but allow a fallback to Flexbox to support older browsers like IE 11.

@mixin basic-styles {
  display: flex;
  align-items: center; // Vertically center all content
}

@mixin grid-child ($col-start, $col-end, $row-start, $row-end) {

sloyless

// This is to accommodate weird spacing issues in Firefox only.
@-moz-document url-prefix() {
  margin-top: 10px;
}