Skip to content

Instantly share code, notes, and snippets.

View tomhodgins's full-sized avatar
😍
Writing CSS

Tommy Hodgins tomhodgins

😍
Writing CSS
346 followers · 294 following
View GitHub Profile
@tomhodgins
tomhodgins / shuffle.html
Last active October 13, 2015 02:09
Shuffle — a random card and die roll generator. Tap to shuffle. http://staticresource.com/shuffle.html
<!DOCTYPE html>
<html manifest="shuffle.manifest">
<meta charset=utf-8>
<title>Shuffle</title>
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, minimal-ui">
<script>eval(unescape(escape('♶♡♲☠♩☽♤♯♣♵♭♥♮♴☮♣♲♥♡♴♥♅♬♥♭♥♮♴☨☧♣♡♮♶♡♳☧☩☬♣☽♩☮♧♥♴♃♯♮♴♥♸♴☨☧☲♤☧☩☬♦☽♤♯♣♵♭♥♮♴☮♣♲♥♡♴♥♅♬♥♭♥♮♴☨☧♬♩♮♫☧☩☬♭☽♤♯♣♵♭♥♮♴☮♣♲♥♡♴♥♅♬♥♭♥♮♴☨☧♬♩♮♫☧☩☻♩☮♷♩♤♴♨☽☲☰☰☻♩☮♨♥♩♧♨♴☽☲☰☰☻♣☮♦♩♬♬♓♴♹♬♥☽☧♤♡♲♫♧♲♥♥♮☧☻♣☮♢♥♧♩♮♐♡♴♨☨☩☻♣☮♭♯♶♥♔♯☨☱☰☬☰☩☻♣☮♬♩♮♥♔♯☨☱☹☰☬☰☩☻♣☮♱♵♡♤♲♡♴♩♣♃♵♲♶♥♔♯☨☲☰☰☬☰☬☲☰☰☬☱☰☩☻♣☮♬♩♮♥♔♯☨☲☰☰☬☱☹☰☩☻♣☮♱♵♡♤♲♡♴♩♣♃♵♲♶♥♔♯☨☲☰☰☬☲☰☰☬☱☹☰☬☲☰☰☩☻♣☮♬♩♮♥♔♯☨☱☰☬☲☰☰☩☻♣☮♱♵♡♤♲♡♴♩♣♃♵♲♶♥♔♯☨☰☬☲☰☰☬☰☬☱☹☰☩☻♣☮♬♩♮♥♔♯☨☰☬☱☰☩☻♣☮♱♵♡♤♲♡♴♩♣♃♵♲♶♥♔♯☨☰☬☰☬☱☰☬☰☩☻♣☮♣♬♯♳♥♐♡♴♨☨☩☻♣☮♦♩♬♬☨☩☻♣☮♦♩♬♬♓♴♹♬♥☽☧♷♨♩♴♥☧☻♣☮♢♥♧♩♮♐♡♴♨☨☩☻♣☮♭♯♶♥♔♯☨☳☰☬☲☰☰☩☻♣☮♬♩♮♥♔♯☨☳☰☬☳☵☩☻♣☮♱♵♡♤♲♡♴♩♣♃♵♲♶♥♔♯☨☳☰☬☳☰☬☳☵☬☳☰☩☻♣☮♬♩♮♥♔♯☨☱☶☵☬☳☰☩☻♣☮♱♵♡♤♲♡♴♩♣♃♵♲♶♥♔♯☨☱☷☰☬☳☰☬☱☷☰☬☳☵☩☻♣☮♬♩♮♥♔♯☨☱☷☰☬☲☰☰☩☻♣☮♬♩♮♥♔♯☨☳☰☬☲☰☰☩☻♣☮♣♬♯♳♥♐♡♴♨☨☩☻♣☮♦♩♬♬☨☩☻♣☮♦♩♬♬♓♴♹♬♥☽☧♢♬♡♣♫☧☻♣☮♦♯♮♴☽☧♢♯
@tomhodgins
tomhodgins / joe.html
Last active October 19, 2015 06:25
JOE: The JavaScript Operating Environment. Running live at http://staticresource.com
<!DOCTYPE html>
<html manifest=joe.manifest>
<head>
<meta charset=utf-8>
<title>JOE: The JavaScript Operating Environment</title>
<meta name=apple-mobile-web-app-capable content=yes>
<meta name=apple-mobile-web-app-title content=JOE>
<meta name=apple-mobile-web-app-status-bar-style content=black>
<meta name=viewport content="user-scalable=no,initial-scale=1,maximum-scale=1,minimum-scale=1,minimal-ui">
<link href="http://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400,600,700,900,200italic,300italic,400italic,600italic,700italic,900italic" rel=stylesheet type=text/css>
@tomhodgins
tomhodgins / gestures.html
Last active October 20, 2015 18:00
Simple single-digit gesture detection using plain JavaScript. Currently detects a swipe going up, down, left, or right. Touchscreens only! http://staticresource.com/gestures.html
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<meta name=viewport content="width=device-width, initial-scale=1, user-scalable=no">
<title>Swipe Gesture Recognition in JavaScript</title>
<style>
html, body {
width: 100%;
height: 100%;
@tomhodgins
tomhodgins / index.html
Last active October 20, 2015 22:29
View Source of any website or JavaScript, CSS, or EQCSS file, in any browser, on any device. Try creating a bookmarklet like the comment in the HTML file suggests and try it out! To see a demo that views the source of Qwant.com: http://staticresource.com/inspect?http://qwant.com
<!DOCTYPE html>
<html>
<!--
To inspect pages using a bookmarklet, create a bookmark with the following address:
javascript:(function(){window.open('http://staticresource.com/inspect?'+window.location.href)})();
-->
<head>
<meta charset=utf-8>
<title>View Source</title>
<meta name=viewport content="user-scalable=yes,initial-scale=1,width=device-width">
@tomhodgins
tomhodgins / snake.html
Last active October 20, 2015 22:41
snake.html - Draw a colour-changing snake on your screen by dragging the mouse cursor around. Demo at http://staticresource.com/snake.html
<!DOCTYPE html>
<html manifest=snake.manifest>
<meta charset=utf-8>
<title>Snake</title>
<meta name=apple-mobile-web-app-capable content=yes>
<meta name=apple-mobile-web-app-status-bar-style content=black>
<meta name=viewport content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, minimal-ui">
<script>eval(unescape(escape('♶♡♲☠♩☽♤♯♣♵♭♥♮♴☮♣♲♥♡♴♥♅♬♥♭♥♮♴☨☧♣♡♮♶♡♳☧☩☬♣☽♩☮♧♥♴♃♯♮♴♥♸♴☨☧☲♤☧☩☬♦☽♤♯♣♵♭♥♮♴☮♣♲♥♡♴♥♅♬♥♭♥♮♴☨☧♬♩♮♫☧☩☬♭☽♤♯♣♵♭♥♮♴☮♣♲♥♡♴♥♅♬♥♭♥♮♴☨☧♬♩♮♫☧☩☻♩☮♷♩♤♴♨☽☲☰☰☻♩☮♨♥♩♧♨♴☽☲☰☰☻♣☮♦♩♬♬♓♴♹♬♥☽☧☣☳☳☳☧☻♣☮♢♥♧♩♮♐♡♴♨☨☩☻♣☮♭♯♶♥♔♯☨☱☰☬☰☩☻♣☮♬♩♮♥♔♯☨☱☹☰☬☰☩☻♣☮♱♵♡♤♲♡♴♩♣♃♵♲♶♥♔♯☨☲☰☰☬☰☬☲☰☰☬☱☰☩☻♣☮♬♩♮♥♔♯☨☲☰☰☬☱☹☰☩☻♣☮♱♵♡♤♲♡♴♩♣♃♵♲♶♥♔♯☨☲☰☰☬☲☰☰☬☱☹☰☬☲☰☰☩☻♣☮♬♩♮♥♔♯☨☱☰☬☲☰☰☩☻♣☮♱♵♡♤♲♡♴♩♣♃♵♲♶♥♔♯☨☰☬☲☰☰☬☰☬☱☹☰☩☻♣☮♬♩♮♥♔♯☨☰☬☱☰☩☻♣☮♱♵♡♤♲♡♴♩♣♃♵♲♶♥♔♯☨☰☬☰☬☱☰☬☰☩☻♣☮♣♬♯♳♥♐♡♴♨☨☩☻♣☮♦♩♬♬☨☩☻♣☮♦♩♬♬♓♴♹♬♥☽☧♭♡♧♥♮♴♡☧☻♣☮♢♥♧♩♮♐♡♴♨☨☩☻♣☮♡♲♣☨☱☵☵☬☱☲☰☬☹☬☹☬☱☬☲☬☲☪♍♡♴♨☮♐♉☩☻♣☮♣♬♯♳♥♐♡♴♨☨☩☻♣☮♦♩♬♬☨☩☻♣☮♦♩♬♬♓♴♹♬♥☽☧♭♩♤♮♩♧♨♴♢♬♵♥☧☻♣☮♢♥♧♩♮♐♡♴♨☨☩☻♣☮♡♲♣☨☱☴☷☬☱☳☰☬☱☰☬☱☰☬☱☬☲☬☲☪♍♡♴♨☮♐♉☩☻♣☮♣♬♯♳♥♐♡♴♨☨☩☻♣☮♦♩♬♬☨☩☻♣☮♦♩♬♬♓♴♹♬♥☽☧♤♡♲♫♢♬♵♥☧☻♣☮♢♥♧♩♮♐♡♴♨☨☩☻♣☮♡♲♣☨☱☳☵☬☱☴☰☬☱☱☬☱☱☬☱☬☲☬☲☪♍♡♴♨☮
@tomhodgins
tomhodgins / touches.html
Last active October 26, 2015 16:18
Display multiple touchscreen touches. http://staticresource.com/touches.html
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<meta name=viewport content="width=device-width, initial-scale=1, user-scalable=no">
<title>Multitouch Support</title>
<style>
* {
-webkit-box-sizing: border-box;
box-sizing: border-box;
@tomhodgins
tomhodgins / responsive-videos.html
Last active October 26, 2015 20:15
This plugin will locate any Youtube or Vimeo videos in your HTML and make them expand to fill their containing element while keeping their original aspect ratio. Demo at: http://staticresource.com/videos.html
<!DOCTYPE html>
<head>
<meta charset=utf-8>
<title>Responsive Youtube + Vimeo Videos</title>
<meta name=description content="This plugin will locate any Youtube or Vimeo videos in your HTML and make them expand to fill their containing element while keeping their original aspect ratio">
<style>
body {
margin: 0;
}
[data-video] {
@tomhodgins
tomhodgins / procss.html
Last active November 3, 2015 05:42
This pen compiles CSS with variables stored in JavaScript. Then a simple JavaScript function performs a search & replace for each instance of a variable in the source CSS and replaces it with the value of the variable stored in JavaScript. http://staticresource.com/procss.html
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<meta name=viewport content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1">
<link href="//fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800" rel="stylesheet" type="text/css">
<link href="//fonts.googleapis.com/css?family=Source+Code+Pro:300,400,500,600,700,900" rel="stylesheet" type="text/css">
<title>ProCSS: The CSS Pro-Processor</title>
<link href="http://staticresource.com/data-buttons.css" rel="stylesheet" type="text/css">
<style>
@tomhodgins
tomhodgins / block-styles.html
Last active November 3, 2015 05:43
Using Element Queries to build responsive content blocks. http://staticresource.com/block-styles.html
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<title>Block styles</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800" rel=stylesheet>
<link href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel=stylesheet>
<link href="http:////maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel=stylesheet>
<link href="http://staticresource.com/data-buttons.css" rel=stylesheet>
@tomhodgins
tomhodgins / hexshift.html
Last active November 3, 2015 05:44
Add or subtract from a colour value stored in hexadecimal. http://staticresource.com/converter.html
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<meta name=viewport content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1">
<link href="http://staticresource.com/formal.css" rel=stylesheet>
<title>Hex Color Changer</title>
<style>
* {
box-sizing: border-box;