Add menubar

pyblish · Sep 27, 2016 · 967ee5b · 967ee5b
1 parent b4a887a
commit 967ee5b
Show file tree

Hide file tree

Showing 8 changed files with 90 additions and 170 deletions.
diff --git a/README.md b/README.md
@@ -67,10 +67,10 @@ Welcome to pyblish-starter, a basic asset creation pipeline - batteries included
     - [Filesystem API](#filesystem-api)
         - [Information Hierarchy](#information-hierarchy)
         - [Workspace, Stage and Share](#workspace-stage-and-share)
-        - [**`ls()`**](#ls)
-        - [**`asset.json`**](#assetjson)
-        - [**`version.json`**](#versionjson)
-        - [**`representation.json`**](#representationjson)
+        - [`ls()`](#ls)
+        - [`asset.json`](#assetjson)
+        - [`version.json`](#versionjson)
+        - [`representation.json`](#representationjson)
     - [Starter API](#starter-api)
     - [Host API](#host-api)
 - [Contract](#contract)

diff --git a/docs/_layouts/index.html b/docs/_layouts/index.html
@@ -14,7 +14,22 @@
         <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
         <![endif]-->
     </head>
-
-    {{content}}
+    <div class="wrapper">
+        <header>
+            <nav>
+                <a href="/">Home</a>
+                <a href="#install">Install</a>
+                <a href="#usage">Usage</a>
+                <a href="#api">API</a>
+                <a href="#contract">Contract</a>
+                <a href="#homework">Homework</a>
+                <a href="#contributing">Contributing</a>
+                <a href="#help">Help</a>
+            </nav>
+        </header>
+        <div class="content">
+            {{content}}
+        </div>
+    </div>
 
 </html>
diff --git a/docs/fonts/NotoSans-Bold.ttf b/docs/fonts/NotoSans-Bold.ttf
diff --git a/docs/fonts/NotoSans-BoldItalic.ttf b/docs/fonts/NotoSans-BoldItalic.ttf
diff --git a/docs/fonts/NotoSans-Italic.ttf b/docs/fonts/NotoSans-Italic.ttf
diff --git a/docs/fonts/NotoSans-Regular.ttf b/docs/fonts/NotoSans-Regular.ttf
diff --git a/docs/index.md b/docs/index.md
@@ -71,10 +71,10 @@ Welcome to pyblish-starter, a basic asset creation pipeline - batteries included
     - [Filesystem API](#filesystem-api)
         - [Information Hierarchy](#information-hierarchy)
         - [Workspace, Stage and Share](#workspace-stage-and-share)
-        - [**`ls()`**](#ls)
-        - [**`asset.json`**](#assetjson)
-        - [**`version.json`**](#versionjson)
-        - [**`representation.json`**](#representationjson)
+        - [`ls()`](#ls)
+        - [`asset.json`](#assetjson)
+        - [`version.json`](#versionjson)
+        - [`representation.json`](#representationjson)
     - [Starter API](#starter-api)
     - [Host API](#host-api)
 - [Contract](#contract)

diff --git a/docs/stylesheets/styles.css b/docs/stylesheets/styles.css
@@ -1,67 +1,11 @@
-@font-face {
-  font-family: 'Noto Sans';
-  font-weight: 400;
-  font-style: normal;
-  src: url('../fonts/Noto-Sans-regular/Noto-Sans-regular.eot');
-  src: url('../fonts/Noto-Sans-regular/Noto-Sans-regular.eot?#iefix') format('embedded-opentype'),
-       local('Noto Sans'),
-       local('Noto-Sans-regular'),
-       url('../fonts/Noto-Sans-regular/Noto-Sans-regular.woff2') format('woff2'),
-       url('../fonts/Noto-Sans-regular/Noto-Sans-regular.woff') format('woff'),
-       url('../fonts/Noto-Sans-regular/Noto-Sans-regular.ttf') format('truetype'),
-       url('../fonts/Noto-Sans-regular/Noto-Sans-regular.svg#NotoSans') format('svg');
-}
-
-@font-face {
-  font-family: 'Noto Sans';
-  font-weight: 700;
-  font-style: normal;
-  src: url('../fonts/Noto-Sans-700/Noto-Sans-700.eot');
-  src: url('../fonts/Noto-Sans-700/Noto-Sans-700.eot?#iefix') format('embedded-opentype'),
-       local('Noto Sans Bold'),
-       local('Noto-Sans-700'),
-       url('../fonts/Noto-Sans-700/Noto-Sans-700.woff2') format('woff2'),
-       url('../fonts/Noto-Sans-700/Noto-Sans-700.woff') format('woff'),
-       url('../fonts/Noto-Sans-700/Noto-Sans-700.ttf') format('truetype'),
-       url('../fonts/Noto-Sans-700/Noto-Sans-700.svg#NotoSans') format('svg');
-}
-
-@font-face {
-  font-family: 'Noto Sans';
-  font-weight: 400;
-  font-style: italic;
-  src: url('../fonts/Noto-Sans-italic/Noto-Sans-italic.eot');
-  src: url('../fonts/Noto-Sans-italic/Noto-Sans-italic.eot?#iefix') format('embedded-opentype'),
-       local('Noto Sans Italic'),
-       local('Noto-Sans-italic'),
-       url('../fonts/Noto-Sans-italic/Noto-Sans-italic.woff2') format('woff2'),
-       url('../fonts/Noto-Sans-italic/Noto-Sans-italic.woff') format('woff'),
-       url('../fonts/Noto-Sans-italic/Noto-Sans-italic.ttf') format('truetype'),
-       url('../fonts/Noto-Sans-italic/Noto-Sans-italic.svg#NotoSans') format('svg');
-}
-
-@font-face {
-  font-family: 'Noto Sans';
-  font-weight: 700;
-  font-style: italic;
-  src: url('../fonts/Noto-Sans-700italic/Noto-Sans-700italic.eot');
-  src: url('../fonts/Noto-Sans-700italic/Noto-Sans-700italic.eot?#iefix') format('embedded-opentype'),
-       local('Noto Sans Bold Italic'),
-       local('Noto-Sans-700italic'),
-       url('../fonts/Noto-Sans-700italic/Noto-Sans-700italic.woff2') format('woff2'),
-       url('../fonts/Noto-Sans-700italic/Noto-Sans-700italic.woff') format('woff'),
-       url('../fonts/Noto-Sans-700italic/Noto-Sans-700italic.ttf') format('truetype'),
-       url('../fonts/Noto-Sans-700italic/Noto-Sans-700italic.svg#NotoSans') format('svg');
-}
 
 body {
-  min-width: 890px;
-  max-width: 890px;
-  background-color: #fff;
-  padding: 50px;
+  width: 890px;
+  margin: 0;
   margin-left: auto;
   margin-right: auto;
-  font: 14px/1.5 "Noto Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  background-color: #fff;
+  font: 14px/1.5 "Helvetica Neue", Helvetica, Arial, sans-serif;
   color: #727272;
   font-weight: 400;
 }
@@ -76,6 +20,7 @@ p, ul, ol, table, pre, dl {
 }
 
 h1, h2, h3 {
+  padding-top: 60px;
   line-height:1.1;
 }
 
@@ -112,8 +57,15 @@ a:hover small {
 }
 
 .wrapper {
-  width:860px;
-  margin:0 auto;
+  margin: 0;
+  padding-left: 50px;
+  padding-right: 50px;
+}
+
+.content {
+  margin: 0;
+  padding-top: 120px;
+  padding-bottom: 100px;
 }
 
 blockquote {
@@ -149,71 +101,69 @@ th, td {
 }
 
 dt {
-  color:#444;
-  font-weight:700;
+  color: #444;
+  font-weight: 700;
 }
 
 th {
-  color:#444;
+  color: #444;
 }
 
 img {
   max-width:100%;
 }
 
 header {
-  width:270px;
-  float:left;
-  position:fixed;
-  -webkit-font-smoothing:subpixel-antialiased;
+  position: fixed;
+  height: 40px;
+  background: #fff;
+  background: rgba(255, 255, 255, 0.9);
+  width: 100%;
 }
 
 header ul {
-  list-style:none;
-  height:40px;
-  padding:0;
-  background: #f4f4f4;
-  border-radius:5px;
-  border:1px solid #e0e0e0;
-  width:270px;
+  list-style: none;
+  height: 40px;
+  padding: 0;
+  width: 270px;
 }
 
 header li {
-  width:89px;
-  float:left;
-  border-right:1px solid #e0e0e0;
-  height:40px;
-}
-
-header li:first-child a {
-  border-radius:5px 0 0 5px;
-}
-
-header li:last-child a {
-  border-radius:0 5px 5px 0;
+  width: 89px;
+  float: left;
+  border-right: 1px solid #d2d2d2;
+  height: 40px;
 }
 
 header ul a {
-  line-height:1;
-  font-size:11px;
-  color:#999;
-  display:block;
-  text-align:center;
-  padding-top:6px;
-  height:34px;
+  line-height: 1;
+  font-size: 11px;
+  color: #999;
+  display: block;
+  text-align: center;
+  padding-top: 6px;
+  height: 40px;
 }
 
-header ul a:hover {
-  color:#999;
+nav {
+  width: 100%;
+  padding-top: 10px;
+  padding-bottom: 10px;
 }
 
-header ul a:active {
-  background-color:#f0f0f0;
+nav a {
+  padding-right: 20px;
+  color: #aaa;
 }
 
 strong {
-  color:#222;
-  font-weight:700;
+  color: #222;
+  font-weight: 700;
+}
+
+header ul li + li {
+  width:88px;
+  border-left:1px solid #fff;
 }
 
 header ul li + li + li {
@@ -227,6 +177,11 @@ header ul a strong {
   color:#222;
 }
 
+strong {
+  color:#222;
+  font-weight:700;
+}
+
 section {
   width:500px;
   float:right;
@@ -252,71 +207,21 @@ footer {
   -webkit-font-smoothing:subpixel-antialiased;
 }
 
-@media print, screen {
-
-  div.wrapper {
-    width:auto;
-    margin:0;
-  }
-
-  header, section, footer {
-    float:none;
-    position:static;
-    width:auto;
-  }
-
-  header {
-    padding-right:320px;
-  }
-
-  section {
-    border:1px solid #e5e5e5;
-    border-width:1px 0;
-    padding:20px 0;
-    margin:0 0 20px;
-  }
-
-  header a small {
-    display:inline;
-  }
-
-  header ul {
-    position:absolute;
-    right:50px;
-    top:52px;
-  }
-}
-
-@media print, screen and (max-width: 720px) {
-  body {
-    word-wrap:break-word;
-  }
-
-  header {
-    padding:0;
-  }
-
-  header ul, header p.view {
-    position:static;
-  }
-
-  pre, code {
-    word-wrap:normal;
-  }
-}
+@media print, screen and (max-width: 980px) {
 
-@media print, screen and (max-width: 480px) {
   body {
+    width: auto;
     padding:15px;
   }
-
-  header ul {
-    width:99%;
+  
+  .content {
+    padding-top: 20px;
   }
-
-  header li, header ul li + li + li {
-    width:33%;
+  
+  header {
+    display: none;
   }
+
 }
 
 @media print {