responsive fixes to the build flow diagrams

This commit is contained in:
Justine Arreche 2015-04-02 10:58:28 +02:00
parent 39857216c9
commit 32db6098cc
2 changed files with 54 additions and 12 deletions

View File

@ -69,7 +69,7 @@
display: none
.hero
background-color: #f8f7f4
background-color: #faf9f6
h1
color: #339999
line-height: 1.2em
@ -116,7 +116,7 @@
text-align: left
.recent-builds
background-color: #f4f3eb
background-color: #faf9f6
text-align: center
h2
@ -178,7 +178,7 @@
display: inline-block
.features-list
background-color: #f7f7f1
background-color: #faf9f6
h2
margin: 0
@ -230,13 +230,16 @@
line-height: 1.5em
color: #5f6062
.divider-line
.divider-line-horizontal
width: 50px
height: 3px
background: #eaeaec
display: inline-block
margin-bottom: 75px
.divider-line-vertical
display: none
.user-testimonials
h2
color: #418793
@ -254,6 +257,29 @@
.landing-centered-wrapper
width: 100%
@media (max-width: 846px)
.build-flows .branch-bf .bf
width: 100%
display: block
clear: all
.build-flows .branch-bf .bf img
width: 120px
height: 120px
.build-flows .branch-bf .bf p
font-size: 1.5em
.build-flows .branch-bf .divider-line-horizontal
display: none
.build-flows .branch-bf .divider-line-vertical
width: 3px
height: 40px
background: #eaeaec
display: inline-block
margin-bottom: 10px
@media (max-width: 797px)
.laptop-wrapper-mobile
display: block

View File

@ -132,25 +132,33 @@
<img src="../images/landing-page/push-icon-1.svg">
<p>You push your<br>code to Github</p>
</div>
<div class="divider-line">
<div class="divider-line-horizontal">
</div>
<div class="divider-line-vertical">
</div>
<div class="bf">
<img src="../images/landing-page/push-icon-2.svg">
<p>Github triggers<br>Travis CI to build</p>
</div>
<div class="divider-line">
<div class="divider-line-horizontal">
</div>
<div class="divider-line-vertical">
</div>
<div class="bf">
<img src="../images/landing-page/push-icon-3.svg">
<p>Hooray!<br>Your build passes!</p>
</div>
<div class="divider-line">
<div class="divider-line-horizontal">
</div>
<div class="divider-line-vertical">
</div>
<div class="bf">
<img src="../images/landing-page/push-icon-4.svg">
<p>Travis CI deploys<br>to Heroku</p>
</div>
<div class="divider-line">
<div class="divider-line-horizontal">
</div>
<div class="divider-line-vertical">
</div>
<div class="bf">
<img src="../images/landing-page/push-icon-5.svg">
@ -163,25 +171,33 @@
<img src="../images/landing-page/pull-icon-1.svg">
<p>A pull request<br>is created</p>
</div>
<div class="divider-line">
<div class="divider-line-horizontal">
</div>
<div class="divider-line-vertical">
</div>
<div class="bf">
<img src="../images/landing-page/pull-icon-2.svg">
<p>Github tells Travis CI the build is mergeable</p>
</div>
<div class="divider-line">
<div class="divider-line-horizontal">
</div>
<div class="divider-line-vertical">
</div>
<div class="bf">
<img src="../images/landing-page/push-icon-3.svg">
<p>Hooray!<br>Your build passes!</p>
</div>
<div class="divider-line">
<div class="divider-line-horizontal">
</div>
<div class="divider-line-vertical">
</div>
<div class="bf">
<img src="../images/landing-page/pull-icon-4.svg">
<p>Travis CI updates the PR that it passed</p>
</div>
<div class="divider-line">
<div class="divider-line-horizontal">
</div>
<div class="divider-line-vertical">
</div>
<div class="bf">
<img src="../images/landing-page/pull-icon-5.svg">