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/>.
  */
 
-/*!
- * This file contains parts of:
- * - normalize.css v5.0.0 | MIT License | github.com/necolas/normalize.css
- */
-
-/* UDL content styles

[juliandoucette, 2016/11/11 16:27:19]

Combined document title and TOC.

+/*******************************************************************************
+ * Content styles
  *******************************************************************************
- * - Global
- * - Headings
- * - Body content

[juliandoucette, 2016/11/11 16:27:18]

Shortened TOC by removing 1-off elements/classes from the tree.

- * - Alignment
- * - Responsive
+ * 1. Document
+ * 2. Headings
+ * 3. Body content
  ******************************************************************************/
 
-/* Global
+/* Document
  ******************************************************************************/
-
-html
-{
-  font-family: $sans-font;
-  font-size: $medium-font;
-  line-height: 1.15;
-}
-
-/**
- * Center content within a (responsive) fixed width
- */
-.container

[juliandoucette, 2016/11/11 16:27:19]

Removed .container-fluid because any block element is technically a fluid
container.

-{
-  max-width: 100%;
-  margin: 0px auto;
-  padding: 0px $small-space;
-}
-
-.container:after
-{
-  display: block;
-  clear: both;
-  content: "";
-}
-
-/**
- * Clear all floating elements
- */
-.clearfix

[juliandoucette, 2016/11/11 16:27:19]

Separated clearfix because it can apply to containers with content (EG: clearing
a paragraph after a floating image).

-{
-  display: block;
-  clear: both;
-}
 
 p,
 ol,
 ul,
 dl,
 pre,
 blockquote
 {
   /* Set consistent margins (opinionated) */
-  margin: $small-space 0px;
+  margin: 1em 0em;
 }
 
 /* Headings

[juliandoucette, 2016/11/11 16:27:18]

Adjusted heading margin and font-size to be mobile first. See non-mobile sizes
below in media queries.

  ******************************************************************************/
 
 h1,
 h2,
 h3,
 h4,
 h5,
 h6
 {
-  margin: $small-space 0;
-}
-
-h1,
-h2
-{
-  font-weight: $thin-weight;
+  /* Margin on top **only** (opinionated) */
+  margin: 2em 0em 0em 0em;
 }
 
 h1
 {
-  font-size: 24px;
+  font-size: 2em;
 }
 
 h2
 {
-  font-size: 22px;
+  font-size: 1.5em;
 }
 
 h3
 {
-  font-size: 18px;
+  font-size: 1.25em;
 }
 
 h4
 {
-  font-size: 16px;
+  font-size: 1em;
 }
 
 h5
 {
-  font-size: 14px;
+  font-size: 0.8em;
 }
 
 h6
 {
-  font-size: 12px;
+  font-size: 0.7em;
 }
 
 /* Body content
  ******************************************************************************/
 
 abbr
 {
-  text-decoration: underline dotted;
+  text-decoration: underline;
   cursor: help;
 }
 
 b,
 strong
 {
   font-weight: $bold-weight;
 }
 
 small
 {
   font-size: $small-font;
 }
 
 sup
 {
   position: relative;
-  top: -0.5em;
   font-size: 75%;
-  /* Prevent `sub` and `sup` elements from affecting the line height */
-  line-height: 0px;
-  vertical-align: baseline;
+  vertical-align: super;
 }
 
 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;
+  /* Set default pointer regardless of href (opinionated) */
+  cursor: pointer;
 }
 
 a:hover,
 a:active,
 a:focus
 {
-  /* Set default color and decoration (opinionated) */
   text-decoration: underline;
 }
 
 img
 {
-  margin: 0px $small-space / 2;
+  /* Make fixed width images responsive */
+  max-width: 100%;
   /* Remove the border on images inside links in IE 10-. */
   border-style: none;
 }
 
 hr
 {
-  border-top: 0px;
-  border-bottom: 2px solid $gray;
+  border: 1px solid $secondary-light;
 }
 
-[dir="ltr"] blockquote
+blockquote
 {
-  padding-left: $small-space;
-  border-left: 5px solid $gray;
+  padding-left: 1em;
+  border-left: 5px solid $secondary;
 }
 
 [dir="rtl"] blockquote
 {
-  padding-right: $small-space;
-  border-right: 5px solid $gray;
+  padding-right: 1em;
+  padding-left: 0em;
+  border-right: 5px solid $secondary-light;
+  border-left: 0px;
 }
 
