Fix alignment of all welcome page and main layout elements using boot…

…strap classes
studymesh · Jun 26, 2015 · f94f5a9 · f94f5a9
1 parent d76aa57
commit f94f5a9
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 43 deletions.
diff --git a/src/layouts/default.html.eco b/src/layouts/default.html.eco
@@ -16,35 +16,35 @@
 	-->
 </head>
 <body>
-	<div id="content">
-		<div id="container">
-			<div id="header">
+	<div id="container" class="container-fluid">
+		<div id="header" class="row">
+			<div class="col-xs-3">
 				<a class="header-element" id="header-logo" href="/">
 					<img alt="StudyMesh" src="/images/studymeshlogo.jpg"/>
 				</a>
-				<div class="header-element navbar" id="login-register-bar">
-					<ul>
-						<li>
-							<a id="login-link" href="http://app.studymesh.com/login">
-								Login / Register
-							</a>
-						</li>
-					</ul>
-				</div>
-				<div class="clear"></div>
 			</div>
-			<div id="main">
-				<%- @content %>
-			</div>
-			<div id="footer">
-				<ul class="menubar">
-					<li><a href="/about">About Us</a></li>
-					<li><a href="/pricing">Plans &amp; Pricing</a></li>
-					<li><a href="/legal/tos">Terms of Service</a></li>
-					<li><a href="/legal/privacy">Privacy</a></li>
-					<li><a href="/about/contact">Contact</a></li>
+			<div class="header-element navbar col-xs-4 col-xs-offset-4" id="login-register-bar">
+				<ul class="pull-right">
+					<li>
+						<a id="login-link" href="http://app.studymesh.com/login">
+							Login / Register
+						</a>
+					</li>
 				</ul>
 			</div>
+			<div class="clear"></div>
+		</div>
+		<div id="main">
+			<%- @content %>
+		</div>
+		<div id="footer">
+			<ul class="menubar">
+				<li><a href="/about">About Us</a></li>
+				<li><a href="/pricing">Plans &amp; Pricing</a></li>
+				<li><a href="/legal/tos">Terms of Service</a></li>
+				<li><a href="/legal/privacy">Privacy</a></li>
+				<li><a href="/about/contact">Contact</a></li>
+			</ul>
 		</div>
 	</div>
 	<script>

diff --git a/src/layouts/welcome.html.eco b/src/layouts/welcome.html.eco
@@ -3,7 +3,7 @@ layout: default
 ---
 
 
-<div class="container-fluid welcome-banner">
+<div class="welcome-banner row">
 	<div class="">
 		<h1>Study. Share. Learn. Together.</h1>
 		<p>Study a book, a collection, or the entire Library of Congress. Split it up with friends and colleagues. Collaborate to amplify your knowledge.</p>
@@ -14,23 +14,21 @@ layout: default
 	</div>
 </div>
 
-<div class="container-fluid">
-	<div class="row">
-		<div class="col-md-4">
-			<img src="<%= @document.pathToAssets %>/images/pile-of-books.png"/>
-			<h3>Infinite books!</h3>
-			<p>Study just one book, a collection of a dozen, or thousands.</p>
-		</div>
-		<div class="col-md-4">
-			<img src="<%= @document.pathToAssets %>/images/collaborate-hands.png"/>
-			<h3>Divide and conquer!</h3>
-			<p>Track your studying yourself, or divide the work among two, ten or a thousand peers.</p>
-		</div>
-		<div class="col-md-4">
-			<img src="<%= @document.pathToAssets %>/images/study-languages.png"/>
-			<h3>Any language!</h3>
-			<p>Books - and <i>this</i> site! - in English, French, Hebrew, Greek or any language you want.</p>
-		</div>
+<div class="row">
+	<div class="col-md-4">
+		<img src="<%= @document.pathToAssets %>/images/pile-of-books.png"/>
+		<h3>Infinite books!</h3>
+		<p>Study just one book, a collection of a dozen, or thousands.</p>
+	</div>
+	<div class="col-md-4">
+		<img src="<%= @document.pathToAssets %>/images/collaborate-hands.png"/>
+		<h3>Divide and conquer!</h3>
+		<p>Track your studying yourself, or divide the work among two, ten or a thousand peers.</p>
+	</div>
+	<div class="col-md-4">
+		<img src="<%= @document.pathToAssets %>/images/study-languages.png"/>
+		<h3>Any language!</h3>
+		<p>Books - and <i>this</i> site! - in English, French, Hebrew, Greek or any language you want.</p>
 	</div>
 </div>
 
diff --git a/src/static/styles/style.css b/src/static/styles/style.css
@@ -3,10 +3,10 @@ body {
 	text-align: center;
 }
 div#container {
-	width: 920px;
+	/* width: 920px; */
 	margin: 0 auto;
 	position: relative;
-	padding: 15px 0;
+	padding: 15px 30px;
 	min-height: 300px;
 	text-align: left;
 }