Skip to content

Instantly share code, notes, and snippets.

Oli Studholme oli

Block or report user

Report or block oli

Hide content and notifications from this user.

Learn more about blocking users

Contact Support about this user’s behavior.

Learn more about reporting abuse

Report abuse
View GitHub Profile
@oli
oli / dabblet.css
Created Dec 28, 2011
CSS Transitions with transparency, rgba, hsla
View dabblet.css
/* CSS Transitions with transparency, rgba, hsla */
/* color transitions occur in rgba color-space
this means transitioning hsla lightness or hue doesn’t work as expected */
div {height: 80px; position: relative;}
div > div {width: 100px; height: 50px; border: 1px solid #999; transition: all 2s;}
span {float: left; margin-left: 124px; margin-top: -50px;}
/* transparent → rgba */
.one div {background-color: transparent;}
.one:hover div {background-color: rgba(191, 63, 63, .8);}
/* transparent → hsla */
View gist:1141532
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js ie6 oldie" lang="en"> <![endif]-->
<!--[if IE 7]> <html class="no-js ie7 oldie" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="no-js ie8 oldie" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
@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 / dabblet.css
Created Dec 3, 2012
Example 2 — The calc() and attr() functions
View dabblet.css
/* Example 2 — The calc() and attr() functions */
/* From Beginning HTML5 and CSS3 — The Web Evolved http://thewebevolved.com/ */
body {
width: 80%;
max-width: 42em;
margin: auto;
font: 1em/1.5 Georgia, serif;
}
h1,
h2 {
@oli
oli / dabblet.css
Created Jan 26, 2012
Using calc(), rem & vw for scalable rem-based layout
View dabblet.css
/* Using calc(), rem & vw for scalable rem-based layout */
/* ref http://dev.w3.org/csswg/css3-values/#calc0 example 13 */
/* waiting for vw support */
body {margin: 0; text-align: center;}
.wrapper {
width: 40rem;
margin: 2em auto;
border-bottom: 2px solid #ccc;
}
.content {
View gist:1637874
# ~/.gitconfig from @boblet
# initially based on http://rails.wincent.com/wiki/Git_quickstart
[core]
excludesfile = /Users/oli/.gitignore
legacyheaders = false # >git 1.5
quotepath = false
# http://stackoverflow.com/questions/136178/git-diff-handling-long-lines
pager = less -r
# if ↑ doesn’t work, try: pager = less -+$LESS -FRX
@oli
oli / dabblet.css
Created Jan 26, 2012
calc() and attr() tests
View dabblet.css
/* calc() and attr() tests */
span {outline: 1px solid #ccc;}
.a {font-size: 2em;}
.aa {font-size: calc(1em * 2);}
body {margin: 0;}
p {margin-left: 1.5em;}
.wrapper {padding-top: 2em; clear: left;}
.content {
@oli
oli / gist:1052588
Created Jun 29, 2011
Example of blockquote with cite + schema.org
View gist:1052588
<blockquote cite="https://twitter.com/aaronbassett/status/84037182196678658">
<p>I had ice-cream tonight. It was awesome.</p>
<footer itemscope itemtype="http://schema.org/Person">
— <a href="https://twitter.com/aaronbassett" itemprop="url"><span itemprop="name">Aaron Bassett</span></a>
on <cite><a href="https://twitter.com/aaronbassett/status/84037182196678658">Twitter</a></cite>
</footer>
</blockquote>
@oli
oli / dabblet.css
Last active Jul 13, 2016
flexbox width test
View dabblet.css
/**
* flexbox width test
*/
.ruler {
width: 984px;
height: 6px;
background-color: #888;
}
.container {
width: 983px; /* 983 - 2px (inter-box spacing) = 981 / 3 = 327px */
@oli
oli / dabblet.css
Created Jul 13, 2016
Vertical centering with scrolling overflow
View dabblet.css
/**
* Vertical centering with scrolling overflow
*/
.wrapper1,
.wrapper2 {
width:100%;
height:100%;
margin:0;
padding:0;
}
You can’t perform that action at this time.