Skip to content

Instantly share code, notes, and snippets.


Renato Carvalho renatocarvalho

View GitHub Profile
View example.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "">
<!-- saved from url=(0068) -->
<HTML xmlns=""><HEAD><META http-equiv="Content-Type" content="text/html; charset=UTF-8">
<TITLE>Compose a Vertical Rhythm example</TITLE>
<LINK rel="stylesheet" type="text/css" href="sassy.css" title="sassy">
<LINK rel="alternate stylesheet" type="text/css" href="original.css" title="original">
<H1>Aboard Minerva off the Coast of New England</H1>
renatocarvalho / gist:2384612
Created Apr 14, 2012 — forked from jmwhittaker/gist:847243
Border-image CSS3 Mixin for Compass & SASS
View gist:2384612
/* Mixin for Compass - border-image
$border-image([$image-url], [$offsets], [$repeats])
@include border-image(url(../my_image.png), 10, stretch)
@include border-image(url(../my_image.png), 10 5 10 5, stretch repeat)
---------------------------------------- */
@mixin border-image($url, $offsets, $repeats) {
View mobile-meta-links.html
renatocarvalho / web-app.html
Created Apr 24, 2012 — forked from tfausak/ios-8-web-app.html
Web app with icons and startup images for iOS
View web-app.html
<!doctype html>
<meta charset="utf-8">
<meta content="yes" name="apple-mobile-web-app-capable">
<!-- iPhone -->
<link href=""
renatocarvalho / url-scroll-fix
Created May 3, 2012 — forked from foliomob/url-scroll-fix
iOS webkit hide url bar and native scrolling
View url-scroll-fix
<!DOCTYPE html>
<!-- NOTES
I've been looking for a simple way to persistently show a header and hide the url bar (beyond just position:fixed; top:0, which is only persistent until you scroll back home). I think this is it. Maybe there are better ways, but this sure is simple! One thing that's missing though is to have the URL bar disappear again once you scroll anywhere else on the page.
It's based on the awesome work of mattsahr, bjrn, and bradbirdsall here: It's not the problem they were trying to fix, but it's an awesome collateral benefit. To get what I was looking for, I tore a lot of their stuff out, and made the simplest starting file I could.
I tested it on an iPhone running iOS 5.1 and it seems to do what I was looking for.
View _media-queries.scss
// ---------------------------------------------------------------------------------
// Mixin for Media Queries
// ---------------------------------------------------------------------------------
// Device Dimensions inpired on:
// Usage
// --------------------------------------------------
// .profile-pic
renatocarvalho / dabblet.css
Created Sep 19, 2012 — forked from Daniel-Hug/dabblet.css
A "deeper" indented text effect with the :before and :after pseudo-elements.
View dabblet.css
* A "deeper" indented text effect with the :before and :after pseudo-elements.
html, body {
height: 100%;
body {
margin: 0;
View gist:3962409
<html lang="pt-br" xmlns="">
<meta charset="utf-8" />
<meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible" />
Fakebook - News Feed
<link href="/images/favicon.png" rel="icon" type="image/png" />
<link href="/images/favicon.ico" rel="shortcut icon" />
<link href="../stylesheets/application.css" media="all" rel="stylesheet" type="text/css" />
renatocarvalho / Preferences.sublime-settings
Last active Sep 15, 2017
My User Settings for Sublime Text
View Preferences.sublime-settings
renatocarvalho / gist:4250910
Created Dec 10, 2012 — forked from boriskaiser/gist:3908158
Easy retina-ready images using SASS + Compass
View gist:4250910
=background-2x($background, $file: 'png')
$image: #{$background+"."+$file}
$image2x: #{$background+"@2x."+$file}
background: image-url($image) no-repeat
@media (min--moz-device-pixel-ratio: 1.3),(-o-min-device-pixel-ratio: 2.6/2),(-webkit-min-device-pixel-ratio: 1.3),(min-device-pixel-ratio: 1.3),(min-resolution: 1.3dppx)
background-image: image-url($image2x)
background-size: image-width($image) image-height($image)
// usage for „logo.png” + „logo2x.png”