Permalink
Browse files

First stab at a reading view

  • Loading branch information...
1 parent 7776136 commit 357179e9040d68242b7036309ae97a31743c2533 @kneath committed Dec 2, 2012
Showing with 88 additions and 160 deletions.
  1. +3 −16 _layouts/default.html
  2. +5 −5 _layouts/post.html
  3. +80 −139 css/base.css
  4. BIN images/logo.gif
View
@@ -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" />
@@ -28,21 +28,8 @@
</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="main">
+ <div class="container">
{{ content }}
</div><!-- /.main -->
View
@@ -5,8 +5,8 @@
<h1>{{ 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
@@ -33,9 +33,13 @@ a img{ border:none; }
------------------------------------------------------------------------------*/
body{
- font-family: Helvetica, Arial, sans-serif;
- font-size:13px;
- background:#fff;
+ font-family: "Proxima Nova", Helvetica, 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{
@@ -53,23 +57,21 @@ 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;
+hr:before {
+ content: '\2022 \2022 \2022 \2022 \2022';
}
-.main{
- float:left;
- padding-bottom:50px;
- width:560px;
+
+.container {
+ margin: 0 auto;
+ width: 680px;
}
/* @end */
@@ -107,28 +109,6 @@ ul.nav li a:hover{
line-height:1.5;
}
-.fusion{
- margin-top:60px;
- font-size:11px;
-}
-.fusion a{
- color:#666;
-}
-.fusion .fusiontext{
- display:block;
- margin-top:5px;
- line-height:1.5;
- font-family:Georgia, Garamond, Times;
- font-style:italic;
-}
-.fusion p.note{
- margin:5px 0;
- font-size:10px;
-}
-.fusion p.note a{
- color:#333;
-}
-
/* @end */
/*------------------------------------------------------------------------------
@@ -143,17 +123,17 @@ ul.nav li a:hover{
}
.listing .post p.date{
- margin:0 0 -1px 0;
+ font-size: 13px;
}
-.listing .post h2{
- margin:0 0 -5px 0;
- font-size:18px;
- border:none;
+.listing .post h2 {
+ margin: 0 0 -5px 0;
+ font-size: 20px;
+ border: none;
}
-.listing .post h2 a{
- color:#222;
- text-decoration:none;
+.listing .post h2 a {
+ color: #DB2C17;
+ text-decoration: none;
}
.listing .post .continue{
@@ -171,6 +151,9 @@ ul.nav li a:hover{
font-size:14px;
line-height:14px;
}
+.listing .post.other h2 a {
+ color: #000;
+}
.listing .post.other p:last-child{
margin-bottom:0;
}
@@ -191,33 +174,30 @@ ul.nav li a:hover{
@group 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;
+h1 {
+ margin: 10px 0 20px 0;
+ font-size: 72px;
+ line-height: 0.8;
+ letter-spacing: -1px;
+ color: #DB2C17;
}
-h1{
- margin:20px 0 10px 0;
- font-size:20px;
- color:#000;
-}
-
-h2{
- margin:2.0em 0 -0.5em 0;
- font-size:16px;
- color:#000;
- border-bottom:1px dotted #BBB;
+h2 {
+ margin: 2.0em 0 -0.5em 0;
+ font-size: 20px;
+ color: #000;
+ border-bottom: 1px dotted #BBB;
}
-h3{
- margin:2.0em 0 -0.75em 0;
- font-size:13px;
- color:#000;
+h3 {
+ margin: 2.0em 0 -0.75em 0;
+ font-size: 17px;
+ color: #333;
}
h3 a, h3 a:visited, h2 a, h2 a:visited{ color:#000; }
h3 a:hover, h2 a:hover{ color:#000; border:none; }
@@ -343,49 +323,18 @@ p.note{
@group 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;
-}
-
-.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 {
+ margin: 30px 0;
+ color: #aaa;
+ border-top: 1px solid #dfe4ea;
}
-.follow-box h3 strong{
- font-weight:bold;
- color:#186487;
+.keep-in-touch p:first-child {
+ margin-top: 0;
+ padding-top: 20px;
+ border-top: 1px solid #fff;
}
-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;
+.keep-in-touch a {
+ color: #666;
}
/* @end */
@@ -394,36 +343,29 @@ a.follow-box:hover h3 strong{
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;
@@ -472,7 +414,6 @@ code.html span.doctype{
@group 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 */
View
Deleted file not rendered

0 comments on commit 357179e

Please sign in to comment.