html : add first doc

14 years ago · ce781f7d6f
6 changed files with 110 additions and 8 deletions
--- a/_config.yml
+++ b/_config.yml
@ -1,4 +1,4 @@
-site_name: Isotope
+name: Isotope
 permalink: /:categories/:title.html

 elements:
--- a/_layouts/default.html
+++ b/_layouts/default.html
@ -3,6 +3,8 @@
 <head>
  <meta charset="utf-8" />
  <title>{{ page.title }}</title>
+  
+  <link rel="stylesheet" href="css/style.css" type="text/css" media="screen" />

  {{ content }}

--- a/_layouts/doc.html
+++ b/_layouts/doc.html
@ -0,0 +1,41 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <title>{{ site.name }}: {{ page.title }}</title>
+  
+  <link rel="stylesheet" href="../css/style.css" type="text/css" media="screen" />
+
+</head>
+<body class="doc {{ page.body_class }}">
+
+
+  
+  <nav id="docs-nav">
+    <h1>{{ site.name }}</h1>
+    
+    <ul>
+      {% for doc in site.categories.docs reversed %}
+        <li{% if page.title == doc.title %} class="current"{% endif %}><a href="..{{ doc.url }}">{{ doc.title }}</a></li>
+      {% endfor %}
+    </ul>
+    
+  </nav> <!-- #docs-nav -->
+  
+  <section id="content">
+    
+    <h1>{{ page.title }}</h1>
+
+    {{ content }}
+    
+    <footer>
+      Isotope by David DeSandro / Metafizzy
+    </footer>
+    
+  </section> <!-- #content -->
+  
+
+
+  
+</body>
+</html>
--- a/_posts/docs/2010-12-01-introduction.mdown
+++ b/_posts/docs/2010-12-01-introduction.mdown
@ -6,4 +6,33 @@ layout: doc

 ---

-Isotope
+Isotope is a layout, filtering, and sorting plugin for jQuery.   
+
+## Features
+
+### Layout
+
+Isotope enables intelligent, dynamic layouts for listed items. Layouts can be arranged in columns, rows, grids, or more complexly like [Masonry](http://desandro.com/resources/jquery-masonry).
+
+### Filtering
+
+Items can be hidden and shown easily just by using simple jQuery selectors.
+
+### Sorting
+
+These items can then be rearranged in their order via sorting. Sorting relies on any data held within an item.
+
+### Progressive Enhancement 
+
+All these behaviors leverage animation to produce engaging interfaces. The best CSS transition and transform features are utilized when available.
+
+## License
+
+**Commercial use requires purchase of one-time license fee per developer seat.** Commercial licenses may be purchased at [metafizzy.co](http://metafizzy.co). Non-commercial use is free.
+
+Commercial use generally includes any application that makes you money. This includes portfolio sites and premium templates.
+
+## Code repository
+
+%% This project lives on GitHub at.... %%
+
--- a/css/style.css
+++ b/css/style.css
@ -10,11 +10,15 @@ body {
  padding: 20px;
  font-family: 'Helvetica Neue', Arial, sans-serif;
  font-size: 13px;
-  line-height: 1.5em;
+  line-height: 1.7em;
  background: #1D1D1D;
  color: #FFF;
 }

+section, nav, header, footer {
+  display: block;
+}
+

 h1, h2, h3, p, ul, ol, pre, dl {
  margin-bottom: 1.0em;
@ -308,6 +312,36 @@ body {
 }


+/**** Docs ****/
+
+body.doc {
+  max-width: 640px;
+}
+
+.doc #content {
+  font-size: 14px;
+  line-height: 1.7em;
+}
+
+@media screen and (min-width: 768px) {
+
+  body.doc {
+    margin-left: 220px;
+  }
+  
+  .doc nav {
+    width: 200px;
+    position: fixed;
+    left: 10px;
+    font-size: 14px;
+  }
+
+  .doc nav h1 {
+    margin-top: 0;
+  }
+
+}
+

 /* >> The Magnificent CLEARFIX: Updated to prevent margin-collapsing on child elements << j.mp/bestclearfix */
 .clearfix:before, .clearfix:after { content: "\0020"; display: block; height: 0; visibility: hidden; }
--- a/index.html
+++ b/index.html
@ -3,11 +3,7 @@ title: Index
 layout: default
 ---

-  <style media="screen">
-    body {
-        font-family: 'Helvetica Neue', Arial, sans-serif;
-    }
-  </style>
+
  
 </head>
 <body>