Arcade looking button mixin - feel free to fork/use it and give it a like.
A Pen by Mario Duarte on CodePen.
| //This will fix the bug without losing the paralax effect | |
| //turn the webkit backface visible | |
| //NOTE: do not use any force gpu render on the html or body, this will make the background still glitching | |
| html, body, main{ | |
| -webkit-backface-visibility: visible; | |
| height: 100%; | |
| min-height: 100%; | |
| } |
| <!doctype html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset ="utf-8"> | |
| <title>Name - banner size</title> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> | |
| <meta name="ad.size" content="height=0,width=0"> | |
| <script src="http://code.jquery.com/jquery-1.9.1.js"></script> |
| if (!isset($_POST['data']) && !empty($_POST['data'])) { | |
| $data = $_POST['data']; | |
| $jsonObject = json_encode($data); | |
| file_put_contents('data.json', $jsonObject); | |
| } |
| //B&W Variables | |
| $black: #000000; | |
| $asphalt: #212121; | |
| $choal: #333333; | |
| $charcoal: #555555; | |
| $grey: #999999; | |
| $lightGrey: #dddddd; | |
| $vapor: #eeeeee; | |
| $clouds: #f8f8f8; | |
| $white: #ffffff; |
| @mixin aspect-ratio($percentual-height){ | |
| // Wrapper | |
| position: relative; | |
| display: inline-block; | |
| vertical-align: top; | |
| &:before { | |
| padding-top:$percentual-height; | |
| content: ''; | |
| display: block; | |
| } |
| <div class="wrapper"> | |
| <div class="phone"> | |
| <div class="camera"></div> | |
| <div class="speaker"></div> | |
| <div class="screen"> | |
| <div class="inner"> | |
| <!-- your mobile layout here --> | |
| </div> | |
| </div> |
| /** | |
| * Custom WP gallery | |
| */ | |
| add_shortcode('gallery', 'my_gallery_shortcode'); | |
| function my_gallery_shortcode($attr) { | |
| $post = get_post(); | |
| static $instance = 0; | |
| $instance++; |
| { | |
| "esversion": 6 | |
| } |