Issue 4607 - Default content styles

scss/_content.scss

 /*!
  * This file is part of universal-design-language
  * Copyright (C) 2016 Eyeo GmbH
  *
  * universal-design-language is free software: you can redistribute it and/or
  * modify it under the terms of the GNU General Public License as published by
  * the Free Software Foundation, either version 3 of the License, or
  * (at your option) any later version.
  *
  * universal-design-language is distributed in the hope that it will be useful,
  * 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 */
+
+pre
+{
+  overflow: auto;
+  padding: 0em 1em;
+}
+
+code
+{
+  padding: 0em 0.25em;
+}
+
+pre,
+code
+{
+  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 code
+{
+  padding: 0em;
+}
+
+/* Lists */
+
+[dir="ltr"] ol,
+[dir="ltr"] ul
+{
+  padding-left: 1.5em;
+}
+
+[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: 0px;
+}
+
+[dir="rtl"] .unstyled-list
+{
+  padding-right: 0px;
+}
+
+[dir="ltr"] .unstyled-list ul
+{
+  padding-left: $medium-space;
+}
+
+[dir="rtl"] .unstyled-list ul
+{
+  padding-right: $small-space;
+}
+
+/* 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
 {
-  color: $blue-dark;
+  /* 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;
 }
 
-/* Code Blocks
- ******************************************************************************/
-
-pre,
-code
-{
-  padding: $small-space / 4;
-  background-color: $gray-light;
-}
-
-pre
+/* Images */
+
+img
+{
+  margin: 0px $small-space / 2;
+  /* Remove the border on images inside links in IE 10-. */
+  border-style: none;
+}
+
+/* Alignment
+ ******************************************************************************/
+
+.block,
+.float-start,
+.float-end
 {
   display: block;
-  padding: 0 $small-space;
-}
-
-pre > code
-{
-  padding: 0;
-  background-color: transparent;
-}
-
-/* Unstyled Lists
- ******************************************************************************/
-
-.unstyled-list,
-.unstyled-list ul
-{
-  list-style-type: none;
-}
-
-[dir="ltr"] .unstyled-list
-{
-  padding-left: 0;
-}
-
-[dir="rtl"] .unstyled-list
-{
-  padding-right: 0;
-}
-
-[dir="ltr"] .unstyled-list ul
-{
-  padding-left: $medium-space;
-}
-
-[dir="rtl"] .unstyled-list ul
-{
-  padding-right: $small-space;
-}
-
-/* Image Alignment
- ******************************************************************************/
-
-img
-{
-  margin: 0 $small-space / 2;
-}
-
-.block,
-.sol,
-.eol
+  margin: 0px 0px $small-space 0px;
+}
+
+/** Display full-width */
+
+.block
 {
   display: block;
-  margin: 0;
-}
-
-.block
-{
-  display: block;
-  width: 100%;
-  height: auto;
   clear: both;
   overflow: auto;
-  margin: $small-space 0;
-}
-
-[dir="ltr"] .sol
-{
+  width: 100%;
+  margin: $small-space 0px;
+}
+
+/** Float to start-of-line */
+
+[dir="ltr"] .float-start
+{
+  float: left;
   margin-right: $small-space;
+}
+
+[dir="rtl"] .float-start
+{
+  float: right;
+  margin-left: $small-space;
+}
+
+/** Float to end-of-line */
+
+[dir="ltr"] .float-end
+{
+  float: right;
+  margin-left: $small-space;
+}
+
+[dir="rtl"] .float-end
+{
   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%;
-}
-
-td,
-th
-{
-  padding: $small-space / 4 $small-space / 2;
-}
-
-th
-{
-  background-color: $white;
-}
-
-tr:nth-child(even)
-{
-  background-color: $white;
-}
-
-tr:nth-child(odd)
-{
-  background-color: $gray-light;
-}
-
-/* Embeds
- ******************************************************************************/
-
-.embed
-{
-  position: relative;
-  display: block;
-  height: 0;
-  padding: 0 0 56.25% 0;
-  overflow: hidden;
-}
-
-.embed iframe
-{
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  border: 0;
-}
+}