Skip to content

Commit

Permalink
Merge pull request #521 from webcompat/new-color-palette
Browse files Browse the repository at this point in the history
New color palette
  • Loading branch information
Mike Taylor committed Jan 13, 2015
2 parents 36b12ff + ce4971d commit 93120a1
Show file tree
Hide file tree
Showing 4 changed files with 27 additions and 29 deletions.
11 changes: 6 additions & 5 deletions webcompat/static/css/development/base/variable.css
Original file line number Diff line number Diff line change
Expand Up @@ -16,11 +16,12 @@
--wc-background-light: var(--wc-background-dark); /* #FBC55F Light Yellow */
--wc-variant-background-dark: #404040; /* Dark Gray */
--wc-variant-background-light: #c2c2c2; /* Dark Light */
--wc-state-untriaged: #6fc7fa; /* Light blue */
--wc-state-need: #ff8364; /* Light red */
--wc-state-ready: #a1ebbf; /* Light green */
--wc-state-sitewait: #006B75; /* Dark green */
--wc-state-close: #799299; /* Light Gray */
--wc-state-untriaged: #ff8364; /* light orange */
--wc-state-need: #efce82; /* light brown */
--wc-state-needcontact : #b9edce ; /* light green */
--wc-state-ready: #7abce1; /* light blue*/
--wc-state-sitewait: #b0daf0; /* light blue */
--wc-state-close: #c5d1d5; /* light gray */
}

/* link */
Expand Down
Original file line number Diff line number Diff line change
@@ -1,38 +1,35 @@
/*------Contributors view------*/


.about_media {
.wc-Box-media {
margin:30px auto 30px auto;
width:80%;
}
@media (--viewport-770px) {
.about_media {
.wc-Box-media {
width:auto;
}
}

.about_bug {
/* main class */
.wc-Box {
border-style:solid;
border-width:1px;
border-radius :10px;
padding: 1.6em;
margin:3em 0;
background-color: #F7F7F7;
}
.about_bug--reporting {
/* label */
.wc-Box-label {
color : #000;
font-weight:bold;
}
.wc-Box--reporting {
border-color: var(--wc-state-untriaged);
}
.about_bug--reporting .about_bug_label {
color: var(--wc-state-untriaged)
}
.about_bug--analysis {
.wc-Box--analysis {
border-color: var(--wc-state-need);
}
.about_bug--analysis .about_bug_label {
color: var(--wc-state-need);
}
.about_bug--reaching {
.wc-Box--reaching {
border-color:var(--wc-state-ready);
}
.about_bug--reaching .about_bug_label {
color:var(--wc-state-ready);
}
2 changes: 1 addition & 1 deletion webcompat/static/css/development/main.css
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,7 @@
@import "components/labels.css";
@import "components/title.css";
@import "components/loader.css";
@import "components/box.css";

/*----------Layout----------*/
@import "layout/body.css";
Expand All @@ -41,5 +42,4 @@
@import "page/issues.css";
@import "page/static.css";
@import "page/contributors.css";
@import "page/about.css";
@import "page/issue-list.css"
14 changes: 7 additions & 7 deletions webcompat/templates/about.html
Original file line number Diff line number Diff line change
Expand Up @@ -5,21 +5,21 @@
<main class="wc-content wc-content--body" role="main">
<h1 class="wc-Title--l">About</h1>
<h2 class="wc-Title--m">Webcompat.com is developed by volunteers and supported by Mozilla. This site is an <span class="wc-bold" style="color:grey">open invitation for all web users, developers and browser vendors</span> to get involved in the web compatibility effort. Our goal is to make it easy to report and view problems for any part of the web.</h2>
<div class="u-textCenter about_media">
<div class="u-textCenter wc-Box-media">
<img class="u-image" src="../img/about.png" alt="About logo" />
</div>
<h3 class="wc-Title--s">What is Web Compatibility?</h3>
<p>Web compatibility is about making sure web sites work consistently across all browsers and devices.</p>
<p>Sometimes, sites have bugs or policies that prevent them from working well in every browser. We work to help web developers and site owners identify and fix such issues.</p>
<h3 class="wc-Title--s ">Web compatibility issues usually follow a three part life cycle:</h3>
<div class="about_bug about_bug--reporting">
<strong class="about_bug_label">Bug Reporting</strong>: Finding and reporting compatibility issues around the web. This is the first and most critical part of the process. We all run into compatibility issues when using the web. Most people do not know how or where to report these issues. Webcompat.com make the process or reporting issues simple.
<div class="wc-Box wc-Box--reporting">
<strong class="wc-Box-label">Bug Reporting</strong>: Finding and reporting compatibility issues around the web. This is the first and most critical part of the process. We all run into compatibility issues when using the web. Most people do not know how or where to report these issues. Webcompat.com make the process or reporting issues simple.
</div>
<div class="about_bug about_bug--analysis">
<strong class="about_bug_label">Bug Analysis</strong>: Someone digs into the code to figure out what’s causing the compatibility issue and suggests a fix.
<div class="wc-Box wc-Box--analysis">
<strong class="wc-Box-label">Bug Analysis</strong>: Someone digs into the code to figure out what’s causing the compatibility issue and suggests a fix.
</div>
<div class="about_bug about_bug--reaching">
<strong class="about_bug_label">Getting Contacts and Reaching Out</strong>: To get any bug fixed you need a good contact. There are many ways to find a contact at a company or web site. Sometimes finding a contact can be easy. Other times it requires some creativity and luck. After finding a contact, the next step is to make contact and help resolve the issue. Webcompat.com aims to make this process easier by allowing developers to check for bugs with their sites and applications in one location.
<div class="wc-Box wc-Box--reaching">
<strong class="wc-Box-label">Getting Contacts and Reaching Out</strong>: To get any bug fixed you need a good contact. There are many ways to find a contact at a company or web site. Sometimes finding a contact can be easy. Other times it requires some creativity and luck. After finding a contact, the next step is to make contact and help resolve the issue. Webcompat.com aims to make this process easier by allowing developers to check for bugs with their sites and applications in one location.
</div>
<p>The web is big and keeps getting bigger. To make sure it’s all compatible we need help from people in all regions of the world. The great thing is anyone can help. You don’t need to be a techie and as little as 5 minutes can make a huge difference!</p>
</main>
Expand Down

0 comments on commit 93120a1

Please sign in to comment.