a dash of style

memoriestravel · Oct 7, 2012 · d385b05 · d385b05
1 parent 2d02f9f
commit d385b05
Show file tree

Hide file tree

Showing 5 changed files with 123 additions and 6 deletions.
diff --git a/examples/helloworld.json b/examples/helloworld.json
@@ -16,7 +16,7 @@
       "type": "text",
       "title": "What is Cleaver?",
       "content":
-        "*Cleaver* is the simplest way to generate
+        "**Cleaver** is the simplest way to generate
         static HTML presentations from a simple
         JSON format.>>
 

diff --git a/main.css b/main.css
@@ -0,0 +1,93 @@
+body {
+  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  color: #444;
+  background-color: #aaa;
+}
+
+#wrapper {
+  width: 850px;
+  height: 600px;
+  overflow: hidden;
+  margin: 80px auto 0 auto;
+  box-shadow: 3px 3px 3px #666;
+  background-color: #eee;
+}
+
+section.slide {
+  width: auto;
+  height: 540px;
+  padding: 30px;
+}
+
+section.slide.main h1.title {
+  font-size: 100px;
+  text-align: center;
+  margin-top: 150px;
+  margin-bottom: 30px;
+}
+
+section.slide.main h2.subtitle {
+  font-size: 30px;
+  text-align: center;
+  font-weight: 200;
+  font-style: italic;
+}
+
+section.slide.text h1.title {
+  font-size: 45px;
+  border-bottom: 1px solid #aaa;
+  margin: 0;
+  padding-bottom: 15px;
+}
+
+section.slide.text article.content {
+  padding-top: 20px;
+  font-weight: 200;
+  font-size: 32px;
+  line-height: 44px;
+}
+
+section.slide.list h1.title {
+  font-size: 45px;
+  border-bottom: 1px solid #aaa;
+  margin: 0;
+  padding-bottom: 15px;
+}
+
+section.slide.list ul.items {
+  padding: 20px 0 0 60px;
+  font-weight: 200;
+  font-size: 32px;
+  line-height: 44px;
+}
+
+section.slide.author h1.name {
+  font-size: 55px;
+  font-weight: 200px;
+  text-align: center;
+  margin-top: 135px;
+  margin-bottom: 30px;
+}
+
+section.slide.author h3 {
+  font-weight: 100;
+  text-align: center;
+  font-size: 30px;
+}
+
+section.slide.author h3 a {
+  text-decoration: none;
+  color: #44a4dd;
+}
+
+section.slide.author h3 a:hover {
+  color: #66b5ff;
+}
+
+code {
+  background-color: #ccc;
+}
+
+.hidden {
+  display: none;
+}
diff --git a/main.js b/main.js
@@ -0,0 +1,19 @@
+$(function() {
+  $('section').each(function(i, v) {
+    if (i)
+      $(v).hide();
+    else
+      $(v).addClass('active');
+  });
+
+  $(document).on('keydown', function(e) {
+    var curr = $('section.active');
+    if (!curr.next().length) {
+      $('section:first').show().addClass('active');
+    } else {
+      curr.next().show().addClass('active');
+    }
+
+    curr.hide().removeClass('active');
+  });
+});
diff --git a/templates/_author.mustache b/templates/_author.mustache
@@ -1,9 +1,9 @@
 <section class="slide author">
   <h1 class="name">{{name}}</h1>
   <h3 class="twitter">
-    <a href="http://twitter.com/{{twitter}}">{{twitter}}</a>
+    <a href="http://twitter.com/{{{twitter}}}">{{{twitter}}}</a>
   </h3>
   <h3 class="url">
-    <a href="{{url}}">{{url}}</a>
+    <a href="{{{url}}}">{{{url}}}</a>
   </h3>
 </section>
diff --git a/templates/layout.mustache b/templates/layout.mustache
@@ -1,10 +1,15 @@
 <html>
 <head>
   <title>Test</title>
+  <link rel="stylesheet" href="main.css">
 </head>
 <body>
-  {{#slides}}
-    {{{.}}}
-  {{/slides}}
+  <div id="wrapper">
+    {{#slides}}
+      {{{.}}}
+    {{/slides}}
+  </div>
+  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
+  <script type="text/javascript" src="main.js"></script>
 </body>
 </html>