| <?php | |
| /* This part goes in your functions.php */ | |
| /** | |
| * Get Some Posts | |
| * | |
| * Use get_posts to get an array of posts matching a set of criteria. | |
| * The category_name is passed to the function. | |
| * get_posts uses the same parameters as WP_query. See the Codex for the full details.. | |
| * http://codex.wordpress.org/Template_Tags/get_posts |
| $base-font-size: 16px; | |
| $base-line-height: 1.5; | |
| // this value may vary for each font | |
| // unitless value relative to 1em | |
| $cap-height: 0.68; | |
| @mixin baseline($font-size, $scale: 2) { |
| //··············································· | |
| // Baseline | |
| //··············································· | |
| // based on a gist by Razvan Onofrei: https://gist.github.com/razwan/10662500 | |
| // see https://gist.github.com/jeromev/11301969 | |
| // | |
| // Example: | |
| // | |
| // body { | |
| // font-size: $base-font-size; |
Native HTML controls are a challenge to style. You can style any element in the web platform that uses Shadow DOM with a pseudo element ::pseudo-element or the /deep/ path selector.
video::webkit-media-controls-timeline {
background-color: lime;
}
video /deep/ input[type=range] {
| { | |
| "vars": { | |
| "@gray-base": "#000", | |
| "@gray-darker": "lighten(@gray-base, 13.5%)", | |
| "@gray-dark": "lighten(@gray-base, 20%)", | |
| "@gray": "lighten(@gray-base, 33.5%)", | |
| "@gray-light": "lighten(@gray-base, 46.7%)", | |
| "@gray-lighter": "lighten(@gray-base, 93.5%)", | |
| "@brand-primary": "#383a5f", | |
| "@brand-success": "#5cb85c", |
| /* | |
| * Stripe WebGl Gradient Animation | |
| * All Credits to Stripe.com | |
| * ScrollObserver functionality to disable animation when not scrolled into view has been disabled and | |
| * commented out for now. | |
| * https://kevinhufnagl.com | |
| */ |