-pre
+ol,
+ul
 {
-  overflow: auto;
-  padding: 0px $small-space;
-}
-
-code
-{
-  padding: 0px $small-space / 4;
-}
-
-pre,
-code
-{
-  background-color: $gray-light;
-  font-family: $monospace-font;
-  font-size: $medium-font;
-}
-
-pre code
-{
-  padding: 0px;
-}
-
-[dir="ltr"] ol,
-[dir="ltr"] ul
-{
-  padding-left: $small-space * 1.5;
+  padding-left: 1.5em;
 }
 
 [dir="rtl"] ol,
 [dir="rtl"] ul
 {
-  padding-right: $small-space * 1.5;
+  padding-right: 2em;
+  padding-left: 0em;
 }
 
 li
 {
-  margin: $small-space / 2 0px;
+  margin: 0.5em 0em;
 }
 
 ol ol,
 ul ul,
 ol ul,
 ul ol
 {
   /* prevent double spacing lists */
-  margin: 0px;
+  margin: 0em;
 }
 
 ol ol
 {
   list-style-type: lower-alpha;
 }
 
 dt
 {
   /* undo browser default (opinionated)*/
   font-weight: $bold-weight;
 }
 
 dd
 {
-  margin: $small-space / 2 0px $small-space 0px;
+  margin: 0.5em 0em 1em 0em;
 }
-
-/**
- * Remove list style from vertical lists
- */
-.unstyled-list,
-{
-  list-style-type: none;
-}
-
-[dir="ltr"] .unstyled-list
-{
-  padding-left: 0px;
-}
-
-[dir="rtl"] .unstyled-list
-{
-  padding-right: 0px;
-}
-
-[dir="ltr"] .unstyled-list .unstyled-list
-{
-  padding-left: $medium-space;
-}
-
-[dir="rtl"] .unstyled-list .unstyled-list
-{
-  padding-right: $small-space;
-}
-
-audio,
-video
-{
-  /* undo browser default (opinionated) */
-  display: block;
-}
-
-/**
- * Embed 16 by 9 iframe video
- */
-.embed
-{
-  display: block;
-  position: relative;
-  overflow: hidden;
-  padding: 0% 0% 56.25% 0%;
-}
-
-.embed iframe
-{
-  position: absolute;
-  top: 0px;
-  left: 0px;
-  width: 100%;
-  height: 100%;
-  /* undo browser default */
-  border: 0px;
-}
-
-/* Alignment
- ******************************************************************************/
-
-/**
- * Clear and stretch element full-width
- */
-.full-width

[juliandoucette, 2016/11/11 16:27:18]

Changed .block class back to .full-width for simplicity.

-{
-  display: block;
-  clear: both;
-  overflow: auto;
-  width: 100%;
-  margin: $small-space 0px;
-}
-
-.float-start,
-.float-end
-{
-  display: block;
-  margin: 0px 0px $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;
-  margin-right: $small-space;
-}
-
-/* Responsive
- ******************************************************************************/
-
-@media(min-width: $mobile-breakpoint)
-{
-  .container

[juliandoucette, 2016/11/11 16:32:44]

Moved mobile .container width into media query for consistency + readability.

-  {
-    width: $mobile-width;
-  }
-
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6
-  {
-    margin: $medium-space 0 $small-space 0;
-  }
-
-  h1
-  {
-    font-size: 48px;
-  }
-
-  h2
-  {
-    font-size: 36px;
-  }
-
-  h3
-  {
-    font-size: 24px;
-  }
-
-  h4
-  {
-    font-size: 20px;
-  }
-
-  h5
-  {
-    font-size: 16px;
-  }
-
-  h6
-  {
-    font-size: 14px;
-  }
-}
-
-@media(min-width: $tablet-breakpoint)
-{
-  .container
-  {
-    width: $tablet-width;
-  }
-}
-
-@media(min-width: $desktop-breakpoint)
-{
-  .container
-  {
-    width: $desktop-width;
-  }
-}