Issue 4607 - Default content styles

scss/_content.scss

Index: scss/_content.scss
===================================================================
--- a/scss/_content.scss
+++ b/scss/_content.scss
@@ -11,244 +11,377 @@
  * but WITHOUT ANY WARRANTY; without even the implied warranty of
  * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
  * GNU General Public License for more details.
  *
  * You should have received a copy of the GNU General Public License
  * along with web.starter-kit.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-/* HTML Content
+/** UDL content styles */
+
+/*!
+ * This file contains parts of:
+ * - normalize.css v5.0.0 | MIT License | github.com/necolas/normalize.css
+ */
+
+/* Table of contents
  *******************************************************************************
- * 1. Headings
- * 2. Blockquotes
- * 3. Links
- * 4. Code Blocks
- * 5. Unstyled Lists
- * 6. Image Alignment
- * 7. Tables
- * 8. Embeds
+ * - Document
+ * - Headings
+ * - Block elements
+ *   - Blockquotes
+ *   - Code blocks
+ *   - Lists
+ *   - Unstyled lists
+ *   - Embeds
+ * - Inline elements
+ *   - Links
+ *   - Images
+ * - Alignment
  ******************************************************************************/
 
+/* Document
+ ******************************************************************************/
+
+html
+{
+  font-family: $sans-font;
+  font-size: $medium-font;
+  line-height: 1.15;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+ol,
+ul,
+dl,
+pre,
+blockquote
+{
+  /* Set consistent margins (opinionated) */
+  margin: 1em 0em;
+}
+
 /* Headings
  ******************************************************************************/
 
+h1,
+h2,
+h3,
+h4,
+h5,
+h6
+{
+  margin-bottom: 0em;
+}
+
+h1,
+h2
+{
+  font-weight: $thin-weight;
+}
+
 h1
 {
-  font-size: 42px;
-  margin-top: $large-space;
+  font-size: 48px;
 }
 
 h2
 {
   font-size: 36px;
-  margin-top: $large-space;
 }
 
 h3
 {
   font-size: 24px;
-  margin-top: $medium-space;
 }
 
 h4
 {
   font-size: 20px;
-  margin-top: $medium-space;
 }
 
 h5
 {
   font-size: 16px;
-  margin-top: $small-space;
 }
 
 h6
 {
   font-size: 14px;
-  margin-top: $small-space;
 }
 
-/* Blockquotes
+/* Block elements
  ******************************************************************************/
 
+hr
+{
+  /* Add the correct box sizing in Firefox. */
+  box-sizing: content-box;
+  /* Show the overflow in Edge and IE. */
+  overflow: visible;
+  height: 0px;
+  border: 1px solid $gray;
+}
+
+/* Blockquotes */
+
 [dir="ltr"] blockquote
 {
   padding-left: $small-space;
   border-left: 5px solid $gray;
 }
 
 [dir="rtl"] blockquote
 {
   padding-right: $small-space;
   border-right: 5px solid $gray;
 }
 
-/* Links
- ******************************************************************************/
+/* Code blocks */
 
-a,
-a:visited
+pre
 {
-  color: $blue-dark;
-  text-decoration: none;
+  overflow: auto;
+  padding: 0em 1em;
 }
 
-a:hover,
-a:active,
-a:focus
+code
 {
-  text-decoration: underline;
+  padding: 0em 0.25em;
 }
 
-/* Code Blocks
- ******************************************************************************/
-
 pre,
 code
 {
-  padding: $small-space / 4;
   background-color: $gray-light;
+  /* Correct odd font inheritance in all browsers. */
+  font-family: $monospace-font;
+  /* Correct the odd font sizing in all browsers. */
+  font-size: $medium-font;
 }
 
-pre
+pre code
 {
-  display: block;
-  padding: 0 $small-space;
+  padding: 0em;
 }
 
-pre > code
+/* Lists */
+
+[dir="ltr"] ol,
+[dir="ltr"] ul
 {
-  padding: 0;
-  background-color: transparent;
+  padding-left: 1.5em;
 }
 
-/* Unstyled Lists
- ******************************************************************************/
+[dir="rtl"] ol,
+[dir="rtl"] ul
+{
+  padding-right: 1.5em;
+}
+
+li
+{
+  margin: $small-space / 2 0px;
+}
+
+ol ol,
+ul ul,
+ol ul,
+ul ol
+{
+  /* prevent double spacing lists */
+  margin: 0px;
+}
+
+ol ol
+{
+  list-style-type: lower-alpha;
+}
+
+dt
+{
+  /* undo browser default (opinionated)*/
+  font-weight: $bold-weight;
+}
+
+dd
+{
+  margin: 0.5em 0em 1em 0em;
+}
+
+/** Unstyled lists */
 
 .unstyled-list,
 .unstyled-list ul
 {
   list-style-type: none;
 }
 
 [dir="ltr"] .unstyled-list
 {
-  padding-left: 0;
+  padding-left: 0px;
 }
 
 [dir="rtl"] .unstyled-list
 {
-  padding-right: 0;
+  padding-right: 0px;
 }
 
 [dir="ltr"] .unstyled-list ul
 {
   padding-left: $medium-space;
 }
 
 [dir="rtl"] .unstyled-list ul
 {
   padding-right: $small-space;
 }
 
-/* Image Alignment
+/* Embeds */
+
+audio,
+video
+{
+  /* undo browser default (opinionated) */
+  display: block;
+}
+
+/** Responsive 16x9 YouTube video */
+
+.youtube-16x9
+{
+  display: block;
+  position: relative;
+  overflow: hidden;
+  height: 0px;
+  padding: 0% 0% 56.25% 0%;
+}
+
+.youtube-16x9 iframe
+{
+  position: absolute;
+  top: 0px;
+  bottom: 0px;
+  left: 0px;
+  width: 100%;
+  height: 100%;
+  border: 0px;
+}
+
+/* Inline elements
  ******************************************************************************/
 
+abbr[title]
+{
+  /* Remove the bottom border in Firefox 39-. */
+  border-bottom: none;
+  /* Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. */
+  text-decoration: underline dotted;
+  cursor: help;
+}
+
+b,
+strong
+{
+  font-weight: $bold-weight;
+}
+
+small
+{
+  font-size: $small-font;
+}
+
+sup
+{
+  position: relative;
+  top: -0.5em;
+  /* Prevent `sub` and `sup` elements from affecting the line height in
+   all browsers. */
+  font-size: 75%;
+  line-height: 0px;
+  vertical-align: baseline;
+}
+
+/* Links */
+
+a,
+a:visited
+{
+  /* Set default color and decoration (opinionated) */
+  color: $accent;
+  /* Remove the gray background on active links in IE 10. */
+  background-color: transparent;
+  text-decoration: none;
+}
+
+a:hover,
+a:active,
+a:focus
+{
+  /* Set default color and decoration (opinionated) */
+  text-decoration: underline;
+}
+
+/* Images */
+
 img
 {
-  margin: 0 $small-space / 2;
+  margin: 0px $small-space / 2;
+  /* Remove the border on images inside links in IE 10-. */
+  border-style: none;
 }
 
+/* Alignment
+ ******************************************************************************/
+
 .block,
-.sol,
-.eol
+.float-start,
+.float-end
 {
   display: block;
-  margin: 0;
+  margin: 0px 0px $small-space 0px;
 }
 
+/** Display full-width */
+
 .block
 {
   display: block;
-  width: 100%;
-  height: auto;
   clear: both;
   overflow: auto;
-  margin: $small-space 0;
-}
-
-[dir="ltr"] .sol
-{
-  margin-right: $small-space;
-  float: left;
-}
-
-[dir="rtl"] .sol
-{
-  margin-left: $small-space;
-  float: right;
-}
-
-[dir="ltr"] .eol
-{
-  margin-left: $small-space;
-  float: right;
-}
-
-[dir="rtl"] .eol
-{
-  margin-right: $small-space;
-  float: left;
-}
-
-/* Tables
- ******************************************************************************/
-
-table
-{
-  border-collapse: collapse;
   width: 100%;
+  margin: $small-space 0px;
 }
 
-td,
-th
-{
-  padding: $small-space / 4 $small-space / 2;
-}
+/** Float to start-of-line */
 
-th
+[dir="ltr"] .float-start
 {
-  background-color: $white;
-}
-
-tr:nth-child(even)
-{
-  background-color: $white;
-}
-
-tr:nth-child(odd)
-{
-  background-color: $gray-light;
+  float: left;
+  margin-right: $small-space;
 }
 
-/* Embeds
- ******************************************************************************/
-
-.embed
+[dir="rtl"] .float-start
 {
-  position: relative;
-  display: block;
-  height: 0;
-  padding: 0 0 56.25% 0;
-  overflow: hidden;
+  float: right;
+  margin-left: $small-space;
 }
 
-.embed iframe
+/** Float to end-of-line */
+
+[dir="ltr"] .float-end
 {
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  border: 0;
+  float: right;
+  margin-left: $small-space;
 }
+
+[dir="rtl"] .float-end
+{
+  float: left;
+  margin-right: $small-space;
+}