git clone git@github.com:YOUR-USERNAME/YOUR-FORKED-REPO.git
cd into/cloned/fork-repo
git remote add upstream git://github.com/ORIGINAL-DEV-USERNAME/REPO-YOU-FORKED-FROM.git
git fetch upstream
#!/usr/bin/env ruby | |
# checkout the readme from the master branch | |
`git checkout gh-pages; git checkout master README.md` | |
path = `pwd`.gsub(/\n/, "") | |
readme_path = File.join(path, "README.md") | |
index_path = File.join(path, "index.md") | |
# write the index readme file |
/** | |
* How to make 3-corner-rounded triangle in CSS (SO) | |
* http://stackoverflow.com/q/14446677/1397351 | |
*/ | |
.triangle { | |
position: relative; | |
background-color: orange; | |
text-align: left; | |
} | |
.triangle:before, |
/* Pre-Define HTML5 Elements in IE */ | |
(function(){ var els = "source|address|article|aside|audio|canvas|command|datalist|details|dialog|figure|figcaption|footer|header|hgroup|keygen|mark|meter|menu|nav|picture|progress|ruby|section|time|video".split('|'); for(var i = 0; i < els.length; i++) { document.createElement(els[i]); } } )(); |
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] {
@mixin grab-cursor { | |
cursor: url('http://www.google.com/intl/en_ALL/mapfiles/openhand.cur'), all-scroll; | |
cursor: url('data:image/vnd.microsoft.icon;base64,AAACAAEAICACAAcABQAwAQAAFgAAACgAAAAgAAAAQAAAAAEAAQAAAAAAAAEAAAAAAAAAAAAAAgAAAAAAAAAAAAAA////AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD8AAAA/AAAAfwAAAP+AAAH/gAAB/8AAA//AAAd/wAAGf+AAAH9gAADbYAAA2yAAAZsAAAGbAAAAGAAAAAAAAA//////////////////////////////////////////////////////////////////////////////////////gH///4B///8Af//+AD///AA///wAH//4AB//8AAf//AAD//5AA///gAP//4AD//8AF///AB///5A////5///8='), all-scroll; | |
cursor: -webkit-grab; | |
cursor: -moz-grab; | |
cursor: -o-grab; | |
cursor: -ms-grab; | |
cursor: grab; | |
} |
background: linear-gradient(270deg, #30c59e, #d770ca); | |
background-size: 400% 400%; | |
-webkit-animation: AnimationName 11s ease infinite; | |
-moz-animation: AnimationName 11s ease infinite; | |
-o-animation: AnimationName 11s ease infinite; | |
animation: AnimationName 11s ease infinite; | |
@-webkit-keyframes AnimationName { | |
0%{background-position:0% 50%} | |
50%{background-position:100% 50%} | |
100%{background-position:0% 50%} |