type-on-strap 2.3.4 → 2.3.8

data/_sass/base/_highlight.scss

@@ -6,8 +6,8 @@ div.highlighter-rouge,
 figure.highlight,
 .highlight code {
   position: relative;
-  background: $base00;
-  color: $base05;
+  background: var(--base00);
+  color: var(--base05);
   font-family: $monospace;
   font-size: $font-size-code;
   line-height: $font-height-code;
@@ -48,10 +48,11 @@ figure.highlight {
 code.highlighter-rouge {
   padding: 0.2em 0.4em;
   font-size: $font-size-code;
-  background-color: transparentize($base00, 0.85);
-  color: rgb(36, 41, 46);
+  background-color: var(--code-background);
+  color: var(--code-inline);
   border-radius: 2px;
   font-family: $monospace;
+  //filter: invert(100%) contrast(200%);
 }
 
 table.rouge-table {
@@ -69,8 +70,8 @@ table.rouge-table {
     &.rouge-gutter {
       padding-right: 1em;
       width: 2em;
-      color: $base04;
-      border-right: 1px solid $base04;
+      color: var(--base04);
+      border-right: 1px solid --var(base04);
       text-align: right
     }
 
@@ -90,145 +91,145 @@ table.rouge-table {
   width: 100%;
 
   ::selection {
-    background-color: $base02
+    background-color: var(--base02)
   }
 }
 
 .highlight .hll {
-  background-color: $base06
+  background-color: var(--base06)
 }
 
 .highlight {
   .bp{ /* Name.Builtin.Pseudo */
-    color: $base0c  }
+    color: var(--base0c)  }
   .c { /* Comment */
-    color: $base03 }
+    color: var(--base03) }
   .cm{ /* Comment.Multiline */
-    color: $base03  }
+    color: var(--base03)  }
   .cp{ /* Comment.Preproc */
-    color: $base03  }
+    color: var(--base03)  }
   .c1{ /* Comment.Single */
-    color: $base03  }
+    color: var(--base03)  }
   .cs{ /* Comment.Special */
-    color: $base03  }
+    color: var(--base03)  }
   .dl{ /* String.Quotes 8 */
-    color: $base0a  }
+    color: var(--base0a)  }
   .err { /* Error */
-    color: $base0c }
+    color: var(--base0c) }
   .gd{ /* Generic.Deleted */
-    color: $base0c  }
+    color: var(--base0c)  }
   .ge{ /* Generic.Emph */
     font-style: italic  }
   .gh{ /* Generic.Heading */
-    color: $base05;font-weight: bold  }
+    color: var(--base05);font-weight: bold  }
   .gi{ /* Generic.Inserted */
-    color: $base0a  }
+    color: var(--base0a)  }
   .gp{ /* Generic.Prompt */
-    color: $base04;font-weight: bold  }
+    color: var(--base04);font-weight: bold  }
   .gs{ /* Generic.Strong */
     font-weight: bold  }
   .gu{ /* Generic.Subheading */
-    color: $base08;font-weight: bold  }
+    color: var(--base08);font-weight: bold  }
   .il{ /* Literal.Number.Integer.Long */
-    color: $base0e  }
+    color: var(--base0e)  }
   .k { /* Keyword */
-    color: $base0d }
+    color: var(--base0d) }
   .kc{ /* Keyword.Constant */
-    color: $base0d  }
+    color: var(--base0d)  }
   .kd{ /* Keyword.Declaration */
-    color: $base0d  }
+    color: var(--base0d)  }
   .kn{ /* Keyword.Namespace */
-    color: $base0d  }
+    color: var(--base0d)  }
   .kp{ /* Keyword.Pseudo */
-    color: $base0d  }
+    color: var(--base0d)  }
   .kr{ /* Keyword.Reserved */
-    color: $base0d  }
+    color: var(--base0d)  }
   .kt{ /* Keyword.Type */
-    color: $base09  }
+    color: var(--base09)  }
   .l{ /* Literal */
-    color: $base0e  }
+    color: var(--base0e)  }
   .ld{ /* Literal.Date */
-    color: $base0a  }
+    color: var(--base0a)  }
   .m{ /* Literal.Number */
-    color: $base0e  }
+    color: var(--base0e)  }
   .mb{ /* Literal.Bytes */
-    color: $base0e  }
+    color: var(--base0e)  }
   .mf{ /* Literal.Number.Float */
-    color: $base0e  }
+    color: var(--base0e)  }
   .mh{ /* Literal.Number.Hex */
-    color: $base0e  }
+    color: var(--base0e)  }
   .mi{ /* Literal.Number.Integer */
-    color: $base0e  }
+    color: var(--base0e)  }
   .mo{ /* Literal.Number.Oct */
-    color: $base0e  }
+    color: var(--base0e)  }
   .n{ /* Name */
-    color: $base05  }
+    color: var(--base05)  }
   .na{ /* Name.Attribute */
-    color: $base0b  }
+    color: var(--base0b)  }
   .nb{ /* Name.Builtin */
-    color: $base05  }
+    color: var(--base05)  }
   .nc{ /* Name.Class */
-    color: $base05  }
+    color: var(--base05)  }
   .no{ /* Name.Constant */
-    color: $base05  }
+    color: var(--base05)  }
   .nd{ /* Name.Decorator */
-    color: $base0f  }
+    color: var(--base0f)  }
   .ni{ /* Name.Entity */
-    color: $base05  }
+    color: var(--base05)  }
   .ne{ /* Name.Exception */
-    color: $base0c  }
+    color: var(--base0c)  }
   .nf{ /* Name.Function */
-    color: $base0b  }
+    color: var(--base0b)  }
   .nl{ /* Name.Label */
-    color: $base05  }
+    color: var(--base05)  }
   .nn{ /* Name.Namespace */
-    color: $base05  }
+    color: var(--base05)  }
   .nt{ /* Name.Tag */
-    color: $base08  }
+    color: var(--base08)  }
   .nv{ /* Name.Variable */
-    color: $base0c  }
+    color: var(--base0c)  }
   .nx{ /* Name.Other */
-    color: $base0b  }
+    color: var(--base0b)  }
   .o{ /* Operator */
-    color: $base08  }
+    color: var(--base08)  }
   .ow{ /* Operator.Word */
-    color: $base0d  }
+    color: var(--base0d)  }
   .p{ /* Punctuation */
-    color: $base05  }
+    color: var(--base05)  }
   .py{ /* Name.Property */
-    color: $base05  }
+    color: var(--base05)  }
   .s{ /* Literal.String */
-    color: $base0a  }
+    color: var(--base0a)  }
   .sb{ /* Literal.String.Backtick */
-    color: $base0a  }
+    color: var(--base0a)  }
   .sc{ /* Literal.String.Char */
-    color: $base05  }
+    color: var(--base05)  }
   .sd{ /* Literal.String.Doc */
-    color: $base04  }
+    color: var(--base04)  }
   .s2{ /* Literal.String.Double */
-    color: $base0a  }
+    color: var(--base0a)  }
   .se{ /* Literal.String.Escape */
-    color: $base0e  }
+    color: var(--base0e)  }
   .sh{ /* Literal.String.Heredoc */
-    color: $base0a  }
+    color: var(--base0a)  }
   .si{ /* Literal.String.Interpol */
-    color: $base0e  }
+    color: var(--base0e)  }
   .sx{ /* Literal.String.Other */
-    color: $base0a  }
+    color: var(--base0a)  }
   .sr{ /* Literal.String.Regex */
-    color: $base0a  }
+    color: var(--base0a)  }
   .s1{ /* Literal.String.Single */
-    color: $base0a  }
+    color: var(--base0a)  }
   .ss{ /* Literal.String.Symbol */
-    color: $base0a  }
+    color: var(--base0a)  }
   .vc{ /* Name.Variable.Class */
-    color: $base0c  }
+    color: var(--base0c)  }
   .vg{ /* Name.Variable.Global */
-    color: $base0c  }
+    color: var(--base0c)  }
   .vi{ /* Name.Variable.Instance */
-    color: $base0c  }
+    color: var(--base0c)  }
   .w{ /* Text.Whitespace */
-    color: $base05  }
+    color: var(--base05)  }
 }
 
 // Fix Github syntax display
