Skip to content

Instantly share code, notes, and snippets.

View deavy's full-sized avatar
🇺🇦
Keep Calm and Support Ukraine

Deavy deavy

🇺🇦
Keep Calm and Support Ukraine
View GitHub Profile
@zethussuen
zethussuen / font-tracking.scss
Created April 15, 2013 19:05
Mixin to convert Photoshop font-tracking value to em
// font-tracking of 100 = 0.1em
@mixin font-tracking($value) {
letter-spacing: ($value/1000) + em;
}
@hofmannsven
hofmannsven / README.md
Last active November 8, 2023 22:49
SCSS Cheatsheet
@AllThingsSmitty
AllThingsSmitty / effect.css
Created February 19, 2015 15:40
iOS-like transparency effect in CSS with backdrop-filter
.modal {
padding: 1rem 2rem;
max-width: 50%;
border-radius: 5px;
background-color: rgba(255, 255, 255, 0.95);
color: #333;
font-family: sans-serif;
line-height: 1.5;
}
.modal a { color: #bf0222; }
@odan
odan / xampp_php7_xdebug.md
Last active June 28, 2024 12:58
Installing Xdebug for XAMPP
@bendc
bendc / easing.css
Created September 23, 2016 04:12
Easing CSS variables
:root {
--ease-in-quad: cubic-bezier(.55, .085, .68, .53);
--ease-in-cubic: cubic-bezier(.550, .055, .675, .19);
--ease-in-quart: cubic-bezier(.895, .03, .685, .22);
--ease-in-quint: cubic-bezier(.755, .05, .855, .06);
--ease-in-expo: cubic-bezier(.95, .05, .795, .035);
--ease-in-circ: cubic-bezier(.6, .04, .98, .335);
--ease-out-quad: cubic-bezier(.25, .46, .45, .94);
--ease-out-cubic: cubic-bezier(.215, .61, .355, 1);
@mae829
mae829 / gulp.config.js
Last active March 17, 2021 18:43
Gulp project setup
/**
* WPGulp Configuration File
*
* 1. Edit the variables as per project requirements.
* 2. Everything else is in the gulpfile to keep it consistent across our projects.
*/
// Define the default project configuration.
let projectConfig = {
// Local project URL of your already running WordPress site. Could be something like wpgulp.local or localhost:3000 depending upon your local WordPress setup.
@tigt
tigt / git-branch-to-favicon.js
Created March 18, 2020 21:10
Creates an SVG string that can be used as a favicon across different Git branches. Actually getting this into the browser is sadly project-specific.
const { execSync } = require('child_process')
const { createHash } = require('crypto')
const invertColor = require('invert-color')
const branchName = execSync('git rev-parse --abbrev-ref HEAD')
const hash = createHash('sha256')
hash.update(branchName)
const color = '#' + hash.digest().toString('hex').substring(0, 6)
const invertedColor = invertColor(color, true)