Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

Merge pull request #1 from kneath/realign

Realign
  • Loading branch information...
commit 6234800950a2cf71080e5b211183e8d23a8a4ec0 2 parents 1091e11 + 3ed30b0
@kneath authored
View
30 _layouts/default.html
@@ -3,9 +3,9 @@
<head>
<title>
{% if page.title %}
- {{ page.title }} &mdash; Warpspire
+ {{ page.title }} &middot; by Kyle Neath
{% else %}
- Warpspire: Web, Design &amp; Code Geekery
+ Warpspire: Design &amp; Code by Kyle Neath
{% endif %}
</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
@@ -13,6 +13,9 @@
<script type="text/javascript">var _sf_startpt=(new Date()).getTime()</script>
<link rel="stylesheet" href="/css/base.css" type="text/css" />
<link rel="alternate" href="http://feeds.feedburner.com/warpspire" type="application/rss+xml" />
+
+ <script type="text/javascript" src="//use.typekit.net/oih2jiw.js"></script>
+ <script type="text/javascript">try{Typekit.load();}catch(e){}</script>
<script type="text/javascript">
var _gaq = _gaq || [];
@@ -28,21 +31,18 @@
</script>
</head>
<body>
- <div class="sidebar">
- <a href="/" class="logo"><img src="/images/logo.gif" alt="Warpspire" width="203" height="63" /></a>
-
- <ul class="nav">
- <li><a href="/">Home</a></li>
- <li><a href="/talks">Talks</a></li>
- <li><a href="/experiments">Experiments</a></li>
- <li><a href="/ask">Ask me a question</a></li>
- </ul>
- <p>My name is Kyle Neath. I'm a ~designer at <a href="http://github.com" target="_blank">GitHub</a> in San Francisco.</p>
- <p>You can find me as <strong>@kneath</strong> on <a href="http://twitter.com/kneath" class="twitter">Twitter</a>, <a href="https://github.com/kneath">GitHub</a>, <a href="http://dribbble.com/players/kneath">Dribbble</a> and pretty much everywhere else.</p>
- </div><!-- /.sidebar -->
+ <div class="container">
+ <header>
+ <ul class="nav">
+ <li><a href="/">Words</a></li>
+ <li><a href="/talks">Talks</a></li>
+ <li class="logo"><a href="/">w</a></li>
+ <li><a href="/experiments">Experiments</a></li>
+ <li><a href="/about">About</a></li>
+ </ul>
+ </header>
- <div class="main">
{{ content }}
</div><!-- /.main -->
View
12 _layouts/post.html
@@ -2,11 +2,11 @@
layout: default
---
<p class="date">{{ page.date | date: "%B %e, %Y" }}</p>
-<h1>{{ page.title }}</h1>
+<h1 class="words">{{ page.title }}</h1>
{{ content }}
-<a href="https://twitter.com/kneath" class="follow-box">
- <h3>You should probably follow <strong>@kneath</strong> on twitter</h3>
- <p class="subtext">Youre sure to learn all kinds of interesting facts about cheese, BBQ and perhaps even some ramblings on design, tech and the wonderful internets.</p>
-</a>
-
+<div class="keep-in-touch">
+ <p>
+ If you'd like to keep in touch, I tweet <a href="https://twitter.com/kneath">@kneath</a> on Twitter. You're also welcome to send a polite email to <a href="mailto:kneath@gmail.com">kneath@gmail.com</a>. I don't always get the chance to respond, but email is always the best way to get in touch.
+ </p>
+</div>
View
9 _layouts/talk.html
@@ -3,7 +3,8 @@
---
{{ content }}
-<a href="https://twitter.com/kneath" class="follow-box">
- <h3>You should probably follow <strong>@kneath</strong> on twitter</h3>
- <p class="subtext">You’re sure to learn all kinds of interesting facts about cheese, BBQ and perhaps even some ramblings on design, tech and the wonderful internets.</p>
-</a>
+<div class="keep-in-touch">
+ <p>
+ If you'd like to keep in touch, I tweet <a href="https://twitter.com/kneath">@kneath</a> on Twitter. You're also welcome to send a polite email to <a href="mailto:kneath@gmail.com">kneath@gmail.com</a>. I don't always get the chance to respond, but email is always the best way to get in touch.
+ </p>
+</div>
View
5 _posts/2010-12-28-url-design.md
@@ -1,6 +1,7 @@
---
layout: post
title: URL Design
+summary: A pragmatic approach to designing the glue of the web.
excerpt:
You should take time to design your URL structure. If there's one thing I hope you remember after reading this article it's to take time to design your URL structure. Don't leave it up to your framework. Don't leave it up to chance. Think about it and craft an experience.
---
@@ -62,6 +63,7 @@ That kind of URL used to be great for SEO purposes. Fortunately Google's hurrica
Some additional points to keep in mind:
* Underscores are just bad. Stick to dashes.
+
* Use short, full, and commonly known words. If a section has a dash or special character in it, the word is probably too long.
URLs are for humans. **Design them for humans.**
@@ -77,6 +79,7 @@ A URL is an agreement to serve something from a predictable location for as long
In an ideal world, every single screen on your site should result in a URL that can be copy & pasted to reproduce the same screen in another tab/browser. In fairness, this wasn't completely possible until very recently with some of the new HTML5 browser history Javascript APIs. Notably, there are two new methods:
* **`onReplaceState`** — This method replaces the current URL in the browser history, leaving the back button unaffected.
+
* **`onPushState`** - This method pushes a new URL onto the browser's history, replacing the URL in the URL bar *and* adding it to the browser's history stack (affecting the back button).
### When to use `onReplaceState` and when to use `onPushState`
@@ -86,6 +89,7 @@ These new methods allow us to change the *entire* path in the URL bar, not just
To determine which to use, ask yourself this question: *Does this action produce new content or is it a different display of the same content?*
1. **Produces new content** — you should use `onPushState` (ex: pagination links)
+
2. **Produces a different display of the same content** — you should use `onReplaceState` (ex: sorting and filtering)
Use your own judgement, but these two rules should get you 80% there. Think about what you want to see when you click the back button and make it happen.
@@ -95,6 +99,7 @@ Use your own judgement, but these two rules should get you 80% there. Think abou
There's a lot of awesome functionality built into linking elements like `<a>` and `<button>`. If you middle click or command-click on them they'll open in new windows. When you hover over an `<a>` your browser tells you the URL in the status bar. Don't break this behavior when playing with `onReplaceState` and `onPushState`.
* Embed the location of AJAX requests in the `href` attributes of anchor elements.
+
* `return true` from Javascript click handlers when people middle or command click.
It's fairly simple to do this with a quick conditional inside your click handlers. Here's an example jQuery compatible snippet:
View
1  _posts/2011-03-30-product-design.md
@@ -1,6 +1,7 @@
---
layout: post
title: Product design at GitHub
+summary: An inspection into the product design process we've carved out.
excerpt:
Product design is easily the hardest aspect of building software today. I happen to think we do a pretty good job of this at GitHub, and I'd like to give you a bit of an insight into our process and hopefully shed some light on why it works so well.
---
View
1  _posts/2011-06-28-designing-github-mac.md
@@ -1,6 +1,7 @@
---
layout: post
title: Designing GitHub for Mac
+summary: An analysis of my process.
excerpt:
A few days ago we lifted the curtains on a project I've been deep into for a long time now — <a href="http://mac.github.com">GitHub for Mac</a>. This is the first OS X app I've designed and thought it might be interesting to share some of the process and things I learned throughout development.
---
View
1  _posts/2011-08-02-ops-art.md
@@ -1,6 +1,7 @@
---
layout: post
title: "Deploying: Then & Now"
+summary: Of deploying a major feature on a stage and my love for Hubot.
excerpt:
A couple months ago I got up on stage during lightening talks at CodeConf 2011 to talk about our friendly robot, Hubot. Inside of five minutes I logged into our Campfire room with spotty WiFi, asked Hubot a favor, and he deployed a major new feature to our site — Issues 2.0. A deploy spanning around 30 servers that changed a major feature for 800,000 users. It was pretty awesome and kind of a ridiculous thing to do.
---
View
1  _posts/2011-08-25-relentless-quality.md
@@ -1,6 +1,7 @@
---
layout: post
title: Relentless Quality
+summary: Musings on a culture of relentless quality.
excerpt:
If there's one thing I'll remember about Alex Mahernia, it's footer spacing. Here we are at 10pm in the office and we'd be trying to launch a site. The only thing left is an A-OK from the creative director. And without fail, he'd yell at me to come into his office and point at his screen. "The footer spacing is too big on this page." So I'd go back to battle the CSS until every single page on the site had consistent footer spacing in every browser.
---
View
1  _posts/2011-10-17-mustache-style-erb.md
@@ -1,6 +1,7 @@
---
layout: post
title: "Mustache, ERB and the future of templating"
+summary: The best of mustache, all in ERB.
excerpt:
A little story about why I love Mustache, and how to bring that awesomeness to a legacy ERB app.
---
View
1  _posts/2011-11-07-knyle-style-recruiting.md
@@ -1,6 +1,7 @@
---
layout: post
title: "Knyle style recruiting"
+summary: A better way to hire people.
excerpt:
Otherwise known as Kyle Neath's guide to hiring the best people in the world: an examination into why recruiters are useless piles of humanflesh hellbent on destroying the souls of good designers and developers across the world.
---
View
1  _posts/2011-12-05-kss.md
@@ -1,6 +1,7 @@
---
layout: post
title: "Knyle Style Sheets"
+summary: Documentation for any flavor of CSS that you’ll love to write.
excerpt:
So I've been writing CSS for somewhere around 13 years now. Some might think I've learned the right way to write CSS in that time — but if you ask me all I've learned is the most efficient way to drive someone insane.
---
View
1  _posts/2012-08-02-pace.md
@@ -1,6 +1,7 @@
---
layout: post
title: "Pace"
+summary: I want to spend more time conscious of the pace of my life.
excerpt:
American service constantly presses on its diners. Can I show you to your seat? Here’s some menus. How’s the meal? Would you like the check? The pace of meals in America is a reflection of this service style. People come in for dinner, eat, and leave.
---
View
22 about/index.md
@@ -0,0 +1,22 @@
+---
+layout: default
+title: "About Kyle Neath"
+---
+
+# Kyle Neath
+
+<p class="intro">
+ My name is Kyle Neath and I work at <a href="https://github.com">GitHub</a> in San Francisco. I love to build beautiful things with software.
+</p>
+
+----
+
+I love to build the future. I believe software will effect a Change in this world (and beyond), and I am going to be part of it. I'm not a deisgner. Not a programmer. Not a manager. I went to school for [Civil Engineering](http://assets.warpspire.com/images/site/degree.jpg), but ended up building things with software instead.
+
+I work on product at GitHub. We're creating a better way to design, build, and ship software.
+
+<div class="keep-in-touch">
+ <p>
+ If you'd like to keep in touch, I tweet <a href="https://twitter.com/kneath">@kneath</a> on Twitter. You're also welcome to send a polite email to <a href="mailto:kneath@gmail.com">kneath@gmail.com</a>. I don't always get the chance to respond, but email is always the best way to get in touch.
+ </p>
+</div>
View
2  ask/index.md
@@ -3,8 +3,6 @@ layout: default
title: Ask me something
---
-# Ask me something
-
Here's the deal: comments on the internet **suck**. You know what I mean. Between the [trolls](http://www.isthereaproblem.com/), the spam, the idiots, and general fuckwads — the experience sucks for everyone involved.
<div class="figure">
View
709 css/base.css
@@ -1,6 +1,7 @@
-/*------------------------------------------------------------------------------------
- @group Global Reset
-------------------------------------------------------------------------------------*/
+/*----------------------------------------------------------------------------
+ Global Reset
+----------------------------------------------------------------------------*/
+
* {
padding:0;
margin:0;
@@ -22,457 +23,392 @@ a img{ border:none; }
clear: both;
visibility: hidden;
}
-* html .clearfix {height: 1%;}
-.clearfix {display:inline-block;}
-.clearfix {display: block;}
+* html .clearfix { height: 1%; }
+.clearfix { display:inline-block; }
+.clearfix { display: block; }
-/* @end */
-
-/*------------------------------------------------------------------------------
- @group Main Layout
-------------------------------------------------------------------------------*/
+/*----------------------------------------------------------------------------
+ Main Layout
+----------------------------------------------------------------------------*/
-body{
- font-family: Helvetica, Arial, sans-serif;
- font-size:13px;
- background:#fff;
+body {
+ font-family: "proxima-nova-1", "proxima-nova-2", Arial, sans-serif;
+ font-size: 17px;
+ line-height: 1.4;
+ color: #333;
+ background: #f7f7fa;
+ text-shadow: 0 1px 0 rgba(255,255,255,1.0);
+ border-top: 4px solid #556270;
}
-strong{
- font-weight:bold;
+strong {
+ font-weight: bold;
}
-a{
- color:#2382c8;
- text-decoration:none;
-}
-a:visited{
- color:#457289;
+a {
+ color: #2382c8;
+ text-decoration: none;
}
-a:hover{
- text-decoration:underline;
+a:hover {
+ text-decoration: underline;
}
-hr{
- margin:15px 0;
- height:1px;
- padding:none;
- background:#ddd;
- border:none;
+hr {
+ margin: 20px 0 25px 0;
+ text-align: center;
+ letter-spacing: 3px;
+ font-size: 20px;
+ color: #ddd;
+ border: none;
}
-
-.sidebar{
- float:left;
- padding:0 40px 0 30px;
- width:240px;
-}
-.main{
- float:left;
- padding-bottom:50px;
- width:560px;
+hr:before {
+ content: '\2022 \2022 \2022 \2022 \2022';
}
-/* @end */
-
-/*------------------------------------------------------------------------------
- @group Sidebar
-------------------------------------------------------------------------------*/
-
-.logo{
- display:block;
- margin:20px 0;
+.container {
+ margin: 0 auto;
+ max-width: 680px;
+ padding: 0 20px;
}
-ul.nav{
- margin:20px 0;
- border-top:1px solid #ddd;
-}
-ul.nav li{
- list-style-type:none;
- margin:0;
- padding:8px 0;
- border-bottom:1px solid #ddd;
-}
-ul.nav li a{
- color:#333;
- font-weight:bold;
- text-decoration:none;
-}
-ul.nav li a:hover{
- color:#000;
+header {
+ margin: 0 0 20px 0;
+ text-align: center;
+ border-bottom: 1px solid #fff;
}
-.sidebar p{
- color:#666;
- line-height:1.5;
+ul.nav {
+ margin: 0;
+ padding: 12px 0 10px 0;
+ list-style-type: none;
+ line-height: 30px;
+ border-bottom: 1px solid #dfe4ea;
}
-
-.fusion{
- margin-top:60px;
- font-size:11px;
+ul.nav li {
+ margin: 0 20px;
+ display: inline-block;
+ text-transform: uppercase;
+ font-size: 14px;
+ font-weight: 600;
}
-.fusion a{
- color:#666;
+@media only screen and (max-width: 520px) {
+ ul.nav li {
+ margin: 0 7px;
+ }
}
-.fusion .fusiontext{
- display:block;
- margin-top:5px;
- line-height:1.5;
- font-family:Georgia, Garamond, Times;
- font-style:italic;
+ul.nav li a {
+ color: #bbb;
+ text-decoration: none;
}
-.fusion p.note{
- margin:5px 0;
- font-size:10px;
+
+ul.nav li.logo {
+ text-transform: none;
}
-.fusion p.note a{
- color:#333;
+ul.nav li.logo a {
+ position: relative;
+ top: -2px;
+ display: inline-block;
+ width: 27px;
+ height: 27px;
+ line-height: 26px;
+ color: #fff;
+ font-weight: bold;
+ background: #556270;
+ border-radius: 100px;
+ box-shadow: 0 1px 0 rgba(255,255,255,1.0);
}
-/* @end */
-
/*------------------------------------------------------------------------------
- @group Home Page
+ Home Page
------------------------------------------------------------------------------*/
-.listing .post{
- margin:40px 0;
+.listing .post {
+ margin: 60px 0;
}
-.listing .post:first-child{
- margin-top:22px;
+.listing .post:first-child {
+ margin-top: 22px;
}
-.listing .post p.date{
- margin:0 0 -1px 0;
+.listing .post p.date {
+ font-size: 14px;
+ color: #bbb;
}
-.listing .post h2{
- margin:0 0 -5px 0;
- font-size:18px;
- border:none;
+.listing .post h2 {
+ margin: 0 0 -20px 0;
+ font-size: 30px;
+ border: none;
}
-.listing .post h2 a{
- color:#222;
- text-decoration:none;
+.listing .post h2 a {
+ color: #DB2C17;
+ text-decoration: none;
}
-.listing .post .continue{
- font-weight:bold;
+.listing .post .post-summary {
+ font-size: 20px;
+ color: #777;
}
-.listing .post.other{
- margin-left:24px;
- padding-left:10px;
- color:#666;
- border-left:1px solid #ddd;
+.listing .post.other {
+ margin-left: 24px;
+ padding-left: 10px;
+ color: #666;
+ border-left: 1px solid #ddd;
}
-.listing .post.other h2{
- margin-bottom:-3px;
- font-size:14px;
- line-height:14px;
+.listing .post.other h2 {
+ margin: -5px 0 -15px 0;
+ font-size: 17px;
}
-.listing .post.other p:last-child{
- margin-bottom:0;
-}
-
-.listing .post.other .icon{
- float:left;
- margin-left:-35px;
- width:20px;
- height:20px;
+.listing .post.other h2 a {
+ color: #000;
}
-.listing .post.link .icon{
- background:url(/images/icon_link.png) 0 0 no-repeat;
+.listing .post.other p:last-child {
+ margin-bottom: 0;
}
-/* @end */
+.listing .post.other .icon {
+ font-family: Helvetica, Arial, sans-serif;
+ float: left;
+ margin-top: -3px;
+ margin-left: -35px;
+ width: 20px;
+ height: 20px;
+ font-size: 20px;
+ color: #ddd;
+}
/*------------------------------------------------------------------------------
- @group Post Styles
+ Post Styles
------------------------------------------------------------------------------*/
-.main{
- color:#444;
- line-height:21px;
+p.date {
+ color: #aaa;
+ margin: 20px 0 0 0;
}
-.main p.date{
- color:#666;
- margin:20px 0 -20px 0;
+p.intro {
+ font-size: 28px;
+ line-height: 1.2;
+ color: #aaa;
+ text-align: justify;
}
-
-h1{
- margin:20px 0 10px 0;
- font-size:20px;
- color:#000;
+@media only screen and (max-width: 520px) {
+ p.intro {
+ font-size: 20px;
+ }
}
-
-h2{
- margin:2.0em 0 -0.5em 0;
- font-size:16px;
- color:#000;
- border-bottom:1px dotted #BBB;
+p.intro a {
+ color: #777;
}
-h3{
- margin:2.0em 0 -0.75em 0;
- font-size:13px;
- color:#000;
+h1 {
+ margin: 10px 0 20px 0;
+ font-size: 72px;
+ line-height: 0.8;
+ letter-spacing: -1px;
+ color: #000;
}
-h3 a, h3 a:visited, h2 a, h2 a:visited{ color:#000; }
-h3 a:hover, h2 a:hover{ color:#000; border:none; }
-
-h4{
- font-size:1em;
- font-weight:normal;
- color:#000;
-}
-
-.figure{
- margin:19px 0 19px 0;
- padding:2px;
- text-align:center;
- border:1px solid #ddd;
- background:#f5f5f5;
- line-height:0;
-}
-.fig-a{
- float:right;
- margin-left:15px;
-}
-.figure small{
- margin:2px 0 0 0;
- padding:5px 7px;
- display:block;
- font-size:11px;
- line-height:12px;
- text-align:left;
- color:#666;
- background:#ddd;
- text-shadow:1px 1px 0 rgba(255,255,255,0.3);
+h1.words {
+ color: #DB2C17;
}
-.figure small strong{
- text-transform:uppercase;
+@media only screen and (max-width: 700px) {
+ h1 {
+ font-size: 48px;
+ letter-spacing: 0;
+ }
}
-blockquote{
- margin:1em 0;
- padding:0 35px;
- font-size:14px;
- border:1px dotted #ddd;
- border-left:none;
- border-right:none;
- background:url(../images/blockquote_open.gif) 0 12px no-repeat;
-}
-blockquote p{
- margin:12px 0;
- color:#666;
+h2 {
+ margin: 2.0em 0 -0.5em 0;
+ font-size: 20px;
+ color: #000;
+ border-bottom: 1px dotted #BBB;
}
-table{
- width:100%;
- border-top:1px solid #CCCCCC;
- border-bottom:2px solid #CCC;
- color:#000000;
- background:#FFFFFF;
- border-collapse:separate;
- font-size:11px;
-}
-caption{
- padding:10px 10px 5px 0;
- text-align:left;
- font-size:11px;
- text-transform:uppercase;
- font-weight:bold;
+h3 {
+ margin: 2.0em 0 -0.75em 0;
+ font-size: 17px;
+ color: #333;
}
-th{
- text-align:center;
- padding:5px;
-}
-td{
- text-align:center;
- padding:3px 5px;
-}
-.odd td{
- background:#F0F1F2;
-}
-table.data th, table.data td{
- text-align:left;
+h3 a, h3 a:visited, h2 a, h2 a:visited{ color:#000; }
+h3 a:hover, h2 a:hover{ color:#000; border:none; }
+
+h4 {
+ font-size: 1em;
+ font-weight: normal;
+ color: #000;
+}
+
+.figure {
+ margin: 19px 0 19px 0;
+ padding: 2px;
+ text-align: center;
+ border: 1px solid #ddd;
+ background: #f5f5f5;
+ line-height: 0;
+}
+.fig-a {
+ float: right;
+ margin-left: 15px;
+}
+.figure small {
+ margin: 2px 0 0 0;
+ padding: 5px 7px;
+ display: block;
+ font-size: 11px;
+ line-height: 12px;
+ text-align: left;
+ color: #666;
+ background: #ddd;
+ text-shadow: 1px 1px 0 rgba(255,255,255,0.3);
+}
+.figure small strong {
+ text-transform: uppercase;
+}
+
+blockquote {
+ margin: 1em 0;
+ padding: 0 35px;
+ font-size: 14px;
+ border: 1px dotted #ddd;
+ border-left: none;
+ border-right: none;
+ background: url(../images/blockquote_open.gif) 0 12px no-repeat;
+}
+blockquote p {
+ margin: 12px 0;
+ color: #666;
+}
+
+table {
+ width: 100%;
+ border-top: 1px solid #CCCCCC;
+ border-bottom: 2px solid #CCC;
+ color: #000;
+ background: #fff;
+ border-collapse: separate;
+ font-size: 11px;
+}
+
+caption {
+ padding: 10px 10px 5px 0;
+ text-align: left;
+ font-size: 11px;
+ text-transform: uppercase;
+ font-weight: bold;
}
-.main ul, .main ol{
- margin:16px 0;
+th {
+ text-align: center;
+ padding: 5px;
}
-.main ul li{
- list-style-type:none;
- margin-left:10px;
- margin-bottom:5px;
- padding-left:15px;
- background:url(../images/icon_li.gif) 0 5px no-repeat;
+
+td {
+ text-align: center;
+ padding: 3px 5px;
}
-.main ol li{
- margin-left:32px;
- margin-bottom:5px;
+.odd td {
+ background: #F0F1F2;
}
-
-a.askme{
- display:block;
- padding:10px 12px;
- font-size:14px;
- text-decoration:none;
- color:#666;
- background:#eee;
- -webkit-border-radius:5px;
- -moz-border-radius:5px;
- border-radius:5px;
-}
-a.askme strong{
- color:#000;
-}
-a.askme:hover strong{
- text-decoration:underline;
+table.data th, table.data td {
+ text-align: left;
}
-p.note{
- color:#666;
+p.note {
+ color: #666;
}
-/* @end */
-
/*----------------------------------------------------------------------------
- @group Follow Box
+ Follow Box
----------------------------------------------------------------------------*/
-.follow-box{
- display:block;
- margin:35px 0 10px 0;
- background:#f6fbff;
- text-shadow:0 0 1px rgba(255,255,255,0.6);
- filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#f6fbff', endColorstr='#d5e8f5');
- background:-webkit-gradient(linear, left top, left bottom, from(#f6fbff), to(#d5e8f5));
- background:-moz-linear-gradient(top, #f6fbff, #d5e8f5);
- border:1px solid #c3e0f2;
- -webkit-border-radius:4px;
- -moz-border-radius:4px;
- border-radius:4px;
-}
-a.follow-box{
- text-decoration:none;
+.keep-in-touch {
+ margin: 30px 0;
+ color: #aaa;
+ border-top: 1px solid #dfe4ea;
}
-
-.follow-box h3{
- margin:0;
- padding:11px 10px 8px;
- font-size:14px;
- font-weight:normal;
- color:#588499;
- border-bottom:1px solid #f0f7fb;
- background-repeat:no-repeat;
- background-position:98.5% 55%;
- background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAQCAYAAAAMJL+VAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBNYWNpbnRvc2giIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NjBFQzg0NTE4RjAwMTFFMEE1MDNGMDdBQUE4NjMxMkYiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NjBFQzg0NTI4RjAwMTFFMEE1MDNGMDdBQUE4NjMxMkYiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo2MEVDODQ0RjhGMDAxMUUwQTUwM0YwN0FBQTg2MzEyRiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo2MEVDODQ1MDhGMDAxMUUwQTUwM0YwN0FBQTg2MzEyRiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PqoN/TQAAALcSURBVHjalFRLaxNRFJ57584jM0kmr9ZKbaUthIIP1II7tYpYoQtFUNSd+CNcCO4EBTftShERBHHhwkW1FEE3XbQ+ClakFm2VllptTROmeU3mkfG7JYWYJqke+Lhz5373nO/ec84lvu8L/2uvp2bbMdwCjgKvgBsn+nqX6nFJdQBslDFcBCax4UsD5zql4lAkGr2qKKpgWcVP66Z5z/Pcu9jj1vJpdTCYo+nB84xJE3D0CDhcCVpNOm1EIlfAE0TGfFlW9gQ07Q7+P+DBm52AAPL0YnoflD20ioW9uWzWchx7DJz7WHvJOQFNfxZPtAxWO+E+ioW8kEmv3cb3dZzEq3cCHknJmqbjua7EFbbsaFNjiZazakB7AYU3gVOarg9sUUmIwPlhI3IZ097KVUa35AC2c/5HqtOmyrDIpP2Yq5sL2XVTKJVKq1Dfyh3WMwgTUr9Xn+DU7yiln/sPJsdoDSfX054oRjR2jQj+TPVCKGwI0Vi8oXNuyAl44UuhkHEBudnwzWo4WaDo2aWAbZOEJCt/OxDFbUs4GAx+o747r5ByAtPdpE4fRG3X68uVvC6z5J9zPP9kHSF1DWfLhmVhOKbLSyIli5SSN/U2ZmQmfowxcflneq2TKdoxXMs/BvDfR3V5XGKUN91XwKGVjMdruKvATKFoD2EcrVRYc+dEyOjMH4G4PKazgM33bShDxg8gSBKfb4Hv/LqBbnTsEVmRk6h9so3zoqHQx60hdQHTOV5Qm2s8QDzZ0baynMn3W5b11HWdFWxxGWO70XAd6OqmynHXaUOlowld+oDpFPCrtpN5qRzyyn53Kmcfz+RLA45X3sVEtlF2TRLq6gqdNRRxUlfEafwaARYaPRU8Fz3AIJwn87bfm7e9Ltvzo2VfkMGhBFRchccoKagSWQkq4pzKyBwlhCt/Dpjbvqb8qQB4Ls4A/Ek2+PtUEcCJ/LUsAClgAhgH1oByo5P+EWAAaC4ZuefCgrYAAAAASUVORK5CYII=);
+.keep-in-touch p:first-child {
+ margin-top: 0;
+ padding-top: 20px;
+ border-top: 1px solid #fff;
}
-.follow-box h3 strong{
- font-weight:bold;
- color:#186487;
+.keep-in-touch a {
+ color: #666;
}
-a.follow-box:hover h3 strong{
- text-decoration:underline;
-}
-
-.follow-box p.subtext{
- margin:0;
- padding:8px 10px;
- font-size:12px;
- font-weight:300;
- color:#506f7f;
- border-top:1px solid #dce7ee;
-}
-
-/* @end */
-/*------------------------------------------------------------------------------------
+/*----------------------------------------------------------------------------
Code Styles
-------------------------------------------------------------------------------------*/
+----------------------------------------------------------------------------*/
-pre{
- margin:16px 0;
- padding-left:10px;
- border-left:1px solid #eee;
- overflow:auto;
- -webkit-font-smoothing:subpixel-antialiased;
-}
-pre code{
- display:block;
-}
-pre>code{
- padding-top:15px;
- background:url(../images/pxl_code.gif) 0 0 no-repeat;
-}
-pre>code.html{
- background:url(../images/pxl_html.gif) 0 0 no-repeat;
-}
-pre>code.javascript{
- background:url(../images/pxl_javascript.gif) 0 0 no-repeat;
-}
-pre>code.ruby{
- background:url(../images/pxl_ruby.gif) 0 0 no-repeat;
-}
-pre>code.php{
- background:url(../images/pxl_php.gif) 0 0 no-repeat;
+pre {
+ margin: 16px 0;
+ padding: 10px;
+ color: #444;
+ background: #fff;
+ border-bottom: 1px solid #eee;
+ border-radius: 4px;
+ overflow: auto;
+ -webkit-font-smoothing: subpixel-antialiased;
}
code{
- font-family:"Courier New", Courier, sans-serif;
- font-size:13px;
- color:#000;
+ padding: 0 4px;
+ font-family: "Source Code Pro", "Courier New", Courier, sans-serif;
+ font-size: 0.9em;
+ color: #556270;
+ background: #F4FAFF;
+ border-radius: 3px;
+}
+pre code {
+ padding: 0;
+ color: inherit;
+ background: inherit;
+ border-radius: 0;
}
-code span.global{
- color:#3388DD;
+code span.global {
+ color: #3388DD;
}
-code span.brackets{
- color:#777777;
+code span.brackets {
+ color: #777777;
}
code span.string {
- color:blue;
+ color: #BC6710;
}
-code span.symbol, code span.selectors{
- color:#1199EE;
+code span.symbol, code span.selectors {
+ color: #1199EE;
}
-code span.properties{
- color:#BB4411;
+code span.properties {
+ color: #BB4411;
}
-code span.keywords{
- color:#44BB22;
+code span.keywords {
+ color: #44BB22;
}
-code span.comment{
- color:#999;
+code span.comment {
+ color: #BCBCBC;
}
-code span.shell{
+code span.shell {
background:#f1f1f1;
}
-code.html span.tag, code.xaml span.tag{
- color:#BB4411;
+code.html span.tag, code.xaml span.tag {
+ color: #BB4411;
}
-code.html span.attribute, code.xaml span.attribute{
- color:#44BB22;
+code.html span.attribute, code.xaml span.attribute {
+ color: #44BB22;
}
-code.html span.string, code.xaml span.string{
- color:blue;
+code.html span.string, code.xaml span.string {
+ color: blue;
}
-code.html span.comment, code.xaml span.comment{
- color:#999999;
+code.html span.comment, code.xaml span.comment {
+ color: #999999;
}
-code.html span.doctype{
- color:#D7FF80;
+code.html span.doctype {
+ color: #D7FF80;
}
-/* @end */
-
-/*------------------------------------------------------------------------------
- @group Default Pygments Styles
-------------------------------------------------------------------------------*/
+/*----------------------------------------------------------------------------
+ Default Pygments Styles
+----------------------------------------------------------------------------*/
-.highlight { background: #ffffff; }
.highlight .c { color: #999988; font-style: italic } /* Comment */
.highlight .err { color: #a61717; background-color: #e3d2d2 } /* Error */
.highlight .k { font-weight: normal } /* Keyword */
@@ -533,63 +469,4 @@ code.html span.doctype{
.highlight .vi { color: #008080 } /* Name.Variable.Instance */
.highlight .il { color: #009999 } /* Literal.Number.Integer.Long */
-/* @end */
-
-/*------------------------------------------------------------------------------
- @group Half Court
-------------------------------------------------------------------------------*/
-
-.hcs{
- overflow:hidden;
- text-align: left;
-}
-.hcs ul,
-.hcs *{
- padding: 0;
- margin: 0;
- border: 0;
- outline: 0;
- list-style-type: none;
-}
-.hcs ul{
- margin: 0 -5px;
-}
-.hcs ul li{
- width: 120px;
- height:90px;
- position: relative;
- display: block;
- padding: 5px;
- margin: 5px 5px 0 5px;
- background: rgba(0,0,0,0.075);
- -webkit-transition:background 0.2s linear;
- -moz-transition:background 0.2s linear;
- transition:background 0.2s linear;
- filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#14000000, endColorstr=#14000000);
- -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#14000000, endColorstr=#14000000)";
- display: table;
- float:left;
- vertical-align:middle;
-}
-.hcs ul li a{
- width:120px;
- height:90px;
- text-align:center;
- vertical-align:middle;
- display: table-cell;
-}
-.hcs ul li:hover{
- background: #2382c8;
-}
-.hcs img{
- width:auto;
- height: auto;
- max-width: 120px;
- max-height:90px;
- border: 0;
- -ms-interpolation-mode:bicubic;
- font-size:0;
- float:left;
-}
-
/* @end */
View
4 experiments/index.md
@@ -3,9 +3,7 @@ layout: default
title: "Experiments"
---
-# Experiments
-
-Now and then I experiment with HTML, CSS, Javascript, Ruby and pretty much anything I can get my hands on. This is where I collect them.
+<p class="intro">Now and then I experiment with HTML, CSS, Javascript, Ruby and pretty much anything I can get my hands on. This is where I collect them.</p>
## [Infinite Scroll + HTML5 History API](/experiments/history-api/)
View
BIN  images/logo.gif
Deleted file not rendered
View
8 index.html
@@ -4,11 +4,15 @@
<link rel="alternate" type="application/atom+xml" href="http://warpspire.com/feed/" />
---
+<p class="intro">
+ My name is Kyle Neath and I work at <a href="https://github.com">GitHub</a> in San Francisco. I love to build beautiful things with software and these are my words on design &amp; code.
+</p>
+
<div class="listing">
{% for post in site.posts %}
{% if post.type == 'link' %}
<div class="post other link">
- <span class="icon" title="This is a link elsewhere"></span>
+ <span class="icon" title="This is a link elsewhere"></span>
<h2><a href="{{ post.link }}">{{ post.title }}</a></h2>
<p>{{ post.content }}</p>
</div>
@@ -16,7 +20,7 @@
<div class="post">
<p class="date">{{ post.date | date: "%B %e, %Y" }}</p>
<h2><a href="{{ post.url }}">{{ post.title }}</a></h2>
- <p>{{ post.excerpt }} <a href="{{ post.url }}" class="continue">Continue Reading</a></p>
+ <p class="post-summary">{{ post.summary }}</p>
</div>
{% endif %}
{% endfor %}
View
2  talks/armyofrobots/index.md
@@ -3,8 +3,6 @@ layout: talk
title: Building an army of robots
---
-# Building an army of robots
-
<script async class="speakerdeck-embed" data-id="4fd396d0d3d0d6002202b7c2" data-ratio="1.7777777777777777" src="//speakerdeck.com/assets/embed.js"></script>
There's nothing quite like writing code to automate a task. It's like bottled satisfaction for coders. With that in mind, I want to introduce you to GitHub's army of robots. Robots to test our code and deploy. Robots to open doors. Robots to play our music. Robots to record videos of presenters. Robots to serve us beer.
View
2  talks/chooseyouradventure/index.md
@@ -3,8 +3,6 @@ layout: talk
title: Choose Your Adventure!
---
-# Choose Your Adventure!
-
<script src="http://speakerdeck.com/embed/4f9c026c242e840022030578.js?size=preview"></script>
**[Download the presentation](/talks/chooseyouradventure/chooseyouradventure.pdf)** (12MB PDF)
View
2  talks/designhacks/index.md
@@ -3,8 +3,6 @@ layout: talk
title: Design Hacks for the Pragmatic Minded
---
-# Design Hacks for the Pragmatic Minded
-
<script src="http://speakerdeck.com/embed/4d8b7a80575308709d000002.js?size=preview"></script>
**[Download the presentation](/talks/designhacks/designhacks.pdf)** (18MB PDF)
View
2  talks/documentation/index.md
@@ -3,8 +3,6 @@ layout: talk
title: Documentation is freaking awesome
---
-# Documentation is freaking awesome
-
<script src="http://speakerdeck.com/embed/4d51eed25753083721000005.js?size=preview"></script>
**[Download the presentation](/talks/documentation/documentation.pdf)** (6MB PDF)
View
2  talks/greatsoftware/index.md
@@ -3,8 +3,6 @@ layout: talk
title: How do you build great software?
---
-# How do you build great software?
-
<script async class="speakerdeck-embed" data-id="5079fa1af29efa0002022fb9" data-ratio="1.3333333333333333" src="//speakerdeck.com/assets/embed.js"></script>
A bit of a rambling talk I gave at Brooklyn Beta about the importance of your surroundings. Covering GitHub's approach to software development and the importance of the tools you use.
View
4 talks/index.md
@@ -3,10 +3,6 @@ layout: default
title: "Talks & Presentations"
---
-# Talks & Presentations
-
-Every now and then I get up on stage and embarass myself trying to share a little bit of my ignorance at conferences. Like my style? I think conferences are awesome and would love to hear about any speaking opportunities you might have — just throw an email to <kneath@gmail.com>.
-
## [Choose Your Adventure!](/talks/chooseyouradventure)
Designers can't be developers and companies who build web apps can't build desktop apps. Well, maybe in 1997 — but it's 2012. Things done changed. It's time to focus on building amazing companies full of fantastic people. Build amazing apps that people love to use. Screw false specialization, iOS shops, and mobile-only products. We're people building apps for other people to use on technofantastical devices of tomorrow.
View
2  talks/responsive/index.md
@@ -3,8 +3,6 @@ layout: talk
title: Responsive web design from the future
---
-# Responsive web design from the future
-
<script src="http://speakerdeck.com/embed/4de55b8d5753082e3c000002.js?size=preview"></script>
**[Download the presentation](/talks/responsive/responsive.pdf)** (13MB PDF)
Please sign in to comment.
Something went wrong with that request. Please try again.