Permalink
Browse files

Demo page style updates

  • Loading branch information...
bitpshr committed Dec 16, 2012
1 parent 28ff837 commit d01077f479c9eea4a0c79c39defb688bc45c3129
Showing with 83 additions and 44 deletions.
  1. +53 −37 demo/css/app.css
  2. +30 −7 demo/index.html
View
@@ -5,39 +5,6 @@ body {
}
-.download {
- margin-top:70px;
-}
-
-.container-narrow {
- margin: 0 auto;
- max-width: 700px;
- padding:0px 10px;
-}
-
-.lead{
- margin-bottom:0px !important;
-}
-
-.container-really-narrow {
- max-width: 500px !important;
- margin: 0px auto;
-}
-
-.container-narrow > hr {
- margin: 30px 0;
-}
-
-.sample{
- margin-bottom:15px;
-}
-
-iframe{
- margin-top:30px;
- margin-bottom:20px;
- display:block;
-}
-
.row-fluid{
margin-bottom:30px;
}
@@ -51,6 +18,20 @@ iframe{
padding-bottom:30px;
}
+.container-narrow {
+ margin: 0 auto;
+ max-width: 700px;
+ padding:0px 10px;
+}
+
+.container-really-narrow {
+ max-width: 500px !important;
+ margin: 0px auto;
+ padding:0px 10px;
+ height:281px;
+ padding-top:20px;
+}
+
.top {
background:#282828;
}
@@ -60,7 +41,6 @@ iframe{
font-family: 'Source Sans Pro', sans-serif;
font-size:130px;
display:block;
- margin-bottom:15px;
line-height:1;
text-shadow: -1px -1px 0px #333;
}
@@ -76,14 +56,37 @@ iframe{
}
.jumbotron {
- margin: 20px 0;
text-align: center;
}
+
.jumbotron .btn {
font-size: 21px;
padding: 14px 24px;
}
+iframe{
+
+}
+
+.actionContainer{
+ height:100px;
+ line-height:100px;
+}
+
+.download {
+
+}
+
+
+
+.lead{
+ margin-bottom:0px !important;
+}
+
+.sample{
+ margin-bottom:15px;
+}
+
.sectionTitle{
line-height: 100%;
font-style: italic;
@@ -107,6 +110,19 @@ h3{
font-weight:bold;
}
+.footer{
+ background:#282828;
+ color:#DDD;
+ font-family: 'Source Sans Pro', sans-serif;
+ text-align:center;
+ padding:40px 0px;
+}
+
+.footer a{
+ text-decoration: none;
+ color:#BBB;
+}
+
/* Landscape phone to portrait tablet */
@media (max-width: 767px) {
body{
@@ -119,7 +135,7 @@ h3{
}
.top h1{
- font-size:84px !important;
+ font-size:70px !important;
}
.sectionTitle{
@@ -139,7 +155,7 @@ h3{
}
.top h1{
- font-size:84px !important;
+ font-size:50px !important;
}
.sectionTitle{
View
@@ -15,18 +15,20 @@
<![endif]-->
</head>
<body>
+
<div class="container-fluid top">
<div class="jumbotron">
- <div class="container-really-narrow">
- <h1>Holler.js</h1>
- </div>
+ <h1>Holler.js</h1>
<p class="lead">real-time, in-app notifications for web and mobile via the command line</p>
- <p class="container-really-narrow hidden-phone">
+ <div class="container-really-narrow hidden-phone">
<iframe src="http://player.vimeo.com/video/55331511?badge=0" width="500" height="281" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen ></iframe>
- </p>
- <a class="download btn btn-large btn-success" href="https://github.com/bitpshr/holler">Download on GitHub</a>
+ </div>
+ <div class="actionContainer">
+ <a class="download btn btn-large btn-success" href="https://github.com/bitpshr/holler">Download on GitHub</a>
+ </div>
</div>
</div>
+
<div class="container-fluid dark">
<div class="container-narrow">
<h1 class="sectionTitle"><span class="accent">1.</span> Set stuff up</h1>
@@ -38,6 +40,7 @@ <h1 class="sectionTitle"><span class="accent">1.</span> Set stuff up</h1>
</p>
</div>
</div>
+
<div class="container-fluid light">
<div class="container-narrow">
<h1 class="sectionTitle"><span class="accent">2.</span> Require some JS</h1>
@@ -58,6 +61,7 @@ <h1 class="sectionTitle"><span class="accent">2.</span> Require some JS</h1>
</p>
</div>
</div>
+
<div class="container-fluid dark">
<div class="container-narrow">
<h1 class="sectionTitle"><span class="accent">3.</span> Start a server</h1>
@@ -70,12 +74,15 @@ <h1 class="sectionTitle"><span class="accent">3.</span> Start a server</h1>
</p>
</div>
</div>
+
<div class="container-fluid light">
<div class="container-narrow">
<h1 class="sectionTitle"><span class="accent">4.</span> Holler stuff</h1>
<p>
Show notifications to all users currently using your app in real-time using <code>holler.js</code>. Notifications use <a href="http://fabien-d.github.com/alertify.js/">Alertify</a> so they look nice and sexy.
</p>
+ <p>
+ <span class="label label-success">Try this!</span> Open up multiple browser windows all pointing to your test page. All windows should receive the notification in real-time.
<p>
<h3>Log Messages</h3>
<img src="css/img/log.png" class="sample"/>
@@ -93,9 +100,25 @@ <h3>Error Messages</h3>
</p>
</div>
</div>
+
<div class="footer">
- Copyright
+ <iframe allowtransparency="true" frameborder="0" scrolling="no" src="http://platform.twitter.com/widgets/tweet_button.1355514129.html#_=1355674951974&amp;count=horizontal&amp;hashtags=javascript&amp;id=twitter-widget-0&amp;lang=en&amp;original_referer=http%3A%2F%2Fbitpshr.info%2Fgitgraph%2F&amp;size=m&amp;text=GitHub%20participation%20graphs%20using%20canvas&amp;url=http%3A%2F%2Fbitpshr.info%2Fgitgraph&amp;via=bitpshr" class="twitter-share-button twitter-count-horizontal" style="width: 85px; height: 30px;" title="Twitter Tweet Button" data-twttr-rendered="true"></iframe>
+ <script type="text/javascript" async="" id="gauges-tracker" data-site-id="50b93314f5a1f55a5800000c" src="//secure.gaug.es/track.js"></script><script id="twitter-wjs" src="//platform.twitter.com/widgets.js"></script><script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
+ <iframe class="stars" src="http://bitpshr.info/cdn/github-btn.html?user=bitpshr&amp;repo=Gitgraph&amp;type=watch&amp;count=true&amp;size=small" allowtransparency="true" frameborder="0" scrolling="0" width="85px" height="30px"></iframe>
+ <iframe class="forks" src="http://bitpshr.info/cdn/github-btn.html?user=bitpshr&amp;repo=Gitgraph&amp;type=fork&amp;count=true&amp;size=small" allowtransparency="true" frameborder="0" scrolling="0" width="85px" height="30px"></iframe>
+ <br>
+ <p>
+ Built by <a href="http://twitter.com/bitpshr">@bitpshr</a> under the <a href="http://sam.zoy.org/wtfpl/">WTFPL</a> license.
+ </p>
+ <p>
+ <a href=""><span>About</span></a>
+ <span class="divider">·</span>
+ <a href="https://github.com/bitpshr/holler/issues"><span>Issues</span></a>
+ <span class="divider">·</span>
+ <a href="http://twitter.com/bitpshr"><span>Contact</span></a>
+ </p>
</div>
+
<script>
var hollerConfig = {
host: "http://127.0.0.1",

0 comments on commit d01077f

Please sign in to comment.