diff --git a/app/styles/app/layouts/home-pro.sass b/app/styles/app/layouts/home-pro.sass index bde26d37..d00ec70f 100644 --- a/app/styles/app/layouts/home-pro.sass +++ b/app/styles/app/layouts/home-pro.sass @@ -129,6 +129,7 @@ @extend .text-small line-height: 1.8 margin-bottom: 2em + text-align: left @media #{$medium-up} width: 80% margin-right: auto @@ -247,8 +248,10 @@ li flex: 0 0 5em - .list--check + .list--check, + .list--cross @extend %list + padding: 0 0 0 1.4em li &:before content: "" @@ -256,9 +259,17 @@ height: 1.2em width: 1.2em margin-right: .3em + margin-left: -1.5em vertical-align: middle - background: - image: url("data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJMYXllcl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIKCSB2aWV3Qm94PSIwIDAgMjAgMjAiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDIwIDIwIiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPGcgaWQ9IlBhc3NlZCI+Cgk8Zz4KCQk8cGF0aCBmaWxsPSIjMzlBODVCIiBkPSJNOS42LDE0LjRjLTAuMSwwLTAuMy0wLjEtMC40LTAuMWwtNC0zLjNjLTAuMy0wLjItMC4zLTAuNi0wLjEtMC45UzUuOCw5LjgsNi4xLDEwbDMuNCwyLjhsNC45LTcuNQoJCQlDMTQuNiw1LDE1LDQuOSwxNS4zLDUuMWMwLjMsMC4yLDAuNCwwLjYsMC4yLDAuOWwtNS4zLDguMUMxMC4xLDE0LjMsOS45LDE0LjQsOS42LDE0LjRDOS43LDE0LjQsOS43LDE0LjQsOS42LDE0LjR6Ii8+Cgk8L2c+CjwvZz4KPC9zdmc+") + + .list--check + li:before + background-image: url("data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJMYXllcl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIKCSB2aWV3Qm94PSIwIDAgMjAgMjAiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDIwIDIwIiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPGcgaWQ9IlBhc3NlZCI+Cgk8Zz4KCQk8cGF0aCBmaWxsPSIjMzlBODVCIiBkPSJNOS42LDE0LjRjLTAuMSwwLTAuMy0wLjEtMC40LTAuMWwtNC0zLjNjLTAuMy0wLjItMC4zLTAuNi0wLjEtMC45UzUuOCw5LjgsNi4xLDEwbDMuNCwyLjhsNC45LTcuNQoJCQlDMTQuNiw1LDE1LDQuOSwxNS4zLDUuMWMwLjMsMC4yLDAuNCwwLjYsMC4yLDAuOWwtNS4zLDguMUMxMC4xLDE0LjMsOS45LDE0LjQsOS42LDE0LjRDOS43LDE0LjQsOS43LDE0LjQsOS42LDE0LjR6Ii8+Cgk8L2c+CjwvZz4KPC9zdmc+") + + .list--cross + li:before + background-image: url("data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJMYXllcl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIKCSB2aWV3Qm94PSIwIDAgMjAgMjAiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDIwIDIwIiB4bWw6c3BhY2U9InByZXNlcnZlIj4KICA8ZyBpZD0iRmFpbGVkIj4KICAJPHBhdGggZmlsbD0iI0RCNDI0MiIgZD0iTTEwLjksMTBsMy45LTMuOWMwLjItMC4yLDAuMi0wLjYsMC0wLjljLTAuMi0wLjItMC42LTAuMi0wLjksMEwxMCw5LjFMNi4xLDUuMmMtMC4yLTAuMi0wLjYtMC4yLTAuOSwwCiAgCQljLTAuMiwwLjItMC4yLDAuNiwwLDAuOUw5LjEsMTBsLTMuOSwzLjljLTAuMiwwLjItMC4yLDAuNiwwLDAuOUM1LjMsMTQuOSw1LjUsMTUsNS42LDE1czAuMy0wLjEsMC40LTAuMmwzLjktMy45bDMuOSwzLjkKICAJCWMwLjEsMC4xLDAuMywwLjIsMC40LDAuMmMwLjIsMCwwLjMtMC4xLDAuNC0wLjJjMC4yLTAuMiwwLjItMC42LDAtMC45TDEwLjksMTB6Ii8+CiAgPC9nPgo8L3N2Zz4=") + .list--features @extend %list @@ -413,7 +424,6 @@ display: flex flex-flow: row wrap justify-content: space-between - padding: 0 margin: 3em 0 0 list-style: none @@ -430,6 +440,72 @@ margin: 0 font-size: 16px + .list--fonts + @extend %list + display: flex + flex-wrap: wrap + justify-content: space-between + margin: 3em 0 7em + flex-direction: column + @media #{$medium-up} + flex-direction: row + li + flex: 1 0 33% + margin-bottom: 2em + @media #{$medium-up} + flex: 0 0 33% + margin-bottom: 0 + [class^="font-"] + font-size: 36px + margin: 0 + .text-big + margin: .5em 0 0 + .font-light + font-weight: 300 + color: $teal + .font-regular + font-weight: 400 + color: #D3B01E + .font-semibold + font-weight: 600 + color: $grey + + .list--colors + @extend %list + display: flex + flex-wrap: wrap + justify-content: space-around + flex-direction: column + @media #{$medium-up} + flex-direction: row + + li + flex: 0 0 19% + [class^="colors-sample"] + height: 3em + margin-bottom: .5em + .colors-sample--teal + background-color: $teal + .colors-sample--green + background-color: $green + .colors-sample--yellow + background-color: $yellow + .colors-sample--red + background-color: $red + .colors-sample--grey + background-color: #666 + + .list--mascot + @extend %list + display: flex + flex-wrap: wrap + justify-content: space-around + justify-content: center + @media #{$medium-up} + width: 80% + margin: auto + li + flex: 0 0 15em .team-header margin-bottom: 7em @@ -472,7 +548,7 @@ display: flex flex-wrap: wrap list-style: none - align-content: space-between + justify-content: space-between margin: 0 padding: 0 @@ -491,3 +567,33 @@ font-size: 16px margin: 0 +.logo-logos + margin-top: 6em + display: flex + flex-wrap: wrap + justify-content: space-between + figure + margin: 0 + flex: 1 0 48% + [class^="logos--"] + padding: 2em + margin-bottom: 1em +.logos--light + background-color: #EDF3F3 +.logos--dark + background-color: #40A3AD + + +.does-donts + @media #{$medium-up} + display: flex + flex-wrap: wrap + justify-content: space-between + .does, + .donts + flex: 0 0 46% + + .does + margin-bottom: 3em + @media #{$medium-up} + margin-bottom: 0 diff --git a/app/templates/logo.hbs b/app/templates/logo.hbs index 09a454af..22d426bd 100644 --- a/app/templates/logo.hbs +++ b/app/templates/logo.hbs @@ -3,120 +3,124 @@

