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

 {
 
   /* 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;
@@ skipping 23 matching lines @@
   {
     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;
@@ skipping 53 matching lines @@
   dt
   {
     /* undo browser default (opinionated)*/
     font-weight: $bold-weight;
   }
 
   dd
   {
     margin: 0.25em 0em 1em 0em;
   }
-
 }