From 1bc7bbee6766cbf82b75a1a7842261472c561d0c Mon Sep 17 00:00:00 2001 From: Justine Arreche Date: Fri, 4 Oct 2013 23:27:30 -0400 Subject: [PATCH] changed layout of getting_started to two columns and reorganized typographic styles and heirarchy --- .../scripts/app/templates/no_owned_repos.hbs | 111 ++++++++++-------- assets/styles/getting_started.sass | 94 +++++++++------ 2 files changed, 121 insertions(+), 84 deletions(-) diff --git a/assets/scripts/app/templates/no_owned_repos.hbs b/assets/scripts/app/templates/no_owned_repos.hbs index 43a92c39..33c44e4a 100644 --- a/assets/scripts/app/templates/no_owned_repos.hbs +++ b/assets/scripts/app/templates/no_owned_repos.hbs @@ -1,58 +1,77 @@

Welcome to Travis CI!

-

Hey, it looks like you're new around here and have yet to set up your first repository on Travis CI. We're here to help you get started, it's easy!

+

Hey, it looks like you're new around here and have yet to set up your first
repository on Travis CI. We're here to help you get started, it's easy!

+
+
+ +
+ +
+ Step 1:   Enabling your projects +

+ Start by going to your {{#linkTo "profile.index"}}profile{{/linkTo}} and enable one of your projects. We've been + synchronizing all repositories you have administrative access to. Pick one and flip the switch next to it. +

+
+
- STEP 1:   Enabling your projects +
+
+ +
- +
+ Step 2:   Adding Travis +

+ Once you've enabled one of your projects, add a .travis.yml to your project, push some code, and we'll start processing your builds. Wait a + whee while and reload the page, and your newly setup and built project will show up on the right. +

+
+
-

- Start by going to your {{#linkTo "profile.index"}}profile{{/linkTo}} and enable one of your projects. We've been - synchronizing all repositories you have administrative access to. Pick one and flip the switch next to it. -

+
+
+ +
- STEP 2:   Adding Travis +
+ Step 3:   Wait for your build to finish +

+ We'll be sending you an email once the build has finished. Then, it's up to you to do the happy dance. +

+
+
- +
+ Build Configuration +

+ We use sensible defaults for most languages, but you can customize + both the build process and the build + environment to fit your project's needs. +

-

- Once you've enabled one of your projects, add a .travis.yml to your project, push some code, and we'll start processing your builds. Wait a - whee while and reload the page, and your newly setup and built project will show up on the right. -

+ Notifications +

+ You can also configure how you want to be notified of build results. Email is only one channel you can use. We + support Campfire, HipChat, Flowdock, IRC, and webhooks. To avoid + exposing any private credentials, you can shield them from the public using encrypted + configuration settings. +

- STEP 3:   Wait for your build to finish - - - -

- We'll be sending you an email once the build has finished. Then, it's up to you to do the happy dance. -

- -

- We use sensible defaults for most languages, but you can customize - both the build process and the build - environment to fit your project's needs. -

- -

- You can also configure how you want to be notified of build results. Email is only one channel you can use. We - support Campfire, HipChat, Flowdock, IRC, and webhooks. To avoid - exposing any private credentials, you can shield them from the public using encrypted - configuration settings. -

- -

- Should you have any questions or issues, have a look at our - documentation, open an issue or - send us an email. -

+ Questions +

+ Should you have any questions or issues, have a look at our + documentation, open an issue or + send us an email. +

+
diff --git a/assets/styles/getting_started.sass b/assets/styles/getting_started.sass index 467c264b..43a3901c 100644 --- a/assets/styles/getting_started.sass +++ b/assets/styles/getting_started.sass @@ -1,57 +1,75 @@ #getting-started - min-width: 600px - max-width: 800px + width: 850px margin: 0 auto padding-top: 30px font-family: 'Source Sans Pro' - text-align: center + text-align: left h2 color: #919191 font-weight: 400 line-height: 30px + text-align: center h3 - font-size: 35px + font-size: 30px color: #337389 + text-align: center - span + .getting-started-row display: inline-block - margin-top: 50px + clear: all + padding-top: 30px - .steps - font-size: 20px - font-weight: 600 - color: #939386 - - p - font-size: 15px - - .end-of-steps - padding-bottom: 50px - border-bottom : 1px solid #AAAAAA - - .after-steps - padding-top: 50px - - a - color: #a53230 - text-decoration: none - - &:hover - color: #607a84 + a + color: #337389 text-decoration: underline - img - padding: 0 - float: none - margin: 15px 0 0 0 - max-width: 800px - min-width: 600px + &:hover + color: #607a84 + text-decoration: underline - &.spinner - border: 0px - padding: 0px + img + padding: 0 float: none - margin: 0px - margin-left: 5px + margin: 15px 0 0 0 + width: 450px + + &.spinner + border: 0px + padding: 0px + float: none + margin: 0px + margin-left: 5px + + p + font-size: 17px + line-height: 26px + + .after-steps + padding-top: 50px + border-top : 1px solid #AAAAAA + + .column + padding-right: 20px + max-width: 450px + display: block + float: left + clear: all + + .column-right + width: 40% + display: block + float: left + clear: all + + .steps + display: block + margin-top: 10px + font-size: 22px + line-height: 30px + font-weight: 400 + color: #bc3c3c + + .end-of-steps + padding-bottom: 50px