So, you wanna use our logo?

-

That's no problem at all!
But first, let's go over some basics on how to use it. +

That's no problem at all!
But first, let's go over some basics on how to use it.

- + -
+
- Travis CI logo on light background -
Dark logo on light background .eps or .png
+
+ Travis CI logo on light background +
+
Dark logo on light background .eps or .png
- Travis CI logo on dark background -
Light logo on dark background .eps or .png
+
+ Travis CI logo on dark background +
+
Light logo on dark background .eps or .png
-
+

Typography

  • Source Sans Pro

    -

    Light (300)

    +

    Light (300)

  • Source Sans Pro

    -

    Regular (400)

    +

    Regular (400)

  • Source Sans Pro

    -

    Semi Bold (600)

    +

    Semi Bold (600)

Brand Colors

  • -
    -

    Turbo Teal #40A3AD

    + +

    Turbo Teal #40A3AD

  • -
    -

    Passing green #44A662

    + +

    Passing green #44A662

  • -
    -

    Building yellow #E5DA3F

    + +

    Building yellow #E5DA3F

  • -
    -

    Failing red #D94341

    + +

    Failing red #D94341

  • -
    -

    Asphalt grey #666666

    + +

    Asphalt grey #666666

-
+

Alternative mascots for use

-
-
+
+

Go ahead! Do these things:

-
    +
    • Use the Travis CI logo to link back to travis-ci.com
    • Use the logo to show you're running your tests on Travis CI
    • Use the mascot or logo in your blog, presentation or print material when mentioning us
      • @@ -125,9 +129,9 @@
    • Use the mascot or logo to create vegan cookie shapes and send c/o @saltinejustine to Berlin
-
+

Please don't do these things:

-
    +
    • Alter the logo in any way
    • Redesign, redraw, animate, modify, distort or alter the proportions, color or typeface of the logo
    • Use the logo for your own company or application icon
      • diff --git a/public/images/line-icons/icon-failed.svg b/public/images/line-icons/icon-failed.svg index f8321d14..c524eaaa 100644 --- a/public/images/line-icons/icon-failed.svg +++ b/public/images/line-icons/icon-failed.svg @@ -1,7 +1,7 @@ -