Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP

Loading…

Flexible Box Model #1

Merged
merged 13 commits into from
This page is out of date. Refresh to see the latest.
View
69 css/main.css
@@ -18,26 +18,40 @@ a:hover {
text-decoration: underline;
}
body {
+ width: 100%;
font-family: 'PigeonRegular';
+ display: -webkit-box;
+ -webkit-box-orient: vertical;
+ display: -moz-box;
+ -moz-box-orient: vertical;
+ display: box;
+ box-orient: vertical;
+ -webkit-box-align: center;
+ -moz-box-align: center;
+ box-align: center;
}
-body header {
+body:before {
+ content: '';
+ -webkit-box-flex: 1;
+ -moz-box-flex: 1;
+ box-flex: 1;
display: block;
- width: 360px;
- height: 50%;
+ min-height: 20px;
+}
+body > header {
+ -webkit-box-flex: 1;
+ -moz-box-flex: 1;
+ box-flex: 1;
position: relative;
- margin: 0 auto;
+ max-height: 144px;
+ min-height: 120px;
}
-body header h1 {
- position: absolute;
- bottom: 70px;
- width: 204px;
- left: 50%;
- margin-left: -102px;
+body > header h1 {
font-size: 72px;
font-weight: normal;
color: rgba(255,255,255,0.50);
}
-body header h1:after {
+body > header h1:after {
content: '';
background: url("../img/moustache.svg") no-repeat;
width: 80px;
@@ -46,16 +60,18 @@ body header h1:after {
left: 10px;
top: 75px;
}
-body header h1 strong {
+body > header h1 strong {
color: #fff;
font-weight: normal;
}
body #content {
+ -webkit-box-flex: 1;
+ -moz-box-flex: 1;
+ box-flex: 1;
+ min-height: 500px;
+ max-height: 600px;
width: 360px;
background: rgba(255,255,255,0.90);
- position: relative;
- min-height: 50%;
- margin: 0 auto;
}
body #content h2 {
font-size: 21px;
@@ -89,3 +105,26 @@ body #content section .comment {
body #content section:last-child {
padding-bottom: 20px;
}
+@media all and (max-width: 400px) {
+ body #content {
+ display: -webkit-box;
+ -webkit-box-orient: vertical;
+ display: -moz-box;
+ -moz-box-orient: vertical;
+ display: box;
+ box-orient: vertical;
+ -webkit-box-align: center;
+ -moz-box-align: center;
+ box-align: center;
+ width: 100%;
+ }
+ body #content section {
+ display: block;
+ margin: 20px 0 0;
+ }
+ body #content section:last-child {
+ -webkit-box-flex: 1;
+ -moz-box-flex: 1;
+ box-flex: 1;
+ }
+}
View
63 css/main.styl
@@ -13,19 +13,34 @@ a
a:hover
text-decoration underline
body
+ width 100%
font-family 'PigeonRegular'
- header
+ display -webkit-box
+ -webkit-box-orient vertical
+ display -moz-box
+ -moz-box-orient vertical
+ display box
+ box-orient vertical
+ -webkit-box-align center
+ -moz-box-align center
+ box-align center
+
+ &:before
+ content ''
+ -webkit-box-flex 1
+ -moz-box-flex 1
+ box-flex 1
display block
- width 360px
- height 50%
+ min-height 20px
+
+ & > header
+ -webkit-box-flex 1
+ -moz-box-flex 1
+ box-flex 1
position relative
- margin 0 auto
+ max-height 144px
+ min-height 120px
h1
- position absolute
- bottom 70px
- width 204px
- left 50%
- margin-left -102px
font-size 72px
font-weight normal
color hsla(0, 0%, 100%, 0.5)
@@ -41,11 +56,13 @@ body
color hsla(0, 0%, 100%, 1)
font-weight normal
#content
+ -webkit-box-flex 1
+ -moz-box-flex 1
+ box-flex 1
+ min-height 500px
+ max-height 600px
width 360px
background hsla(0, 0%, 100%, 0.9)
- position relative
- min-height 50%
- margin 0 auto
h2
font-size 21px
font-weight normal
@@ -72,4 +89,24 @@ body
width 280px
margin 5px auto
&:last-child
- padding-bottom 20px
+ padding-bottom 20px
+
+@media all and (max-width: 400px)
+ body #content
+ display -webkit-box
+ -webkit-box-orient vertical
+ display -moz-box
+ -moz-box-orient vertical
+ display box
+ box-orient vertical
+ -webkit-box-align center
+ -moz-box-align center
+ box-align center
+ width 100%
+ section
+ display block
+ margin 20px 0 0
+ &:last-child
+ -webkit-box-flex 1
+ -moz-box-flex 1
+ box-flex 1
View
BIN  img/bg_portland_bridge.jpg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
44 index.html
@@ -1,3 +1,43 @@
-<!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>
+ <div class="spacer"></div>
+ <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/
$ 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>
+ </body>
+</html>
View
9 index.jade
@@ -3,17 +3,15 @@ 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
+ .spacer
header
h1
| <strong>http</strong>ster
@@ -34,5 +32,4 @@ html
.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
+ .comment fork it on <a href="https://github.com/SimbCo/httpster">github</a>, or whatever
View
2  js/app.coffee
@@ -1,2 +0,0 @@
-$ ->
- # Stuff here
Something went wrong with that request. Please try again.