Tracking tumblr theme for devlog

gijs · Dec 19, 2012 · 88e4bb3 · 88e4bb3
1 parent 025c3c8
commit 88e4bb3
Showing 1 changed file with 242 additions and 0 deletions.
diff --git a/misc/tumblr.html b/misc/tumblr.html
@@ -0,0 +1,242 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>{Title}</title>
+    <link rel="shortcut icon" href="{Favicon}">
+    <link rel="alternate" type="application/rss+xml" href="{RSS}">
+    {block:Description}
+      <meta name='description' content='{MetaDescription}' />
+    {/block:Description}
+    <link href='http://fonts.googleapis.com/css?family=Open+Sans:100,200,400,300,600,700' rel='stylesheet' type='text/css'>
+    <style>
+body {
+  background-color: #fef9f0;
+  margin: 10px auto;
+  padding: 0;
+  font-family: "Century Schoolbook", Georgia, serif;
+}
+
+a {
+  text-decoration: none;
+  font-weight: bold;
+  color: #1574b6;
+}
+
+ul.tags {
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
+}
+
+ul.tags li {
+  display: inline;
+  padding: 0.1em 0.5em 0.2em 0.5em;
+  border-radius: 0.2em;
+  background-color: #ccc;
+  font-size: 70%;
+}
+
+ul.tags a {
+  color: #fef9f0;
+  font-weight: normal;
+}
+
+h1, h2, h3, nav, .post-date, ul.tags a, .description {
+  font-family: Univers, "Open Sans", "Helvetica Neue", Helvetica, sans-serif;
+}
+
+code, pre {
+  font-family: Inconsolata, Menlo, monospace;
+}
+
+header {
+  height: 140px;
+  display: -moz-box;
+  -moz-box-orient: vertical;
+  -moz-box-pack: center;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-box-pack: center;
+}
+
+h1 {
+  margin: 0;
+  font-size: 200%;
+}
+
+.description {
+  margin: 0;
+  font-size: 120%;
+}
+
+nav ul {
+  list-style-type: none;
+  padding-left: 10px;
+}
+
+nav li {
+  line-height: 1.5em;
+}
+
+.post-title {
+  width: 100%;
+  display: -moz-box;
+  -moz-box-orient: horizontal;
+  display: -webkit-box;
+  -webkit-box-orient: horizontal;
+}
+
+.post-title > h2, .post-title > .post-date {
+  display: -moz-box;
+  -moz-box-orient: vertical;
+  -moz-box-pack: center;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-box-pack: center;
+  display: -o-box;
+  -o-box-orient: vertical;
+  -o-box-pack: center;
+}
+
+.post-date {
+  margin-left: 1em;
+}
+
+h2 {
+  -moz-box-flex: 1;
+  -webkit-box-flex: 1;
+}
+
+code {
+  font-family: Inconsolata, Menlo, monospace;
+}
+
+.hl {
+  background-color: #ff0;
+}
+
+.note {
+  font-size: smaller;
+  font-style: italic;
+}
+
+.todo {
+  font-size: smaller;
+  background-color: #ccc;
+}
+
+div.right {
+  max-width: 620px;
+  min-width: 460px;
+  position: absolute;
+  left: 170px;
+  padding-right: 10px;
+}
+
+div.left {
+  width: 140px;
+  position: absolute;
+  left: 10px;
+}
+
+svg.logo {
+  width: 140px;
+  height: 140px;
+}
+    </style>
+  </head>
+  <body>
+
+    <div class="right">
+      <header>
+        <a href="/"><h1>{Title}</h1></a>
+        <p class="description">{Description}</p>
+      </header>
+
+      <div id="posts">
+        {block:Posts}
+          <section class="post">
+            {block:Title}
+              <div class="post-title">
+                <h2><a href="{Permalink}">{Title}</a></h2>
+                {block:Date}
+                  <div class="post-date">{ShortDayOfWeek} {ShortMonth} {DayOfMonth} {Year}</div>
+                {/block:Date}
+              </div>
+            {/block:Title}
+            {block:HasTags}
+              <ul class="tags">
+                {block:Tags}
+                  <li> <a href="{TagURL}">{Tag}</a></li>
+                {/block:Tags}
+              </ul>
+            {/block:HasTags}
+            {Body}
+          </section>
+        {/block:Posts}
+      </div>
+    </div>
+
+    <div class="left">
+      <!-- Dynamic SVG Logo -->
+      <svg viewBox="0 0 128 128" class="logo">
+        <defs>
+          <clipPath id="r">
+            <rect x="-64" y="-64" width="128" height="128" rx="8" ry="8"/>
+          </clipPath>
+        </defs>
+        <g transform="translate(64, 64)" stroke-width="16" stroke-linejoin="round" clip-path="url(#r)">
+          <polygon>
+            <animateTransform attributeName="transform" attributeType="XML" type="scale" from="3" to="1" dur="0.3s" fill="freeze"/>
+            <animateTransform attributeName="transform" attributeType="XML" type="rotate" from="90" to="0" dur="0.3s" additive="sum"/>
+          </polygon>
+          <g stroke="#fef9f0" stroke-linecap="round" fill="none">
+            <line x1="-20" y1="-50" x2="-20" y2="0"/>
+            <circle r="20"/>
+            <animateTransform attributeName="transform" attributeType="XML" type="scale" from="0" to="1" dur="0.4s" fill="freeze"/>
+          </g>
+        </g>
+        <script><![CDATA[
+(function () {
+  "use strict";
+
+  function polygon_points (sides, radius, phase) {
+    var points = [];
+    for (var i = 0, th = 2 * Math.PI / sides; i < sides; ++i) {
+      points.push(radius * Math.cos(phase + i * th));
+      points.push(-radius * Math.sin(phase + i * th));
+    }
+    return points.join(" ");
+  }
+
+  var colors = ["#ff4040", "#ff7f40", "#40ff40", "#40bfff", "#102040", "#fc9d9a"];
+  var color = colors[Math.floor(Math.random() * colors.length)];
+  var g = document.querySelector("g");
+  g.setAttribute("fill", color);
+  g.setAttribute("stroke", color);
+  var p = document.querySelector("polygon");
+  p.setAttribute("points", polygon_points(7, 42, Math.random()));
+
+  document.querySelector("h1").style.color = color;
+
+}());
+  ]]></script>
+      </svg>
+      <nav>
+        <ul>
+          <li><a href="http://bender.igel.co.jp/">Bender Website</a></li>
+          <li><a href="https://github.com/bendr/bender">Github repo</a></li>
+          <li><a href="https://twitter.com/julien_igel">@julien_igel</a></li>
+          {block:PreviousPage}
+            <li><a href="{PreviousPage}">&#171; Previous</a></li>
+          {/block:PreviousPage}
+          {block:NextPage}
+            <li><a href="{NextPage}">Next &#187;</a></li>
+          {/block:NextPage}
+          <li><a href="/archive">Archive</a></li>
+        </ul>
+      </nav>
+    </div>
+
+  </body>
+</html>