Skip to content

Instantly share code, notes, and snippets.

Avatar
👽
Abducted by Aliens

Michael Pumo michaelpumo

👽
Abducted by Aliens
View GitHub Profile
@michaelpumo
michaelpumo / tailwind.config.js
Last active Mar 12, 2021
Robert Penner Easing Functions for Tailwind
View tailwind.config.js
module.exports = {
theme: {
extend: {
transitionTimingFunction: {
'in-cubic': 'cubic-bezier(0.55, 0.055, 0.675, 0.19)',
'out-cubic': 'cubic-bezier(0.215, 0.61, 0.355, 1)',
'in-out-cubic': 'cubic-bezier(0.645, 0.045, 0.355, 1)',
'in-circ': 'cubic-bezier(0.6, 0.04, 0.98, 0.335)',
'out-circ': 'cubic-bezier(0.075, 0.82, 0.165, 1)',
'in-out-circ': 'cubic-bezier(0.785, 0.135, 0.15, 0.86)',
@michaelpumo
michaelpumo / looping-map-colours.scss
Last active Sep 27, 2019
Looping SCSS Map Colours
View looping-map-colours.scss
// ----
// Sass (v3.4.25)
// Compass (v1.0.3)
// ----
$colours: (
'green': #00da80,
'pink': #fad1e3,
'yellow': #fbee46,
'red': #ed1c24,
@michaelpumo
michaelpumo / scss-easing-functions.scss
Last active Jul 29, 2017
SCSS Cubic Bezier Easing Functions
View scss-easing-functions.scss
$easeInCubic: cubic-bezier(.55,.055,.675,.19);
$easeOutCubic: cubic-bezier(.215,.61,.355,1);
$easeInOutCubic: cubic-bezier(.645,.045,.355,1);
$easeInCirc: cubic-bezier(.6,.04,.98,.335);
$easeOutCirc: cubic-bezier(.075,.82,.165,1);
$easeInOutCirc: cubic-bezier(.785,.135,.15,.86);
$easeInExpo: cubic-bezier(.95,.05,.795,.035);
$easeOutExpo: cubic-bezier(.19,1,.22,1);
$easeInOutExpo: cubic-bezier(1,0,0,1);
$easeInQuad: cubic-bezier(.55,.085,.68,.53);
@michaelpumo
michaelpumo / slugify.js
Created Jul 28, 2017
A utility function for turning a string into a slugged version.
View slugify.js
function slugify (text) {
const special = 'ÁÄÂÀÃÅČÇĆĎÉĚËÈÊẼĔȆÍÌÎÏŇÑÓÖÒÔÕØŘŔŠŤÚŮÜÙÛÝŸŽáäâàãåčçćďéěëèêẽĕȇíìîïňñóöòôõøðřŕšťúůüùûýÿžþÞĐđßÆa·/_,:;'
const ordinary = 'AAAAAACCCDEEEEEEEEIIIINNOOOOOORRSTUUUUUYYZaaaaaacccdeeeeeeeeiiiinnooooooorrstuuuuuyyzbBDdBAa------'
const p = new RegExp(special.split('').join('|'), 'g')
return text.toString().toLowerCase()
.replace(/\s+/g, '-')
.replace(p, c => ordinary.charAt(special.indexOf(c)))
.replace(/&/g, '-and-')
.replace(/[^\w-]+/g, '')
@michaelpumo
michaelpumo / .htaccess
Last active Jul 19, 2017
Rewrite uploads folder in WordPress to a remote URL
View .htaccess
RedirectMatch 301 ^/wp-content/uploads/(.*)$ http://example.com/wp-content/uploads/$1
@michaelpumo
michaelpumo / themes.scss
Last active Jul 19, 2017
Contextual SCSS theming mixin
View themes.scss
$brand: (
'turquoise': #5C9AB1,
'red': #FF495C,
'green': #6ECB98,
'yellow': #FFC700,
'orange': #FF6B00,
'blue': #009BDE,
'purple': #A35EB5
);
@michaelpumo
michaelpumo / underline.scss
Last active Dec 6, 2016
Smarter Underline Mixin SCSS
View underline.scss
@function em($pixels, $context: 16) {
@return #{$pixels/$context}em;
}
@mixin underline($color: black, $hover: black, $background: white, $position: 16.5, $thickness: 0.08em) {
$underline-position: em($position);
$underline-color: $color;
$underline-color-hover: $hover;
$underline-color-shadow: $background;