Improve CSS layout

This commit improves the page layout:
* use lighter fonts for the curl command line
* align download buttons
* dependency choices are now using "col-xs-*" classes for mobile devices
This commit is contained in:
Brian Clozel
2015-01-26 15:53:42 +01:00
parent 81a5d80b2c
commit 878087f235
2 changed files with 17 additions and 7 deletions

View File

@@ -3,6 +3,10 @@ body, h1, h2, h3 {
font-family: "Varela Round",sans-serif; font-family: "Varela Round",sans-serif;
} }
.top10 {
margin-top: 10%;
}
.initializr-header { .initializr-header {
color: #f1f1f1; color: #f1f1f1;
background-color: #34302d; background-color: #34302d;
@@ -25,3 +29,9 @@ body, h1, h2, h3 {
margin-bottom: 20px; margin-bottom: 20px;
text-transform: uppercase; text-transform: uppercase;
} }
kbd.curl {
color: #333;
background-color: #ddd;
font-weight: 700;
}

View File

@@ -114,7 +114,7 @@
<div class="col-sm-6"> <div class="col-sm-6">
<h3>Project dependencies</h3> <h3>Project dependencies</h3>
<% dependencies.each { %> <% dependencies.each { %>
<div class="form-group col-sm-6"> <div class="form-group col-xs-6">
<h4>${it.name}</h4> <h4>${it.name}</h4>
<% it.content.each { %> <% it.content.each { %>
<div class="checkbox"> <div class="checkbox">
@@ -134,30 +134,30 @@
</button> </button>
</p> </p>
</div> </div>
<div class="page-header"> <div class="page-header top10">
<h1>Spring CLI <small>Quickly prototype with Spring</small></h1> <h1>Spring CLI <small>Quickly prototype with Spring</small></h1>
</div> </div>
<div class="row"> <div class="row">
<div class="col-sm-offset-1 col-sm-5"> <div class="col-sm-offset-1 col-sm-5">
<h3>Spring CLI Zip</h3> <h3>Spring CLI Zip</h3>
<p>
Download the spring CLI as a zip distribution (unpack and run bin/spring on a command line).
</p>
<p> <p>
<a href="/spring.zip" class="btn btn-lg btn-primary" role="button"> <a href="/spring.zip" class="btn btn-lg btn-primary" role="button">
<span class="glyphicon glyphicon-download-alt"></span> Download Spring CLI Zip <span class="glyphicon glyphicon-download-alt"></span> Download Spring CLI Zip
</a> </a>
</p> </p>
<p>
Download the spring CLI as a zip distribution (unpack and run bin/spring on a command line).
</p>
</div> </div>
<div class="col-sm-5"> <div class="col-sm-5">
<h3>Spring CLI Installer</h3> <h3>Spring CLI Installer</h3>
<p>Installer for the spring CLI command on Un*x-like system (should work on Linux, Mac or Cygwin).</p>
<p>You can <kbd>curl http://start.spring.io/install.sh | sh</kbd>, or download the script and run it.</p>
<p> <p>
<a href="/install.sh" class="btn btn-lg btn-primary" role="button"> <a href="/install.sh" class="btn btn-lg btn-primary" role="button">
<span class="glyphicon glyphicon-download-alt"></span> Download Spring Installer <span class="glyphicon glyphicon-download-alt"></span> Download Spring Installer
</a> </a>
</p> </p>
<p>Installer for the spring CLI command on Un*x-like system (should work on Linux, Mac or Cygwin).</p>
<p>You can <kbd class="curl">curl http://start.spring.io/install.sh | sh</kbd>, or download the script and run it.</p>
</div> </div>
</div> </div>
</form> </form>