Fix potential rule overlap in code fences (#41)

Fix #41
noatpad · Nov 13, 2019 · b775569 · b775569
1 parent 8f30194
commit b775569
Show file tree

Hide file tree

Showing 4 changed files with 167 additions and 158 deletions.
diff --git a/ursine-polar.scss b/ursine-polar.scss
@@ -1,6 +1,9 @@
 
 // SCSS VARIABLES //
 
+// Umbra or Polar?
+$umbra: false;
+
 // Important colors for writing (text, links, code, etc.)
 $bg-color: #fbfbfb;
 $text-color: #333;
@@ -62,7 +65,6 @@ $mermaid-task-crit-border: #d45c62;
 
 // IMPORTS //
 
-// Inherit Ursine Umbra styling
 @import 'ursine-umbra';
 @import 'ursine/code-3024-day';
 

diff --git a/ursine-umbra.scss b/ursine-umbra.scss
@@ -1,6 +1,9 @@
 
 // SCSS VARIABLES //
 
+// Umbra or Polar?
+$umbra: true !default;
+
 // Font variables
 $paragraph-font: "'Avenir Next LT Pro', 'Lato', sans-serif";
 $header-font: "'Adelle', 'Times New Roman', serif";

diff --git a/ursine/_code-3024-day.scss b/ursine/_code-3024-day.scss
@@ -8,99 +8,101 @@
 // CodeMirror template by Jan T. Sott (https://github.com/idleberg/base16-codemirror)
 // Original Base16 color scheme by Chris Kempson (https://github.com/chriskempson/base16)
 
-.cm-s-inner {
-  padding: .5rem .2rem;
-  border: 1px solid $accent-color !important;
-  border-radius: .25rem;
-
-  &.CodeMirror, .CodeMirror-gutters {
-    background-color: #f7f7f7 !important;
-    color: #3a3432 !important;
-    border: none;
-  }
+@if not $umbra {
+  .cm-s-inner {
+    padding: .5rem .2rem;
+    border: 1px solid $accent-color !important;
+    border-radius: .25rem;
+
+    &.CodeMirror, .CodeMirror-gutters {
+      background-color: #f7f7f7 !important;
+      color: #3a3432 !important;
+      border: none;
+    }
 
-  .CodeMirror-gutters {
-    width: 5ch;
-    color: #6d8a88;
-  }
+    .CodeMirror-gutters {
+      width: 5ch;
+      color: #6d8a88;
+    }
 
-  .CodeMirror-cursor { border-left: solid thin #5c5855 !important; }
+    .CodeMirror-cursor { border-left: solid thin #5c5855 !important; }
 
-  .CodeMirror-linenumber {
-    width: 4ch !important;
-    color: #807d7c;
-  }
+    .CodeMirror-linenumber {
+      width: 4ch !important;
+      color: #807d7c;
+    }
 
-  .CodeMirror-line {
-    &::selection,
-    &::-moz-selection,
-    > span::selection,
-    > span::-moz-selection,
-    > span > span::selection,
-    > span > span::-moz-selection {
-      background: #d6d5d4;
+    .CodeMirror-line {
+      &::selection,
+      &::-moz-selection,
+      > span::selection,
+      > span::-moz-selection,
+      > span > span::selection,
+      > span > span::-moz-selection {
+        background: #d6d5d4;
+      }
     }
-  }
 
-  // Keywords
-  span {
-    &.cm-comment { color: #cdab53; }
-    &.cm-string,
-    &.cm-string-2 { color: #f2b01d; }
-    &.cm-number { color: #a16a94; }
-    &.cm-variable { color: #01a252; }
-    &.cm-variable-2 { color: #01a0e4; }
-    &.cm-def { color: #e8bbd0; }
-    &.cm-operator { color: #ff79c6; }
-    &.cm-keyword { color: #db2d20; }
-    &.cm-atom { color: #a16a94; }
-    &.cm-meta { color: inherit; }
-    &.cm-tag { color: #db2d20; }
-    &.cm-attribute { color: #01a252; }
-    &.cm-qualifier { color: #50fa7b; }
-    &.cm-property { color: #01a252; }
-    &.cm-builtin { color: #50fa7b; }
-    &.cm-variable-3,
-    &.cm-type { color: #ffb86c; }
-    &.cm-bracket { color: #3a3432; }
-    &.cm-link { color: #a16a94; }
-    &.cm-error { background: #db2d20; color: #5c5855; }
-  }
+    // Keywords
+    span {
+      &.cm-comment { color: #cdab53; }
+      &.cm-string,
+      &.cm-string-2 { color: #f2b01d; }
+      &.cm-number { color: #a16a94; }
+      &.cm-variable { color: #01a252; }
+      &.cm-variable-2 { color: #01a0e4; }
+      &.cm-def { color: #e8bbd0; }
+      &.cm-operator { color: #ff79c6; }
+      &.cm-keyword { color: #db2d20; }
+      &.cm-atom { color: #a16a94; }
+      &.cm-meta { color: inherit; }
+      &.cm-tag { color: #db2d20; }
+      &.cm-attribute { color: #01a252; }
+      &.cm-qualifier { color: #50fa7b; }
+      &.cm-property { color: #01a252; }
+      &.cm-builtin { color: #50fa7b; }
+      &.cm-variable-3,
+      &.cm-type { color: #ffb86c; }
+      &.cm-bracket { color: #3a3432; }
+      &.cm-link { color: #a16a94; }
+      &.cm-error { background: #db2d20; color: #5c5855; }
+    }
 
-  .md-fences.md-focus & .CodeMirror-activeline-background {
-    background: #e8f2ff;
-  }
+    .md-fences.md-focus & .CodeMirror-activeline-background {
+      background: #e8f2ff;
+    }
 
-  .CodeMirror-matchingbracket {
-    text-decoration: underline;
-    color: #a16a94 !important;
-  }
+    .CodeMirror-matchingbracket {
+      text-decoration: underline;
+      color: #a16a94 !important;
+    }
 
-  .CodeMirror-selected, .CodeMirror-selectedtext {
-    background: #d5e2f4 !important;
-    color: inherit;
-    text-shadow: none;
+    .CodeMirror-selected, .CodeMirror-selectedtext {
+      background: #d5e2f4 !important;
+      color: inherit;
+      text-shadow: none;
+    }
   }
-}
 
-// Auto-suggestion list
-#fences-auto-suggest .active {
-  background: $accent-color;
-}
+  // Auto-suggestion list
+  #fences-auto-suggest .active {
+    background: $accent-color;
+  }
 
-#write .code-tooltip {
-  bottom: initial;
-  top: calc(100% - 1px);
-  background: #f7f7f7;
-  border: 1px solid $accent-color;
-  border-top: 0;
-}
+  #write .code-tooltip {
+    bottom: initial;
+    top: calc(100% - 1px);
+    background: #f7f7f7;
+    border: 1px solid $accent-color;
+    border-top: 0;
+  }
 
-.auto-suggest-container {
-  border-color: $md-char-color;
+  .auto-suggest-container {
+    border-color: $md-char-color;
 
-  .autoComplt-hint.active {
-    background: $md-char-color;
-    color: $item-hover-text-color;
+    .autoComplt-hint.active {
+      background: $md-char-color;
+      color: $item-hover-text-color;
+    }
   }
 }
diff --git a/ursine/_code-dracula.scss b/ursine/_code-dracula.scss
@@ -6,96 +6,98 @@
 // Author:     Michael Kaminsky (http://github.com/mkaminsky11)
 // Original dracula color scheme by Zeno Rocha (https://github.com/zenorocha/dracula-theme)
 
-.cm-s-inner {
-  padding: .5rem .2rem;
-  border: 1px solid var(--accent-color) !important;
-  border-radius: .25rem;
-
-  &.CodeMirror, .CodeMirror-gutters {
-    background-color: #282a36 !important;
-    color: #f8f8f2 !important;
-    border: none;
-  }
+@if $umbra {
+  .cm-s-inner {
+    padding: .5rem .2rem;
+    border: 1px solid var(--accent-color) !important;
+    border-radius: .25rem;
+
+    &.CodeMirror, .CodeMirror-gutters {
+      background-color: #282a36 !important;
+      color: #f8f8f2 !important;
+      border: none;
+    }
 
-  .CodeMirror-gutters {
-    width: 5ch;
-    color: #6d8a88;
-  }
+    .CodeMirror-gutters {
+      width: 5ch;
+      color: #6d8a88;
+    }
 
-  .CodeMirror-cursor { border-left: solid thin #f8f8f2 !important; }
+    .CodeMirror-cursor { border-left: solid thin #f8f8f2 !important; }
 
-  .CodeMirror-linenumber {
-    width: 4ch !important;
-    color: #6D8A88;
-  }
+    .CodeMirror-linenumber {
+      width: 4ch !important;
+      color: #6D8A88;
+    }
 
-  .CodeMirror-line {
-    &::selection,
-    &::-moz-selection,
-    > span::selection,
-    > span::-moz-selection,
-    > span > span::selection,
-    > span > span::-moz-selection {
-      background: rgba(255, 255, 255, 0.10);
+    .CodeMirror-line {
+      &::selection,
+      &::-moz-selection,
+      > span::selection,
+      > span::-moz-selection,
+      > span > span::selection,
+      > span > span::-moz-selection {
+        background: rgba(255, 255, 255, 0.10);
+      }
     }
-  }
 
-  // Keywords
-  span {
-    &.cm-comment { color: #6272a4; }
-    &.cm-string,
-    &.cm-string-2 { color: #f1fa8c; }
-    &.cm-number { color: #bd93f9; }
-    &.cm-variable,
-    &.cm-variable-2 { color: #50fa7b; }
-    &.cm-def { color: white; }
-    &.cm-operator { color: #ff79c6; }
-    &.cm-keyword { color: #ff79c6; }
-    &.cm-atom { color: #bd93f9; }
-    &.cm-meta { color: #f8f8f2; }
-    &.cm-tag { color: #ff79c6; }
-    &.cm-attribute { color: #50fa7b; }
-    &.cm-qualifier { color: #50fa7b; }
-    &.cm-property { color: #66d9ef; }
-    &.cm-builtin { color: #50fa7b; }
-    &.cm-variable-3,
-    &.cm-type { color: #ffb86c; }
-  }
+    // Keywords
+    span {
+      &.cm-comment { color: #6272a4; }
+      &.cm-string,
+      &.cm-string-2 { color: #f1fa8c; }
+      &.cm-number { color: #bd93f9; }
+      &.cm-variable,
+      &.cm-variable-2 { color: #50fa7b; }
+      &.cm-def { color: white; }
+      &.cm-operator { color: #ff79c6; }
+      &.cm-keyword { color: #ff79c6; }
+      &.cm-atom { color: #bd93f9; }
+      &.cm-meta { color: #f8f8f2; }
+      &.cm-tag { color: #ff79c6; }
+      &.cm-attribute { color: #50fa7b; }
+      &.cm-qualifier { color: #50fa7b; }
+      &.cm-property { color: #66d9ef; }
+      &.cm-builtin { color: #50fa7b; }
+      &.cm-variable-3,
+      &.cm-type { color: #ffb86c; }
+    }
 
-  .md-fences.md-focus & .CodeMirror-activeline-background {
-    background: rgba(255,255,255,0.1);
-  }
+    .md-fences.md-focus & .CodeMirror-activeline-background {
+      background: rgba(255,255,255,0.1);
+    }
 
-  .CodeMirror-matchingbracket {
-    text-decoration: underline;
-    color: white !important;
-  }
+    .CodeMirror-matchingbracket {
+      text-decoration: underline;
+      color: white !important;
+    }
 
-  .CodeMirror-selected, .CodeMirror-selectedtext {
-    background: #3b4254 !important;
-    color: inherit;
-    text-shadow: none;
+    .CodeMirror-selected, .CodeMirror-selectedtext {
+      background: #3b4254 !important;
+      color: inherit;
+      text-shadow: none;
+    }
   }
-}
 
-// Auto-suggestion list
-#fences-auto-suggest .active {
-  background: $accent-color;
-}
+  // Auto-suggestion list
+  #fences-auto-suggest .active {
+    background: $accent-color;
+  }
 
-#write .code-tooltip {
-  bottom: initial;
-  top: calc(100% - 1px);
-  background: #282a36;
-  border: 1px solid $accent-color;
-  border-top: 0;
-}
+  #write .code-tooltip {
+    bottom: initial;
+    top: calc(100% - 1px);
+    background: #282a36;
+    border: 1px solid $accent-color;
+    border-top: 0;
+  }
 
-.auto-suggest-container {
-  border-color: $md-char-color;
+  .auto-suggest-container {
+    border-color: $md-char-color;
 
-  .autoComplt-hint.active {
-    background: $md-char-color;
-    color: $item-hover-text-color;
+    .autoComplt-hint.active {
+      background: $md-char-color;
+      color: $item-hover-text-color;
+    }
   }
 }