making the site a bit more mobile friendly

GarthDB · Apr 27, 2012 · e16818c · e16818c
1 parent 12d5550
commit e16818c
Show file tree

Hide file tree

Showing 4 changed files with 130 additions and 27 deletions.
diff --git a/css/main.css b/css/main.css
@@ -50,11 +50,14 @@ body header h1 strong {
   color: #fff;
   font-weight: normal;
 }
+body .wrap {
+  height: 50%;
+}
 body #content {
   width: 360px;
   background: rgba(255,255,255,0.90);
   position: relative;
-  min-height: 50%;
+  height: 100%;
   margin: 0 auto;
 }
 body #content h2 {
@@ -89,3 +92,35 @@ body #content section .comment {
 body #content section:last-child {
   padding-bottom: 20px;
 }
+@media all and (max-height: 960px) {
+  * {
+    -moz-box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+  }
+  body header {
+    position: absolute;
+    height: 180px !important;
+    width: 100%;
+  }
+  body .wrap {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    margin: 0 auto;
+    padding: 180px 0 0;
+  }
+  body .wrap #content {
+    height: 100%;
+  }
+  body .wrap #content pre {
+    width: 280px;
+  }
+}
+@media all and (max-width: 400px) {
+  #content {
+    width: 100% !important;
+  }
+}
diff --git a/css/main.styl b/css/main.styl
@@ -40,11 +40,13 @@ body
 			strong
 				color hsla(0, 0%, 100%, 1)
 				font-weight normal
+	.wrap
+		height 50%
 	#content
 		width 360px
 		background hsla(0, 0%, 100%, 0.9)
 		position relative
-		min-height 50%
+		height 100%
 		margin 0 auto
 		h2
 			font-size 21px
@@ -72,4 +74,30 @@ body
 				width 280px
 				margin 5px auto
 			&:last-child
-				padding-bottom 20px
+				padding-bottom 20px
+
+@media all and (max-height: 960px)
+	*
+		-moz-box-sizing border-box
+		-webkit-box-sizing border-box
+		box-sizing border-box
+	body
+		header
+			position absolute
+			height 180px !important
+			width 100%
+		.wrap
+			position absolute
+			top 0
+			left 0
+			width 100%
+			height 100%
+			margin 0 auto
+			padding 180px 0 0
+			#content
+				height 100%
+				pre
+					width 280px
+@media all and (max-width: 400px)
+	#content
+		width 100% !important
diff --git a/index.html b/index.html
@@ -1,3 +1,45 @@
-<!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><title>httpster</title><link rel="stylesheet" type="text/css" href="css/reset.css"><link rel="stylesheet" type="text/css" href="css/main.css"><link rel="shortcut icon" type="image/x-icon" href="favicon.ico"><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script><script src="js/app.js"></script><!--[if lt IE 9]><script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]--></head><body><header> <h1><strong>http</strong>ster</h1></header><div id="content"><h2>Simple local static development server</h2><section><div class="comment">install httpster (with <a href="http://npmjs.org/">npm</a>)</div><pre>$ npm install -g httpster</pre></section><section><div class="comment">navigate to your folder and start httpster<br></div><pre>$ cd your_public_folder/
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+    <meta name="viewport" content="initial-scale = 1.0,maximum-scale = 1.0">
+    <title>httpster</title>
+    <link rel="stylesheet" type="text/css" href="css/reset.css">
+    <link rel="stylesheet" type="text/css" href="css/main.css">
+    <link rel="shortcut icon" type="image/x-icon" href="favicon.ico"><!--[if lt IE 9]>
+    <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
+  </head>
+  <body>
+    <header> 
+      <h1><strong>http</strong>ster</h1>
+    </header>
+    <div class="wrap">
+      <div id="content">
+        <h2>Simple local static development server</h2>
+        <section>
+          <div class="comment">install httpster (with <a href="http://npmjs.org/">npm</a>)</div>
+          <pre>$ npm install -g httpster</pre>
+        </section>
+        <section>
+          <div class="comment">navigate to your folder and start httpster<br></div>
+          <pre>$ cd your_public_folder/
 $ httpster
-Starting Server on port &quot;3333&quot;</pre></section><section><div class="comment">choose the port</div><pre>$ httpster -p 8800</pre></section><section><div class="comment">pass a path to the root</div><pre>$ httpster wwww/</pre></section><section><div class="comment">fork it on <a href="https://github.com/SimbCo/httpster">github</a>, or whatever</div></section></div><footer></footer></body></html>
+Starting Server on port &quot;3333&quot;</pre>
+        </section>
+        <section>
+          <div class="comment">choose the port</div>
+          <pre>$ httpster -p 8800</pre>
+        </section>
+        <section>
+          <div class="comment">pass a path to the root</div>
+          <pre>$ httpster wwww/</pre>
+        </section>
+        <section>
+          <div class="comment">fork it on <a href="https://github.com/SimbCo/httpster">github</a>, or whatever</div>
+        </section>
+      </div>
+    </div>
+    <footer></footer>
+  </body>
+</html>
diff --git a/index.jade b/index.jade
@@ -3,36 +3,34 @@ html
 	head
 		meta(charset = 'utf-8')
 		meta('http-equiv' = 'X-UA-Compatible', content = 'IE=edge,chrome=1')
+		meta(name= 'viewport', content = 'initial-scale = 1.0,maximum-scale = 1.0')
 		title httpster
 		link(rel = 'stylesheet', type = 'text/css', href = 'css/reset.css')
 		link(rel = 'stylesheet', type = 'text/css', href = 'css/main.css')
 		link(rel = 'shortcut icon', type = 'image/x-icon', href = 'favicon.ico')
-
-
-		script(src = 'https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js')
-		script(src = 'js/app.js')
 		//if lt IE 9
 			script(src = '//html5shiv.googlecode.com/svn/trunk/html5.js')
 	body
 		header 
 			h1
 				| <strong>http</strong>ster
-		#content
-			h2 Simple local static development server
-			section
-				.comment install httpster (with <a href="http://npmjs.org/">npm</a>)
-				pre $ npm install -g httpster
-			section
-				.comment navigate to your folder and start httpster<br>
-				pre $ cd your_public_folder/
-					|$ httpster
-					|Starting Server on port "3333"
-			section
-				.comment choose the port
-				pre $ httpster -p 8800
-			section
-				.comment pass a path to the root
-				pre $ httpster wwww/
-			section
-				.comment fork it on <a href="https://github.com/SimbCo/httpster">github</a>, or whatever
+		.wrap
+			#content
+				h2 Simple local static development server
+				section
+					.comment install httpster (with <a href="http://npmjs.org/">npm</a>)
+					pre $ npm install -g httpster
+				section
+					.comment navigate to your folder and start httpster<br>
+					pre $ cd your_public_folder/
+						|$ httpster
+						|Starting Server on port "3333"
+				section
+					.comment choose the port
+					pre $ httpster -p 8800
+				section
+					.comment pass a path to the root
+					pre $ httpster wwww/
+				section
+					.comment fork it on <a href="https://github.com/SimbCo/httpster">github</a>, or whatever
 		footer