Issue 390 - CSS fixes related to a11y changes

webcompat · Dec 8, 2014 · e8f8817 · e8f8817
1 parent 1c9d6f7
commit e8f8817
Show file tree

Hide file tree

Showing 11 changed files with 21 additions and 41 deletions.
diff --git a/webcompat/static/css/development/layout/body.css b/webcompat/static/css/development/layout/body.css
@@ -82,20 +82,7 @@ html {
 }
 
 /*----------Global H Styles----------*/
-h1 {
-  font-size: 3.5em;
-  font-weight: 700;
-}
-h2 {
-  font-size: 2em;
-  font-weight: 600;
-}
-h3 {
-  font-size: 1.5em;
-}
-h4 {
-  font-size: 1.25em;
-}
+
 p {
   font-size: 1em;
 }

diff --git a/webcompat/static/css/development/main.css b/webcompat/static/css/development/main.css
@@ -29,6 +29,8 @@
 @import "components/filter.css";
 @import "components/pagination.css";
 @import "components/labels.css";
+@import "components/title.css";
+
 /*----------Layout----------*/
 @import "layout/body.css";
 @import "layout/utilities.css";

diff --git a/webcompat/static/css/development/page/issue-list.css b/webcompat/static/css/development/page/issue-list.css
@@ -6,9 +6,7 @@
   font-size:var(--base-font-size);
 }
 /* Main page title */
