first commit

CSS-Tricks · Dec 8, 2011 · 886c7a3 · 886c7a3
commit 886c7a3
Show file tree

Hide file tree

Showing 2 changed files with 160 additions and 0 deletions.
diff --git a/index.html b/index.html
@@ -0,0 +1,112 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+
+	<meta charset="UTF-8">
+
+	<title>Build Your Social Page</title>
+
+	<link rel="stylesheet" href="style.css">
+
+    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
+  <script>
+// DOM Ready    
+   $(function() {
+
+		$.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?ids=52723107@N00&lang=en-us&format=json&jsoncallback=?", function(data){
+   	  $.each(data.items, function(index, item){
+   		$("<img/>").attr("src", item.media.m).appendTo("#flickr")
+   		  .wrap("<a href='" + item.link + "'></a>");
+   	  });
+   	});
+
+   	$.getJSON('http://twitter.com/status/user_timeline/chriscoyier.json?count=10&callback=?', function(data){
+   		$.each(data, function(index, item){
+   			$('#twitter').append('<div class="tweet"><p>' + item.text.linkify() + '</p><p><strong>' + relative_time(item.created_at) + '</strong></p></div>');
+   		});
+
+   	});
+
+/*  DEFUNCT
+   	$.getJSON("http://www.scrnshots.com/users/chriscoyier/screenshots.json?callback=?", function(screenshots){
+   		$.each(screenshots, function(index, screenshot){
+   			$("#scrnshots").append("<a href='" + screenshot.url + "'><img src='" + screenshot.images.small + "' /></a>");
+   		});
+   	});
+*/
+
+   	$.getJSON("http://api.dribbble.com/players/chriscoyier/shots?callback=?", function(data) {
+
+   		$.each(data.shots, function(index, shot) {
+   			$("#dribbble").append("<a href='" + shot.image_url + "'><img src='" + shot.image_teaser_url + "' /></a>");
+   		});
+
+   	});
+
+   	function relative_time(time_value) {
+   	  var values = time_value.split(" ");
+   	  time_value = values[1] + " " + values[2] + ", " + values[5] + " " + values[3];
+   	  var parsed_date = Date.parse(time_value);
+   	  var relative_to = (arguments.length > 1) ? arguments[1] : new Date();
+   	  var delta = parseInt((relative_to.getTime() - parsed_date) / 1000);
+   	  delta = delta + (relative_to.getTimezoneOffset() * 60);
+
+   	  var r = '';
+   	  if (delta < 60) {
+   		r = 'a minute ago';
+   	  } else if(delta < 120) {
+   		r = 'couple of minutes ago';
+   	  } else if(delta < (45*60)) {
+   		r = (parseInt(delta / 60)).toString() + ' minutes ago';
+   	  } else if(delta < (90*60)) {
+   		r = 'an hour ago';
+   	  } else if(delta < (24*60*60)) {
+   		r = '' + (parseInt(delta / 3600)).toString() + ' hours ago';
+   	  } else if(delta < (48*60*60)) {
+   		r = '1 day ago';
+   	  } else {
+   		r = (parseInt(delta / 86400)).toString() + ' days ago';
+   	  }
+
+   	  return r;
+   	}
+
+   	String.prototype.linkify = function() {
+   		return this.replace(/[A-Za-z]+:\/\/[A-Za-z0-9-_]+\.[A-Za-z0-9-_:%&\?\/.=]+/, function(m) {
+   			return m.link(m);
+   		});
+   	};
+
+   });
+  </script>
+
+</head>
+
+<body>
+
+	<div id="page-wrap">
+
+		<div id="flickr">
+
+			<h2>Flickr</h2>
+
+		</div>
+
+		<div id="twitter">
+
+			<h2>Twitter</h2>
+
+		</div>
+
+		<div id="dribbble">
+
+			<h2>Dribbble</h2>
+
+		</div>
+
+	</div>
+
+</body>
+
+</html>
diff --git a/style.css b/style.css
@@ -0,0 +1,48 @@
+/*
+		 Chris Coyier
+		 http://css-tricks.com
+*/
+
+* { margin: 0; padding: 0; }
+body { 
+	font: 14px Georgia, Serif;
+}
+
+a { 
+	outline: 0; 
+}
+img, a img { 
+	border: 0; 
+}
+
+h1 { 
+	font-weight: normal; 
+}
+h2 { 
+	font: bold 32px Sans-Serif;
+	margin: 0 0 10px 0; 
+}
+
+#page-wrap { 
+	width: 960px; 
+	margin: 80px auto; 
+}
+
+#twitter, #flickr, #dribbble { 
+	width: 27%; 
+	margin: 0 2% 0 0; 
+	padding: 2%;
+	float: left; 
+	background: #fff7cc;
+	border: 1px solid #ecd869;
+}
+
+img.profile-pic { float: left; padding: 5px; }
+
+#flickr img, #dribbble img, #twitter img { width: 100px; margin: 10px; }
+
+.tweet { 
+	padding: 10px; 
+	margin: 5px 0;
+	background: white;
+}