Issue 5607 - Namespace content styles in website-defaults

scss/_content.scss

 /*!
  * This file is part of website-defaults
  * Copyright (C) 2016-present eyeo GmbH
  *
  * 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.
  *
  * 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 website-defaults.  If not, see <http://www.gnu.org/licenses/>.
  */
 
 /*******************************************************************************
  * Content styles
  *******************************************************************************
  * 1. Document
  * 2. Headings
  * 3. Body content
  ******************************************************************************/
 
-/* Document
- ******************************************************************************/
+.content

[ire, 2017/09/07 12:08:23]

I added this to all the styles here. There are a couple that may not only apply
to .content though, see comments below

[juliandoucette, 2017/09/08 15:43:53]

Acknowledged.

+{
 
-p,
-ol,
-ul,
-dl,
-pre,
-blockquote
-{
-  /* Set consistent margins (opinionated) */
-  margin: 1em 0em;
+  /* 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 0.5em 0em;
+  }
+
+  h1
+  {
+    font-size: 2em;
+  }
+
+  h2
+  {
+    font-size: 1.5em;
+  }
+
+  h3
+  {
+    font-size: 1.25em;
+  }
+
+  h4
+  {
+    font-size: 1em;
+  }
+
+  h5
+  {
+    font-size: 0.8em;
+  }
+
+  h6
+  {
+    font-size: 0.7em;
+  }
+
+  /* Body content
+  ******************************************************************************/
+
+  abbr
+  {
+    text-decoration: underline;
+    cursor: help;
+  }
+
+  b,
+  strong

[ire, 2017/09/07 12:08:23]

Should this be global?

[juliandoucette, 2017/09/08 15:43:53]

Yes, and...

NIT: I think that we should consider the relative value "bolder" if it's
supported alright across browsers because it's possible to have a <strong> in an
already bold element. Of course, we can/should address this in a separate issue.

[ire, 2017/09/11 11:12:02]

Acknowledged.

[ire, 2017/09/11 11:29:16]

See https://issues.adblockplus.org/ticket/5651

[juliandoucette, 2017/09/11 15:54:34]

Acknowledged.

+  {
+    font-weight: $bold-weight;
+  }
+
+  small
+  {
+    font-size: $small-font;

[juliandoucette, 2017/09/08 15:43:53]

NIT: I think that we should consider a relative value (e.g. 80%) that is equal
to $small-font. Of course, we can/should address this in a separate issue.

[ire, 2017/09/11 11:12:02]

Acknowledged.

+  }
+
+  sup
+  {
+    position: relative;
+    font-size: 75%;
+    vertical-align: super;
+  }
+
+  a,
+  a:visited

[ire, 2017/09/07 12:08:23]

This should probably be global

[juliandoucette, 2017/09/08 15:43:53]

Regarding what should and should not be global. Perhaps there is a simple rule
here? e.g. all inline content elements should be global and block content
elements should be namespaced. Can you think of any obvious exceptions? (I
haven't yet.)

[ire, 2017/09/11 11:12:02]

This is a good rule. I can't think of any exceptions either.

+  {
+    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;
+  }
+
+  img

[ire, 2017/09/07 12:08:23]

This should probably be global

[juliandoucette, 2017/09/08 15:43:53]

Acknowledged.

+  {
+    /* Make fixed width images responsive */
+    max-width: 100%;
+    /* Remove the border on images inside links in IE 10-. */
+    border-style: none;
+  }
+
+  hr
+  {
+    border: 1px solid $secondary-light;
+  }
+
+  blockquote
+  {
+    padding-left: 1em;
+    border-left: 5px solid $secondary;
+  }
+
+  [dir="rtl"] blockquote
+  {
+    padding-right: 1em;
+    padding-left: 0em;
+    border-right: 5px solid $secondary-light;
+    border-left: 0px;
+  }
+
+  ol,
+  ul
+  {
+    padding-left: 1.5em;
+  }
+
+  [dir="rtl"] ol,
+  [dir="rtl"] ul
+  {
+    padding-right: 2em;
+    padding-left: 0em;
+  }
+
+  ol
+  {
+    list-style: decimal;
+  }
+
+  ul
+  {
+    list-style: disc;
+  }
+
+  li
+  {
+    margin: 0.25em 0em;
+  }
+
+  ol ol,
+  ul ul,
+  ol ul,
+  ul ol
+  {
+    /* prevent double spacing lists */
+    margin: 0em;
+  }
+
+  ol ol
+  {
+    list-style-type: lower-alpha;
+  }
+
+  dt
+  {
+    /* undo browser default (opinionated)*/
+    font-weight: $bold-weight;
+  }
+
+  dd
+  {
+    margin: 0.25em 0em 1em 0em;
+  }
+
 }
-
-/* Headings
- ******************************************************************************/
-
-h1,
-h2,
-h3,
-h4,
-h5,
-h6
-{
-  /* Margin on top **only** (opinionated) */
-  margin: 2em 0em 0.5em 0em;
-}
-
-h1
-{
-  font-size: 2em;
-}
-
-h2
-{
-  font-size: 1.5em;
-}
-
-h3
-{
-  font-size: 1.25em;
-}
-
-h4
-{
-  font-size: 1em;
-}
-
-h5
-{
-  font-size: 0.8em;
-}
-
-h6
-{
-  font-size: 0.7em;
-}
-
-/* Body content
- ******************************************************************************/
-
-abbr
-{
-  text-decoration: underline;
-  cursor: help;
-}
-
-b,
-strong
-{
-  font-weight: $bold-weight;
-}
-
-small
-{
-  font-size: $small-font;
-}
-
-sup
-{
-  position: relative;
-  font-size: 75%;
-  vertical-align: super;
-}
-
-a,
-a:visited
-{
-  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;
-}
-
-img
-{
-  /* Make fixed width images responsive */
-  max-width: 100%;
-  /* Remove the border on images inside links in IE 10-. */
-  border-style: none;
-}
-
-hr
-{
-  border: 1px solid $secondary-light;
-}
-
-blockquote
-{
-  padding-left: 1em;
-  border-left: 5px solid $secondary;
-}
-
-[dir="rtl"] blockquote
-{
-  padding-right: 1em;
-  padding-left: 0em;
-  border-right: 5px solid $secondary-light;
-  border-left: 0px;
-}
-
-ol,
-ul
-{
-  padding-left: 1.5em;
-}
-
-[dir="rtl"] ol,
-[dir="rtl"] ul
-{
-  padding-right: 2em;
-  padding-left: 0em;
-}
-
-li
-{
-  margin: 0.25em 0em;
-}
-
-ol ol,
-ul ul,
-ol ul,
-ul ol
-{
-  /* prevent double spacing lists */
-  margin: 0em;
-}
-
-ol ol
-{
-  list-style-type: lower-alpha;
-}
-
-dt
-{
-  /* undo browser default (opinionated)*/
-  font-weight: $bold-weight;
-}
-
-dd
-{
-  margin: 0.25em 0em 1em 0em;
-}