suzanne.soy/travis-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

tweak responsive behaviour

Browse Source
This commit is contained in:
Lisa P 2015-10-27 18:08:33 +01:00
parent 8719b1a772
commit b35e24868a
2 changed files with 20 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
app/styles/app/layouts/home-pro.sass
View File

@ -83,8 +83,11 @@
.hero-computer .hero-computer
width: 100% width: 100%
height: 35em height: 35em
position: absolute margin-top: 3em
transform: translateY(-.1rem) @media #{$medium-up}
position: absolute
margin-top: 0
transform: translateY(-.1rem)
.section--grey .section--grey
padding: 4rem 0 5rem padding: 4rem 0 5rem
@ -102,13 +105,15 @@
.inner .inner
display: flex display: flex
justify-content: space-between justify-content: space-between
flex-direction: column flex-direction: column-reverse
@media #{$medium-up} @media #{$medium-up}
flex-direction: row flex-direction: row
.section-list, .section-list,
.section-text .section-text
flex: 0 0 47% flex: 0 0 50%
@media (min-width: 54em)
flex: 0 0 47%
.section--hero .section--hero
@ -121,6 +126,9 @@
.section-text .section-text
flex: 0 0 47% flex: 0 0 47%
text-align: center
@media #{$medium-up}
text-align: left
.section-image .section-image
flex: 0 0 50% flex: 0 0 50%
@ -174,10 +182,13 @@
@extend %list @extend %list
display: flex display: flex
justify-content: space-between justify-content: space-between
flex-wrap: wrap flex-flow: column wrap
margin-top: 5em
@media #{$medium-up}
flex-flow: row wrap
margin-top: 0
li li
flex: 0 0 43% flex: 0 0 15em
[class^="customer-"] [class^="customer-"]
display: block display: block

4
app/templates/home-pro.hbs
View File

@ -4,7 +4,7 @@
<div class="section-text"> <div class="section-text">
<h1 class="h1">Builds apps <br class="br-small"> with confidence</h1> <h1 class="h1">Builds apps <br class="br-small"> with confidence</h1>
<p class="text-big">Focus on writing code. Let Travis CI take care<br class="br-small"> of running your tests and deploying your apps.</p> <p class="text-big">Focus on writing code. Let Travis CI take care<br class="br-small"> of running your tests and deploying your apps.</p>
<a href="#" class="hero-button" title="Start your free trial">Start your free trial</a> <a href="https://travis-ci.com/signin" class="hero-button" title="Start your free trial">Start your free trial</a>
</div> </div>
<div class="section-image"> <div class="section-image">
<img src="../images/pro-landing/hero-screen.svg" class="hero-computer" aria-hidden="true"> <img src="../images/pro-landing/hero-screen.svg" class="hero-computer" aria-hidden="true">
@ -85,7 +85,7 @@
<section class="section--grey section--center"> <section class="section--grey section--center">
<div class="inner"> <div class="inner">
<h2 class="h2--teal">Interested in running your <br class="br-small"> private projects with Travis CI?</h2> <h2 class="h2--teal">Interested in running your <br class="br-small"> private projects with Travis CI?</h2>
<a href="#" class="landing-button">Start your free trial</a> <a href="https://travis-ci.com/signin" class="landing-button">Start your free trial</a>
</div> </div>
</section> </section>
</div> </div>