Skip to content

Instantly share code, notes, and snippets.

View alpual's full-sized avatar

alpual

0 followers · 1 following
View GitHub Profile
@alpual
alpual / box-shadows.css
Created February 22, 2019 17:23
:root{
--box-shadow-1: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
--box-shadow-2: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
--box-shadow-3: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
--box-shadow-4: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
--box-shadow-5: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);
}
@alpual
alpual / map.js
Created February 4, 2019 20:31
Mapping values from one range to another range.
// function to map a value from one range to another range
const map = (value, in_min, in_max, out_min, out_max) => {
return (
((value - in_min) * (out_max - out_min)) / (in_max - in_min) + out_min
);
};
@alpual
alpual / wp-enqueue-resources.php
Last active October 5, 2020 23:29
Wordpress Enqueue Scripts and Styles with timestamp
<?php
function my_load_scripts($hook) {
// create version codes
$my_js_ver = date("ymd-Gis", filemtime( get_stylesheet_directory() .'/js/myscript.js' ));
$my_css_ver = date("ymd-Gis", filemtime( get_stylesheet_directory() . '/style.css' ));
wp_enqueue_script( 'my-script-name', get_stylesheet_directory() . '/js/myscript.js', array(), $my_js_ver );
@alpual
alpual / WP-Bakery-Grid-Stars-Rating.php
Created December 5, 2018 17:22
<?php
//** WooCommerce Stars Shortcodes ***********
//********************************
add_filter( 'vc_gitem_template_attribute_xyn_woo_stars_rating','vc_gitem_template_attribute_xyn_woo_stars_rating', 10, 2 );
function vc_gitem_template_attribute_xyn_woo_stars_rating( $value, $data ) {
extract( array_merge( array(
'post' => null,
'data' => '',
), $data ) );
$atts_extended = array();
@alpual
alpual / typography-standard-css
Created October 25, 2018 23:52
:root {
--base-size: 16px;
--primary-color: #2D3F63;
--secondary-typeface: "Cantata One";
--primary-typeface: "Montserrat";
}
body {
font-size: var(--base-size);
}
@alpual
alpual / responsiveYoutube
Created August 30, 2018 16:35
A responsive, centered youtube video container
<style type="text/css">
.videoWrapper{
display: flex;
justify-content:center;
margin:1.75em;
}
@media screen and (min-width: 768px){
.videoWrapper{
margin: 1.75em;
}
@alpual
alpual / extensions.scss
Created July 5, 2018 23:42
FontAwesome Icon pseudoelements for file-types
/* link file type icons as pseudoelements */
a {
&::after{
font-family: "Font Awesome 5 Free";
font-weight: 600;
font-size: .75rem;
padding-left: .5em;
position: relative;
bottom: 2px;
}
@alpual
alpual / fixVHMobile
Created March 2, 2018 23:42
var fixHeaderSizes = function(query){
var $vh = $(query);
var theheight = $vh.height();
var inlineCss = $vh.attr('style');
$fancyHeader.attr('style', "height: " + theheight + "px !important; " + inlineCss );
}
setTimeout(function(){
fixHeaderSizes("#exampleWithVH"); // for example
fixHeaderSizes(".secondExampleQueryWithVH"); // for example
}, 100);
@alpual
alpual / gist:ae65ecf86e7fb43e38b78c30dde03edd
Created January 30, 2018 19:38
// takes a jquery object and replaces the html with formatted currency (USD)
var formatPrices = function($prices) {
if ($prices.length > 0){
jQuery.each($prices, function(){
var value = Number(this.innerHTML);
this.innerHTML= '$' + value.toFixed(2).replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,");
})
}
}
@alpual
alpual / preload-images.htm
Last active September 16, 2016 00:36 — forked from bennadel/preload-images.htm
Preloading Images In AngularJS With Promises
<!doctype html>
<html ng-app="Demo">
<head>
<meta charset="utf-8" />
<title>
Preloading Images In AngularJS With Promises
</title>
</head>
<body ng-controller="AppController">