Merge pull request #964 from benbalter/html-template-site

Make Template site HTML5
jekyll · May 5, 2013 · 50d6683 · 50d6683
2 parents 3e670e7 + 8ec08fc
commit 50d6683
Show file tree

Hide file tree

Showing 7 changed files with 131 additions and 125 deletions.
diff --git a/lib/site_template/.gitignore b/lib/site_template/.gitignore
@@ -0,0 +1 @@
+_site
diff --git a/lib/site_template/_config.yml b/lib/site_template/_config.yml
@@ -1 +1,2 @@
+name: Your New Jekyll Site
 pygments: true
diff --git a/lib/site_template/_layouts/default.html b/lib/site_template/_layouts/default.html
@@ -1,38 +1,46 @@
 <!DOCTYPE html>
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en-us">
-<head>
-   <meta http-equiv="content-type" content="text/html; charset=utf-8" />
-   <title>{{ page.title }}</title>
-   <!-- syntax highlighting CSS -->
-   <link rel="stylesheet" href="/css/syntax.css" type="text/css" />
-   <!-- Homepage CSS -->
-   <link rel="stylesheet" href="/css/screen.css" type="text/css" media="screen, projection" />
-</head>
-<body>
-  <div class="site">
-    <div class="title">
-      <a href="/">Your Name</a>
-      <a class="extra" href="/">home</a>
-    </div>
-
-    {{ content }}
-
-    <div class="footer">
-      <div class="contact">
-        <p>
-          Your Name<br />
-          What You Are<br />
-          your@email.com
-        </p>
-      </div>
-      <div class="contact">
-        <p>
-          <a href="http://github.com/yourusername/">github.com/yourusername</a><br />
-          <a href="http://twitter.com/yourusername/">twitter.com/yourusername</a><br />
-        </p>
-      </div>
-    </div>
-  </div>
-  <a href="http://github.com/yourusername"><img style="position: absolute; top: 0; right: 0; border: 0;" src="http://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png" alt="Fork me on GitHub" /></a>
-</body>
+<html>
+    <head>
+        <meta charset="utf-8">
+        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+        <title>{{ page.title }}</title>
+        <meta name="viewport" content="width=device-width">
+
+        <!-- syntax highlighting CSS -->
+        <link rel="stylesheet" href="/css/syntax.css">
+
+        <!-- Custom CSS -->
+        <link rel="stylesheet" href="/css/main.css">
+
+    </head>
+    <body>
+
+        <div class="container">
+          <div class="site">
+            <div class="header">
+              <h1 class="title"><a href="/">{{ site.name }}</a></h1>
+              <a class="extra" href="/">home</a>
+            </div>
+
+                {{ content }}
+
+            <div class="footer">
+              <div class="contact">
+                <p>
+                  Your Name<br />
+                  What You Are<br />
+                  your@email.com
+                </p>
+              </div>
+              <div class="contact">
+                <p>
+                  <a href="http://github.com/yourusername/">github.com/yourusername</a><br />
+                  <a href="http://twitter.com/yourusername/">twitter.com/yourusername</a><br />
+                </p>
+              </div>
+            </div>
+
+        </div> <!-- /container -->
+
+    </body>
 </html>
diff --git a/lib/site_template/_layouts/post.html b/lib/site_template/_layouts/post.html
@@ -1,6 +1,9 @@
 ---
 layout: default
 ---
+<h2>{{ page.title }}</h2>
+<p class="meta">{{ page.date | date_to_string }}</p>
+
 <div id="post">
 {{ content }}
 </div>
diff --git a/lib/site_template/css/screen.css → lib/site_template/css/main.css b/lib/site_template/css/screen.css → lib/site_template/css/main.css
@@ -3,187 +3,180 @@
 /* Common
 /*
 /*****************************************************************************/
-
 /* Global Reset */
-
 * {
-  margin: 0;
-  padding: 0;
+    margin: 0;
+    padding: 0;
 }
 
