Skip to content

Instantly share code, notes, and snippets.

Oli Studholme oli

View GitHub Profile
@oli
oli / dabblet.css
Created Sep 2, 2015
@font-face and serif for Japanese
View dabblet.css
/**
* @font-face and serif for Japanese
*/
body {font-face: serif;}
.test {font-face: "test", serif;}
@oli
oli / dabblet.css
Created Sep 2, 2015
Flexbox and ellipsis
View dabblet.css
/**
* Flexbox and ellipsis
*/
ul {
display: flex
list-style: none;
white-space: nowrap; /* Stops line wrapping */
}
li {
overflow: hidden; /* Prevents overflow from expanding container */
@oli
oli / dabblet.css
Last active Aug 29, 2015
The first commented line is your dabblet’s title
View dabblet.css
/**
* The first commented line is your dabblet’s title
*/
ul {
display: flex;
width: 100%;
overflow: hidden;
border: 1px solid #eee;
white-space: nowrap;
overflow: hidden;
@oli
oli / dabblet.css
Last active Aug 29, 2015
Responsive table with th full-width but 2x td still tabular
View dabblet.css
/**
* Responsive table with th full-width but 2x td still tabular
*/
table {
width: 100%;
display: table;}
th, td {background: #eee;}
tr, th {
display: block;
@oli
oli / dabblet.css
Created Jan 22, 2015
Does anyone transition Flexbox order yet?
View dabblet.css
/* Does anyone transition Flexbox order yet?
http://dev.w3.org/csswg/css-flexbox/#order-property */
/* ✘ Chrome 28
✘ Safari 6.0.3
✘ Firefox 20
✓ Aurora 22
? IE 10
*/
@oli
oli / agnoster-oli.zsh-theme
Last active Feb 27, 2019
Adding extra Git repo sugar to the ZSH agnoster theme (with Solarized)
View agnoster-oli.zsh-theme
# vim:ft=zsh ts=2 sw=2 sts=2
#
# agnoster's Theme - https://gist.github.com/3712874
# A Powerline-inspired theme for ZSH
#
# # README
#
# In order for this theme to render correctly, you will need a
# [Powerline-patched font](https://github.com/Lokaltog/powerline-fonts).
#
@oli
oli / Horizontal rule style
Created Oct 10, 2013
A minimal horizontal rule style for printing, despite browsers being incapable of printing a hairline
View Horizontal rule style
/* Based on Glyph, by Harry Roberts */
/* http://css-tricks.com/simple-styles-for-horizontal-rules/ */
hr {
height: 0;
margin: 3em 0;
padding: 0;
border: none;
border-top: 1px solid #999;
text-align: center;
@oli
oli / dabblet.css
Created May 4, 2013
Does anyone transition Flexbox order yet?
View dabblet.css
/* Does anyone transition Flexbox order yet?
http://dev.w3.org/csswg/css-flexbox/#order-property */
/* ✘ Chrome 28
✘ Safari 6.0.3
✘ Firefox 20
✓ Aurora 22
? IE 10
*/
@oli
oli / dabblet.css
Created May 4, 2013
Is visible transitionable?
View dabblet.css
/* Is visible transitionable?
Despite the spec it appears so
http://dev.w3.org/csswg/css-box/#the-visibility-property */
.box {
visibility: visible;
transition: all 0.5s ease-out;
width: 18em;
min-height: 4em;
padding: 0.75em 0;
@oli
oli / dabblet.css
Created Apr 21, 2013
Is visible transitionable?
View dabblet.css
/* Is visible transitionable?
Despite the spec it appears so
http://dev.w3.org/csswg/css-box/#the-visibility-property */
.box {
visibility: visible;
transition: all 0.5s ease-out;
width: 18em;
min-height: 4em;
padding: 0.75em 0;
You can’t perform that action at this time.