Skip to content

Instantly share code, notes, and snippets.

View charliepark's full-sized avatar
🚀

Charlie Park charliepark

🚀
62 followers · 2 following
View GitHub Profile
@charliepark
charliepark / jQuery - update an object's z-index based on the current time.
Created April 10, 2009 19:28
/*
A way to set your z-index to dynamically update, based on the current time.
When you click on the object ('.element'), the javascript grabs the current time,
concatenates the hours, minutes, and seconds, and sets that number as the z-index for the object.
*/
$('.element').mousedown(function(event) {
var time = new Date();
var hours = time.getHours();
if (hours.toString().length == 1) { hours = "0" + '' + hours }
@charliepark
charliepark / README.md
Created April 11, 2019 20:22
SCRIPT-8
@charliepark
charliepark / README.md
Created April 11, 2019 20:00
SCRIPT-8
@charliepark
charliepark / notebook.html
Last active January 6, 2017 19:37
An easy way to represent a notebook in HTML/CSS, styled after the Field Notes memo books.
/***********
The CSS
***********/
.notebook{
background: #AC1622;
border-radius: .3em 1em 1em .3em;
box-shadow: .3em .3em .3em rgba(0,0,0,0.2);
color: rgba(0,0,0,0.5);
font-family: futura, sans-serif;
font-size: .5em;
@charliepark
charliepark / IFTTT Logo, CSS extracted
Last active December 23, 2015 06:59
The same IFTTT logo as in https://gist.github.com/charliepark/6598054, but with the CSS extracted out (the first section). Also includes it with CSS inline (the second section). Also includes the SVG for reference (the last section).
<html>
<head>
<style type="text/css">
.css-logo{font-size:10px;height:2.2em;position:relative;width:8.5em}
.letter-block{float:left;height:100%;margin-right:.2em;position:relative;width:1.6em}
.letter-block.i{margin-right:.3em;width:.7em}
.letter-block.t{width:1.7em}
.h{background:#f40;position:absolute;top:0;width:100%}
.h.short{top:.9em;width:1.3em;}
.s{background:#000;position:absolute}
@charliepark
charliepark / IFTTT logo in pure HTML+CSS
Last active December 23, 2015 06:59
The IFTTT logo in pure HTML / CSS. Just change the "font-size" attribute in line 1 to change the size. Everything scales naturally. The CSS is all inline, to include this in an e-mail. If you want the code with the CSS extracted, check out https://gist.github.com/charliepark/6598079.
<div style="font-size:10px;height:2.2em;position:relative;width:8.5em">
<div style="float:left;height:2.2em;margin-right:.3em;position:relative;width:.7em;">
<div style="background:#3cf;height:100%;width:.7em"></div>
</div>
<div style="float:left;height:2.2em;margin-right:.2em;position:relative;width:1.6em">
<div style="background:#3cf;height:100%;width:.7em"></div>
<div style="background:#f40;height:.7em;position:absolute;top:0;width:1.6em;"><div style="background:#000;height:.7em;position:absolute;width:.7em"></div></div>
<div style="background:#f40;height:.7em;position:absolute;top:.9em;width:1.3em;"><div style="background:#000;height:.7em;width:.7em"></div></div>
</div>
<div style="float:left;height:2.2em;margin-right:.2em;position:relative;width:1.7em">
@charliepark
charliepark / simple_breakpoints.css
Created September 9, 2013 17:54
simple responsive breakpoints
/* via http://stackoverflow.com/questions/16443380/common-css-media-queries-break-points */
@media only screen and (min-width: 768px) {
/* tablets and desktop */
}
@media only screen and (max-width: 767px) {
/* phones */
}
@charliepark
charliepark / button CSS (base)
Last active December 20, 2015 01:19
.btn{
border:1px solid #000;
border-color: #d1d1d1 #d1d1d1 hsl(32, 0%, 80%);
border-radius: 3px;
font-size:16px;
font-weight:700;
margin:5px;
padding: 5px 20px;
}
@charliepark
charliepark / easter.js
Last active December 15, 2015 14:49 — forked from madrobby/easter.js
// date of easter, call function with the 4-digit year as argument
//function (a,b,c,d,e,f,g,h,i,j,k,l,m){return b=a%19,c=~~(a/100),d=a%100,e=~~(c/4),f=c%4,g=~~((c+8)/25),h=~~((c-g+1)/3),i=(19*b+c-e-h+15)%30,j=~~(d/4),k=d%4,l=(32+2*f+2*j-i-k)%7,m=~~((b+11*i+22*l)/451),a+"-"+~~((i+l-7*m+114)/31)+"-"+((i+l-7*m+114)%31+1)}
function (y,a,b,c,h,l,n){return a=y%19,b=~~(y/100),c=y%100,h=(19*a+b-~~(b/4)-~~((b-~~((b+8)/25)+1)/3)+15)%30,l=(32+2*b%4+2*~~(c/4)-h-c%4)%7,n=h+l-7*~~((a+11*h+22*l)/451)+114,y+'-'+~~(n/31)+'-'+(n%31+1)}
// f(2013) -> "2013-3-31"
// f(2012) -> "2012-4-8
// f(1775) -> "1775-4-16"
@charliepark
charliepark / vendor-prefixing.scss
Created March 26, 2013 22:20
A vendor prefixing mixin for Sass. Found it online. Sorry to whoever wrote it initially!
/**
* This mixin is awesome. Handles vendor prefixing in a single line.
*/
@mixin vendor-prefix($name, $argument) {
-webkit-#{$name}: $argument;
-moz-#{$name}: $argument;
-ms-#{$name}: $argument;
-o-#{$name}: $argument;
#{$name}: $argument;