-html, body {
-  height: 100%;
+html,body {
+    height: 100%;
 }
 
 body {
-  background-color: white;
-  font: 13.34px helvetica, arial, clean, sans-serif;
-  *font-size: small;
-  text-align: center;
+    background-color: #FFF;
+    font: 13.34px helvetica, arial, clean, sans-serif;
+    font-size: small;
+    text-align: center;
 }
 
-h1, h2, h3, h4, h5, h6 {
-  font-size: 100%;
+h1,h2,h3,h4,h5,h6 {
+    font-size: 100%;
 }
 
 h1 {
-  margin-bottom: 1em;
+    margin-bottom: 1em;
 }
 
 p {
-  margin: 1em 0;
+    margin: 1em 0;
 }
 
 a {
-  color: #00a;
+    color: #00a;
 }
 
 a:hover {
-  color: black;
+    color: #000;
 }
 
 a:visited {
-  color: #a0a;
+    color: #a0a;
 }
 
 table {
-  font-size: inherit;
-  font: 100%;
+    font-size: inherit;
+    font: 100%;
 }
 
 /*****************************************************************************/
 /*
 /* Home
 /*
 /*****************************************************************************/
-
 ul.posts {
-  list-style-type: none;
-  margin-bottom: 2em;
+    list-style-type: none;
+    margin-bottom: 2em;
 }
 
-  ul.posts li {
+ul.posts li {
     line-height: 1.75em;
-  }
+}
 
-  ul.posts span {
+ul.posts span {
     color: #aaa;
     font-family: Monaco, "Courier New", monospace;
     font-size: 80%;
-  }
+}
 
 /*****************************************************************************/
 /*
 /* Site
 /*
 /*****************************************************************************/
-
 .site {
-  font-size: 110%;
-  text-align: justify;
-  width: 42em;
-  margin: 3em auto 2em auto;
-  line-height: 1.5em;
+    font-size: 115%;
+    text-align: justify;
+    width: 42em;
+    margin: 3em auto 2em;
+    line-height: 1.5em;
 }
 
-.title {
-  color: #a00;
-  font-weight: bold;
-  margin-bottom: 2em;
+.site .header a {
+    font-weight: bold;
+    text-decoration: none;
 }
 
-  .site .title a {
+.site .header h1.title {
+    display: inline-block;
+    margin-bottom: 2em;
+}
+
+.site .header h1.title a {
     color: #a00;
-    text-decoration: none;
-  }
+}
 
-  .site .title a:hover {
-    color: black;
-  }
+.site .header h1.title a:hover {
+    color: #000;
+}
 
-  .site .title a.extra {
+.site .header a.extra {
     color: #aaa;
-    text-decoration: none;
     margin-left: 1em;
-  }
+}
 
-  .site .title a.extra:hover {
-    color: black;
-  }
+.site .header a.extra:hover {
+    color: #000;
+}
 
-  .site .meta {
+.site .meta {
     color: #aaa;
-  }
+}
 
-  .site .footer {
+.site .footer {
     font-size: 80%;
     color: #666;
     border-top: 4px solid #eee;
     margin-top: 2em;
     overflow: hidden;
-  }
+}
 
-    .site .footer .contact {
-      float: left;
-      margin-right: 3em;
-    }
+.site .footer .contact {
+    float: left;
+    margin-right: 3em;
+}
 
-      .site .footer .contact a {
-        color: #8085C1;
-      }
+.site .footer .contact a {
+    color: #8085C1;
+}
 
-    .site .footer .rss {
-      margin-top: 1.1em;
-      margin-right: -.2em;
-      float: right;
-    }
+.site .footer .rss {
+    margin-top: 1.1em;
+    margin-right: -.2em;
+    float: right;
+}
 
-      .site .footer .rss img {
-        border: 0;
-      }
+.site .footer .rss img {
+    border: 0;
+}
 
 /*****************************************************************************/
 /*
 /* Posts
 /*
 /*****************************************************************************/
-
 #post {
-
 }
 
-  /* standard */
-
-  #post pre {
+/* standard */
+#post pre {
     border: 1px solid #ddd;
     background-color: #eef;
     padding: 0 .4em;
-  }
+}
 
-  #post ul,
-  #post ol {
+#post ul,#post ol {
     margin-left: 1.35em;
-  }
+}
 
-  #post code {
+#post code {
     border: 1px solid #ddd;
     background-color: #eef;
     font-size: 85%;
     padding: 0 .2em;
-  }
-
-    #post pre code {
-      border: none;
-    }
+}
 
-  /* terminal */
+#post pre code {
+    border: none;
+}
 
-  #post pre.terminal {
-    border: 1px solid black;
+/* terminal */
+#post pre.terminal {
+    border: 1px solid #000;
     background-color: #333;
-    color: white;
-  }
+    color: #FFF;
+}
 
-  #post pre.terminal code {
+#post pre.terminal code {
     background-color: #333;
-  }
+}
diff --git a/lib/site_template/images/.gitkeep b/lib/site_template/images/.gitkeep
diff --git a/lib/site_template/images/rss.png b/lib/site_template/images/rss.png