Donate
diff --git a/source/images/brand/Ember-Brand-Guidelines.pdf b/source/images/brand/Ember-Brand-Guidelines.pdf
new file mode 100644
index 0000000000..cb224720a6
Binary files /dev/null and b/source/images/brand/Ember-Brand-Guidelines.pdf differ
diff --git a/source/images/brand/ember-light-dark.png b/source/images/brand/ember-light-dark.png
deleted file mode 100644
index 3efd93b57c..0000000000
Binary files a/source/images/brand/ember-light-dark.png and /dev/null differ
diff --git a/source/images/brand/ember_CLI-1c-Dark.png b/source/images/brand/ember_CLI-1c-Dark.png
new file mode 100644
index 0000000000..b6254626d9
Binary files /dev/null and b/source/images/brand/ember_CLI-1c-Dark.png differ
diff --git a/source/images/brand/ember_CLI-1c-Light.png b/source/images/brand/ember_CLI-1c-Light.png
new file mode 100644
index 0000000000..a07f6c4c52
Binary files /dev/null and b/source/images/brand/ember_CLI-1c-Light.png differ
diff --git a/source/images/brand/ember_CLI-Dark.png b/source/images/brand/ember_CLI-Dark.png
index 872d284790..ac9319ef87 100644
Binary files a/source/images/brand/ember_CLI-Dark.png and b/source/images/brand/ember_CLI-Dark.png differ
diff --git a/source/images/brand/ember_CLI-Light.png b/source/images/brand/ember_CLI-Light.png
index 31cce11ac5..fe0db44832 100644
Binary files a/source/images/brand/ember_CLI-Light.png and b/source/images/brand/ember_CLI-Light.png differ
diff --git a/source/images/brand/ember_Data-1c-Dark.png b/source/images/brand/ember_Data-1c-Dark.png
new file mode 100644
index 0000000000..d9e945ffd9
Binary files /dev/null and b/source/images/brand/ember_Data-1c-Dark.png differ
diff --git a/source/images/brand/ember_Data-1c-Light.png b/source/images/brand/ember_Data-1c-Light.png
new file mode 100644
index 0000000000..ee744a47a2
Binary files /dev/null and b/source/images/brand/ember_Data-1c-Light.png differ
diff --git a/source/images/brand/ember_Data-Dark.png b/source/images/brand/ember_Data-Dark.png
index 4e540e5728..357c3346f6 100644
Binary files a/source/images/brand/ember_Data-Dark.png and b/source/images/brand/ember_Data-Dark.png differ
diff --git a/source/images/brand/ember_Data-Light.png b/source/images/brand/ember_Data-Light.png
index a349259d47..29278e93fd 100644
Binary files a/source/images/brand/ember_Data-Light.png and b/source/images/brand/ember_Data-Light.png differ
diff --git a/source/images/brand/ember_Ember-1c-Dark.png b/source/images/brand/ember_Ember-1c-Dark.png
new file mode 100644
index 0000000000..4a7510949b
Binary files /dev/null and b/source/images/brand/ember_Ember-1c-Dark.png differ
diff --git a/source/images/brand/ember_Ember-1c-Light.png b/source/images/brand/ember_Ember-1c-Light.png
new file mode 100644
index 0000000000..8cd63a329a
Binary files /dev/null and b/source/images/brand/ember_Ember-1c-Light.png differ
diff --git a/source/images/brand/ember_Ember-Dark.png b/source/images/brand/ember_Ember-Dark.png
index 311a5fe953..5877dfe91a 100644
Binary files a/source/images/brand/ember_Ember-Dark.png and b/source/images/brand/ember_Ember-Dark.png differ
diff --git a/source/images/brand/ember_Ember-Light.png b/source/images/brand/ember_Ember-Light.png
index 8acacf0311..0f2d13b91d 100644
Binary files a/source/images/brand/ember_Ember-Light.png and b/source/images/brand/ember_Ember-Light.png differ
diff --git a/source/images/brand/ember_Forum-1c-Dark.png b/source/images/brand/ember_Forum-1c-Dark.png
new file mode 100644
index 0000000000..db30d8b3e4
Binary files /dev/null and b/source/images/brand/ember_Forum-1c-Dark.png differ
diff --git a/source/images/brand/ember_Forum-1c-Light.png b/source/images/brand/ember_Forum-1c-Light.png
new file mode 100644
index 0000000000..fcb98b42f5
Binary files /dev/null and b/source/images/brand/ember_Forum-1c-Light.png differ
diff --git a/source/images/brand/ember_Forum-Dark.png b/source/images/brand/ember_Forum-Dark.png
new file mode 100644
index 0000000000..6f11ac6a2f
Binary files /dev/null and b/source/images/brand/ember_Forum-Dark.png differ
diff --git a/source/images/brand/ember_Forum-Light.png b/source/images/brand/ember_Forum-Light.png
new file mode 100644
index 0000000000..b5442f3d45
Binary files /dev/null and b/source/images/brand/ember_Forum-Light.png differ
diff --git a/source/images/brand/ember_Jobs-1c-Dark.png b/source/images/brand/ember_Jobs-1c-Dark.png
new file mode 100644
index 0000000000..25089cd68d
Binary files /dev/null and b/source/images/brand/ember_Jobs-1c-Dark.png differ
diff --git a/source/images/brand/ember_Jobs-1c-Light.png b/source/images/brand/ember_Jobs-1c-Light.png
new file mode 100644
index 0000000000..e8af5e7452
Binary files /dev/null and b/source/images/brand/ember_Jobs-1c-Light.png differ
diff --git a/source/images/brand/ember_Jobs-Dark.png b/source/images/brand/ember_Jobs-Dark.png
new file mode 100644
index 0000000000..36601b63b3
Binary files /dev/null and b/source/images/brand/ember_Jobs-Dark.png differ
diff --git a/source/images/brand/ember_Jobs-Light.png b/source/images/brand/ember_Jobs-Light.png
new file mode 100644
index 0000000000..1d78085cd1
Binary files /dev/null and b/source/images/brand/ember_Jobs-Light.png differ
diff --git a/source/images/brand/ember_Times-1c-Dark.png b/source/images/brand/ember_Times-1c-Dark.png
new file mode 100644
index 0000000000..ce79c98f4e
Binary files /dev/null and b/source/images/brand/ember_Times-1c-Dark.png differ
diff --git a/source/images/brand/ember_Times-1c-Light.png b/source/images/brand/ember_Times-1c-Light.png
new file mode 100644
index 0000000000..578a9cc6d2
Binary files /dev/null and b/source/images/brand/ember_Times-1c-Light.png differ
diff --git a/source/images/brand/ember_Times-Dark.png b/source/images/brand/ember_Times-Dark.png
new file mode 100644
index 0000000000..151b906932
Binary files /dev/null and b/source/images/brand/ember_Times-Dark.png differ
diff --git a/source/images/brand/ember_Times-Light.png b/source/images/brand/ember_Times-Light.png
new file mode 100644
index 0000000000..e716ee27ac
Binary files /dev/null and b/source/images/brand/ember_Times-Light.png differ
diff --git a/source/images/brand/ember_Tomster-Lockup.png b/source/images/brand/ember_Tomster-Lockup.png
new file mode 100644
index 0000000000..3daf96ee28
Binary files /dev/null and b/source/images/brand/ember_Tomster-Lockup.png differ
diff --git a/source/images/brand/logos-ember.zip b/source/images/brand/logos-ember.zip
index 8b50c0607b..3e20313b84 100644
Binary files a/source/images/brand/logos-ember.zip and b/source/images/brand/logos-ember.zip differ
diff --git a/source/legal.html.erb b/source/legal.html.erb
index f758687f9d..e3f83b0083 100644
--- a/source/legal.html.erb
+++ b/source/legal.html.erb
@@ -18,7 +18,7 @@ responsive: true
Non-Legalese TL;DR
- Ember's strong brand and identity are an important part of the project. We're protective of it! Please be respectful and reach out if you're unsure if your use is acceptable. Visit the Logos page to learn more about what is and isn't permitted, and to download logos.
+ Ember's strong brand and identity are an important part of the project. We're protective of it! Please be respectful and reach out if you're unsure if your use is acceptable. Visit the branding page to learn more about what is and isn't permitted, and to download logos.
We often grant licenses for use of the Ember logo for non-commercial community use cases. If you think you might be one of them, let's talk. We always aim to be reasonable.
diff --git a/source/logos.html.erb b/source/logos.html.erb
index 22b538a309..0ceb6212fe 100644
--- a/source/logos.html.erb
+++ b/source/logos.html.erb
@@ -1,72 +1,90 @@
---
-title: The Ember Logos
+title: Ember Branding
responsive: true
---
-
Ember Logos
-
-
- Ember®, the Ember® logo design and the Tomster® designs are exclusive trademarks registered in the United States by Tilde Inc.
-
-
-
- The Ember brand and associated assets are all part of a carefully curated experience.
- We take great pride in what our team and community have helped bring to life.
-
-
-
- When printed, the Ember logo should always be in PMS 7417C. The hex value is #E04E39.
-
-
-The Assets
-
-
- The Ember logo is an official project resource that can be used on websites, mobile apps, or in printed materials to indicate use of Ember technologies—assuming there is no chance it might imply official status or project/core team endorsement.
-
-
-
- It may not be manipulated in any way, may never be incorporated into other logos, and is best displayed on a black or very light colored background. The ® symbol must be present.
-
-
-
- The Ember project has numerous projects under the Ember umbrella. These other logos may be used under the same terms as the primary Ember logo.
-
-
-
- If you use the logo, please add standard language explicitly indicating unofficial status. For example, "This page/product/etc is unaffiliated with the Ember project. Ember is a trademark of Tilde Inc."
-
-
-
-
![](/images/brand/ember_Ember-Light.png)
-
![](/images/brand/ember_Ember-Dark.png)
-
-
-
-
![](/images/brand/ember_CLI-Light.png)
-
![](/images/brand/ember_CLI-Dark.png)
-
-
-
-
-The Ember Mascot: The Tomster
-
-The Ember Tomster is reserved for official Ember project use only.
-
- We sometimes grant licenses for specific use cases, and certain community initiatives may, with approval, commission the design of custom Tomsters via official channels. For more info on commissioned Tomsters, visit the Tomster FAQ page.
-
-
-Naming
-
-
- Please avoid naming your projects and events anything that implies Ember or Tilde's endorsement. Keep this in mind when selecting domain names as well.
-
-
- It is alright to use Ember in the name of local meetup groups, which are well understood to be unofficial. It is also alright to use Ember in the name of other events, assuming the official Ember logo is never made part of the name/logo for the unofficial event.
-
-
- EmberConf and EmberCamp are both used for official purposes and cannot otherwise be used.
-
+Branding
+The Ember brand and associated assets are part of a meticulously curated experience. We take great pride in what our team and community have helped bring to life, and ask that you follow our guidelines to ensure consistency across all Ember properties.
+Download brand guidelines (PDF)
+
+
+ The Logos
+ Our logos are the main identifier of our brand, so we're careful with how we use them. They may not be manipulated in any way, and may never be incorporated into other logos.
+ Ember, the Ember logo design and the Tomster designs are exclusive trademarks registered in the United States by Tilde Inc. The ® symbol must be present in these brand marks. If you use the logos, please add standard language explicitly indicating unofficial status. For example, "This page/product/etc is unaffiliated with the Ember project. Ember is a trademark of Tilde Inc."
+ Download logos (ZIP)
+
+ -
+
Primary Logo
+
+ The Ember logo can be used on websites, mobile apps, or in printed materials to indicate use of Ember technologies assuming there is no chance it might imply official status or project/core team endorsement.
+ The color mark should only be displayed on a black or very light colored background. In other scenarios, use a solid black or white logo to contrast your background.
+ When printed, the Ember logo should always be in PMS 7417C. The hex value is #E04E39.
+
+ -
+
Tomster Lockup
+
+ A fun alternative to the primary logotype is the Tomster lockup. It’s designed with a white stroke which allows it to work on all background colors without modification.
+
+ -
+
Subproject Logos
+
+
+ The Ember project has numerous projects under its umbrella. These other logos may be used under the same terms as the primary Ember logo.
+
+ -
+
Tertiary Logos
+
+
+
+ Ember communities and smaller projects have logos based on Ember’s code style. They are only to be used by the project owners themselves the official properties.
+
+
+
+
+
+ The Ember Mascots
+ With the exception of the Tomster logo lockup, our mascots are reserved for official Ember project use only.
+ We sometimes grant licenses for specific use cases, and certain community initiatives may, with approval, commission the design of custom Tomsters and Zoeys via official channels. For more info on commissioned mascots, visit the Tomster FAQ page.
+
+
+
+ Naming
+ Please avoid naming your projects and events anything that implies Ember or Tilde's endorsement. Keep this in mind when selecting domain names as well.
+ It is all right to use Ember in the name of local meetup groups, which are well understood to be unofficial. It is also OK to use Ember in the name of other events, assuming the official Ember logo is never made part of the name or logo for the unofficial event.
+ EmberConf and EmberCamp are both used for official purposes and cannot otherwise be used.
+
diff --git a/source/stylesheets/base/_typography.scss b/source/stylesheets/base/_typography.scss
index 792e8fc139..67e1d183bf 100644
--- a/source/stylesheets/base/_typography.scss
+++ b/source/stylesheets/base/_typography.scss
@@ -65,6 +65,10 @@ h3 {
line-height: 1;
margin-bottom: 0.5em;
margin-top: 1.25em;
+ @media screen and (min-width: 0) and (max-width: $screen-sm-max) {
+ margin-left: .5rem;
+ margin-right: .5rem;
+ }
+ p {
margin-top: 0 !important;
padding-top: 0 !important;
diff --git a/source/stylesheets/components/ember-conf.css.scss b/source/stylesheets/components/ember-conf.css.scss
index 9f5c8d8361..2b9f1a8dcb 100644
--- a/source/stylesheets/components/ember-conf.css.scss
+++ b/source/stylesheets/components/ember-conf.css.scss
@@ -6,8 +6,8 @@
img {
display: block;
- max-width: 90%;
margin: 0 auto;
+ max-width: 90%;
padding-top: 40px;
}
@@ -17,10 +17,22 @@
}
.emberconf-callout {
+ display: block;
margin-bottom: 1em;
overflow: hidden;
- .wrapper {
+ &:hover {
+ border: none;
+
+ p:after {
+ @media screen and (min-width: $screen-sm-min) {
+ left: 0;
+ width: 100%;
+ }
+ }
+ }
+
+ .callout-body {
background-color: #001D36;
background-repeat: no-repeat;
background-size: auto 95% !important;
@@ -37,7 +49,7 @@
}
}
- p {
+ .text-wrapper {
color: white;
display: block;
padding: 0 20px;
@@ -48,7 +60,7 @@
}
&:before {
- bottom: -90px;
+ bottom: -103px;
content: '';
display: block;
height: 107px;
@@ -59,7 +71,7 @@
right: 10px;
width: 75px;
@media screen and (min-width: $screen-sm-min) {
- bottom: -51px;
+ bottom: -32px;
display: block;
height: 142px;
left: 0;
@@ -72,21 +84,22 @@
background: #00829a;
border-radius: 0.25em;
color: white;
+ display: inline;
font-size: 0.75em;
font-weight: bold;
margin-left: 1em;
padding: 0.5em 1em;
position: relative;
- text-transform: uppercase;
+ text-transform: none;
top: -.5em;
@media screen and (min-width: $screen-sm-min) {
top: 0;
}
&:hover {
+ background-color: $orange;
border: none;
color: #fff;
- background-color: $orange;
}
}
}
diff --git a/source/stylesheets/pages/brand.css.scss b/source/stylesheets/pages/brand.css.scss
index 79d0304a89..1bffe458a6 100644
--- a/source/stylesheets/pages/brand.css.scss
+++ b/source/stylesheets/pages/brand.css.scss
@@ -1,25 +1,77 @@
-@import 'base/base';
-
-.brand-logo,
-.brand-small {
- text-align: center;
+// .logos section {
+// margin: 10px 0;
+// overflow: hidden;
+// }
+.logos #content section > ul {
+ list-style-type: none;
+ margin: 0;
+ & > li {
+ margin-top: 15px;
+ overflow: hidden;
+ }
}
-
-.brand-logo > img,
-.brand-small > img {
- background-image: url('/images/brand/brand-bg.png');
- border: 1px solid #cccccc;
- margin-top: 10px;
+#content .brand-logos {
+ margin: 0 0 5px 0;
}
-.brand-logo > img {
- width: 300px;
+.brand-logos {
+ overflow: hidden;
+ display: grid;
+ grid-template-columns: repeat(2, 2fr);
+ grid-row-gap: 5px;
+ grid-column-gap: 5px;
+ padding: 0 .5em;
+ @media screen and (min-width: $medium-screen) {
+ grid-template-columns: repeat(4, 1fr);
+ grid-row-gap: 0px;
+ }
+ @media screen and (min-width: $screen-sm-max) {
+ padding: 0;
+ }
}
-.brand-small > img {
- width: 150px;
+.brand-logos li {
+ min-height: 110px;
+ border: 1px solid rgba($black, .3);
+ background-image: url("/images/brand/brand-bg.png");
+ text-align: center;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ flex-basis: 50%;
+ padding: 10px 20px;
+ border-radius: 4px;
+ flex-direction: column;
+ @media screen and (min-width: $medium-screen) {
+ padding: 20px 30px;
+ }
+ @media screen and (min-width: $screen-sm-max) {
+ flex-basis: 25%;
+ padding: 20px 60px;
+ }
+
+ &:nth-child(1) {
+ background: $black;
+ }
+
+ &:nth-child(2) {
+ background: $white;
+ }
+
+ &:nth-child(3) {
+ background-color: rgba($orange-darker, .9);
+ }
}
-.brand-logo ~ a {
- text-align: center;
+.brand-logos img {
+ max-height: 70px;
+ max-width: 100%;
+}
+.logos .code {
+ background-color: #F8E7CF;
+ border-radius: 3px;
+ font-size: .9em;
+ padding: .2em .5em;
+ margin: 0 .1em;
+ font-family: Menlo,"DejaVu Sans Mono","Bitstream Vera Sans Mono",Courier,monospace;
}