Clean up headers
Updates headers to match style guide and makes them consistent
throughout pages in the GUI. Removes instances where a header
element existed and a different header style was being applied.
For example, <h2 class="h4">
Tested: Ran GUI locally and verified that headers look consistent
and have the appropriate sizing while using Chrome, Firefox and
Safari.
Change-Id: I187136298ed2bfd36c40c2b80d5a4f20947cbe56
Signed-off-by: beccabroek <beccabroek@gmail.com>
diff --git a/app/common/directives/errors.html b/app/common/directives/errors.html
index f3e98b6..49ed449 100644
--- a/app/common/directives/errors.html
+++ b/app/common/directives/errors.html
@@ -4,7 +4,7 @@
<div class="screen-reader-offscreen modal-description">{{dataService.errorModalDetails.title}}</div><!-- accessibility only; used for screen readers -->
<div class="page-header ">
<span class="icon icon__warning inline"><span class="accessible-text" role="alert">{{dataService.errorModalDetails.title}}</span></span>
- <h1 class="modal-title h4 inline">{{dataService.errorModalDetails.title}}</h1>
+ <h3 class="modal-title inline">{{dataService.errorModalDetails.title}}</h3>
</div>
<div class="modal__content">
<p>{{dataService.errorModalDetails.description}}</p>
diff --git a/app/common/styles/base/foundation.scss b/app/common/styles/base/foundation.scss
index 1749d09..03ba3e5 100644
--- a/app/common/styles/base/foundation.scss
+++ b/app/common/styles/base/foundation.scss
@@ -42,14 +42,6 @@
section {
display: block; }
-/**
- * Correct the font size and margin on `h1` elements within `section` and
- * `article` contexts in Chrome, Firefox, and Safari.
- */
-h1 {
- font-size: 2em;
- margin: 0.67em 0; }
-
/* Grouping content
========================================================================== */
/**
diff --git a/app/common/styles/base/typography.scss b/app/common/styles/base/typography.scss
index db5bdd7..0457fc2 100644
--- a/app/common/styles/base/typography.scss
+++ b/app/common/styles/base/typography.scss
@@ -10,44 +10,44 @@
line-height: 1.5rem;
}
+// Headers
h1,
h2,
h3,
h4,
-h5,
-h6 {
- font-weight: 300;
- margin: 0 0 .8rem;
- line-height: 1;
+h5 {
+ line-height: 1.25;
color: #333;
}
h1, .h1 {
- font-size: 3rem;
+ font-size: 2.25rem;
font-weight: 500;
padding-top: .5rem;
- margin-bottom: .6em;
}
h2, .h2 {
- font-size: 1.8rem;
+ font-size: 1.25rem;
+ font-weight: bold;
}
h3, .h3 {
- font-size: 1.3rem;
- letter-spacing: -.08rem;
+ font-size: 1rem;
+ font-weight: bold;
}
h4, .h4 {
- font-size: 1.125rem;
- letter-spacing: -.04rem;
+ font-size: .875rem;
+ font-weight: bold;
}
h5, .h5 {
- font-size: 1rem;
- letter-spacing: -.05rem;
+ font-size: .875rem;
+ font-weight: 500;
+ color: $darkgrey;
}
+// Fonts
.courier-normal {
font-family: "Courier New", Helvetica, arial, sans-serif;
}
diff --git a/app/common/styles/layout/content.scss b/app/common/styles/layout/content.scss
index e50f826..bacb093 100644
--- a/app/common/styles/layout/content.scss
+++ b/app/common/styles/layout/content.scss
@@ -9,11 +9,6 @@
border-bottom: 1px solid $lightbg__grey;
margin: .5em 0 2.2em;
padding-left: 0;
- .h4 {
- padding: .1em 0 0 0;
- margin: 0 0 1em 0;
- font-weight: bold;
- }
}
.content__container {