Completed conversion commit.

gulpfile.js

@@ -9,8 +9,10 @@ var gulp          = require('gulp'),               // task runner/manager (even
     notify        = require('gulp-notify'),        // notifies us when a gulp task is completed through a system notifcation
     rename        = require('gulp-rename'),        // allows us to rename files (adding prefixes and suffixes is the main use here).
     autoprefixer  = require('gulp-autoprefixer'),  // great for catching those annoying vendor prefixes on css attributets and values.
-    minify        = require('gulp-cssnano'),       // minify our compiled css. sass can do this natively (kind of), so this is used in conjunction with gulp-sass.
+    minify        = require('gulp-cssnano'),       // minify our compiled css. sass can do this natively (kind of), but this is used instead.
-    del           = require('del');                // del is used to cleanup cache and build files.
+    del           = require('del'),                // del is used to cleanup cache and build files.
+    runseq        = require('run-sequence'),       // quick and dirty way to run a sequence of tasks AS a task itself. gulp.run is deprecated
+    merge         = require('merge');              // "merge multiple objects into one, optionally creating a new cloned object." -npm repo
 
 /*
  * Variables ====================================
@@ -32,7 +34,7 @@ var $supported = [
 
 /*
  * Build CSS Task -------------------------------
- * | $ gulp build
+ * | $ gulp build:css
  * |
  * | 1. compiles scss into css,
  * | 2. autoprefix necessary css attributes/values,
@@ -42,38 +44,64 @@ var $supported = [
  * | 6. place minified file into ./css directory
  * | 7. notify on task completion
  */
