Oli Studholme oli
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* 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
/ dabblet.css
Last active
August 29, 2015 14:19
Responsive table with th full-width but 2x td still tabular
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /** | |
| * 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
/ dabblet.css
Last active
August 29, 2015 14:27
The first commented line is your dabblet’s title
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /** | |
| * 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; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /** | |
| * Flexbox and ellipsis | |
| */ | |
| ul { | |
| display: flex | |
| list-style: none; | |
| white-space: nowrap; /* Stops line wrapping */ | |
| } | |
| li { | |
| overflow: hidden; /* Prevents overflow from expanding container */ |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /** | |
| * @font-face and serif for Japanese | |
| */ | |
| body {font-face: serif;} | |
| .test {font-face: "test", serif;} |
oli
/ RadiantCMS r:aggregate problem
Created
January 28, 2010 01:57
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| # Site structure: | |
| / - homepage (normal) | |
| /2008 - 2008 articles (normal) | |
| /2008/article1 [was draft, now published] | |
| /2009 - 2009 articles (normal) | |
| /2009/article1 [was draft, now published] | |
| /2009/article2 | |
| /2009/article3 | |
| … |
oli
/ Small Flowers CSS gradient pattern (cleaned up)
Created
April 16, 2011 17:19
Neub attempt at a CSS gradient pattern
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* | |
| Small flower patterns, inspired by http://leaverou.me/css3patterns | |
| (see http://jsfiddle.net/boblet/hdagX/ for prefixed ver | |
| Colors from http://nipponcolors.com/ Kurotobi #554236, Suoh #8e354a, Kohbai #e16b8c | |
| */ | |
| background: | |
| /* circle pattern */ | |
| radial-gradient(#e16b8c 4%, transparent 4%) 0 0, | |
| radial-gradient(#8e354a 7%, transparent 7%) -15px 0, | |
| radial-gradient(#8e354a 7%, transparent 7%) 15px 0, |
oli
/ gist:952995
Created
May 3, 2011 08:19
Example of aligning browser-prefixed properties to the value
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* Example of aligning browser-prefixed properties to the value */ | |
| .star { | |
| display: inline-block; | |
| -webkit-transform: rotate(18deg); | |
| -moz-transform: rotate(18deg); | |
| -ms-transform: rotate(18deg); | |
| -o-transform: rotate(18deg); | |
| transform: rotate(18deg); | |
| } |
oli
/ Titlebar-only Twitter
Created
May 7, 2011 07:57
HTML source for titlebar-only display of new Twitter (very infrequent) http://twitter.com/boblet
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html > | |
| <head> | |
| <title>Twitter</title> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> | |
| <meta charset="utf-8" /> | |
| <script type="text/javascript" charset="utf-8"> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /** | |
| * Testing testing | |
| */ | |
OlderNewer