-.IssueList-title {
-  font-size: 2em;
-}
+.IssueList-title {}
 /*Search issues */
 .IssueList-search {
   background-color:#F7F7F7;

diff --git a/webcompat/static/css/development/page/static.css b/webcompat/static/css/development/page/static.css
@@ -2,13 +2,6 @@
 .page {
   background-color: #fff;
 }
-.page h2 {
-    margin-bottom: 1em;
-}
-.page h4 {
-    margin: 0.75em 0 1em;
-    font-weight: 700;
-}
 .page p {
   line-height: 150%;
   margin-bottom: 1em;

diff --git a/webcompat/templates/about.html b/webcompat/templates/about.html
@@ -3,15 +3,15 @@
 <div class="page page--about about">
 {% include "shared/nav.html" %}
   <main class="wc-content wc-content--body" role="main">
-    <h2>About</h2>
-    <h3>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.</h3>
+    <h2 class="wc-Title--l">About</h2>
+    <h3 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.</h3>
     <div class="u-textCenter about_media">
       <img class="u-image" src="../img/about.png" alt="About logo" />
     </div>
-    <h4>What is Web Compatibility?</h4>
+    <h4 class="wc-Title--s">What is Web Compatibility?</h4>
     <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>
-    <h4>Web compatibility issues usually follow a three part life cycle:</h4>
+    <h4 class="wc-Title--s ">Web compatibility issues usually follow a three part life cycle:</h4>
     <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>

diff --git a/webcompat/templates/browse-issues.html b/webcompat/templates/browse-issues.html
@@ -1,6 +1,6 @@
 <div id="browse-issues-wrapper">
   <div class="wc-content" id="browse-issues">
-    <h2>Browse Issues</h2>
+    <h2 class="wc-Title--l">Browse Issues</h2>
     <ul class="r-ResetList u-inlineBlock">
       <li class="IssueItem IssueItem--list IssueItem--untriaged">
         <a href="{{ url_for('show_issues') }}?untriaged=1">Untriaged</a>

diff --git a/webcompat/templates/contributors.html b/webcompat/templates/contributors.html
@@ -6,7 +6,7 @@
   <div class="wc-Hero wc-Hero--contributors">
     <div class="wc-content">
       <div class="wc-Hero-section wc-Hero-section--left wc-Hero-section--contributors">
-        <h1 class="wc-Hero-title">Welcome aboard!<br/>Get started below...</h1>
+        <h1 class="wc-Hero-title wc-Title--xl">Welcome aboard!<br/>Get started below...</h1>
       </div>
       <div class="wc-Hero-section wc-Hero-section--right">
         <div class="wc-Hero-img is-active">{% include "shared/LightbulbwithBug.html" %}</div>

diff --git a/webcompat/templates/index.html b/webcompat/templates/index.html
@@ -5,7 +5,7 @@
 <div class="wc-Hero">
   <div class="wc-content">
     <div class="wc-Hero-section wc-Hero-section--left wc-Hero-section--home ">
-      <h1 class="wc-Hero-title">Bug reporting <br>for the internet.</h1>
+      <h1 class="wc-Hero-title wc-Title--xl">Bug reporting <br>for the internet.</h1>
       <a id="report-bug" class="wc-Hero-link closed" href="{{ url_for("index") }}">Report bug<span class="wc-Hero-link-icon icon icon-arrow-right"></span></a>
     </div>
     <div class="wc-Hero-section wc-Hero-section--right">
@@ -15,7 +15,7 @@ <h1 class="wc-Hero-title">Bug reporting <br>for the internet.</h1>
 </div>
 {% include "form.html" %}
   <div id="howitworks" class="wc-content">
-    <h2>How It Works</h2>
+    <h2 class="wc-Title--l">How It Works</h2>
     <div class="Threesteps">
       <div class="r-Grid r-Grid--withGutter">
         <div class="r-Grid-cell r-all--4of12 r-maxM--12of12">

diff --git a/webcompat/templates/issue-list.html b/webcompat/templates/issue-list.html
@@ -6,7 +6,7 @@
     <div class="wc-content wc-content--body js-issuelist-filter">
       <script type="text/template" id="issuelist-filter-tmpl">
       <!-- Temporary Header -->
-      <h1 class="IssueList-title wc-margin-bottom">Issues</h1>
+      <h1 class="IssueList-title wc-Title--l">Issues</h1>
       <div class="Dropdown Dropdown--large js-dropdown-wrapper"></div>
       <div>
         <button type="button" class="wc-Filter wc-Filter--untriaged" data-filter="untriaged">

diff --git a/webcompat/templates/issue.html b/webcompat/templates/issue.html
@@ -3,7 +3,7 @@
   <div class="page page--issue">
   {% include "shared/nav.html" %}
     <main class="wc-content wc-content--body Issue" role="main">
-      <h1 class="Issue-title">
+      <h1 class="Issue-title wc-Title--l">
       <script type="text/template" id="title-tmpl">
         <a class="Issue-back" href="{{ url_for("show_issues") }}" title="All issues">
 		  <span class="wc-sronly">All Issues</span>

diff --git a/webcompat/templates/privacy.html b/webcompat/templates/privacy.html
@@ -3,21 +3,21 @@
 <div class="page page--privacy">
 {% include "shared/nav.html" %}
   <div class="wc-content wc-content--body" role="main">
-    <h2>Webcompat.com Privacy Policy</h2>
+    <h2 class="wc-Title--l">Webcompat.com Privacy Policy</h2>
     <small>Last Updated: December 4, 2014</small>
-    <h4>About Us</h4>
+    <h4 class="wc-Title--s">About Us</h4>
     <p><a href="http://www.webcompat.com">Webcompat.com</a> allows you to report web compatibility issues though a simple webform. Volunteers view the reports, identify solutions, and share the reports and solutions with the website admins. For more details see our <a href="about">About page</a>.</p>
-    <h2>Public Reports</h2>
+    <h2 class="wc-Title--s">Public Reports</h2>
     <p>All reports are publicly accessible. Please do not include any confidential or personal information in the content of your report.</p>
     <p>The User Agent HTTP header that your browser sends will be recorded in the bug report, if you choose to report a bug, but is hidden by default.</p>
-    <h4>Reporting Anonymously</h4>
+    <h4 class="wc-Title--s">Reporting Anonymously</h4>
     <p>If you choose the anonymous option, the only information that we’ll receive is the content of your report.</p>
-    <h2>Reporting via GitHub</h2>
+    <h2 class="wc-Title--s">Reporting via GitHub</h2>
     <p>If you choose the GitHub option, webcompat.com will receive your GitHub username and avatar.  You can revoke our access to this information at any time from the <a href="https://github.com/settings/applications">"Applications" section of your profile page</a>.</p>
-    <h2>Cookies &amp; Analytics</h2>
+    <h2 class="wc-Title--s">Cookies &amp; Analytics</h2>
     <p>If you log into our site using your GitHub user account, webcompat.com will use cookies to record your session information.  The cookie will expire when the session ends, i.e., when you click "logout".</p>
     <p>Webcompat.com also uses Google Analytics to track usage statistics.</p>
-    <h2>Contact Us</h2>
+    <h2 class="wc-Title--s">Contact Us</h2>
     <p>You can <a href="https://twitter.com/webcompat">find us on Twitter</a> or on the <a href="https://lists.mozilla.org/listinfo/compatibility">public mailing list compatibility@lists.mozilla.org</a> (<a href="https://groups.google.com/forum/#!forum/mozilla.compatibility">archive</a>).  These are public forums, so please minimize any personal information you choose to share.</p>
   </main>
 </div>