--- a/compass/index.html
+++ b/compass/index.html
@@ -33,8 +33,9 @@
</div>
</div>
</div>
-
+
{{outlet}}
+
</script>
<script type="text/x-handlebars" data-template-name="intro">
@@ -42,7 +43,7 @@
<div class="col-xs-10 col-xs-offset-1 btmpad">
<div {{bind-attr class="animation.animation"}}>
- <div {{bind-attr class="animation.animation :question :col-xs-10 :col-xs-offset-1"}}>
+ <div {{bind-attr class="animation.animation :question :col-sm-6 "}}>
<h1>{{{detail}}}
{{# if alert}}
<a class="lowercase" {{action 'showAlert' alert}}>{{alert.title}}<span class="defInfo glyphicon glyphicon-new-window"></span></a>
@@ -55,8 +56,8 @@
{{/if}}
</h1>
</div>
- <div class="character col-xs-10 col-xs-offset-1">
- <img class="img-responsive center-block" {{bind-attr src=character}} />
+ <div class="character col-sm-6">
+ <img class="img-responsive" {{bind-attr src=character}} />
</div>
</div>
</div>
@@ -96,11 +97,11 @@
<div class="col-xs-10 col-xs-offset-1 btmpad">
<div {{bind-attr class="animation.animation"}}>
- <div {{bind-attr class="animation.animation :question :col-xs-12"}}>
+ <div {{bind-attr class="animation.animation :question :col-sm-6"}}>
<h1>{{detail}}</h1>
</div>
- <div class="character col-xs-10 col-xs-offset-1">
- <img class="img-responsive center-block" {{bind-attr src=character}} />
+ <div class="character col-sm-6">
+ <img class="img-responsive" {{bind-attr src=character}} />
</div>
</div>
</div>
@@ -121,11 +122,11 @@
<div class="col-xs-10 col-xs-offset-1 btmpad">
<div {{bind-attr class="animation.animation"}}>
- <div {{bind-attr class="animation.animation :question :col-xs-10 :col-xs-offset-1"}}>
+ <div {{bind-attr class="animation.animation :question :col-sm-6"}}>
<h1>{{{detail}}}</h1>
</div>
- <div class="character col-xs-10 col-xs-offset-1">
- <img class="img-responsive center-block" {{bind-attr src=character}} />
+ <div class="character col-sm-6">
+ <img class="img-responsive" {{bind-attr src=character}} />
</div>
</div>
</div>