Docs: Style rules for glyphicons at narrow widths (#245)

eslint · May 2, 2016 · 995a73a · 995a73a
1 parent aa995dc
commit 995a73a
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 33 deletions.
diff --git a/_layouts/doc.html b/_layouts/doc.html
@@ -3,15 +3,17 @@
 <main class="doc">
   <article class="container">
     {{ content
-      | replace: '<p>Examples of <strong>incorrect</strong> code', '<p class="incorrect">Examples of <strong>incorrect</strong> code'
-      | replace: '<p>Example of <strong>incorrect</strong> code', '<p class="incorrect">Example of <strong>incorrect</strong> code'
-      | replace: '<p>Examples of additional <strong>incorrect</strong> code', '<p class="incorrect">Examples of additional <strong>incorrect</strong> code'
-      | replace: '<p>Example of additional <strong>incorrect</strong> code', '<p class="incorrect">Example of additional <strong>incorrect</strong> code'
-      | replace: '<p>Examples of <strong>correct</strong> code', '<p class="correct">Examples of <strong>correct</strong> code'
-      | replace: '<p>Example of <strong>correct</strong> code', '<p class="correct">Example of <strong>correct</strong> code'
-      | replace: '<p>Examples of additional <strong>correct</strong> code', '<p class="correct">Examples of additional <strong>correct</strong> code'
-      | replace: '<p>Example of additional <strong>correct</strong> code', '<p class="correct">Example of additional <strong>correct</strong> code'
-      | replace: '<p>(fixable) ', '<p class="fixable">'
+      | replace: '<p>Examples of <strong>incorrect</strong> code', '<p class="incorrect icon">Examples of <strong>incorrect</strong> code'
+      | replace: '<p>Example of <strong>incorrect</strong> code', '<p class="incorrect icon">Example of <strong>incorrect</strong> code'
+      | replace: '<p>Examples of additional <strong>incorrect</strong> code', '<p class="incorrect icon">Examples of additional <strong>incorrect</strong> code'
+      | replace: '<p>Example of additional <strong>incorrect</strong> code', '<p class="incorrect icon">Example of additional <strong>incorrect</strong> code'
+      | replace: '<p>Examples of <strong>correct</strong> code', '<p class="correct icon">Examples of <strong>correct</strong> code'
+      | replace: '<p>Example of <strong>correct</strong> code', '<p class="correct icon">Example of <strong>correct</strong> code'
+      | replace: '<p>Examples of additional <strong>correct</strong> code', '<p class="correct icon">Examples of additional <strong>correct</strong> code'
+      | replace: '<p>Example of additional <strong>correct</strong> code', '<p class="correct icon">Example of additional <strong>correct</strong> code'
+      | replace: '<p>(recommended) ', '<p class="recommended icon">'
+      | replace: '<p>(removed) ', '<p class="removed icon">'
+      | replace: '<p>(fixable) ', '<p class="fixable icon">'
       | replace: '(recommended)', '<span title="recommended" aria-label="recommended" class="glyphicon glyphicon-ok"></span>'
       | replace: '(fixable)', '<span title="fixable" aria-label="fixable" class="glyphicon glyphicon-wrench"></span>'
     }}

diff --git a/styles/overrides.css b/styles/overrides.css
@@ -66,38 +66,49 @@ p.correct + div > pre {
   background-color: #f6fff6; /* light green hsl(120,100%,98%) */
 }
 
+p.icon:before {
+  font-family: "Glyphicons Halflings";
+  color: #4d4d4d; /* gray hsl(0,0%,30%) */
+  margin-right: 0.5em;
+}
+
+p.recommended:before {
+  content: "\e013"; /* ok */
+}
+
+p.removed:before {
+  content: "\e014"; /* remove */
+}
+
+p.fixable:before {
+  content: "\e136"; /* wrench */
+}
+
+p.incorrect:before {
+  content: "\e126"; /* thumbs-down */
+}
+
+p.correct:before {
+  content: "\e125"; /* thumbs-up */
+}
+
 @media (min-width: 768px) {
 
-  p.incorrect + div + div + div > pre:before, /* vars-on-top */
-  p.incorrect + div + div > pre:before, /* no-continue */
-  p.incorrect + div > pre:before {
-    content: "\e126"; /* thumbs-down */
-    font-family: "Glyphicons Halflings";
-    color: #4d4d4d; /* gray hsl(0,0%,30%) */
+  p.icon:before {
     position: absolute;
     left: -20px;
   }
 
-  p.correct + div + div + div > pre:before, /* vars-on-top */
-  p.correct + div + div > pre:before, /* no-continue */
-  p.correct+div>pre:before {
-    content: "\e125"; /* thumbs-up */
-    font-family: "Glyphicons Halflings";
-    color: #4d4d4d; /* gray hsl(0,0%,30%) */
-    position: absolute;
-    left: -20px;
+  p.icon {
+    position:relative;
   }
 
-  p.fixable:before {
-    content: "\e136"; /* wrench */
-    font-family: "Glyphicons Halflings";
-    color: #4d4d4d; /* gray hsl(0,0%,30%) */
-    position: absolute;
-    left: -20px;
-  }
+}
 
-  p.fixable,
-  .highlighter-rouge {
-    position:relative;
+@media (max-width: 767px) {
+
+  code {
+    white-space: normal;
   }
+
 }