@@ -289,6 +290,6 @@ table.rouge-table {
 }
 
 table.dataframe {
-  border: 0 solid $border-color;
+  border: 0 solid var(--border);
   border-collapse: collapse;
 }

data/_sass/base/_utility.scss

@@ -42,11 +42,11 @@
 }
 
 .txt-shadow {
-  text-shadow: 0.07em 0.10em 0.15em $text-shadow;
+  text-shadow: 0.07em 0.10em 0.15em var(--text-shadow);
 }
 
 .subtle-txt-shadow {
-  text-shadow: 1px 1px 2px $text-shadow;
+  text-shadow: 1px 1px 2px var(--text-shadow);
 }
 
 // Buttons
@@ -64,9 +64,9 @@ a.button {
 
 .button-link {
   &:hover {
-    background: $link-color;
-    border: 1px solid $link-color;
-    color: $background-color;
+    background: var(--link);
+    border: 1px solid var(--link);
+    color: var(--background);
     text-decoration: none;
   }
 }
@@ -74,14 +74,16 @@ a.button {
 .body-link {
   &:hover {
     text-decoration: underline;
-    color: darken($link-color, 15%);
+    color: var(--link);
+    filter: brightness(0.85);
   }
 }
 
 .post-link {
   &:hover {
     text-decoration: none;
-    color: lighten($link-color, 10%);
+    color: var(--link);
+    filter: brightness(1.1);
   }
 }
 

data/_sass/base/_variables.scss

@@ -1,97 +1,136 @@
-// Typography
+/* TYPOGRAPHY */
 $font-family-main: 'Source Sans Pro', Helvetica, Arial, sans-serif;
 $font-family-headings: 'Source Sans Pro', Helvetica, Arial, sans-serif;
 $font-family-logo: 'Source Sans Pro', Helvetica, Arial, sans-serif;
 $font-size: 1.25em;
 
-// Padding
+$monospace: Consolas, Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace, sans-serif !default;
+$font-size-code: 0.85em !default;
+$font-height-code: 1.3em !default;
+$border-radius: 4px !default;
+
+/* PADDING */
 $padding-x-large: 23%;
 $padding-large: 9%;
 $padding-medium: 6%;
 $padding-small: 4%;
 $padding-x-small: 3%;
-
-// Sepcific Padding
 $title-padding: 1%;
 $feature-image-padding: 10%;
 
-// Mobile display
+/* MOBILE */
 $xl-break: 2000px;
 $l-break: 1400px;
 $m-break: 1000px;
 $break: 768px;
 $sm-break: 576px;
-$x-sm-break: 300px;
-
-// Brand colours
-$theme-color: #337ab7;
-$brand-color: #fff;
-$background-color: #fff;
-$border-color: rgba(0, 0, 0, 0.1); // rgba recommended if using feature images
+$x-sm-break: 320px;
 
-// Typography colours
-$text-color: #262626;
-$meta: #595959; //lowest gray for accessible color
-$link-color: $theme-color;
-$selection-color: #D4D4D4; // visible when highlighting text
-$blockquote-color: #EEF7FA; // $background-color;
 
-// Header
-$header-background-color: darken($theme-color, 50%); // Only used when no header image
-$header-text-color: #fff;
-$header-link-color: #383838;
-$navbar-separator-opacity: 0;
+/* THEME COLOR SCHEMES */
+html, html[data-theme="light"] {
+  --background: #ffffff;
+  --blockquote: #eef7fa;
+  --selection: #d4d4d4;
+  --meta: #595959;
+  --link: #337ab7;
+  --header-background: #24292e;
+  --header-text: #ffffff;
+  --header-link: #383838;
+  --code-background: #E0E0E0;
+  --code-inline: #24292e;
+  --text-shadow: #3f3f3f;
+  --text: #262626;
+  --h1: #262626;
+  --h2: #262626;
+  --h3: #262626;
+  --h4: #262626;
+  --h5: #262626;
+  --h6: #262626;
+  --border: rgba(0, 0, 0, 0.2);
+}
 
-// Feature image for articles
-$feature-image-text-color: #fff;
-$feature-image-size: cover; // options include "cover", "contain", "auto"
-
-//Search colours
-$link-shadow: transparentize($link-color, .6); //rgba(26, 188, 156, 0.6);
-$text-shadow: #3f3f3f;
-$search-color: #999;
-
-
-/*  Syntax highlighting  */
-// Syntax typography
-$monospace: Consolas, Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace, sans-serif !default;
-$font-size-code: 0.85em !default;
-$font-height-code: 1.3em !default;
-$border-radius: 4px !default;
+html[data-theme="dark"] {
+  --background: #22272e; // brand, background
+  --blockquote: #373e47; // blockquote
+  --selection: #545d68; // selection
+  --meta: #909dab; // meta
+  --link: #00a8e0; // theme, link, link shadow header bg
+  --header-background: #2A3444; // Color before header image load
+  --header-text: #e7f3f4; // header text, feature img text
+  --header-link: #adbac7; // header link, search color
+  --code-background: #2A3444;
+  --code-inline: #d9b600;
+  --text-shadow: #2d333b; // text shadow
+  --text: #cdd9e5; // text
+  --h1: #d40059; // headers
+  --h2: #b37eff;
+  --h3: #ff66c2;
+  --h4: #00af9e;
+  --h5: #6bac00;
+  --h6: #ff5c00;
+  --border: rgba(255, 255, 255, 0.5); // border
+  --cusdis--color-text-default: var(--text);
+  --cusdis--color-comment-username-text: var(--link);
+}
 
-// base16 Material Theme
-$base00: #302f2d !default; // Default Background
-$base01: #2E3C43 !default; // Lighter Background (Used for status bars) - NOT USED
-$base02: #314549 !default; // Selection Background
-$base03: #546E7A !default; // Comments, Invisible, Line Highlighting
-$base04: #B2CCD6 !default; // Dark Foreground (Used for status bars) - NOT USED
-$base05: #EEFFFF !default; // Light Foreground (Not often used)
-$base06: #EEFFFF !default; // Light Background (Not often used)
-$base07: #FFFFFF !default; // Default Foreground, Default text color
-$base08: #F07178 !default; // Parenthesis, Caret, Delimiters, Operators
-$base09: #F78C6C !default; // Classes, Markup Bold, Search Text Background
-$base0a: #FFCB6B !default; // Strings, Inherited Class, Markup Code, Diff Inserted
-$base0b: #98C379 !default; // Functions, Methods, Attribute IDs, Headings
-$base0c: #89DDFF !default; // Support, Regular Expressions, Escape Characters, Markup Quotes
-$base0d: #82AAFF !default; // Keywords, Storage, Selector, Markup Italic, Diff Changed
-$base0e: #C792EA !default; // Integers, Boolean, Constants, XML Attributes, Markup Link Url
-$base0f: #FF5370 !default; // Deprecated, Opening/Closing Embedded Language Tags e.g.
+/* BASE16 CODE HIGHLIGHT */
+// Material Theme
+html, html[data-theme="light"] {
+  --base00: #302f2d; // Default Background
+  --base01: #2e3c43; // Lighter Background (Used for status bars) - NOT USED
+  --base02: #314549; // Selection Background
+  --base03: #546e7a; // Comments, Invisible, Line Highlighting
+  --base04: #b2ccd6; // Dark Foreground (Used for status bars) - NOT USED
+  --base05: #eeffff; // Light Foreground (Not often used)
+  --base06: #eeffff; // Light Background (Not often used)
+  --base07: #ffffff; // Default Foreground, Default text color
+  --base08: #f07178; // Parenthesis, Caret, Delimiters, Operators
+  --base09: #f78c6c; // Classes, Markup Bold, Search Text Background
+  --base0a: #ffcb6b; // Strings, Inherited Class, Markup Code, Diff Inserted
+  --base0b: #98c379; // Functions, Methods, Attribute IDs, Headings
+  --base0c: #89ddff; // Support, Regular Expressions, Escape Characters, Markup Quotes
+  --base0d: #82aaff; // Keywords, Storage, Selector, Markup Italic, Diff Changed
+  --base0e: #c792ea; // Integers, Boolean, Constants, XML Attributes, Markup Link Url
+  --base0f: #ff5370; // Deprecated, Opening/Closing Embedded Language Tags e.g.
+}
 
-// base16 Monokai
-//$base00: #272822 !default; // Default Background
-//$base01: #383830 !default; // Lighter Background (Used for status bars)
-//$base02: #49483e !default; // Selection Background
-//$base03: #75715e !default; // Comments, Invisible, Line Highlighting
-//$base04: #a59f85 !default; // Dark Foreground (Used for status bars)
-//$base05: #f8f8f2 !default; // Light Foreground (Not often used)
-//$base06: #f5f4f1 !default; // Light Background (Not often used)
-//$base07: #f9f8f5 !default; // Default text color
-//$base08: #f92672 !default; // Parenthesis, Caret, Delimiters, Operators
-//$base09: #fd971f !default; // Classes, Markup Bold, Search Text Background
-//$base0a: #e6db74 !default; // Strings, Inherited Class, Markup Code, Diff Inserted
-//$base0b: #a6e22e !default; // Functions, Methods, Attribute IDs, Headings
-//$base0c: #a1efe4 !default; // Support, Regular Expressions, Escape Characters, Markup Quotes
-//$base0d: #66d9ef !default; // Keywords, Storage, Selector, Markup Italic, Diff Changed
-//$base0e: #ae81ff !default; // Integers, Boolean, Constants, XML Attributes, Markup Link Url
-//$base0f: #cc6633 !default; // Deprecated, Opening/Closing Embedded Language Tags e.g.
+// Supernova Theme
+html[data-theme="dark"] {
+  --base00: #373e47; // Default Background
+  --base01: #444c56; // Lighter Background (Used for status bars, line number and folding marks)
+  --base02: #545d68; // Selection Background
+  --base03: #909dab; // Comments, Invisible, Line Highlighting
+  --base04: #adbac7; // Dark Foreground (Used for status bars)
+  --base05: #cdd9e5; // Default Foreground, Caret, Delimiters, Operators
+  --base06: #e7f3f4; // Light Foreground (Not often used)
+  --base07: #ffffff; // Light Background (Not often used)
+  --base08: #d40059; // Variables, XML Tags, Markup Link Text, Markup Lists, Diff Deleted
+  --base09: #ff5c00; // Integers, Boolean, Constants, XML Attributes, Markup Link Url
+  --base0a: #d9b600; // Classes, Markup Bold, Search Text Background
+  --base0b: #6bac00; // Strings, Inherited Class, Markup Code, Diff Inserted
+  --base0c: #00a8e0; // Support, Regular Expressions, Escape Characters, Markup Quotes
+  --base0d: #b37eff; // Functions, Methods, Attribute IDs, Headings
+  --base0e: #00af9e; // Keywords, Storage, Selector, Markup Italic, Diff Changed
+  --base0f: #ff66c2; // Deprecated, Opening/Closing Embedded Language Tags, e.g. <?php ?>
+}
 
+// Monokai Theme
+//html[data-theme="dark"] {
+//  --base00: #272822; // Default Background
+//  --base01: #383830; // Lighter Background (Used for status bars)
+//  --base02: #49483e; // Selection Background
+//  --base03: #75715e; // Comments, Invisible, Line Highlighting
+//  --base04: #a59f85; // Dark Foreground (Used for status bars)
+//  --base05: #f8f8f2; // Light Foreground (Not often used)
+//  --base06: #f5f4f1; // Light Background (Not often used)
+//  --base07: #f9f8f5; // Default text color
+//  --base08: #f92672; // Parenthesis, Caret, Delimiters, Operators
+//  --base09: #fd971f; // Classes, Markup Bold, Search Text Background
+//  --base0a: #e6db74; // Strings, Inherited Class, Markup Code, Diff Inserted
+//  --base0b: #a6e22e; // Functions, Methods, Attribute IDs, Headings
+//  --base0c: #a1efe4; // Support, Regular Expressions, Escape Characters, Markup Quotes
+//  --base0d: #66d9ef; // Keywords, Storage, Selector, Markup Italic, Diff Changed
+//  --base0e: #ae81ff; // Integers, Boolean, Constants, XML Attributes, Markup Link Url
+//  --base0f: #cc6633; // Deprecated, Opening/Closing Embedded Language Tags e.g.
+//}