a11y: Minor CSS cleanup for headings and links

css/bjc.css

@@ -1,35 +1,57 @@
 @charset "UTF-8";
 
 /** Basic HTML **/
-/* TODO: work sans is not loaded on most pages. */
+body {
+  width: 100%;
+  max-width: 100%;
+}
+
+/** TODO: work sans is not loaded on most pages.
+* .h1...h6 classes are used when you want something to /look/ like a heading,
+* but it shouldn't be an actual heading tag
+*/
 body,
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
+h1, .h1,
+h2, .h2,
+h3, .h3,
+h4, .h4,
+h5, .h5,
+h6, .h6,
+.box-head {
   font-family: "work_sansregular", "Open Sans", sans-serif;
   color: #000;
 }
 
+h3, .h3 {
+  margin-top: 20px;
+  padding-top: 10px;
+}
+
+h4, .h4 {
+  padding: 5px 0px 0px 0px;
+}
+
+/* Roughly visually aligns with the default h4 style
+ * To be used in curriculum boxes which contain subheadings.
+ */
+.box-head {
+  font-weight: bold;
+  font-size: 18px;
+}
+
 .anchor {
   padding-top: 80px;
   margin-top: -80px;
 }
 
+/* should have >= 3:1 contrast with black, 4.5:1 with white */
 a:visited {
-  color: #106070; /* darkened for a11y. */
-  /* color: #248694; */
+  color: #297694;
 }
 
 a,
 .dialogue a {
-  /* color: #28499F; */
-  color: #3056AA;
-  /* color: #2a6496; */
-  /* TODO-A11Y: We need to find better contrasting colors, or make links visual. */
-  /* text-decoration: underline; */
+  color: #3056AA; /* color: #28499F; */
 }
 
 a.btn,
@@ -60,15 +82,6 @@ a.btn,
   padding-right: 25px;
 }
 
-body {
-  width: 100%;
-  max-width: 100%;
-}
-
-h3 {
-  margin-top: 20px;
-}
-
 .blockquote {
   width: 90%;
   margin-left: auto;
@@ -112,14 +125,6 @@ h3 {
   height: 2.5em;
 }
 
-h4 {
-  padding: 5px 0px 0px 0px;
-}
-
-h3 {
-  padding-top: 10px;
-}
-
 .full ul,
 .full ol {
   display: block;
@@ -246,6 +251,7 @@ code.break {
   word-wrap: break-word;
 }
 
+/* a11y: TODO: this color matches Snap!, but does not have enough contrast with white. */
 var {
   padding: 0px;
   color: #f3761d;

llab/css/default.css

@@ -60,10 +60,6 @@ code, pre, tt, kbd, samp, var {
   font-family: 'Andale Mono', 'Menlo', Courier, monospace;
 }
 
-a:visited {
-  color: #36BBCE;
-}
-
 .full {
   padding: 1em;
   width: 95%;
@@ -122,16 +118,15 @@ h1 {
   margin: auto 0;
 }
 h1.title-small-screen {
-  margin: 14px 0 0 0;
+  margin: 16px 0 0 0;
 }
+
 /* Override Bootstrap 3, exclude h1 */
-h2, h3, h4, h5, h6 {
+h2, h3, h4, h5, h6
+.h2, .h3, .h4, .h5, .h6 {
   margin-top: 3px;
   padding: 8px 0;
   color: #000;
-}
-
-h2, h3 {
   font-weight: 800;
 }
 
@@ -188,10 +183,8 @@ code { /* Override bootstrap. */
 
 /* Show a special div on small screens that isn't in the nav bar */
 .title-small-screen {
-  margin: 1% 3%;
   display: none;
-  font-size: 1.5em;
-  font-weight: bold;
+  font-size: 1.8rem;
   color: #000;
 }