-gulp.task('build', function() {
+gulp.task('build:css', function() {
   return gulp.src('./sass/**/*.scss')
-    .pipe(sass({              // 1.
+    .pipe(sass({              /* 1. */
       outputStyle: 'expanded'
     }).on('error', sass.logError))
-    .pipe(autoprefixer({      // 2.
+    .pipe(autoprefixer({      /* 2. */
       browsers: $supported,
       add: true,
       cascade: false
     }))
-    .pipe(gulp.dest('./css')) // 3.
+    .pipe(gulp.dest('./css')) /* 3. */
-    .pipe(minify({            // 4.
+    .pipe(minify({            /* 4. */
       discardUnused: { fontFace: false }
     }))
-    .pipe(rename({            // 5.
+    .pipe(rename({            /* 5. */
       suffix: '.min'
     }))
-    .pipe(gulp.dest('./css')) // 6.
+    .pipe(gulp.dest('./css')) /* 6. */
-    .pipe(notify({            // 7.
+    .pipe(notify({             /* 7. */
       onLast: true,
       message: 'build task complete!'
     }));
 });
 
-/*
+/** Create Config -------------------------------
- * Clean Task -----------------------------------
+ * | $ gulp gen:configFile
+ */
+gulp.task('gen:config', function() {
+  return gulp.src('./sass/config/_variables.scss')
+    .pipe(rename('config/_settings.scss'))
+    .pipe(gulp.dest('./sass'))
+    .pipe(notify({
+      onLast: true,
+      message: 'generated config file successfully!'
+    }));
+});
+
+/** Clean Task ----------------------------------
  * | $ gulp clean
  * |
  * | Ensures that all artifacts/remnants of previous build are gone.
  */
 gulp.task('clean', function() {
-  return del(['./css/**/*.*']);
+  var stream1 = del(['./css/**/*.*']);
+  var stream2 = del(['./sass/config/_settings.scss']);
+
+  return merge(stream1, stream2);
+});
+
+/** Build Task -------------------------------
+ * | $ gulp build
+ */
+gulp.task('build', function(){
+  return runseq(
+    'clean',
+    'build:css',
+    'gen:config'
+  );
 });
 
 /*
@@ -83,7 +111,7 @@ gulp.task('clean', function() {
  * | Great for automating compilation during develpoment.
  */
 gulp.task('watch', function() {
-  gulp.watch('./sass/**/*.scss', ['clean', 'build']);
+  gulp.watch('./sass/**/*.scss', ['build']);
 });
 
 /*

index.html

@@ -4,6 +4,7 @@
     <meta charset="utf-8" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <title>Keyrune</title>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.2.3/foundation.min.css" />
     <link rel="stylesheet" href="css/keyrune.css" />
     <!-- <link rel="stylesheet" href="css/keyrune.min.css" /> -->
     <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />

less/keyrune.less

@@ -4,7 +4,7 @@
 // @import "path.less"; // typography
 // @import "core.less"; // component
 // @import "sizes.less"; // variable
-@import "rarities.less"; // variable
+// @import "rarities.less"; // component
-@import "width.less"; // variable(?)
+// @import "width.less"; // helper
-// @import "icons.less"; // component
+// @import "icons.less"; // componen
-@import "border.less"; // component
+// @import "border.less"; // helper

package.json

@@ -26,7 +26,9 @@
     "gulp-cssnano": "^2.1.2",
     "gulp-notify": "^2.2.0",
     "gulp-rename": "^1.2.2",
-    "gulp-sass": "^2.3.2"
+    "gulp-sass": "^2.3.2",
+    "merge": "^1.2.0",
+    "run-sequence": "^1.2.2"
   },
   "license": "(OFL-1.1 AND MIT)",
   "main": "css/keyrune.css",

sass/components/_helpers.scss

@@ -0,0 +1,48 @@
+// _helpers.scss
+
+/** Setsymbol Size Modifiers ====================
+ */
+@each $size in $setsymbol_sizes {
+  .#{$keyrune_prefix}.#{$keyrune_prefix}-#{nth($size, 1)} {
+    font-size: #{nth($size, 2)};
+  }
+}
+
+.#{$keyrune_prefix}.#{$keyrune_prefix}-fw {
+  width: $setsymbol_fixed_size_width;
+  text-align: $setsymbol_fixed_size_text_align;
+}
+
+/** Setsymbol No Border =========================
+ * | This class can remain a singleton since it is generic, making
+ * | it a helper class.
+ */
+.#{$keyrune_prefix}.#{$keyrune_prefix}-no-border {
+  -webkit-text-stroke: $setsymbol_no_border;
+  text-stroke: $setsymbol_no_border;
+}
+
+/** Setsymbol Border ============================
+ */
+.#{$keyrune_prefix}.#{$keyrune_prefix}-border {
+  &:after {
+    content: $setsymbol_border_after_content;
+    position: $setsymbol_border_after_position;
+    left: $setsymbol_border_after_left;
+    top: $setsymbol_border_after_top;
+    color: $setsymbol_border_after_color;
+    font-size: $setsymbol_border_after_font_size;
+    z-index: $setsymbol_border_after_z_index;
+    background: $setsymbol_border_after_background;
+    -webkit-text-stroke: $setsymbol_border_after_text_stroke;
+    -webkit-background-clip: $setsymbol_border_after_background_clip;
+    -webkit-text-fill-color: $setsymbol_border_after_text_fill_color;
+  }
+
+  @each $set in $mtg_setlist_borders {
+    /* #{nth($set, 1)} */
+    .#{$keyrune_prefix}.#{$keyrune_prefix}-#{nth($set, 2)}:after {
+      content: "#{nth($set, 3)}";
+    }
+  }
+}

sass/components/_rarities.scss

@@ -1,19 +1,25 @@
-// TODO: Fix background color leaking on gradient class.
+// _rarities.scs
-// TODO: Fix text-stroke issue on non-gradient classes.
+
+/** Setsymbol Rarities ==========================
+ * | Strangely enough, autoprefixer doesn't wanna prefix
+ * | some of the things in here properly. Either way, I kept those
+ * | hard-coded prefxed to ensure it to work!
+ */
 @each $scheme in $rarity_palette {
+  /* #{nth($scheme, 1)} */
   .#{$keyrune_prefix}.#{$keyrune_prefix}-#{nth($scheme, 1)} {
     color: #{nth($scheme, 2)};
 
     &.#{$keyrune_prefix}-grad {
-      background: gradient(linear, left top, right top, color-stop(1%, #{nth($scheme, 3)}), color-stop(50%, #{nth($scheme, 4)}), color-stop(100%, #{nth($scheme, 3)}));
+      // webkit outline/gradient
-      background: linear-gradient(left, #{nth($scheme, 3)} 1%, #{nth($scheme, 4)} 50%, #{nth($scheme, 3)} 100%);
+      /* Chrome, Safari4+ */
-      text-stroke: 0.03em #{nth($scheme, 5)};
+      background: -webkit-gradient(linear, left top, right top, color-stop( $setsymbol_color_stop1, #{nth($scheme, 3)} ), color-stop( $setsymbol_color_stop2, #{nth($scheme, 4)} ), color-stop( $setsymbol_color_stop3, #{nth($scheme, 3)} ));
-      background-clip: text;
+      /* Chrome10+, Safari5.1+ */
-      text-fill-color: transparent;
+      background: -webkit-linear-gradient(left, #{nth($scheme, 3)} $setsymbol_color_stop1, #{nth($scheme, 4)} $setsymbol_color_stop2, #{nth($scheme, 3)} $setsymbol_color_stop3);
-
+      -webkit-text-stroke: $setsymbol_text_stroke #{nth($scheme, 5)};
-      &.#{$keyrune_prefix}-no-border {
+      -webkit-text-fill-color: $setsymbol_text_fill_color;
-        text-stroke: 0;
+      -webkit-background-clip: $setsymbol_background_clip;
-      }
+      background-clip: $setsymbol_background_clip;
     }
   }
 }

sass/components/_setsymbol.scss

@@ -1,4 +1,7 @@
-// set symbol class
+// _setsymbol.scss
+
+/** Setsymbol Base Class ========================
+ */
 .#{$keyrune_prefix} {
   display: $setsymbol_display;
   font: $setsymbol_font;
@@ -17,25 +20,20 @@
   &:before {
     content: "#{$setsymbol_default_content}";
   }
-
-  // set symbol size modifiers
-  @each $size in $symbol_sizes {
-    &.#{$keyrune_prefix}-#{nth($size, 1)} {
-      font-size: #{nth($size, 2)};
-    }
-  }
 }
 
-// set symbol glyphs
+/** Setsymbol Glyphs ============================
-// Originally, this was inside of the .#{$keyrune_prefix} class above,
+ * | Originally, this was inside of the .#{$keyrune_prefix} class above,
-// and used a '&' parent selector.
+ * | and used a '&' parent selector.
-// However, the loop caused a strange
+ * | However, the loop caused a strange
-// interatction and printed all of the the set name comments above all
+ * | interatction and printed all of the the set name comments above all
-// of the set glyh classes; making a giant block of comments on top of
+ * | of the set glyh classes; making a giant block of comments on top of
-// a huge list of classes.
+ * | a huge list of classes.
-//
+ * |
-// Temporary solution for proper selector specificity was to prefix the
+ * | Temporary solution for proper selector specificity was to prefix the
-// class with the same variable as the main .ss class above.
+ * | class with the same variable as the main .ss class above. Not really
+ * | best practice (DRY, etc...) but fixes weird compilation.
+ */
 @each $set in $mtg_setlist {
   /* #{nth($set, 1)} */
   .#{$keyrune_prefix}.#{$keyrune_prefix}-#{nth($set, 2)}:before {

sass/components/_typography.scss

@@ -1,11 +1,18 @@
+// _typography.scss
+
+/** Keyrune Font-Family =========================
+ * | Concatenation is purely for readability purposes.
+ * |
+ * | TODO: Might come back and create a function to fetch font formats from an array. benefit is shorter syntax.
+ */
 @font-face {
   font-family: "#{$keyrune_font_face}";
-  src:url( '#{$global_font_path}/keyrune.eot?v=#{$keyrune_version}' );
+  src:url( '#{$global_font_path}' + '/keyrune.eot?v=' + '#{$keyrune_version}' );
-  src:url( '#{$global_font_path}/keyrune.eot?#iefix&v=#{$keyrune_version}' ) format( 'embedded-opentype' ),
+  src:url( '#{$global_font_path}' + '/keyrune.eot?#iefix&v=' + '#{$keyrune_version}' ) format( 'embedded-opentype' ),
-      url( '#{$global_font_path}/keyrune.woff2?v=#{$keyrune_version}' ) format( 'woff2' ),
+      url( '#{$global_font_path}' + '/keyrune.woff2?v=' + '#{$keyrune_version}' ) format( 'woff2' ),
-      url( '#{$global_font_path}/keyrune.woff?v=#{$keyrune_version}' ) format( 'woff' ),
+      url( '#{$global_font_path}' + '/keyrune.woff?v=' + '#{$keyrune_version}' ) format( 'woff' ),
-      url( '#{$global_font_path}/keyrune.ttf?v=#{$keyrune_version}' ) format( 'truetype' ),
+      url( '#{$global_font_path}' + '/keyrune.ttf?v=' + '#{$keyrune_version}' ) format( 'truetype' ),
-      url( '#{$global_font_path}/keyrune.svg?v=#{$keyrune_version}#keyrune' ) format( 'svg' );
+      url( '#{$global_font_path}' + '/keyrune.svg?v=' + '#{$keyrune_version}' + '#keyrune' ) format( 'svg' );
-  font-weight: normal;
+  font-weight: $keyrune_font_weight;
-  font-style: normal;
+  font-style: $keyrune_font_style;
 }

sass/config/_settings.scss

@@ -1 +1,279 @@
-// this is a generated copy of _variables.scss for users.
+// _variables.scss
+
+// Table of Contents: ==========================
+// 1. Global
+// 2. Keyrune
+// 3. Set Symbol
+// 4. Keyrune Colors
+// 5. Helpers
+// 6. MtG Setlist
+//
+
+// 1. Global ===================================
+//
+$global_font_path:  '../fonts' !default;
+$global_font_size:  14px !default;
+
+// 2. Keyrune ==================================
+//
+$keyrune_font_face:               "Keyrune" !default;
+$keyrune_version:                 '1.7.2' !default;
+$keyrune_prefix:                  'ss' !default;
+$keyrune_font_weight:             normal !default;
+$keyrune_font_style:              normal !default;
+
+// 3. Set Symbol ===============================
+//
+$setsymbol_display:                 inline-block !default;
+$setsymbol_font:                    normal normal normal $global_font_size/1 $keyrune_font_face !default;
+$setsymbol_font_size:               inherit !default;
+$setsymbol_line_height:             1em !default;
+$setsymbol_text_rendering:          auto !default;
+$setsymbol_transform:               translate(0, 0) !default;
+$setsymbol_speak:                   none !default;
+$setsymbol_text_transform:          none !default;
+$setsymbol_vertical_align:          middle !default;
+$setsymbol_webkit_font_smoothing:   antialiased !default;
+$setsymbol_moz_font_smoothing:      grayscale !default;
+$setsymbol_default_content:         "\e684" !default;
+
+$setsymbol_color_stop1:             0% !default;
+$setsymbol_color_stop2:             50% !default;
+$setsymbol_color_stop3:             100% !default;
+$setsymbol_text_stroke:             0.03em !default;
+$setsymbol_text_fill_color:         transparent !default;
+$setsymbol_background_clip:         text !default;
+
+// 4. Keyrune Colors ============================
+//
+$rarity_palette: (
+  ('common', #1a1718, #302b2c, #474040, #000),
+  ('uncommon', #707883, #5a6572, #9e9e9e, #111),
+  ('rare', #a58e4a, #876a3b, #dfbd6b, #333),
+  ('mythic', #bf4427, #b21f0f, #f38300, #333)
+) !default;
+
+$white: #fff;
+
+// 5. Helpers ==================================
+//
+$setsymbol_sizes: (
+  '2x': 2em,
+  '3x': 3em,
+  '4x': 4em,
+  '5x': 5em,
+  '6x': 6em
+) !default;
+
+$setsymbol_fixed_size_width:        calc(18em / 14px) !default; // TODO: might have to light into implementing a units component. perhaps switch to
+$setsymbol_fixed_size_text_align:   center !default;
+
+$setsymbol_no_border:               0 !default;
+
+$setsymbol_border_after_content:            "" !default;
+$setsymbol_border_after_position:           absolute !default;
+$setsymbol_border_after_left:               -.05em !default;   // TODO: change to -0.05em if doesn't effect visual styles.
+$setsymbol_border_after_top:                .0em !default;     // TODO: change to 0.0em "
+$setsymbol_border_after_z_index:            -1 !default;
+$setsymbol_border_after_color:              $white !default;
+$setsymbol_border_after_font_size:          1.15em !default;
+$setsymbol_border_after_background:         $white !default;
+$setsymbol_border_after_text_stroke:        0.05em $white !default;
+$setsymbol_border_after_background_clip:    $setsymbol_background_clip !default;
+$setsymbol_border_after_text_fill_color:    $setsymbol_text_fill_color !default;
+
+// not really sure what to call this array, although I notice it is for special borders.
+$mtg_setlist_borders: (
+  ("Vanguard", 'van', "\e655"),
+  ("Archenemy", 'arc', "\e657"),
+  ("Commander", 'cmd', "\e658"),
+  ("Commander's Arsenal", 'cm1', "\e65a"),
+  ("Commander 2013", 'c13', "\e65b"),
+  ("Commander 2014", 'c14', "\e65d"),
+  ("Commander 2015", 'c15', "\e900"),
+  ("Planechase 2009", 'hop', "\e656"),
+  ("Planechase 2012", 'pc2', "\e659"),
+  ("Conspiracy", 'cns', "\e65c")
+);
+
+// 6. MtG Setlist ==============================
+// Legend:
+// (Set_Name, Set_Code, Set_Glyph)
+//
+$mtg_setlist: (
+  ("Alpha", 'lea', "\e600"),
+  ("Beta", 'leb', "\e601"),
+  ("Unlimited", '2ed', "\e602"),
+  ("Revised", '3ed', "\e603"),
+  ("4th Edition", '4ed', "\e604"),
+  ("Summer Magic", 'psum', "\e605"),
+  ("5th Edition", '5ed', "\e606"),
+  ("6th Edition", '6ed', "\e607"),
+  ("7th Edition", '7ed', "\e608"),
+  ("8th Edition", '8ed', "\e609"),
+  ("9th Edition", '9ed', "\e60a"),
+  ("10th Edition", '10e', "\e60b"),
+  ("Magic 2010", 'm10', "\e60c"),
+  ("Magic 2011", 'm11', "\e60d"),
+  ("Magic 2012", 'm12', "\e60e"),
+  ("Magic 2013", 'm13', "\e60f"),
+  ("Magic 2014", 'm14', "\e610"),
+  ("Magic 2015", 'm15', "\e611"),
+  ("Core background", 'bcore', "\e612"),
+  ("Magic Origins", 'ori', "\e697"),
+  ("Arabian Nights", 'arn', "\e613"),
+  ("Antiquities", 'atq', "\e614"),
+  ("Legends", 'leg', "\e615"),
+  ("The Dark", 'drk', "\e616"),
+  ("Fallen Empires", 'fem', "\e617"),
+  ("Homelands", 'hml', "\e618"),
+  ("Ice Age", 'ice', "\e619"),
+  ("Alliances", 'all', "\e61a"),
+  ("Coldsnap", 'csp', "\e61b"),
+  ("Mirage", 'mir', "\e61c"),
+  ("Visions", 'vis', "\e61d"),
+  ("Weatherlight", 'wth', "\e61e"),
+  ("Tempest", 'tmp', "\e61f"),
+  ("Stronghold", 'sth', "\e620"),
+  ("Exodus", 'exo', "\e621"),
+  ("Urza's Saga", 'usg', "\e622"),
+  ("Urza's Legacy", 'ulg', "\e623"),
+  ("Urza's Destiny", 'uds', "\e624"),
+  ("Mercadian Masque", 'mmq', "\e625"),
+  ("Nemesis", 'nms', "\e626"),
+  ("Prophecy", 'pcy', "\e627"),
+  ("Invasion", 'inv', "\e628"),
+  ("Planeshift", 'pls', "\e629"),
+  ("Apocalypse", 'apc', "\e62a"),
+  ("Odyssey", 'ody', "\e62b"),
+  ("Torment", 'tor', "\e62c"),
+  ("Judgement", 'jud', "\e62d"),
+  ("Onslaught", 'ons', "\e62e"),
+  ("Legions", 'lgn', "\e62f"),
+  ("Scourge", 'scg', "\e630"),
+  ("Mirrodin", 'mrd', "\e631"),
+  ("Darksteel", 'dst', "\e632"),
+  ("5th Dawn", '5dn', "\e633"),
+  ("Champions of", 'chk', "\e634"),
+  ("Betrayers of", 'bok', "\e635"),
+  ("Saviors of Kamigawa", 'sok', "\e636"),
+  ("Ravnica", 'rav', "\e637"),
+  ("Guildpact", 'gpt', "\e638"),
+  ("Dissension", 'dis', "\e639"),
+  ("Time Spiral", 'tsp', "\e63a"),
+  ("Planeshift", 'plc', "\e63b"),
+  ("Future Sight", 'fut', "\e63c"),
+  ("Lorwyn", 'lrw', "\e63d"),
+  ("Morningtide", 'mor', "\e63e"),
+  ("Shadowmoor", 'shm', "\e63f"),
+  ("Eventide", 'eve', "\e640"),
+  ("Shards of Alara", 'ala', "\e641"),
+  ("Conflux", 'con', "\e642"),
+  ("Alara Reborn", 'arb', "\e643"),
+  ("Zendikar", 'zen', "\e644"),
+  ("Worldwake", 'wwk', "\e645"),
+  ("Rise of Eldrazi", 'roe', "\e646"),
+  ("Scars of Mirrodin", 'som', "\e647"),
+  ("Mirrodin Besieged", 'mbs', "\e648"),
+  ("New Phyrexia", 'nph', "\e649"),
+  ("Innistrad", 'isd', "\e64a"),
+  ("Dark Ascension", 'dka', "\e64b"),
+  ("Avacyn Restored", 'avr', "\e64c"),
+  ("Return to Ravnica", 'rtr', "\e64d"),
+  ("Gatecrash", 'gtc', "\e64e"),
+  ("Dragon's Maze", 'dgm', "\e64f"),
+  ("Theros", 'ths', "\e650"),
+  ("Born of the Gods", 'bng', "\e651"),
+  ("Journey into Nyx", 'jou', "\e652"),
+  ("Khans of Tarkir", 'ktk', "\e653"),
+  ("Fate Reforged", 'frf', "\e654"),
+  ("Dragons of Tarkir", 'dtk', "\e693"),
+  ("Battle for Zendikar", 'bfz', "\e699"),
+  ("Oath of the", 'ogw', "\e901"),
+  ("Shadows Over", 'soi', "\e902"),
+  ("Eldritch Moon", 'emn', "\e90b"),
+  ("Kaladesh", 'kld', "\e90e"),
+  ("Aether Revolt", 'aer', "\e90f"),
+  ("Vanguard", 'van', "\e655"),
+  ("Planechase 2009", 'hop', "\e656"),
+  ("Archenemy", 'arc', "\e657"),
+  ("Commander", 'cmd', "\e658"),
+  ("Planechase 2012", 'pc2', "\e659"),
+  ("Commander's Arsenal", 'cm1', "\e65a"),
+  ("Commander 2013", 'c13', "\e65b"),
+  ("Conspiracy", 'cns', "\e65c"),
+  ("Commander 2014", 'c14', "\e65d"),
+  ("Commander 2015", 'c15', "\e900"),
+  ("Conspiracy 2, Take", 'cn2', "\e904"),
+  ("Commander 2016", 'c16', "\e910"),
+  ("Planechase", 'pca', "\e911"),
+  ("Chronicles", 'chr', "\e65e"),
+  ("Anthologies", 'ath', "\e65f"),
+  ("Battle Royale", 'brb', "\e660"),
+  ("Beatdown", 'btd', "\e661"),
+  ("Deckmasters", 'dkm', "\e662"),
+  ("Modern Masters", 'mma', "\e663"),
+  ("Modern Masters 2015", 'mm2', "\e695"),
+  ("Eternal Masters", 'ema', "\e903"),
+  ("Modern Masters 2017", 'mm3', "\e912"),
+  ("Portal", 'por', "\e664"),
+  ("Portal 2", 'po2', "\e665"),
+  ("Portal 3 Kingdoms", 'ptk', "\e666"),
+  ("Starter 1999", 's99', "\e667"),
+  ("Starter 2000", 's00', "\e668"),
+  ("Welcome Deck 2016", 'w16', "\e907"),
+  ("Elves vs. Goblins", 'evg', "\e669"),
+  ("Jace vs. Chandra", 'dd2', "\e66a"),
+  ("Divine vs. Demonic", 'ddc', "\e66b"),
+  ("Garruk vs. Liliana", 'ddd', "\e66c"),
+  ("Phyrexia vs.", 'dde', "\e66d"),
+  ("Elspeth vs.", 'ddf', "\e66e"),
+  ("Knights vs. Dragons", 'ddg', "\e66f"),
+  ("Ajani vs. Nicol", 'ddh', "\e670"),
+  ("Venser vs. Koth", 'ddi', "\e671"),
+  ("Izzet vs. Golgari", 'ddj', "\e672"),
+  ("Sorin vs. Tibalt", 'ddk', "\e673"),
+  ("Heroes vs. Monsters", 'ddl', "\e674"),
+  ("Jace vs. Vraska", 'ddm', "\e675"),
+  ("Speed vs. Cunning", 'ddn', "\e676"),
+  ("Kiora vs. Elspeth", 'ddo', "\e677"),
+  ("Zendikar vs.", 'ddp', "\e698"),
+  ("Blessed vs. Cursed", 'ddq', "\e908"),
+  ("Nissa vs. Ob", 'ddr', "\e90d"),
+  ("Dragons", 'drb', "\e678"),
+  ("Exiled", 'v09', "\e679"),
+  ("Relics", 'v10', "\e67a"),
+  ("Legends", 'v11', "\e67b"),
+  ("Realms", 'v12', "\e67c"),
+  ("Twenty", 'v13', "\e67d"),
+  ("Annihilation", 'v14', "\e67e"),
+  ("Angels", 'v15', "\e905"),
+  ("Lore", 'v16', "\e906"),
+  ("Slivers", 'h09', "\e67f"),
+  ("Fire & Lightning", 'pd2', "\e680"),
+  ("Graveborn", 'pd3', "\e681"),
+  ("Modern Event Deck", 'md1', "\e682"),
+  ("Guru", 'pgru', "\e683"),
+  ("Magic symbol", 'pmtg1', "\e684"),
+  ("Magic symbol", 'pmtg2', "\e685"),
+  ("Leaf", 'pleaf', "\e686"),
+  ("Media Insert", 'pmei', "\e687"),
+  ("DCI (Arena)", 'parl', "\e688"),
+  ("Dragons", 'dpa', "\e689"),
+  ("Book Insert", 'pbook', "\e68a"),
+  ("Astral", 'past', "\e68b"),
+  ("Arena logo", 'parl2', "\e68c"),
+  ("Zendikar", 'exp', "\e69a"),
+  ("Salvat 2005", 'psalvat05', "\e909"),
+  ("Salvat 2011", 'psalvat11', "\e90a"),
+  ("Masterpieces,", 'mp1', "\e913"),
+  ("Masters Edition", 'med', "\e68d"),
+  ("Masters Edition II", 'me2', "\e68e"),
+  ("Masters Edition III", 'me3', "\e68f"),
+  ("Masters Edition IV", 'me4', "\e690"),
+  ("Tempest Remastered", 'tpr', "\e694"),
+  ("Vintage Masters", 'vma', "\e696"),
+  ("Legendary Cube", 'xlcu', "\e90c"),
+  ("Unglued", 'ugl', "\e691"),
+  ("Unhinged", 'unh', "\e692")
+) !default;

sass/config/_variables.scss

@@ -1,40 +1,29 @@
 // _variables.scss
 
-// Table of Contents: ===========================
+// Table of Contents: ==========================
 // 1. Global
 // 2. Keyrune
-// 3. Symbol Sizes
+// 3. Set Symbol
-// 4. Rarity Colors
+// 4. Keyrune Colors
-// 5. Set Symbol
+// 5. Helpers
 // 6. MtG Setlist
+//
 
-// 1. Global ====================================
+// 1. Global ===================================
+//
 $global_font_path:  '../fonts' !default;
 $global_font_size:  14px !default;
 
-// 2. Keyrune ===================================
+// 2. Keyrune ==================================
+//
 $keyrune_font_face:               "Keyrune" !default;
 $keyrune_version:                 '1.7.2' !default;
 $keyrune_prefix:                  'ss' !default;
+$keyrune_font_weight:             normal !default;
+$keyrune_font_style:              normal !default;
 
-// 3. Symbol Sizes ==============================
+// 3. Set Symbol ===============================
-$symbol_sizes: (
+//
-  '2x': 2em,
-  '3x': 3em,
-  '4x': 4em,
-  '5x': 5em,
-  '6x': 6em
-) !default;
-
-// 4. Rarity Colors =============================
-$rarity_palette: (
-  ('common', #1a1718, #302b2c, #474040, #000),
-  ('uncommon', #707883, #5a6572, #9e9e9e, #111),
-  ('rare', #a58e4a, #876a3b, #dfbd6b, #333),
-  ('mythic', #bf4427, #b21f0f, #f38300, #333)
-) !default;
-
-// 5. Set Symbol ================================
 $setsymbol_display:                 inline-block !default;
 $setsymbol_font:                    normal normal normal $global_font_size/1 $keyrune_font_face !default;
 $setsymbol_font_size:               inherit !default;
@@ -48,182 +37,243 @@ $setsymbol_webkit_font_smoothing:   antialiased !default;
 $setsymbol_moz_font_smoothing:      grayscale !default;
 $setsymbol_default_content:         "\e684" !default;
 
-// MtG Setlist ===================================
+$setsymbol_color_stop1:             0% !default;
-// (Set_Name, Set_Code, Set_Glyph)
+$setsymbol_color_stop2:             50% !default;
-$mtg_setlist: (
+$setsymbol_color_stop3:             100% !default;
-  ("Alpha", 'lea', "\e600")
+$setsymbol_text_stroke:             0.03em !default;
-  ("Beta", 'leb', "\e601")
+$setsymbol_text_fill_color:         transparent !default;
-  ("Unlimited", '2ed', "\e602")
+$setsymbol_background_clip:         text !default;
-  ("Revised", '3ed', "\e603")
+
-  ("4th Edition", '4ed', "\e604")
+// 4. Keyrune Colors ============================
-  ("Summer Magic", 'psum', "\e605")
+//
-  ("5th Edition", '5ed', "\e606")
+$rarity_palette: (
-  ("6th Edition", '6ed', "\e607")
+  ('common', #1a1718, #302b2c, #474040, #000),
-  ("7th Edition", '7ed', "\e608")
+  ('uncommon', #707883, #5a6572, #9e9e9e, #111),
-  ("8th Edition", '8ed', "\e609")
+  ('rare', #a58e4a, #876a3b, #dfbd6b, #333),
-  ("9th Edition", '9ed', "\e60a")
+  ('mythic', #bf4427, #b21f0f, #f38300, #333)
-  ("10th Edition", '10e', "\e60b")
+) !default;
-  ("Magic 2010", 'm10', "\e60c")
+
-  ("Magic 2011", 'm11', "\e60d")
+$white: #fff;
-  ("Magic 2012", 'm12', "\e60e")
+
-  ("Magic 2013", 'm13', "\e60f")
+// 5. Helpers ==================================
-  ("Magic 2014", 'm14', "\e610")
+//
-  ("Magic 2015", 'm15', "\e611")
+$setsymbol_sizes: (
-  ("Core background", 'bcore', "\e612")
+  '2x': 2em,
-  ("Magic Origins", 'ori', "\e697")
+  '3x': 3em,
-  ("Arabian Nights", 'arn', "\e613")
+  '4x': 4em,
-  ("Antiquities", 'atq', "\e614")
+  '5x': 5em,
-  ("Legends", 'leg', "\e615")
+  '6x': 6em
-  ("The Dark", 'drk', "\e616")
+) !default;
-  ("Fallen Empires", 'fem', "\e617")
+
-  ("Homelands", 'hml', "\e618")
+$setsymbol_fixed_size_width:        calc(18em / 14px) !default; // TODO: might have to light into implementing a units component. perhaps switch to
-  ("Ice Age", 'ice', "\e619")
+$setsymbol_fixed_size_text_align:   center !default;
-  ("Alliances", 'all', "\e61a")
+
-  ("Coldsnap", 'csp', "\e61b")
+$setsymbol_no_border:               0 !default;
-  ("Mirage", 'mir', "\e61c")
+
-  ("Visions", 'vis', "\e61d")
+$setsymbol_border_after_content:            "" !default;
-  ("Weatherlight", 'wth', "\e61e")
+$setsymbol_border_after_position:           absolute !default;
-  ("Tempest", 'tmp', "\e61f")
+$setsymbol_border_after_left:               -.05em !default;   // TODO: change to -0.05em if doesn't effect visual styles.
-  ("Stronghold", 'sth', "\e620")
+$setsymbol_border_after_top:                .0em !default;     // TODO: change to 0.0em "
-  ("Exodus", 'exo', "\e621")
+$setsymbol_border_after_z_index:            -1 !default;
-  ("Urza's Saga", 'usg', "\e622")
+$setsymbol_border_after_color:              $white !default;
-  ("Urza's Legacy", 'ulg', "\e623")
+$setsymbol_border_after_font_size:          1.15em !default;
-  ("Urza's Destiny", 'uds', "\e624")
+$setsymbol_border_after_background:         $white !default;
-  ("Mercadian Masque", 'mmq', "\e625")
+$setsymbol_border_after_text_stroke:        0.05em $white !default;
-  ("Nemesis", 'nms', "\e626")
+$setsymbol_border_after_background_clip:    $setsymbol_background_clip !default;
-  ("Prophecy", 'pcy', "\e627")
+$setsymbol_border_after_text_fill_color:    $setsymbol_text_fill_color !default;
-  ("Invasion", 'inv', "\e628")
+
-  ("Planeshift", 'pls', "\e629")
+// not really sure what to call this array, although I notice it is for special borders.
-  ("Apocalypse", 'apc', "\e62a")
+$mtg_setlist_borders: (
-  ("Odyssey", 'ody', "\e62b")
+  ("Vanguard", 'van', "\e655"),
-  ("Torment", 'tor', "\e62c")
+  ("Archenemy", 'arc', "\e657"),
-  ("Judgement", 'jud', "\e62d")
+  ("Commander", 'cmd', "\e658"),
-  ("Onslaught", 'ons', "\e62e")
+  ("Commander's Arsenal", 'cm1', "\e65a"),
-  ("Legions", 'lgn', "\e62f")
+  ("Commander 2013", 'c13', "\e65b"),
-  ("Scourge", 'scg', "\e630")
+  ("Commander 2014", 'c14', "\e65d"),
-  ("Mirrodin", 'mrd', "\e631")
+  ("Commander 2015", 'c15', "\e900"),
-  ("Darksteel", 'dst', "\e632")
+  ("Planechase 2009", 'hop', "\e656"),
-  ("5th Dawn", '5dn', "\e633")
+  ("Planechase 2012", 'pc2', "\e659"),
-  ("Champions of", 'chk', "\e634")
-  ("Betrayers of", 'bok', "\e635")
-  ("Saviors of Kamigawa", 'sok', "\e636")
-  ("Ravnica", 'rav', "\e637")
-  ("Guildpact", 'gpt', "\e638")
-  ("Dissension", 'dis', "\e639")
-  ("Time Spiral", 'tsp', "\e63a")
-  ("Planeshift", 'plc', "\e63b")
-  ("Future Sight", 'fut', "\e63c")
-  ("Lorwyn", 'lrw', "\e63d")
-  ("Morningtide", 'mor', "\e63e")
-  ("Shadowmoor", 'shm', "\e63f")
-  ("Eventide", 'eve', "\e640")
-  ("Shards of Alara", 'ala', "\e641")
-  ("Conflux", 'con', "\e642")
-  ("Alara Reborn", 'arb', "\e643")
-  ("Zendikar", 'zen', "\e644")
-  ("Worldwake", 'wwk', "\e645")
-  ("Rise of Eldrazi", 'roe', "\e646")
-  ("Scars of Mirrodin", 'som', "\e647")
-  ("Mirrodin Besieged", 'mbs', "\e648")
-  ("New Phyrexia", 'nph', "\e649")
-  ("Innistrad", 'isd', "\e64a")
-  ("Dark Ascension", 'dka', "\e64b")
-  ("Avacyn Restored", 'avr', "\e64c")
-  ("Return to Ravnica", 'rtr', "\e64d")
-  ("Gatecrash", 'gtc', "\e64e")
-  ("Dragon's Maze", 'dgm', "\e64f")
-  ("Theros", 'ths', "\e650")
-  ("Born of the Gods", 'bng', "\e651")
-  ("Journey into Nyx", 'jou', "\e652")
-  ("Khans of Tarkir", 'ktk', "\e653")
-  ("Fate Reforged", 'frf', "\e654")
-  ("Dragons of Tarkir", 'dtk', "\e693")
-  ("Battle for Zendikar", 'bfz', "\e699")
-  ("Oath of the", 'ogw', "\e901")
-  ("Shadows Over", 'soi', "\e902")
-  ("Eldritch Moon", 'emn', "\e90b")
-  ("Kaladesh", 'kld', "\e90e")
-  ("Aether Revolt", 'aer', "\e90f")
-  ("Vanguard", 'van', "\e655")
-  ("Planechase 2009", 'hop', "\e656")
-  ("Archenemy", 'arc', "\e657")
-  ("Commander", 'cmd', "\e658")
-  ("Planechase 2012", 'pc2', "\e659")
-  ("Commander's Arsenal", 'cm1', "\e65a")
-  ("Commander 2013", 'c13', "\e65b")
   ("Conspiracy", 'cns', "\e65c")
-  ("Commander 2014", 'c14', "\e65d")
+);
-  ("Commander 2015", 'c15', "\e900")
+
-  ("Conspiracy 2, Take", 'cn2', "\e904")
+// 6. MtG Setlist ==============================
-  ("Commander 2016", 'c16', "\e910")
+// Legend:
-  ("Planechase", 'pca', "\e911")
+// (Set_Name, Set_Code, Set_Glyph)
-  ("Chronicles", 'chr', "\e65e")
+//
-  ("Anthologies", 'ath', "\e65f")
+$mtg_setlist: (
-  ("Battle Royale", 'brb', "\e660")
+  ("Alpha", 'lea', "\e600"),
-  ("Beatdown", 'btd', "\e661")
+  ("Beta", 'leb', "\e601"),
-  ("Deckmasters", 'dkm', "\e662")
+  ("Unlimited", '2ed', "\e602"),
-  ("Modern Masters", 'mma', "\e663")
+  ("Revised", '3ed', "\e603"),
-  ("Modern Masters 2015", 'mm2', "\e695")
+  ("4th Edition", '4ed', "\e604"),
-  ("Eternal Masters", 'ema', "\e903")
+  ("Summer Magic", 'psum', "\e605"),
-  ("Modern Masters 2017", 'mm3', "\e912")
+  ("5th Edition", '5ed', "\e606"),
-  ("Portal", 'por', "\e664")
+  ("6th Edition", '6ed', "\e607"),
-  ("Portal 2", 'po2', "\e665")
+  ("7th Edition", '7ed', "\e608"),
-  ("Portal 3 Kingdoms", 'ptk', "\e666")
+  ("8th Edition", '8ed', "\e609"),
-  ("Starter 1999", 's99', "\e667")
+  ("9th Edition", '9ed', "\e60a"),
-  ("Starter 2000", 's00', "\e668")
+  ("10th Edition", '10e', "\e60b"),
-  ("Welcome Deck 2016", 'w16', "\e907")
+  ("Magic 2010", 'm10', "\e60c"),
-  ("Elves vs. Goblins", 'evg', "\e669")
+  ("Magic 2011", 'm11', "\e60d"),
-  ("Jace vs. Chandra", 'dd2', "\e66a")
+  ("Magic 2012", 'm12', "\e60e"),
-  ("Divine vs. Demonic", 'ddc', "\e66b")
+  ("Magic 2013", 'm13', "\e60f"),
-  ("Garruk vs. Liliana", 'ddd', "\e66c")
+  ("Magic 2014", 'm14', "\e610"),
-  ("Phyrexia vs.", 'dde', "\e66d")
+  ("Magic 2015", 'm15', "\e611"),
-  ("Elspeth vs.", 'ddf', "\e66e")
+  ("Core background", 'bcore', "\e612"),
-  ("Knights vs. Dragons", 'ddg', "\e66f")
+  ("Magic Origins", 'ori', "\e697"),
-  ("Ajani vs. Nicol", 'ddh', "\e670")
+  ("Arabian Nights", 'arn', "\e613"),
-  ("Venser vs. Koth", 'ddi', "\e671")
+  ("Antiquities", 'atq', "\e614"),
-  ("Izzet vs. Golgari", 'ddj', "\e672")
+  ("Legends", 'leg', "\e615"),
-  ("Sorin vs. Tibalt", 'ddk', "\e673")
+  ("The Dark", 'drk', "\e616"),
-  ("Heroes vs. Monsters", 'ddl', "\e674")
+  ("Fallen Empires", 'fem', "\e617"),
-  ("Jace vs. Vraska", 'ddm', "\e675")
+  ("Homelands", 'hml', "\e618"),
-  ("Speed vs. Cunning", 'ddn', "\e676")
+  ("Ice Age", 'ice', "\e619"),
-  ("Kiora vs. Elspeth", 'ddo', "\e677")
+  ("Alliances", 'all', "\e61a"),
-  ("Zendikar vs.", 'ddp', "\e698")
+  ("Coldsnap", 'csp', "\e61b"),
-  ("Blessed vs. Cursed", 'ddq', "\e908")
+  ("Mirage", 'mir', "\e61c"),
-  ("Nissa vs. Ob", 'ddr', "\e90d")
+  ("Visions", 'vis', "\e61d"),
-  ("Dragons", 'drb', "\e678")
+  ("Weatherlight", 'wth', "\e61e"),
-  ("Exiled", 'v09', "\e679")
+  ("Tempest", 'tmp', "\e61f"),
-  ("Relics", 'v10', "\e67a")
+  ("Stronghold", 'sth', "\e620"),
-  ("Legends", 'v11', "\e67b")
+  ("Exodus", 'exo', "\e621"),
-  ("Realms", 'v12', "\e67c")
+  ("Urza's Saga", 'usg', "\e622"),
-  ("Twenty", 'v13', "\e67d")
+  ("Urza's Legacy", 'ulg', "\e623"),
-  ("Annihilation", 'v14', "\e67e")
+  ("Urza's Destiny", 'uds', "\e624"),
-  ("Angels", 'v15', "\e905")
+  ("Mercadian Masque", 'mmq', "\e625"),
-  ("Lore", 'v16', "\e906")
+  ("Nemesis", 'nms', "\e626"),
-  ("Slivers", 'h09', "\e67f")
+  ("Prophecy", 'pcy', "\e627"),
-  ("Fire & Lightning", 'pd2', "\e680")
+  ("Invasion", 'inv', "\e628"),
-  ("Graveborn", 'pd3', "\e681")
+  ("Planeshift", 'pls', "\e629"),
-  ("Modern Event Deck", 'md1', "\e682")
+  ("Apocalypse", 'apc', "\e62a"),
-  ("Guru", 'pgru', "\e683")
+  ("Odyssey", 'ody', "\e62b"),
-  ("Magic symbol", 'pmtg1', "\e684")
+  ("Torment", 'tor', "\e62c"),
-  ("Magic symbol", 'pmtg2', "\e685")
+  ("Judgement", 'jud', "\e62d"),
-  ("Leaf", 'pleaf', "\e686")
+  ("Onslaught", 'ons', "\e62e"),
-  ("Media Insert", 'pmei', "\e687")
+  ("Legions", 'lgn', "\e62f"),
-  ("DCI (Arena)", 'parl', "\e688")
+  ("Scourge", 'scg', "\e630"),
-  ("Dragons", 'dpa', "\e689")
+  ("Mirrodin", 'mrd', "\e631"),
-  ("Book Insert", 'pbook', "\e68a")
+  ("Darksteel", 'dst', "\e632"),
-  ("Astral", 'past', "\e68b")
+  ("5th Dawn", '5dn', "\e633"),
-  ("Arena logo", 'parl2', "\e68c")
+  ("Champions of", 'chk', "\e634"),
-  ("Zendikar", 'exp', "\e69a")
+  ("Betrayers of", 'bok', "\e635"),
-  ("Salvat 2005", 'psalvat05', "\e909")
+  ("Saviors of Kamigawa", 'sok', "\e636"),
-  ("Salvat 2011", 'psalvat11', "\e90a")
+  ("Ravnica", 'rav', "\e637"),
-  ("Masterpieces,", 'mp1', "\e913")
+  ("Guildpact", 'gpt', "\e638"),
-  ("Masters Edition", 'med', "\e68d")
+  ("Dissension", 'dis', "\e639"),
-  ("Masters Edition II", 'me2', "\e68e")
+  ("Time Spiral", 'tsp', "\e63a"),
-  ("Masters Edition III", 'me3', "\e68f")
+  ("Planeshift", 'plc', "\e63b"),
-  ("Masters Edition IV", 'me4', "\e690")
+  ("Future Sight", 'fut', "\e63c"),
-  ("Tempest Remastered", 'tpr', "\e694")
+  ("Lorwyn", 'lrw', "\e63d"),
-  ("Vintage Masters", 'vma', "\e696")
+  ("Morningtide", 'mor', "\e63e"),
-  ("Legendary Cube", 'xlcu', "\e90c")
+  ("Shadowmoor", 'shm', "\e63f"),
-  ("Unglued", 'ugl', "\e691")
+  ("Eventide", 'eve', "\e640"),
+  ("Shards of Alara", 'ala', "\e641"),
+  ("Conflux", 'con', "\e642"),
+  ("Alara Reborn", 'arb', "\e643"),
+  ("Zendikar", 'zen', "\e644"),
+  ("Worldwake", 'wwk', "\e645"),
+  ("Rise of Eldrazi", 'roe', "\e646"),
+  ("Scars of Mirrodin", 'som', "\e647"),
+  ("Mirrodin Besieged", 'mbs', "\e648"),
+  ("New Phyrexia", 'nph', "\e649"),
+  ("Innistrad", 'isd', "\e64a"),
+  ("Dark Ascension", 'dka', "\e64b"),
+  ("Avacyn Restored", 'avr', "\e64c"),
+  ("Return to Ravnica", 'rtr', "\e64d"),
+  ("Gatecrash", 'gtc', "\e64e"),
+  ("Dragon's Maze", 'dgm', "\e64f"),
+  ("Theros", 'ths', "\e650"),
+  ("Born of the Gods", 'bng', "\e651"),
+  ("Journey into Nyx", 'jou', "\e652"),
+  ("Khans of Tarkir", 'ktk', "\e653"),
+  ("Fate Reforged", 'frf', "\e654"),
+  ("Dragons of Tarkir", 'dtk', "\e693"),
+  ("Battle for Zendikar", 'bfz', "\e699"),
+  ("Oath of the", 'ogw', "\e901"),
+  ("Shadows Over", 'soi', "\e902"),
+  ("Eldritch Moon", 'emn', "\e90b"),
+  ("Kaladesh", 'kld', "\e90e"),
+  ("Aether Revolt", 'aer', "\e90f"),
+  ("Vanguard", 'van', "\e655"),
+  ("Planechase 2009", 'hop', "\e656"),
+  ("Archenemy", 'arc', "\e657"),
+  ("Commander", 'cmd', "\e658"),
+  ("Planechase 2012", 'pc2', "\e659"),
+  ("Commander's Arsenal", 'cm1', "\e65a"),
+  ("Commander 2013", 'c13', "\e65b"),
+  ("Conspiracy", 'cns', "\e65c"),
+  ("Commander 2014", 'c14', "\e65d"),
+  ("Commander 2015", 'c15', "\e900"),
+  ("Conspiracy 2, Take", 'cn2', "\e904"),
+  ("Commander 2016", 'c16', "\e910"),
+  ("Planechase", 'pca', "\e911"),
+  ("Chronicles", 'chr', "\e65e"),
+  ("Anthologies", 'ath', "\e65f"),
+  ("Battle Royale", 'brb', "\e660"),
+  ("Beatdown", 'btd', "\e661"),
+  ("Deckmasters", 'dkm', "\e662"),
+  ("Modern Masters", 'mma', "\e663"),
+  ("Modern Masters 2015", 'mm2', "\e695"),
+  ("Eternal Masters", 'ema', "\e903"),
+  ("Modern Masters 2017", 'mm3', "\e912"),
+  ("Portal", 'por', "\e664"),
+  ("Portal 2", 'po2', "\e665"),
+  ("Portal 3 Kingdoms", 'ptk', "\e666"),
+  ("Starter 1999", 's99', "\e667"),
+  ("Starter 2000", 's00', "\e668"),
+  ("Welcome Deck 2016", 'w16', "\e907"),
+  ("Elves vs. Goblins", 'evg', "\e669"),
+  ("Jace vs. Chandra", 'dd2', "\e66a"),
+  ("Divine vs. Demonic", 'ddc', "\e66b"),
+  ("Garruk vs. Liliana", 'ddd', "\e66c"),
+  ("Phyrexia vs.", 'dde', "\e66d"),
+  ("Elspeth vs.", 'ddf', "\e66e"),
+  ("Knights vs. Dragons", 'ddg', "\e66f"),
+  ("Ajani vs. Nicol", 'ddh', "\e670"),
+  ("Venser vs. Koth", 'ddi', "\e671"),
+  ("Izzet vs. Golgari", 'ddj', "\e672"),
+  ("Sorin vs. Tibalt", 'ddk', "\e673"),
+  ("Heroes vs. Monsters", 'ddl', "\e674"),
+  ("Jace vs. Vraska", 'ddm', "\e675"),
+  ("Speed vs. Cunning", 'ddn', "\e676"),
+  ("Kiora vs. Elspeth", 'ddo', "\e677"),
+  ("Zendikar vs.", 'ddp', "\e698"),
+  ("Blessed vs. Cursed", 'ddq', "\e908"),
+  ("Nissa vs. Ob", 'ddr', "\e90d"),
+  ("Dragons", 'drb', "\e678"),
+  ("Exiled", 'v09', "\e679"),
+  ("Relics", 'v10', "\e67a"),
+  ("Legends", 'v11', "\e67b"),
+  ("Realms", 'v12', "\e67c"),
+  ("Twenty", 'v13', "\e67d"),
+  ("Annihilation", 'v14', "\e67e"),
+  ("Angels", 'v15', "\e905"),
+  ("Lore", 'v16', "\e906"),
+  ("Slivers", 'h09', "\e67f"),
+  ("Fire & Lightning", 'pd2', "\e680"),
+  ("Graveborn", 'pd3', "\e681"),
+  ("Modern Event Deck", 'md1', "\e682"),
+  ("Guru", 'pgru', "\e683"),
+  ("Magic symbol", 'pmtg1', "\e684"),
+  ("Magic symbol", 'pmtg2', "\e685"),
+  ("Leaf", 'pleaf', "\e686"),
+  ("Media Insert", 'pmei', "\e687"),
+  ("DCI (Arena)", 'parl', "\e688"),
+  ("Dragons", 'dpa', "\e689"),
+  ("Book Insert", 'pbook', "\e68a"),
+  ("Astral", 'past', "\e68b"),
+  ("Arena logo", 'parl2', "\e68c"),
+  ("Zendikar", 'exp', "\e69a"),
+  ("Salvat 2005", 'psalvat05', "\e909"),
+  ("Salvat 2011", 'psalvat11', "\e90a"),
+  ("Masterpieces,", 'mp1', "\e913"),
+  ("Masters Edition", 'med', "\e68d"),
+  ("Masters Edition II", 'me2', "\e68e"),
+  ("Masters Edition III", 'me3', "\e68f"),
+  ("Masters Edition IV", 'me4', "\e690"),
+  ("Tempest Remastered", 'tpr', "\e694"),
+  ("Vintage Masters", 'vma', "\e696"),
+  ("Legendary Cube", 'xlcu', "\e90c"),
+  ("Unglued", 'ugl', "\e691"),
   ("Unhinged", 'unh', "\e692")
 ) !default;

sass/keyrune.scss

@@ -1,10 +1,16 @@
 // keyrune.scss
 
-// Config ==============
+// Config ======================================
+//
 @import 'config/variables';
 //@import 'config/settings'; // used for other users to overwrite default styles.
 
-// Components ==========
+// Components ==================================
+//
 @import 'components/typography';
 @import 'components/setsymbol';
 @import 'components/rarities';
+
+// Helpers =====================================
+//
+@import 'components/helpers';

sass/sass/config/_settings.scss

@@ -0,0 +1,279 @@
+// _variables.scss
+
+// Table of Contents: ==========================
+// 1. Global
+// 2. Keyrune
+// 3. Set Symbol
+// 4. Keyrune Colors
+// 5. Helpers
+// 6. MtG Setlist
+//
+
+// 1. Global ===================================
+//
+$global_font_path:  '../fonts' !default;
+$global_font_size:  14px !default;
+
+// 2. Keyrune ==================================
+//
+$keyrune_font_face:               "Keyrune" !default;
+$keyrune_version:                 '1.7.2' !default;
+$keyrune_prefix:                  'ss' !default;
+$keyrune_font_weight:             normal !default;
+$keyrune_font_style:              normal !default;
+
+// 3. Set Symbol ===============================
+//
+$setsymbol_display:                 inline-block !default;
+$setsymbol_font:                    normal normal normal $global_font_size/1 $keyrune_font_face !default;
+$setsymbol_font_size:               inherit !default;
+$setsymbol_line_height:             1em !default;
+$setsymbol_text_rendering:          auto !default;
+$setsymbol_transform:               translate(0, 0) !default;
+$setsymbol_speak:                   none !default;
+$setsymbol_text_transform:          none !default;
+$setsymbol_vertical_align:          middle !default;
+$setsymbol_webkit_font_smoothing:   antialiased !default;
+$setsymbol_moz_font_smoothing:      grayscale !default;
+$setsymbol_default_content:         "\e684" !default;
+
+$setsymbol_color_stop1:             0% !default;
+$setsymbol_color_stop2:             50% !default;
+$setsymbol_color_stop3:             100% !default;
+$setsymbol_text_stroke:             0.03em !default;
+$setsymbol_text_fill_color:         transparent !default;
+$setsymbol_background_clip:         text !default;
+
+// 4. Keyrune Colors ============================
+//
+$rarity_palette: (
+  ('common', #1a1718, #302b2c, #474040, #000),
+  ('uncommon', #707883, #5a6572, #9e9e9e, #111),
+  ('rare', #a58e4a, #876a3b, #dfbd6b, #333),
+  ('mythic', #bf4427, #b21f0f, #f38300, #333)
+) !default;
+
+$white: #fff;
+
+// 5. Helpers ==================================
+//
+$setsymbol_sizes: (
+  '2x': 2em,
+  '3x': 3em,
+  '4x': 4em,
+  '5x': 5em,
+  '6x': 6em
+) !default;
+
+$setsymbol_fixed_size_width:        calc(18em / 14px) !default; // TODO: might have to light into implementing a units component. perhaps switch to
+$setsymbol_fixed_size_text_align:   center !default;
+
+$setsymbol_no_border:               0 !default;
+
+$setsymbol_border_after_content:            "" !default;
+$setsymbol_border_after_position:           absolute !default;
+$setsymbol_border_after_left:               -.05em !default;   // TODO: change to -0.05em if doesn't effect visual styles.
+$setsymbol_border_after_top:                .0em !default;     // TODO: change to 0.0em "
+$setsymbol_border_after_z_index:            -1 !default;
+$setsymbol_border_after_color:              $white !default;
+$setsymbol_border_after_font_size:          1.15em !default;
+$setsymbol_border_after_background:         $white !default;
+$setsymbol_border_after_text_stroke:        0.05em $white !default;
+$setsymbol_border_after_background_clip:    $setsymbol_background_clip !default;
+$setsymbol_border_after_text_fill_color:    $setsymbol_text_fill_color !default;
+
+// not really sure what to call this array, although I notice it is for special borders.
+$mtg_setlist_borders: (
+  ("Vanguard", 'van', "\e655"),
+  ("Archenemy", 'arc', "\e657"),
+  ("Commander", 'cmd', "\e658"),
+  ("Commander's Arsenal", 'cm1', "\e65a"),
+  ("Commander 2013", 'c13', "\e65b"),
+  ("Commander 2014", 'c14', "\e65d"),
+  ("Commander 2015", 'c15', "\e900"),
+  ("Planechase 2009", 'hop', "\e656"),
+  ("Planechase 2012", 'pc2', "\e659"),
+  ("Conspiracy", 'cns', "\e65c")
+);
+
+// 6. MtG Setlist ==============================
+// Legend:
+// (Set_Name, Set_Code, Set_Glyph)
+//
+$mtg_setlist: (
+  ("Alpha", 'lea', "\e600"),
+  ("Beta", 'leb', "\e601"),
+  ("Unlimited", '2ed', "\e602"),
+  ("Revised", '3ed', "\e603"),
+  ("4th Edition", '4ed', "\e604"),
+  ("Summer Magic", 'psum', "\e605"),
+  ("5th Edition", '5ed', "\e606"),
+  ("6th Edition", '6ed', "\e607"),
+  ("7th Edition", '7ed', "\e608"),
+  ("8th Edition", '8ed', "\e609"),
+  ("9th Edition", '9ed', "\e60a"),
+  ("10th Edition", '10e', "\e60b"),
+  ("Magic 2010", 'm10', "\e60c"),
+  ("Magic 2011", 'm11', "\e60d"),
+  ("Magic 2012", 'm12', "\e60e"),
+  ("Magic 2013", 'm13', "\e60f"),
+  ("Magic 2014", 'm14', "\e610"),
+  ("Magic 2015", 'm15', "\e611"),
+  ("Core background", 'bcore', "\e612"),
+  ("Magic Origins", 'ori', "\e697"),
+  ("Arabian Nights", 'arn', "\e613"),
+  ("Antiquities", 'atq', "\e614"),
+  ("Legends", 'leg', "\e615"),
+  ("The Dark", 'drk', "\e616"),
+  ("Fallen Empires", 'fem', "\e617"),
+  ("Homelands", 'hml', "\e618"),
+  ("Ice Age", 'ice', "\e619"),
+  ("Alliances", 'all', "\e61a"),
+  ("Coldsnap", 'csp', "\e61b"),
+  ("Mirage", 'mir', "\e61c"),
+  ("Visions", 'vis', "\e61d"),
+  ("Weatherlight", 'wth', "\e61e"),
+  ("Tempest", 'tmp', "\e61f"),
+  ("Stronghold", 'sth', "\e620"),
+  ("Exodus", 'exo', "\e621"),
+  ("Urza's Saga", 'usg', "\e622"),
+  ("Urza's Legacy", 'ulg', "\e623"),
+  ("Urza's Destiny", 'uds', "\e624"),
+  ("Mercadian Masque", 'mmq', "\e625"),
+  ("Nemesis", 'nms', "\e626"),
+  ("Prophecy", 'pcy', "\e627"),
+  ("Invasion", 'inv', "\e628"),
+  ("Planeshift", 'pls', "\e629"),
+  ("Apocalypse", 'apc', "\e62a"),
+  ("Odyssey", 'ody', "\e62b"),
+  ("Torment", 'tor', "\e62c"),
+  ("Judgement", 'jud', "\e62d"),
+  ("Onslaught", 'ons', "\e62e"),
+  ("Legions", 'lgn', "\e62f"),
+  ("Scourge", 'scg', "\e630"),
+  ("Mirrodin", 'mrd', "\e631"),
+  ("Darksteel", 'dst', "\e632"),
+  ("5th Dawn", '5dn', "\e633"),
+  ("Champions of", 'chk', "\e634"),
+  ("Betrayers of", 'bok', "\e635"),
+  ("Saviors of Kamigawa", 'sok', "\e636"),
+  ("Ravnica", 'rav', "\e637"),
+  ("Guildpact", 'gpt', "\e638"),
+  ("Dissension", 'dis', "\e639"),
+  ("Time Spiral", 'tsp', "\e63a"),
+  ("Planeshift", 'plc', "\e63b"),
+  ("Future Sight", 'fut', "\e63c"),
+  ("Lorwyn", 'lrw', "\e63d"),
+  ("Morningtide", 'mor', "\e63e"),
+  ("Shadowmoor", 'shm', "\e63f"),
+  ("Eventide", 'eve', "\e640"),
+  ("Shards of Alara", 'ala', "\e641"),
+  ("Conflux", 'con', "\e642"),
+  ("Alara Reborn", 'arb', "\e643"),
+  ("Zendikar", 'zen', "\e644"),
+  ("Worldwake", 'wwk', "\e645"),
+  ("Rise of Eldrazi", 'roe', "\e646"),
+  ("Scars of Mirrodin", 'som', "\e647"),
+  ("Mirrodin Besieged", 'mbs', "\e648"),
+  ("New Phyrexia", 'nph', "\e649"),
+  ("Innistrad", 'isd', "\e64a"),
+  ("Dark Ascension", 'dka', "\e64b"),
+  ("Avacyn Restored", 'avr', "\e64c"),
+  ("Return to Ravnica", 'rtr', "\e64d"),
+  ("Gatecrash", 'gtc', "\e64e"),
+  ("Dragon's Maze", 'dgm', "\e64f"),
+  ("Theros", 'ths', "\e650"),
+  ("Born of the Gods", 'bng', "\e651"),
+  ("Journey into Nyx", 'jou', "\e652"),
+  ("Khans of Tarkir", 'ktk', "\e653"),
+  ("Fate Reforged", 'frf', "\e654"),
+  ("Dragons of Tarkir", 'dtk', "\e693"),
+  ("Battle for Zendikar", 'bfz', "\e699"),
+  ("Oath of the", 'ogw', "\e901"),
+  ("Shadows Over", 'soi', "\e902"),
+  ("Eldritch Moon", 'emn', "\e90b"),
+  ("Kaladesh", 'kld', "\e90e"),
+  ("Aether Revolt", 'aer', "\e90f"),
+  ("Vanguard", 'van', "\e655"),
+  ("Planechase 2009", 'hop', "\e656"),
+  ("Archenemy", 'arc', "\e657"),
+  ("Commander", 'cmd', "\e658"),
+  ("Planechase 2012", 'pc2', "\e659"),
+  ("Commander's Arsenal", 'cm1', "\e65a"),
+  ("Commander 2013", 'c13', "\e65b"),
+  ("Conspiracy", 'cns', "\e65c"),
+  ("Commander 2014", 'c14', "\e65d"),
+  ("Commander 2015", 'c15', "\e900"),
+  ("Conspiracy 2, Take", 'cn2', "\e904"),
+  ("Commander 2016", 'c16', "\e910"),
+  ("Planechase", 'pca', "\e911"),
+  ("Chronicles", 'chr', "\e65e"),
+  ("Anthologies", 'ath', "\e65f"),
+  ("Battle Royale", 'brb', "\e660"),
+  ("Beatdown", 'btd', "\e661"),
+  ("Deckmasters", 'dkm', "\e662"),
+  ("Modern Masters", 'mma', "\e663"),
+  ("Modern Masters 2015", 'mm2', "\e695"),
+  ("Eternal Masters", 'ema', "\e903"),
+  ("Modern Masters 2017", 'mm3', "\e912"),
+  ("Portal", 'por', "\e664"),
+  ("Portal 2", 'po2', "\e665"),
+  ("Portal 3 Kingdoms", 'ptk', "\e666"),
+  ("Starter 1999", 's99', "\e667"),
+  ("Starter 2000", 's00', "\e668"),
+  ("Welcome Deck 2016", 'w16', "\e907"),
+  ("Elves vs. Goblins", 'evg', "\e669"),
+  ("Jace vs. Chandra", 'dd2', "\e66a"),
+  ("Divine vs. Demonic", 'ddc', "\e66b"),
+  ("Garruk vs. Liliana", 'ddd', "\e66c"),
+  ("Phyrexia vs.", 'dde', "\e66d"),
+  ("Elspeth vs.", 'ddf', "\e66e"),
+  ("Knights vs. Dragons", 'ddg', "\e66f"),
+  ("Ajani vs. Nicol", 'ddh', "\e670"),
+  ("Venser vs. Koth", 'ddi', "\e671"),
+  ("Izzet vs. Golgari", 'ddj', "\e672"),
+  ("Sorin vs. Tibalt", 'ddk', "\e673"),
+  ("Heroes vs. Monsters", 'ddl', "\e674"),
+  ("Jace vs. Vraska", 'ddm', "\e675"),
+  ("Speed vs. Cunning", 'ddn', "\e676"),
+  ("Kiora vs. Elspeth", 'ddo', "\e677"),
+  ("Zendikar vs.", 'ddp', "\e698"),
+  ("Blessed vs. Cursed", 'ddq', "\e908"),
+  ("Nissa vs. Ob", 'ddr', "\e90d"),
+  ("Dragons", 'drb', "\e678"),
+  ("Exiled", 'v09', "\e679"),
+  ("Relics", 'v10', "\e67a"),
+  ("Legends", 'v11', "\e67b"),
+  ("Realms", 'v12', "\e67c"),
+  ("Twenty", 'v13', "\e67d"),
+  ("Annihilation", 'v14', "\e67e"),
+  ("Angels", 'v15', "\e905"),
+  ("Lore", 'v16', "\e906"),
+  ("Slivers", 'h09', "\e67f"),
+  ("Fire & Lightning", 'pd2', "\e680"),
+  ("Graveborn", 'pd3', "\e681"),
+  ("Modern Event Deck", 'md1', "\e682"),
+  ("Guru", 'pgru', "\e683"),
+  ("Magic symbol", 'pmtg1', "\e684"),
+  ("Magic symbol", 'pmtg2', "\e685"),
+  ("Leaf", 'pleaf', "\e686"),
+  ("Media Insert", 'pmei', "\e687"),
+  ("DCI (Arena)", 'parl', "\e688"),
+  ("Dragons", 'dpa', "\e689"),
+  ("Book Insert", 'pbook', "\e68a"),
+  ("Astral", 'past', "\e68b"),
+  ("Arena logo", 'parl2', "\e68c"),
+  ("Zendikar", 'exp', "\e69a"),
+  ("Salvat 2005", 'psalvat05', "\e909"),
+  ("Salvat 2011", 'psalvat11', "\e90a"),
+  ("Masterpieces,", 'mp1', "\e913"),
+  ("Masters Edition", 'med', "\e68d"),
+  ("Masters Edition II", 'me2', "\e68e"),
+  ("Masters Edition III", 'me3', "\e68f"),
+  ("Masters Edition IV", 'me4', "\e690"),
+  ("Tempest Remastered", 'tpr', "\e694"),
+  ("Vintage Masters", 'vma', "\e696"),
+  ("Legendary Cube", 'xlcu', "\e90c"),
+  ("Unglued", 'ugl', "\e691"),
+  ("Unhinged", 'unh', "\e692")
+) !default;