Issue 4607 - Default content styles

scss/_content.scss

 /*!
- * This file is part of universal-design-language
+ * This file is part of website-defaults
  * Copyright (C) 2016 Eyeo GmbH
  *
- * universal-design-language is free software: you can redistribute it and/or
+ * website-defaults 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,
+ * website-defaults 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/>.
+ * along with website-defaults.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-/* HTML Content
+/*******************************************************************************
+ * Content styles
  *******************************************************************************
- * 1. Headings
- * 2. Blockquotes
- * 3. Links
- * 4. Code Blocks
- * 5. Unstyled Lists
- * 6. Image Alignment
- * 7. Tables
- * 8. Embeds
+ * 1. Document
+ * 2. Headings
+ * 3. Body content
  ******************************************************************************/
+
+/* Document
+ ******************************************************************************/
+
+p,
+ol,
+ul,
+dl,
+pre,
+blockquote
+{
+  /* Set consistent margins (opinionated) */
+  margin: 1em 0em;
+}
 
 /* Headings
  ******************************************************************************/
 
+h1,
+h2,
+h3,
+h4,
+h5,
+h6
+{
+  /* Margin on top **only** (opinionated) */
+  margin: 2em 0em 0em 0em;
+}
+
 h1
 {
-  font-size: 36px;
-  margin-top: $medium-space;
+  font-size: 2em;
 }
 
 h2
 {
-  font-size: 28px;
-  margin-top: $medium-space;
+  font-size: 1.5em;
 }
 
 h3
 {
-  font-size: 24px;
-  margin-top: $medium-space;
+  font-size: 1.25em;
 }
 
 h4
 {
-  font-size: 20px;
-  margin-top: $small-space;
+  font-size: 1em;
 }
 
 h5
 {
-  font-size: 16px;
-  margin-top: $small-space;
+  font-size: 0.8em;
 }
 
 h6
 {
-  font-size: 14px;
-  margin-top: $small-space;
+  font-size: 0.7em;
 }
 
-/* Blockquotes
+/* Body content
  ******************************************************************************/
 
-[dir="ltr"] blockquote
+abbr
 {
-  padding-left: $small-space;
-  border-left: 5px solid $gray;
+  text-decoration: underline;
+  cursor: help;
 }
 
-[dir="rtl"] blockquote
+b,
+strong
 {
-  padding-right: $small-space;
-  border-right: 5px solid $gray;
+  font-weight: $bold-weight;
 }
 
-/* Links
- ******************************************************************************/
+small
+{
+  font-size: $small-font;
+}
+
+sup
+{
+  position: relative;
+  font-size: 75%;
+  vertical-align: super;
+}
 
 a,
 a:visited
 {
-  color: $blue-dark;
+  color: $accent;
+  /* Remove the gray background on active links in IE 10. */
+  background-color: transparent;
   text-decoration: none;
+  /* Set default pointer regardless of href (opinionated) */
+  cursor: pointer;
 }
 
 a:hover,
 a:active,
 a:focus
 {
   text-decoration: underline;
 }
 
-/* Code Blocks
- ******************************************************************************/
-
-pre,
-code
+img
 {
-  padding: $small-space / 4;
-  background-color: $gray-light;
+  /* Make fixed width images responsive */
+  max-width: 100%;
+  /* Remove the border on images inside links in IE 10-. */
+  border-style: none;
 }
 
-pre
+hr
 {
-  display: block;
-  padding: 0 $small-space;
+  border: 1px solid $secondary-light;
 }
 
-pre > code
+blockquote
 {
-  padding: 0;
-  background-color: transparent;
+  padding-left: 1em;
+  border-left: 5px solid $secondary;
 }
 
-/* Unstyled Lists
- ******************************************************************************/
-
-.unstyled-list,
-.unstyled-list ul
+[dir="rtl"] blockquote
 {
-  list-style-type: none;
+  padding-right: 1em;
+  padding-left: 0em;
+  border-right: 5px solid $secondary-light;
+  border-left: 0px;
 }
 
-[dir="ltr"] .unstyled-list
+ol,
+ul
 {
-  padding-left: 0;
+  padding-left: 1.5em;
 }
 
-[dir="rtl"] .unstyled-list
+[dir="rtl"] ol,
+[dir="rtl"] ul
 {
-  padding-right: 0;
+  padding-right: 2em;
+  padding-left: 0em;
 }
 
-[dir="ltr"] .unstyled-list ul
+li
 {
-  padding-left: $medium-space;
+  margin: 0.5em 0em;
 }
 
-[dir="rtl"] .unstyled-list ul
+ol ol,
+ul ul,
+ol ul,
+ul ol
 {
-  padding-right: $small-space;
+  /* prevent double spacing lists */
+  margin: 0em;
 }
 
-/* Image Alignment
- ******************************************************************************/
-
-img
+ol ol
 {
-  margin: 0 $small-space / 2;
+  list-style-type: lower-alpha;
 }
 
-.block,
-.sol,
-.eol
+dt
 {
-  display: block;
-  margin: 0;
+  /* undo browser default (opinionated)*/
+  font-weight: $bold-weight;
 }
 
-.block
+dd
 {
-  display: block;
-  width: 100%;
-  height: auto;
-  clear: both;
-  overflow: auto;
-  margin: $small-space 0;
+  margin: 0.5em 0em 1em 0em;
 }
-
-[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%;
-}
-
-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;
-}