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/>.
+ */
+
+/*!
+ * 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.

+ *******************************************************************************
+ * - Global
+ * - Headings
+ * - Body content

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

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

+ * - Alignment
+ * - Responsive
+ ******************************************************************************/
+
+/* Global
+ ******************************************************************************/
+
+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;
+}
+
+/* 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;
+}
+
+h1
+{
+  font-size: 24px;
+}
+
+h2
+{
+  font-size: 22px;
+}
+
+h3
+{
+  font-size: 18px;
+}
+
+h4
+{
+  font-size: 16px;
+}
+
+h5
+{
+  font-size: 14px;
+}
+
+h6
+{
+  font-size: 12px;
+}
+
+/* Body content
+ ******************************************************************************/
+
+abbr
+{
+  text-decoration: underline dotted;
+  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;
+}
+
+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;
+}
+
+img
+{
+  margin: 0px $small-space / 2;
+  /* Remove the border on images inside links in IE 10-. */
+  border-style: none;
+}
+
+hr
+{
+  border-top: 0px;
+  border-bottom: 2px solid $gray;
+}
+
+[dir="ltr"] blockquote
+{
+  padding-left: $small-space;
+  border-left: 5px solid $gray;
+}
+
+[dir="rtl"] blockquote
+{
+  padding-right: $small-space;
+  border-right: 5px solid $gray;
+}
+
+pre
+{
+  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;
+}
+
+[dir="rtl"] ol,
+[dir="rtl"] ul
+{
+  padding-right: $small-space * 1.5;
+}
+
+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: $small-space / 2 0px $small-space 0px;
+}
+
+/**
+ * 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;
+  }
+}