Skip to content

Instantly share code, notes, and snippets.

View tomhodgins's full-sized avatar
😍
Writing CSS

Tommy Hodgins tomhodgins

😍
Writing CSS
347 followers · 294 following
View GitHub Profile
@tomhodgins
tomhodgins / letter-style.html
Last active June 29, 2022 11:05
Folded Paper CSS Style
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link href="//fonts.googleapis.com/css?family=Merriweather:400,300,300italic,400italic,700,900,700italic,900italic" rel="stylesheet" type="text/css">
<style type="text/css">
* {
box-sizing: border-box;
-moz-box-sizing: border-box;
@tomhodgins
tomhodgins / prettyDate.js
Last active July 21, 2016 17:20
Uses Javascript to grab the current time and display it like: 'Friday May 1st, 6:39 pm'
var d = new Date(),
days = ['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'],
day = days[d.getDay()],
months = ['January','February','March','April','May','June','July','August','September','October','November','December'],
month = months[d.getMonth()],
date = d.getDate(),
suf = ['th','st','nd','rd'],
v = date%100,
date = date+(suf[(v-20)%10]||suf[v]||suf[0]),
hours = d.getHours(),
@tomhodgins
tomhodgins / fizzbuzz.html
Last active August 29, 2015 14:21
FizzBuzz in JavaScript
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>FizzBuzz in JavaScript</title>
</head>
<body>
<script>
function fizzBuzz() { // Let's create a function called FizzBuzz
var message = '', digit; // We'll start with an empty message, and a placeholder for the digits
@tomhodgins
tomhodgins / Percent & Dollar inputs, linked to a Range Slider.markdown
Created May 28, 2015 16:25
Percent & Dollar inputs, linked to a Range Slider
@tomhodgins
tomhodgins / hide-the-side.js
Created July 3, 2015 01:57
Browser Script: Adds an invisible checkbox to the top-right corner of Reddit.com that hides the sidebar when checked. You can add this code to extstyler.js in Extstyler to use this script in Chrome https://github.com/tomhodgins/extstyler
// Add this code to Reddit.com
/* Hide the Side */
if (document.getElementsByTagName('html')[0].classList.contains('reddit')) {
var input = document.createElement('input'),
inputCSS = document.createElement('style'),
inputJS = document.createElement('script');
input.id = 'hTS';
input.setAttribute('type','checkbox');
input.setAttribute('onclick','hideTheSide()');
@tomhodgins
tomhodgins / youtube-cinema-mode.js
Created July 3, 2015 02:42
Browser Script: Youtube Cinema Mode. Adds an invisible checkbox to the top-right corner of youtube.com that hides everything but the video. You can add this code to extstyler.js in Extstyler to use this script in Chrome https://github.com/tomhodgins/extstyler
// Run code on Youtube.com
/* Youtube Cinema Mode */
if (document.getElementsByTagName('html')[0].classList.contains('youtube')) {
var input = document.createElement('input'),
inputCSS = document.createElement('style'),
inputJS = document.createElement('script');
input.id = 'ytCM';
input.setAttribute('type','checkbox');
input.setAttribute('onclick','cinemaMode()');
@tomhodgins
tomhodgins / 5keleton-lite.html
Last active August 5, 2017 20:48
5keleton Lite, a lightweight barebones HTML5 template with jQuery, Bootstrap, FontAwesome, Ionicons, Open Sans, and Source Sans pro linked in already. Great starting point for landing pages and single-page apps, just copy the file and remove what you need.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>5keleton Lite</title>
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, minimal-ui">
<link href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABwElEQVR42pWST0sbURTFr7hzET+CmwouxA+gUvAPbbNTFIqCtH4D0Y2ubMAUIRlK0NZKiJjEjdqCKEZBFD+BQgJOdKAjCtKmghOVmlCa0znPOCbGEXzw49x377lnFm/k4TEMeRGLxRAIBODz+Yiq2Ts6knp56ui6NIRCIaRSKWQyGViWRVirHmf0uAaEw2FlNE2TXy6DvWQyCXpcA/x+PwzDUAvZrHhKZ+xxRo9rAE26roNaKEiVy+zpgHQ6DepzZvKvINUTG6K9j77BLV6qw2DMS5z7REK0gr3jBOT+Ss27eS8O8jvYz61hL7eK/bzSO9i3WbU926D3xt5xAq7z4hmYe43dPxEkroNYvwo6qlB3jT3lGYi8AnecgKu81PbPdmLL+ooV6+MtF35bFWW9rews6OVOaYCnb6YDifMpLP0aL/LBgffFn6pve6bR96W9IqD27ec2rJxpiJ+MKhZOxqhFnFp56K0I6A29xLI5iYgxXGSkoqYuH0+C3oqAnk+t2DyN4LsZxLcfAVfooZc7Za8wvCDRLq0ZXcFmdFM1ass9JfehuMTLXoFvenYpdca5NB7+lqbDjA31Eeih9+4/+A+4dfTbehtGHQAAAABJRU5ErkJggg==" rel="shortcut icon">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600i
@tomhodgins
tomhodgins / realestatemogul.js
Created July 7, 2015 02:30
RealEstateMogul ascii art
console.log(' ___ ___ _ _ ___ ___ _____ _ _____ ___ lll\n| _ \\ __| /_\\ | | | __/ __|_ _/_\\_ _| __| l::l\n| / _| / _ \\| |__ | _|\\__ \\ | |/ _ \\| | | _| l:::l\n|_|_\\___/_/ \\_\\____| |___|___/ |_/_/ \\_\\_| |___| l::::l\n mmmmmmmmm mmmmmmm ooooooooooo gggggggggggggggguuuuuu uuuuuul::::l\nmm::::::::m m:::::::mm oo:::::::::::oo g:::::::::::::::gu::::u u::::ul::::l\nm::::::::::mm::::::::::mo:::::::::::::::o g::::::::::::::::gu::::u u::::ul::::l\nm::::::::::::::::::::::mo:::::ooooo:::::og::::::ggggg::::::gu::::u u::::ul::::l\nm:::::mmm::::::mmm:::::mo::::o o::::og:::::g g:::::gu::::u u::::ul::::l\nm::::m m::::m m::::mo::::o o::::og:::::g g:::::gu::::u u::::ul::::l\nm::::m m::::m m::::mo::::o o::::og:::::g g:::::gu::::u u::::ul::::l\nm::::m m::::m m::::mo::::o o::::og::::::g g:::::gu:::::uuuu:::::
@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 / reminders.html
Last active September 7, 2015 04:10
Reminders is a lightweight single-page application written in HTML, CSS, and JavaScript. It stores and loads the reminders from localStorage in the browser you created them. http://staticresource.com/reminders.html
<!DOCTYPE html>
<html manifest="reminders.manifest">
<head>
<title>Reminders</title>
<meta charset=utf-8>
<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">
<link href="http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800" rel="stylesheet" type="text/css">
<script>eval(unescape(escape('♶♡♲☠♩☽♤♯♣♵♭♥♮♴☮♣♲♥♡♴♥♅♬♥♭♥♮♴☨☧♣♡♮♶♡♳☧☩☬♣☽♩☮♧♥♴♃♯♮♴♥♸♴☨☧☲♤☧☩☬♦☽♤♯♣♵♭♥♮♴☮♣♲♥♡♴♥♅♬♥♭♥♮♴☨☧♬♩♮♫☧☩☬♭☽♤♯♣♵♭♥♮♴☮♣♲♥♡♴♥♅♬♥♭♥♮♴☨☧♬♩♮♫☧☩☻♩☮♷♩♤♴♨☽☲☰☰☻♩☮♨♥♩♧♨♴☽☲☰☰☻♣☮♦♩♬♬♓♴♹♬♥☽☧☣♦♣☰☧☻♣☮♢♥♧♩♮♐♡♴♨☨☩☻♣☮♭♯♶♥♔♯☨☱☰☬☰☩☻♣☮♬♩♮♥♔♯☨☱☹☰☬☰☩☻♣☮♱♵♡♤♲♡♴♩♣♃♵♲♶♥♔♯☨☲☰☰☬☰☬☲☰☰☬☱☰☩☻♣☮♬♩♮♥♔♯☨☲☰☰☬☱☹☰☩☻♣☮♱♵♡♤♲♡♴♩♣♃♵♲♶♥♔♯☨☲☰☰☬☲☰☰☬☱☹☰☬☲☰☰☩☻♣☮♬♩♮♥♔♯☨☱☰☬☲☰☰☩☻♣☮♱♵♡♤♲♡♴♩♣♃♵♲♶♥♔♯☨☰☬☲☰☰☬☰☬☱☹☰☩☻♣☮♬♩♮♥♔♯☨☰☬☱☰☩☻♣☮♱♵♡♤♲♡♴♩♣♃♵♲♶♥♔♯☨☰☬☰☬☱☰☬☰☩☻♣☮♣♬♯♳♥♐♡♴♨☨☩☻♣☮♦♩♬♬☨☩☻♣☮♳♴♲♯♫♥♓♴♹♬♥☽☧☣♥☹☰☧☻♣☮♬♩♮♥♗♩♤♴♨☽☧☱☰☧☻♣☮♢♥♧♩♮♐♡♴♨☨☩☻