add finaly styles to logo page
This commit is contained in:
Lisa P
parent
b23aaa8b02
commit
dfb303a0a3
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -3,120 +3,124 @@
|
|||
<div class="inner">
|
||||
<header class="section--center team-header">
|
||||
<h1 class="h1--red">So, you wanna use our logo?</h1>
|
||||
<p class="text-big">That's no problem at all!<br>But first, let's go over some basics on how to use it.
|
||||
<p class="text-big">That's no problem at all!<br> But first, let's go over some basics on how to use it.
|
||||
</p>
|
||||
</header>
|
||||
<p class="text-logo">The <strong>Travis CI wordmark</strong> combines the <strong>Travis CI mascot</strong> with the words “Travis CI” with a specific font and spacing treatment, creating a recognizable logo. This logo or wordmark is used online and in print for; product website, sponsored conference materials, invoices, emails, and other official business uses. <strong>You may also use the wordmark in other materials such as presentations mentioning Travis CI, conferences we are sponsoring and other partnerships</strong>.</p>
|
||||
<p class="text-logo">The <strong>Travis CI wordmark</strong> combines the <strong>Travis CI mascot</strong> with the words “Travis CI” with a specific font and spacing treatment, creating a recognizable logo. This logo or wordmark is used online and in print for product website, sponsored conference materials, invoices, emails, and other official business uses. <strong>You may also use the wordmark in other materials such as presentations mentioning Travis CI, conferences we are sponsoring and other partnerships</strong>.</p>
|
||||
<p class="text-logo"><strong>Approved official Travis CI logos are available to download</strong> in high and low res (.eps, .png) below. If you have questions about using our logo, please email <a href="mailto:support@travis-ci.com" title="email the Travis CI support team">support@travis-ci.com</a>.</p>
|
||||
<div>
|
||||
<div class="logo-logos">
|
||||
<figure>
|
||||
<img src="" alt="Travis CI logo on light background">
|
||||
<figcaption>Dark logo on light background <a href="" title="" download="">.eps</a> or <a href="" title="" download="">.png</a></figcaption>
|
||||
<div class="logos--light">
|
||||
<img src="../images/pro-landing/TravisCI-logolockup-spacingexample.svg" alt="Travis CI logo on light background">
|
||||
</div>
|
||||
<figcaption class="text-small">Dark logo on light background <a href="" title="" download="">.eps</a> or <a href="" title="" download="">.png</a></figcaption>
|
||||
</figure>
|
||||
<figure>
|
||||
<img src="" alt="Travis CI logo on dark background">
|
||||
<figcaption>Light logo on dark background <a href="" title="" download="">.eps</a> or <a href="" title="" download="">.png</a></figcaption>
|
||||
<div class="logos--dark">
|
||||
<img src="../images/pro-landing/TravisCI-logolockup-spacingexample-darkbg.svg" alt="Travis CI logo on dark background">
|
||||
</div>
|
||||
<figcaption class="text-small">Light logo on dark background <a href="" title="" download="">.eps</a> or <a href="" title="" download="">.png</a></figcaption>
|
||||
</figure>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="section--grey">
|
||||
<section class="section--grey section--center">
|
||||
<div class="inner">
|
||||
<h2 class="h2--grey">Typography</h2>
|
||||
<ul class="list--fonts">
|
||||
<li>
|
||||
<p class="font-light">Source Sans Pro</p>
|
||||
<p>Light (300)</p>
|
||||
<p class="text-big">Light (300)</p>
|
||||
</li>
|
||||
<li>
|
||||
<p class="font-regular">Source Sans Pro</p>
|
||||
<p>Regular (400)</p>
|
||||
<p class="text-big">Regular (400)</p>
|
||||
</li>
|
||||
<li>
|
||||
<p class="font-semibold">Source Sans Pro</p>
|
||||
<p>Semi Bold (600)</p>
|
||||
<p class="text-big">Semi Bold (600)</p>
|
||||
</li>
|
||||
</ul>
|
||||
<h2 class="h2--grey">Brand Colors</h2>
|
||||
<ul class="list--colors">
|
||||
<li>
|
||||
<div data-color="#40A3AD" class=""></div>
|
||||
<p><strong>Turbo Teal</strong> #40A3AD</p>
|
||||
<div class="colors-sample--teal" aria-hidden="true"></div>
|
||||
<p class="text-small"><strong>Turbo Teal</strong> #40A3AD</p>
|
||||
</li>
|
||||
<li>
|
||||
<div data-color="#44A662" class=""></div>
|
||||
<p><strong>Passing green</strong> #44A662</p>
|
||||
<div class="colors-sample--green" aria-hidden="true"></div>
|
||||
<p class="text-small"><strong>Passing green</strong> #44A662</p>
|
||||
</li>
|
||||
<li>
|
||||
<div data-color="#E5DA3F" class=""></div>
|
||||
<p><strong>Building yellow</strong> #E5DA3F</p>
|
||||
<div class="colors-sample--yellow" aria-hidden="true"></div>
|
||||
<p class="text-small"><strong>Building yellow</strong> #E5DA3F</p>
|
||||
</li>
|
||||
<li>
|
||||
<div data-color="#D94341" class=""></div>
|
||||
<p><strong>Failing red</strong> #D94341</p>
|
||||
<div class="colors-sample--red" aria-hidden="true"></div>
|
||||
<p class="text-small"><strong>Failing red</strong> #D94341</p>
|
||||
</li>
|
||||
<li>
|
||||
<div data-color="#666666" class=""></div>
|
||||
<p><strong>Asphalt grey</strong> #666666</p>
|
||||
<div class="colors-sample--grey" aria-hidden="true"></div>
|
||||
<p class="text-small"><strong>Asphalt grey</strong> #666666</p>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
<section class="section--white">
|
||||
<section class="section--white section--center">
|
||||
<div class="inner">
|
||||
<h2 class="h2--grey">Alternative mascots for use</h2>
|
||||
<p class="text-logo"><strong>There are a couple alternative options for Travis CI's logo usage</strong>. If you would like to use a simplified version of our logo or a version for various background colors, please select from the following options. If you have questions about using our logo, please email <a href="mailto:support@travis-ci.com" title="email Travis CI support">support@travis-ci.com</a>.</p>
|
||||
<ul class="list--mascot">
|
||||
<li>
|
||||
<figure>
|
||||
<img src="" alt="Mascot skin-tone-1">
|
||||
<figcaption class="text-small"><a href="" download="" title="">.eps</a> <a href="" download="" title="">.png</a></figcaption>
|
||||
<img src="../images/pro-landing/TravisCI-mascot.svg" alt="Mascot">
|
||||
<figcaption class="text-small"><a href="../images/pro-landing/TravisCI-mascot.svg" download="Travis-CI-Mascot" title="">.eps</a> <a href="../images/pro-landing/TravisCI-mascot.svg" download="Travis-CI-Mascot" title="">.png</a></figcaption>
|
||||
</figure>
|
||||
</li>
|
||||
<li>
|
||||
<figure>
|
||||
<img src="" alt="Mascot skin-tone-1">
|
||||
<figcaption class="text-small"><a href="" download="" title="">.eps</a> <a href="" download="" title="">.png</a></figcaption>
|
||||
<img src="../images/pro-landing/TravisCI-mascot2.svg" alt="Mascot">
|
||||
<figcaption class="text-small"><a href="../images/pro-landing/TravisCI-mascot2.svg" download="Travis-CI-Mascot" title="">.eps</a> <a href="../images/pro-landing/TravisCI-mascot.svg" download="Travis-CI-Mascot" title="">.png</a></figcaption>
|
||||
</figure>
|
||||
</li>
|
||||
<li>
|
||||
<figure>
|
||||
<img src="" alt="Mascot skin-tone-1">
|
||||
<figcaption class="text-small"><a href="" download="" title="">.eps</a> <a href="" download="" title="">.png</a></figcaption>
|
||||
<img src="../images/pro-landing/TravisCI-mascot3.svg" alt="Mascot">
|
||||
<figcaption class="text-small"><a href="../images/pro-landing/TravisCI-mascot3.svg" download="Travis-CI-Mascot" title="">.eps</a> <a href="../images/pro-landing/TravisCI-mascot.svg" download="Travis-CI-Mascot" title="">.png</a></figcaption>
|
||||
</figure>
|
||||
</li>
|
||||
<li>
|
||||
<figure>
|
||||
<img src="" alt="Mascot skin-tone-1">
|
||||
<figcaption class="text-small"><a href="" download="" title="">.eps</a> <a href="" download="" title="">.png</a></figcaption>
|
||||
<img src="../images/pro-landing/TravisCI-mascot4.svg" alt="Mascot">
|
||||
<figcaption class="text-small"><a href="../images/pro-landing/TravisCI-mascot4.svg" download="Travis-CI-Mascot" title="">.eps</a> <a href="../images/pro-landing/TravisCI-mascot.svg" download="Travis-CI-Mascot" title="">.png</a></figcaption>
|
||||
</figure>
|
||||
</li>
|
||||
<li>
|
||||
<figure>
|
||||
<img src="" alt="Mascot skin-tone-1">
|
||||
<figcaption class="text-small"><a href="" download="" title="">.eps</a> <a href="" download="" title="">.png</a></figcaption>
|
||||
<img src="../images/pro-landing/TravisCI-mascot-grey.svg" alt="Mascot">
|
||||
<figcaption class="text-small"><a href="../images/pro-landing/TravisCI-mascot-grey.svg" download="Travis-CI-Mascot" title="">.eps</a> <a href="../images/pro-landing/TravisCI-mascot.svg" download="Travis-CI-Mascot" title="">.png</a></figcaption>
|
||||
</figure>
|
||||
</li>
|
||||
<li>
|
||||
<figure>
|
||||
<img src="" alt="Mascot skin-tone-1">
|
||||
<figcaption class="text-small"><a href="" download="" title="">.eps</a> <a href="" download="" title="">.png</a></figcaption>
|
||||
<img src="../images/pro-landing/TravisCI-mascot-blue.svg" alt="Mascot">
|
||||
<figcaption class="text-small"><a href="../images/pro-landing/TravisCI-mascot-blue.svg" download="Travis-CI-Mascot" title="">.eps</a> <a href="../images/pro-landing/TravisCI-mascot.svg" download="Travis-CI-Mascot" title="">.png</a></figcaption>
|
||||
</figure>
|
||||
</li>
|
||||
<li>
|
||||
<figure>
|
||||
<img src="" alt="Mascot skin-tone-1">
|
||||
<figcaption class="text-small"><a href="" download="" title="">.eps</a> <a href="" download="" title="">.png</a></figcaption>
|
||||
<img src="../images/pro-landing/TravisCI-mascot-red.svg" alt="Mascot">
|
||||
<figcaption class="text-small"><a href="../images/pro-landing/TravisCI-mascot-red.svg" download="Travis-CI-Mascot" title="">.eps</a> <a href="../images/pro-landing/TravisCI-mascot.svg" download="Travis-CI-Mascot" title="">.png</a></figcaption>
|
||||
</figure>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
<section class="section--grey">
|
||||
<div class="inner">
|
||||
<div class="">
|
||||
<div class="inner does-donts">
|
||||
<div class="does">
|
||||
<h2 class="h2--green">Go ahead! Do these things:</h2>
|
||||
<ul class="list--check">
|
||||
<ul class="list--check text-big">
|
||||
<li>Use the Travis CI logo to link back to travis-ci.com</li>
|
||||
<li>Use the logo to show you're running your tests on Travis CI</li>
|
||||
<li>Use the mascot or logo in your blog, presentation or print material when mentioning us</li>
|
||||
|
|
@ -125,9 +129,9 @@
|
|||
<li>Use the mascot or logo to create vegan cookie shapes and send c/o @saltinejustine to Berlin</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<div class="donts">
|
||||
<h2 class="h2--red">Please don't do these things:</h2>
|
||||
<ul class="list--cross">
|
||||
<ul class="list--cross text-big">
|
||||
<li>Alter the logo in any way</li>
|
||||
<li>Redesign, redraw, animate, modify, distort or alter the proportions, color or typeface of the logo</li>
|
||||
<li>Use the logo for your own company or application icon</li>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
viewBox="0 0 20 20" enable-background="new 0 0 20 20" xml:space="preserve">
|
||||
<g id="Failed">
|
||||
<path fill="#A7AEAE" d="M10.9,10l3.9-3.9c0.2-0.2,0.2-0.6,0-0.9c-0.2-0.2-0.6-0.2-0.9,0L10,9.1L6.1,5.2c-0.2-0.2-0.6-0.2-0.9,0
|
||||
<path fill="##A7AEAE" d="M10.9,10l3.9-3.9c0.2-0.2,0.2-0.6,0-0.9c-0.2-0.2-0.6-0.2-0.9,0L10,9.1L6.1,5.2c-0.2-0.2-0.6-0.2-0.9,0
|
||||
c-0.2,0.2-0.2,0.6,0,0.9L9.1,10l-3.9,3.9c-0.2,0.2-0.2,0.6,0,0.9C5.3,14.9,5.5,15,5.6,15s0.3-0.1,0.4-0.2l3.9-3.9l3.9,3.9
|
||||
c0.1,0.1,0.3,0.2,0.4,0.2c0.2,0,0.3-0.1,0.4-0.2c0.2-0.2,0.2-0.6,0-0.9L10.9,10z"/>
|
||||
</g>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 578 B After Width: | Height: | Size: 579 B |
Loading…
Reference in New Issue
Block a user