diff --git a/bower_components/keyrune/.bower.json b/bower_components/keyrune/.bower.json index 956d1ab..5ada654 100644 --- a/bower_components/keyrune/.bower.json +++ b/bower_components/keyrune/.bower.json @@ -18,11 +18,11 @@ "*.json", "*.md" ], - "_release": "f899d84794", + "_release": "8e89b507fb", "_resolution": { "type": "branch", "branch": "master", - "commit": "f899d84794bc720b1fb5cec5ecd0c96ad988beb5" + "commit": "8e89b507fbfd74b58fd33d8b1b4409ff4269a083" }, "_source": "git://github.com/andrewgioia/keyrune.git", "_target": "*", diff --git a/bower_components/keyrune/css/keyrune.css b/bower_components/keyrune/css/keyrune.css index 2d95872..8c7466b 100755 --- a/bower_components/keyrune/css/keyrune.css +++ b/bower_components/keyrune/css/keyrune.css @@ -41,16 +41,56 @@ /** * Rarity colors */ .ss-common { - color: #333; + color: #1A1718; +} +.ss-common.ss-grad { + /* webkit outline/gradient */ + background: -webkit-gradient(linear, left top, right top, color-stop(1%, #302b2c), color-stop(50%, #474040), color-stop(100%, #302b2c)); + /* Chrome,Safari4+ */ + background: -webkit-linear-gradient(left, #302b2c 1%, #474040 50%, #302b2c 100%); + /* Chrome10+,Safari5.1+ */ + -webkit-text-stroke: 0.03em #000; + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; } .ss-uncommon { - color: #7795A1; + color: #707883; +} +.ss-uncommon.ss-grad { + /* webkit outline/gradient */ + background: -webkit-gradient(linear, left top, right top, color-stop(0%, #5a6572), color-stop(50%, #9e9e9e), color-stop(100%, #5a6572)); + /* Chrome,Safari4+ */ + background: -webkit-linear-gradient(left, #5a6572 0%, #9e9e9e 50%, #5a6572 100%); + /* Chrome10+,Safari5.1+ */ + -webkit-text-stroke: 0.03em #111; + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; } .ss-rare { color: #A58E4A; } +.ss-rare.ss-grad { + /* webkit outline/gradient */ + background: -webkit-gradient(linear, left top, right top, color-stop(0%, #876a3b), color-stop(50%, #dfbd6b), color-stop(100%, #876a3b)); + /* Chrome,Safari4+ */ + background: -webkit-linear-gradient(left, #876a3b 0%, #dfbd6b 50%, #876a3b 100%); + /* Chrome10+,Safari5.1+ */ + -webkit-text-stroke: 0.03em #333; + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; +} .ss-mythic { - color: #A2472A; + color: #BF4427; +} +.ss-mythic.ss-grad { + /* webkit outline/gradient */ + background: -webkit-gradient(linear, left top, right top, color-stop(0%, #b21f0f), color-stop(50%, #f38300), color-stop(100%, #b21f0f)); + /* Chrome,Safari4+ */ + background: -webkit-linear-gradient(left, #b21f0f 0%, #f38300 50%, #b21f0f 100%); + /* Chrome10+,Safari5.1+ */ + -webkit-text-stroke: 0.03em #333; + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; } /** * Fixed width */ diff --git a/bower_components/keyrune/css/keyrune.min.css b/bower_components/keyrune/css/keyrune.min.css index 52be10a..bcafc09 100644 --- a/bower_components/keyrune/css/keyrune.min.css +++ b/bower_components/keyrune/css/keyrune.min.css @@ -1 +1 @@ -@font-face{font-family:'Keyrune';src:url('../fonts/keyrune.eot?v=0.1');src:url('../fonts/keyrune.eot?#iefix&v=0.1') format('embedded-opentype'),url('../fonts/keyrune.woff?v=0.1') format('woff'),url('../fonts/keyrune.ttf?v=0.1') format('truetype'),url('../fonts/keyrune.svg?v=0.1#keyrune') format('svg');font-weight:normal;font-style:normal}.ss{display:inline-block;font:normal normal normal 14px/1 Keyrune;font-size:inherit;line-height:1em;text-rendering:auto;transform:translate(0, 0);speak:none;text-transform:none;vertical-align:middle;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.ss-2x{font-size:2em}.ss-3x{font-size:3em}.ss-4x{font-size:4em}.ss-5x{font-size:5em}.ss-6x{font-size:6em}.ss-common{color:#333}.ss-uncommon{color:#7795a1}.ss-rare{color:#a58e4a}.ss-mythic{color:#a2472a}.ss-fw{width:1.28571429em;text-align:center}.ss-lea:before{content:"\e600"}.ss-leb:before{content:"\e601"}.ss-2ed:before{content:"\e602"}.ss-3ed:before{content:"\e603"}.ss-4ed:before{content:"\e604"}.ss-psum:before{content:"\e605"}.ss-5ed:before{content:"\e606"}.ss-6ed:before{content:"\e607"}.ss-7ed:before{content:"\e608"}.ss-8ed:before{content:"\e609"}.ss-9ed:before{content:"\e60a"}.ss-10e:before{content:"\e60b"}.ss-m10:before{content:"\e60c"}.ss-m11:before{content:"\e60d"}.ss-m12:before{content:"\e60e"}.ss-m13:before{content:"\e60f"}.ss-m14:before{content:"\e610"}.ss-m15:before{content:"\e611"}.ss-bcore:before{content:"\e612"}.ss-arn:before{content:"\e613"}.ss-atq:before{content:"\e614"}.ss-leg:before{content:"\e615"}.ss-drk:before{content:"\e616"}.ss-fem:before{content:"\e617"}.ss-hml:before{content:"\e618"}.ss-ice:before{content:"\e619"}.ss-all:before{content:"\e61a"}.ss-csp:before{content:"\e61b"}.ss-mir:before{content:"\e61c"}.ss-vis:before{content:"\e61d"}.ss-wth:before{content:"\e61e"}.ss-tmp:before{content:"\e61f"}.ss-sth:before{content:"\e620"}.ss-exo:before{content:"\e621"}.ss-usg:before{content:"\e622"}.ss-ulg:before{content:"\e623"}.ss-uds:before{content:"\e624"}.ss-mmq:before{content:"\e625"}.ss-nms:before{content:"\e626"}.ss-pcy:before{content:"\e627"}.ss-inv:before{content:"\e628"}.ss-pls:before{content:"\e629"}.ss-apc:before{content:"\e62a"}.ss-ody:before{content:"\e62b"}.ss-tor:before{content:"\e62c"}.ss-jud:before{content:"\e62d"}.ss-ons:before{content:"\e62e"}.ss-lgn:before{content:"\e62f"}.ss-scg:before{content:"\e630"}.ss-mrd:before{content:"\e631"}.ss-dst:before{content:"\e632"}.ss-5dn:before{content:"\e633"}.ss-chk:before{content:"\e634"}.ss-bok:before{content:"\e635"}.ss-sok:before{content:"\e636"}.ss-rav:before{content:"\e637"}.ss-gpt:before{content:"\e638"}.ss-dis:before{content:"\e639"}.ss-tsp:before{content:"\e63a"}.ss-plc:before{content:"\e63b"}.ss-fut:before{content:"\e63c"}.ss-lrw:before{content:"\e63d"}.ss-mor:before{content:"\e63e"}.ss-shm:before{content:"\e63f"}.ss-eve:before{content:"\e640"}.ss-ala:before{content:"\e641"}.ss-con:before{content:"\e642"}.ss-arb:before{content:"\e643"}.ss-zen:before{content:"\e644"}.ss-wwk:before{content:"\e645"}.ss-roe:before{content:"\e646"}.ss-som:before{content:"\e647"}.ss-mbs:before{content:"\e648"}.ss-nph:before{content:"\e649"}.ss-isd:before{content:"\e64a"}.ss-dka:before{content:"\e64b"}.ss-avr:before{content:"\e64c"}.ss-rtr:before{content:"\e64d"}.ss-gtc:before{content:"\e64e"}.ss-dgm:before{content:"\e64f"}.ss-ths:before{content:"\e650"}.ss-bng:before{content:"\e651"}.ss-jou:before{content:"\e652"}.ss-ktk:before{content:"\e653"}.ss-frf:before{content:"\e654"}.ss-van:before{content:"\e655"}.ss-hop:before{content:"\e656"}.ss-arc:before{content:"\e657"}.ss-cmd:before{content:"\e658"}.ss-pc2:before{content:"\e659"}.ss-cm1:before{content:"\e65a"}.ss-c13:before{content:"\e65b"}.ss-cns:before{content:"\e65c"}.ss-c14:before{content:"\e65d"}.ss-chr:before{content:"\e65e"}.ss-ath:before{content:"\e65f"}.ss-brb:before{content:"\e660"}.ss-btd:before{content:"\e661"}.ss-dkm:before{content:"\e662"}.ss-mma:before{content:"\e663"}.ss-por:before{content:"\e664"}.ss-po2:before{content:"\e665"}.ss-ptk:before{content:"\e666"}.ss-s99:before{content:"\e667"}.ss-s00:before{content:"\e668"}.ss-evg:before{content:"\e669"}.ss-dd2:before{content:"\e66a"}.ss-ddc:before{content:"\e66b"}.ss-ddd:before{content:"\e66c"}.ss-dde:before{content:"\e66d"}.ss-ddf:before{content:"\e66e"}.ss-ddg:before{content:"\e66f"}.ss-ddh:before{content:"\e670"}.ss-ddi:before{content:"\e671"}.ss-ddj:before{content:"\e672"}.ss-ddk:before{content:"\e673"}.ss-ddl:before{content:"\e674"}.ss-ddm:before{content:"\e675"}.ss-ddn:before{content:"\e676"}.ss-ddo:before{content:"\e677"}.ss-drb:before{content:"\e678"}.ss-v09:before{content:"\e679"}.ss-v10:before{content:"\e67a"}.ss-v11:before{content:"\e67b"}.ss-v12:before{content:"\e67c"}.ss-v13:before{content:"\e67d"}.ss-v14:before{content:"\e67e"}.ss-h09:before{content:"\e67f"}.ss-pd2:before{content:"\e680"}.ss-pd3:before{content:"\e681"}.ss-md1:before{content:"\e682"}.ss-pgru:before{content:"\e683"}.ss-pmtg1:before{content:"\e684"}.ss-pmtg2:before{content:"\e685"}.ss-pleaf:before{content:"\e686"}.ss-pmei:before{content:"\e687"}.ss-parl:before{content:"\e688"}.ss-dpa:before{content:"\e689"}.ss-pbook:before{content:"\e68a"}.ss-past:before{content:"\e68b"}.ss-parl2:before{content:"\e68c"}.ss-med:before{content:"\e68d"}.ss-me2:before{content:"\e68e"}.ss-me3:before{content:"\e68f"}.ss-me4:before{content:"\e690"}.ss-ugl:before{content:"\e691"}.ss-unh:before{content:"\e692"} \ No newline at end of file +@font-face{font-family:'Keyrune';src:url('../fonts/keyrune.eot?v=0.1');src:url('../fonts/keyrune.eot?#iefix&v=0.1') format('embedded-opentype'),url('../fonts/keyrune.woff?v=0.1') format('woff'),url('../fonts/keyrune.ttf?v=0.1') format('truetype'),url('../fonts/keyrune.svg?v=0.1#keyrune') format('svg');font-weight:normal;font-style:normal}.ss{display:inline-block;font:normal normal normal 14px/1 Keyrune;font-size:inherit;line-height:1em;text-rendering:auto;transform:translate(0, 0);speak:none;text-transform:none;vertical-align:middle;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.ss-2x{font-size:2em}.ss-3x{font-size:3em}.ss-4x{font-size:4em}.ss-5x{font-size:5em}.ss-6x{font-size:6em}.ss-common{color:#1a1718}.ss-common.ss-grad{background:-webkit-gradient(linear, left top, right top, color-stop(1%, #302b2c), color-stop(50%, #474040), color-stop(100%, #302b2c));background:-webkit-linear-gradient(left, #302b2c 1%, #474040 50%, #302b2c 100%);-webkit-text-stroke:.03em #000;-webkit-background-clip:text;-webkit-text-fill-color:transparent}.ss-uncommon{color:#707883}.ss-uncommon.ss-grad{background:-webkit-gradient(linear, left top, right top, color-stop(0, #5a6572), color-stop(50%, #9e9e9e), color-stop(100%, #5a6572));background:-webkit-linear-gradient(left, #5a6572 0, #9e9e9e 50%, #5a6572 100%);-webkit-text-stroke:.03em #111;-webkit-background-clip:text;-webkit-text-fill-color:transparent}.ss-rare{color:#a58e4a}.ss-rare.ss-grad{background:-webkit-gradient(linear, left top, right top, color-stop(0, #876a3b), color-stop(50%, #dfbd6b), color-stop(100%, #876a3b));background:-webkit-linear-gradient(left, #876a3b 0, #dfbd6b 50%, #876a3b 100%);-webkit-text-stroke:.03em #333;-webkit-background-clip:text;-webkit-text-fill-color:transparent}.ss-mythic{color:#bf4427}.ss-mythic.ss-grad{background:-webkit-gradient(linear, left top, right top, color-stop(0, #b21f0f), color-stop(50%, #f38300), color-stop(100%, #b21f0f));background:-webkit-linear-gradient(left, #b21f0f 0, #f38300 50%, #b21f0f 100%);-webkit-text-stroke:.03em #333;-webkit-background-clip:text;-webkit-text-fill-color:transparent}.ss-fw{width:1.28571429em;text-align:center}.ss-lea:before{content:"\e600"}.ss-leb:before{content:"\e601"}.ss-2ed:before{content:"\e602"}.ss-3ed:before{content:"\e603"}.ss-4ed:before{content:"\e604"}.ss-psum:before{content:"\e605"}.ss-5ed:before{content:"\e606"}.ss-6ed:before{content:"\e607"}.ss-7ed:before{content:"\e608"}.ss-8ed:before{content:"\e609"}.ss-9ed:before{content:"\e60a"}.ss-10e:before{content:"\e60b"}.ss-m10:before{content:"\e60c"}.ss-m11:before{content:"\e60d"}.ss-m12:before{content:"\e60e"}.ss-m13:before{content:"\e60f"}.ss-m14:before{content:"\e610"}.ss-m15:before{content:"\e611"}.ss-bcore:before{content:"\e612"}.ss-arn:before{content:"\e613"}.ss-atq:before{content:"\e614"}.ss-leg:before{content:"\e615"}.ss-drk:before{content:"\e616"}.ss-fem:before{content:"\e617"}.ss-hml:before{content:"\e618"}.ss-ice:before{content:"\e619"}.ss-all:before{content:"\e61a"}.ss-csp:before{content:"\e61b"}.ss-mir:before{content:"\e61c"}.ss-vis:before{content:"\e61d"}.ss-wth:before{content:"\e61e"}.ss-tmp:before{content:"\e61f"}.ss-sth:before{content:"\e620"}.ss-exo:before{content:"\e621"}.ss-usg:before{content:"\e622"}.ss-ulg:before{content:"\e623"}.ss-uds:before{content:"\e624"}.ss-mmq:before{content:"\e625"}.ss-nms:before{content:"\e626"}.ss-pcy:before{content:"\e627"}.ss-inv:before{content:"\e628"}.ss-pls:before{content:"\e629"}.ss-apc:before{content:"\e62a"}.ss-ody:before{content:"\e62b"}.ss-tor:before{content:"\e62c"}.ss-jud:before{content:"\e62d"}.ss-ons:before{content:"\e62e"}.ss-lgn:before{content:"\e62f"}.ss-scg:before{content:"\e630"}.ss-mrd:before{content:"\e631"}.ss-dst:before{content:"\e632"}.ss-5dn:before{content:"\e633"}.ss-chk:before{content:"\e634"}.ss-bok:before{content:"\e635"}.ss-sok:before{content:"\e636"}.ss-rav:before{content:"\e637"}.ss-gpt:before{content:"\e638"}.ss-dis:before{content:"\e639"}.ss-tsp:before{content:"\e63a"}.ss-plc:before{content:"\e63b"}.ss-fut:before{content:"\e63c"}.ss-lrw:before{content:"\e63d"}.ss-mor:before{content:"\e63e"}.ss-shm:before{content:"\e63f"}.ss-eve:before{content:"\e640"}.ss-ala:before{content:"\e641"}.ss-con:before{content:"\e642"}.ss-arb:before{content:"\e643"}.ss-zen:before{content:"\e644"}.ss-wwk:before{content:"\e645"}.ss-roe:before{content:"\e646"}.ss-som:before{content:"\e647"}.ss-mbs:before{content:"\e648"}.ss-nph:before{content:"\e649"}.ss-isd:before{content:"\e64a"}.ss-dka:before{content:"\e64b"}.ss-avr:before{content:"\e64c"}.ss-rtr:before{content:"\e64d"}.ss-gtc:before{content:"\e64e"}.ss-dgm:before{content:"\e64f"}.ss-ths:before{content:"\e650"}.ss-bng:before{content:"\e651"}.ss-jou:before{content:"\e652"}.ss-ktk:before{content:"\e653"}.ss-frf:before{content:"\e654"}.ss-van:before{content:"\e655"}.ss-hop:before{content:"\e656"}.ss-arc:before{content:"\e657"}.ss-cmd:before{content:"\e658"}.ss-pc2:before{content:"\e659"}.ss-cm1:before{content:"\e65a"}.ss-c13:before{content:"\e65b"}.ss-cns:before{content:"\e65c"}.ss-c14:before{content:"\e65d"}.ss-chr:before{content:"\e65e"}.ss-ath:before{content:"\e65f"}.ss-brb:before{content:"\e660"}.ss-btd:before{content:"\e661"}.ss-dkm:before{content:"\e662"}.ss-mma:before{content:"\e663"}.ss-por:before{content:"\e664"}.ss-po2:before{content:"\e665"}.ss-ptk:before{content:"\e666"}.ss-s99:before{content:"\e667"}.ss-s00:before{content:"\e668"}.ss-evg:before{content:"\e669"}.ss-dd2:before{content:"\e66a"}.ss-ddc:before{content:"\e66b"}.ss-ddd:before{content:"\e66c"}.ss-dde:before{content:"\e66d"}.ss-ddf:before{content:"\e66e"}.ss-ddg:before{content:"\e66f"}.ss-ddh:before{content:"\e670"}.ss-ddi:before{content:"\e671"}.ss-ddj:before{content:"\e672"}.ss-ddk:before{content:"\e673"}.ss-ddl:before{content:"\e674"}.ss-ddm:before{content:"\e675"}.ss-ddn:before{content:"\e676"}.ss-ddo:before{content:"\e677"}.ss-drb:before{content:"\e678"}.ss-v09:before{content:"\e679"}.ss-v10:before{content:"\e67a"}.ss-v11:before{content:"\e67b"}.ss-v12:before{content:"\e67c"}.ss-v13:before{content:"\e67d"}.ss-v14:before{content:"\e67e"}.ss-h09:before{content:"\e67f"}.ss-pd2:before{content:"\e680"}.ss-pd3:before{content:"\e681"}.ss-md1:before{content:"\e682"}.ss-pgru:before{content:"\e683"}.ss-pmtg1:before{content:"\e684"}.ss-pmtg2:before{content:"\e685"}.ss-pleaf:before{content:"\e686"}.ss-pmei:before{content:"\e687"}.ss-parl:before{content:"\e688"}.ss-dpa:before{content:"\e689"}.ss-pbook:before{content:"\e68a"}.ss-past:before{content:"\e68b"}.ss-parl2:before{content:"\e68c"}.ss-med:before{content:"\e68d"}.ss-me2:before{content:"\e68e"}.ss-me3:before{content:"\e68f"}.ss-me4:before{content:"\e690"}.ss-ugl:before{content:"\e691"}.ss-unh:before{content:"\e692"} \ No newline at end of file diff --git a/bower_components/keyrune/index.html b/bower_components/keyrune/index.html new file mode 100644 index 0000000..74d6039 --- /dev/null +++ b/bower_components/keyrune/index.html @@ -0,0 +1,51 @@ + + +
+ + ++ This HTML file is for demo purposes and is not necessary for Keyrune installation or use. You can view a few of the set symbol font icons and the available examples below (some may only be available for specific browsers). +
++ + + + Common (Legends) +
++ + + + Uncommon (Onslaught) +
++ + + + Rare (Future Sight) +
++ + + + Mythic Rare (Worldwake) +
+ + diff --git a/bower_components/keyrune/less/rarities.less b/bower_components/keyrune/less/rarities.less index aefdd21..d44c54a 100644 --- a/bower_components/keyrune/less/rarities.less +++ b/bower_components/keyrune/less/rarities.less @@ -1,10 +1,50 @@ /** * Rarity colors */ -.@{prefix}-common { color: #333; } +.@{prefix}-common { + color: #1A1718; + &.ss-grad { + /* webkit outline/gradient */ + background: -webkit-gradient(linear, left top, right top, color-stop(1%,#302b2c), color-stop(50%,#474040), color-stop(100%,#302b2c)); /* Chrome,Safari4+ */ + background: -webkit-linear-gradient(left, #302b2c 1%,#474040 50%,#302b2c 100%); /* Chrome10+,Safari5.1+ */ + -webkit-text-stroke: 0.03em #000; + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + } +} -.@{prefix}-uncommon { color: #7795A1; } +.@{prefix}-uncommon { + color: #707883; + &.ss-grad { + /* webkit outline/gradient */ + background: -webkit-gradient(linear, left top, right top, color-stop(0%,#5a6572), color-stop(50%,#9e9e9e), color-stop(100%,#5a6572)); /* Chrome,Safari4+ */ + background: -webkit-linear-gradient(left, #5a6572 0%,#9e9e9e 50%,#5a6572 100%); /* Chrome10+,Safari5.1+ */ + -webkit-text-stroke: 0.03em #111; + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + } +} -.@{prefix}-rare { color: #A58E4A; } +.@{prefix}-rare { + color: #A58E4A; + &.ss-grad { + /* webkit outline/gradient */ + background: -webkit-gradient(linear, left top, right top, color-stop(0%,#876a3b), color-stop(50%,#dfbd6b), color-stop(100%,#876a3b)); /* Chrome,Safari4+ */ + background: -webkit-linear-gradient(left, #876a3b 0%,#dfbd6b 50%,#876a3b 100%); /* Chrome10+,Safari5.1+ */ + -webkit-text-stroke: 0.03em #333; + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + } +} -.@{prefix}-mythic { color: #A2472A; } +.@{prefix}-mythic { + color: #BF4427; + &.ss-grad { + /* webkit outline/gradient */ + background: -webkit-gradient(linear, left top, right top, color-stop(0%,#b21f0f), color-stop(50%,#f38300), color-stop(100%,#b21f0f)); /* Chrome,Safari4+ */ + background: -webkit-linear-gradient(left, #b21f0f 0%,#f38300 50%,#b21f0f 100%); /* Chrome10+,Safari5.1+ */ + -webkit-text-stroke: 0.03em #333; + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + } +} diff --git a/css/main.css b/css/main.css index 2de7c86..1245a0a 100644 --- a/css/main.css +++ b/css/main.css @@ -162,7 +162,7 @@ blockquote { border-bottom: 1px solid #E0DCCD; line-height: 1.4em; padding: 20px 20px 18px; - margin: 20px 0; + margin: 20px 0 25px; border-radius: 4px; } diff --git a/examples.html b/examples.html index e797c1f..b344896 100644 --- a/examples.html +++ b/examples.html @@ -51,7 +51,7 @@You can place Keyrune icons anywhere using the CSS classname prefix ss
(for set symbol) and then the set icon's code. Inline elements like <i>
and <span>
are preferred, but any can be used.
- <i class="ss ss-zen"></i> ss-zen + <i class="ss ss-zen"></i> ss-zen
To conveniently increase the size of a set symbol you can append the classes ss-2x
, ss-3x
, ss-4x
, ss-4x
, and ss-6x
. These classes increase the size by a factor equal to class name number.
- <i class="ss ss-sth ss-2x"></i> ss-2x
- <i class="ss ss-sth ss-3x"></i> ss-3x
- <i class="ss ss-sth ss-4x"></i> ss-4x
- <i class="ss ss-sth ss-5x"></i> ss-5x
- <i class="ss ss-sth ss-6x"></i> ss-6x + <i class="ss ss-sth ss-2x"></i> ss-2x
+ <i class="ss ss-sth ss-3x"></i> ss-3x
+ <i class="ss ss-sth ss-4x"></i> ss-4x
+ <i class="ss ss-sth ss-5x"></i> ss-5x
+ <i class="ss ss-sth ss-6x"></i> ss-6x
All of the set symbols are variable width by default, if you put them in a list they may stack irregularly. To fix their width just append the class .ss-fw
and the set symbols will have a constant width and centered icon.
- <i class="ss ss-inv ss-fw"></i> Invasion
- <i class="ss ss-nms ss-fw"></i> Nemesis + <i class="ss ss-inv ss-fw"></i> Invasion
+ <i class="ss ss-nms ss-fw"></i> Nemesis
You can add a rarity color to each set symbol by appending the classes ss-common
, ss-uncommon
, ss-rare
, and ss-mythic
.
- <i class="ss ss-ons ss-common"></i> ss-common
- <i class="ss ss-ons ss-uncommon"></i> ss-uncommon
- <i class="ss ss-ons ss-rare"></i> ss-rare
- <i class="ss ss-ons ss-mythic"></i> ss-mythic + <i class="ss ss-ons ss-common"></i> ss-common
+ <i class="ss ss-ons ss-uncommon"></i> ss-uncommon
+ <i class="ss ss-ons ss-rare"></i> ss-rare
+ <i class="ss ss-ons ss-mythic"></i> ss-mythic
Webkit browsers suport the background-clip: text
property which opens up some exciting options for rarities: true text gradients! Append the .ss-grad
class to add a modern rarity gradient.
+ <i class="ss ss-mor ss-rare ss-grad ss-3x"></i> ss-grad+
+
Note: You will only see a gradient while using a Webkit browser (i.e., Chrome or Safari).
+