Skip to content

Instantly share code, notes, and snippets.

View therebelrobot's full-sized avatar
☕
A girl made of PLA and caffeine

Aster Haven therebelrobot

☕
A girl made of PLA and caffeine
270 followers · 164 following
View GitHub Profile
@therebelrobot
therebelrobot / hover animation for height:auto
Created February 26, 2014 23:11
/**
* transition using width or height auto
*/
ul,li {
display: block;
margin: 0;
padding: 0;
width: 250px;
}
li {
@therebelrobot
therebelrobot / Git Today
Created February 26, 2014 23:21
(from https://coderwall.com/p/7jbwww)
First, create this alias:
git config --global alias.today "log --since=midnight --author='$(git config user.name)' --oneline"
Of course, you have to replace my name with yours. Then, before leaving office for a well-deserved rest, you can reflect on what you've accomplished during your working day by issuing this simple command:
git today
@therebelrobot
therebelrobot / css_splitter.rake
Created March 14, 2014 19:27 — forked from ChristianPeters/css_splitter.rake
require 'rake'
require 'css_splitter'
desc 'split css files'
namespace :css do
task :split do
infile = ENV['infile'] || raise("missing infile")
outdir = ENV['outdir'] || File.dirname(infile)
max_selectors = ENV['max_selectors'] || 4095
@therebelrobot
therebelrobot / compass-IE-selector-split
Last active August 29, 2015 13:57
How to install compass code to split style sheets for IE selector limit
from http://stackoverflow.com/questions/12204900/how-to-install-compass-code-to-split-style-sheets-for-ie-selector-limit
Create css_spliter.rb file (https://gist.github.com/therebelrobot/9554968) beside your config.rb file, at the root of your sass project.
Add the following line at the beginning of your config.rb file
require 'css_splitter'
And add the 3 following lines at the end (of config.rb)
@therebelrobot
therebelrobot / Pure CSS hexagon
Created March 18, 2014 02:16
Pure CSS Hexagon
/*<div class="hexagon"><div class="hexagon-in1"><div class="hexagon-in2"></div></div></div>*/
.hexagon {
overflow: hidden;
visibility: hidden;
-webkit-transform: rotate(120deg);
-moz-transform: rotate(120deg);
-o-transform: rotate(120deg);
transform: rotate(120deg);
width: 200px;
height: 400px;
@therebelrobot
therebelrobot / Install Ohmyzsh on Ubuntu
Last active August 29, 2015 13:57
sudo apt-get install zsh git-core
wget https://github.com/therebelrobot/oh-my-zsh/raw/master/tools/install.sh -O - | zsh
chsh -s `which zsh`
sudo shutdown -r 0
@therebelrobot
therebelrobot / camelCaseConvert
Created March 26, 2014 16:21
Simple function to convert string to CamelCase
/* http://stackoverflow.com/questions/10425287/convert-string-to-camelcase-with-regular-expression */
/* http://jsfiddle.net/54ZcM/ */
function camelCase(string) {
return string.toLowerCase().replace(/(\-[a-zA-Z])/g, function($1) {
return $1.toUpperCase().replace('-','');
})
}
@therebelrobot
therebelrobot / Glitchy 404 page
Created March 27, 2014 16:10
<!-- From http://codepen.io/kaypooma/pen/ehfjC -->
<style rel="stylesheet">
@import url(http://fonts.googleapis.com/css?family=Gilda+Display);
html {
background: radial-gradient(#000, #111);
color: white;
overflow: hidden;
height: 100%;
user-select: none;
@therebelrobot
therebelrobot / Cool Rotating Gif Effect
Created March 27, 2014 16:17
from http://cssdeck.com/labs/rotation-background-experiment
<!-- For only the image effect, only .outerGif and .innerGif are necessary -->
<!-- Sadly for javascript purposes we need a div within innerGif (CSS animation version doesn't need this, it can use a pseudo-element instead) -->
<body>
<!-- CSS animation -->
<div class='outerGif cssAnim'>
<div class='innerGif'><div class='image'></div></div>
<div class='overlay'><div class='image'></div></div>
</div>
@therebelrobot
therebelrobot / non-jquery doc-ready
Created March 27, 2014 21:14
/* http://stackoverflow.com/a/7053197/2581354 */