RInitial responsive commit. See uxebu#12

iamdustan · Sep 22, 2012 · 183a313 · 183a313
1 parent 98e4ed7
commit 183a313
Show file tree

Hide file tree

Showing 2 changed files with 97 additions and 21 deletions.
diff --git a/_layouts/doc.html b/_layouts/doc.html
@@ -11,6 +11,32 @@
 
 <body>
 
+  <header id="mobile-header">
+    <h1 id="logo-top"><a href="http://bonsaijs.org/">Bonsai</a></h1>
+    <a id="link-to-nav" href="#nav">Menu</a>
+  </header>
+
+	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
+
+	<div id="content" class="{% if page.categories contains 'jsdoc' %}jsdoc{% endif %}">
+
+		<h1>
+			{{page.title}}
+		</h1>
+
+    {% if page.relatedLinks and page.relatedLinks != empty %}
+      <div id="relatedLinks">
+        <h3>Related:</h3>
+        {% for link in page.relatedLinks %}
+            <a class="overview" href="{{link}}">{{page.relatedNames[forloop.index0]}} &raquo;</a>
+        {% endfor %}
+      </div>
+    {% endif %}
+
+		{{content}}
+		<br style="clear:both;"/>
+	</div>
+
   <div id="side"></div>
 	<div id="nav">
 		<h1 id="logo"><a href="http://bonsaijs.org/">Bonsai</a></h1>
@@ -43,7 +69,6 @@ <h2 class="menuHeading">API: Mixins</h2>
 		</ul>
 	</div>
 
-	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
 	<script>
 	(function() {
     // Make collapsible menu sections:
@@ -85,26 +110,6 @@ <h2 class="menuHeading">API: Mixins</h2>
 
 	}());
 	</script>
-
-	<div id="content" class="{% if page.categories contains 'jsdoc' %}jsdoc{% endif %}">
-
-		<h1>
-			{{page.title}}
-		</h1>
-
-    {% if page.relatedLinks and page.relatedLinks != empty %}
-      <div id="relatedLinks">
-        <h3>Related:</h3>
-        {% for link in page.relatedLinks %}
-            <a class="overview" href="{{link}}">{{page.relatedNames[forloop.index0]}} &raquo;</a>
-        {% endfor %}
-      </div>
-    {% endif %}
-
-		{{content}}
-		<br style="clear:both;"/>
-	</div>
-
 	<script src="{{site.baseurl}}/lib/ace/ace-noconflict.js"></script>
 	<script src="{{site.baseurl}}/lib/bonsai/bonsai.iframe.js"></script>
 	<script src="{{site.baseurl}}/assets/doc.js"></script>

diff --git a/assets/main.css b/assets/main.css
@@ -28,6 +28,7 @@ p {
 }
 
 #logo { padding: 0; }
+#logo-top a,
 #logo a {
 	display: block;
 	text-indent: -9999em;
@@ -279,3 +280,73 @@ code {
 	font-size: 1.2em;
 	font-style: italic;
 }
+
+#mobile-header {
+  display: none;
+}
+
+@media screen and (max-width: 520px) {
+
+  #mobile-header {
+    display: block;
+    background: #111926;
+    position: relative;
+  }
+
+  #logo-top a {
+    background-position: 5% 0
+  }
+
+  #link-to-nav {
+    display: inline-block;
+    position: absolute;
+    margin-top: -1em;
+    right: 1.5em;
+    top: 50%;
+    color: #fff;
+    font-weight: bold;
+    font-size: 1.2em;
+    padding: 0.666em 1.333em;
+    text-decoration: none;
+    background: #061426;
+    background: -webkit-linear-gradient(top, #272A33, #061426);
+    background: -moz-linear-gradient(top, #272A33, #061426);
+    background: -o-linear-gradient(top, #272A33, #061426);
+    background: linear-gradient(top, #272A33, #061426);
+    border-radius: 0.333em;
+    border: 1px solid #020E26;
+    box-shadow: inset 0 0 3px rgba(255,255,255,0.333);
+  }
+
+  #side {
+    display: none;
+  }
+
+  #logo {
+    display: none;
+  }
+
+  #nav {
+    background: #111926;
+    position: static;
+    width: auto;
+  }
+
+  #nav .menuHeading {
+    background-position: 95% 10px;
+  }
+
+  #content {
+    font-size: 1.25em;
+    margin: 0 auto;
+    padding: 0 0 30px;
+    width: 95%;
+  }
+
+  #content img {
+    max-width: 100%;
+
+  }
+
+
+}