Fix to handle half cost in single element

README.md

@@ -1,4 +1,4 @@
-# Mana v1.4.0
+# Mana v1.4.1
 
 ## The Magic: the Gathering mana symbol font!
 
@@ -62,6 +62,7 @@ Attribution is **greatly appreciated** but not required!
 
 ## Changelog
 
+* v1.4.1 - half mana symbol fix using just the icon element (issue #6)
 * v1.4.0 - big update: artist, Poleis, power/toughness, DFC enchantment, and multiple type symbols added; simplified split cost handling; more planeswalker loyalties; SASS support
 * v1.3.2 - incrementing for new npm publish and jsDelivr note; fixed docs
 * v1.3.1 - fixed class name issue for 1,000,000 symbol

bower.json

@@ -1,7 +1,7 @@
 {
   "name": "mana",
   "homepage": "https://github.com/andrewgioia/Mana",
-  "version": "1.4.0",
+  "version": "1.4.1",
   "authors": [
     "Andrew Gioia <andrewgioia@gmail.com>"
   ],

css/mana.css

@@ -2,15 +2,15 @@
  * Global */
 @font-face {
   font-family: 'Mana';
-  src: url('../fonts/mana.eot?v=1.4.0');
+  src: url('../fonts/mana.eot?v=1.4.1');
-  src: url('../fonts/mana.eot?#iefix&v=1.4.0') format('embedded-opentype'), url('../fonts/mana.woff?v=1.4.0') format('woff'), url('../fonts/mana.ttf?v=1.4.0') format('truetype'), url('../fonts/mana.svg?v=1.4.0#mana') format('svg');
+  src: url('../fonts/mana.eot?#iefix&v=1.4.1') format('embedded-opentype'), url('../fonts/mana.woff?v=1.4.1') format('woff'), url('../fonts/mana.ttf?v=1.4.1') format('truetype'), url('../fonts/mana.svg?v=1.4.1#mana') format('svg');
   font-weight: normal;
   font-style: normal;
 }
 @font-face {
   font-family: 'MPlantin';
-  src: url('../fonts/mplantin.eot?v=1.4.0');
+  src: url('../fonts/mplantin.eot?v=1.4.1');
-  src: url('../fonts/mplantin.eot?#iefix&v=1.4.0') format('embedded-opentype'), url('../fonts/mplantin.woff?v=1.4.0') format('woff'), url('../fonts/mplantin.ttf?v=1.4.0') format('truetype'), url('../fonts/mplantin.svg?v=1.4.0#mplantin') format('svg');
+  src: url('../fonts/mplantin.eot?#iefix&v=1.4.1') format('embedded-opentype'), url('../fonts/mplantin.woff?v=1.4.1') format('woff'), url('../fonts/mplantin.ttf?v=1.4.1') format('truetype'), url('../fonts/mplantin.svg?v=1.4.1#mplantin') format('svg');
   font-weight: normal;
   font-style: normal;
 }
@@ -363,15 +363,24 @@
 }
 /**
  * Half costs */
-.ms-half {
+span.ms-half {
   width: .675em;
   overflow: hidden;
   display: inline-block;
   margin-left: .675em;
 }
-.ms-half > .ms-cost {
+span.ms-half > .ms-cost {
   margin-left: -0.675em;
 }
+.ms-half {
+  width: .675em;
+  margin-left: .675em;
+  overflow: hidden;
+  border-radius: 0 1em 1em 0;
+}
+.ms-half:before {
+  margin-left: -0.65em;
+}
 /**
  * Un-set costs */
 .ms-100 {

index.html

@@ -5,18 +5,25 @@
     <meta http-equiv="X-UA-Compatible" content="chrome=1" />
     <title>Mana</title>
     <link rel="stylesheet" href="css/mana.css?v=1.4.0" />
+    <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700,700i">
     <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
     <style type="text/css">
+        html {
+            border-top: 5px solid #CBC8BB;
+        }
         body {
             background: #fff;
-            border-top: 3px solid #CBC8BB;
             color: #333;
-            font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans",
+            font-family: 'Open Sans', 'Lucida Grande', 'Lucida Sans Unicode',
-                Geneva, "Helvetica Neue", Helvetica, Arial, sans-serif;
+                'Lucida Sans', Geneva, 'Helvetica Neue', Helvetica, Arial, sans-serif;
             font-size: 16px;
             line-height: 1.6em;
-            margin: 0;
+            margin: 0 auto;
             padding: 0 100px;
+            max-width: 1280px;
+        }
+        h1, h2, .mplantin {
+            font-family: MPlantin, Times, serif;
         }
         h3 {
             font-size: 16px;
@@ -31,6 +38,29 @@
             margin: 40px 0 0;
             padding: 20px 0 30px;
         }
+        .pt {
+            font-size: 19px;
+            display: inline-block;
+            position: relative;
+        }
+        .left {
+            width: 46%;
+            float: left;
+        }
+        .right {
+            width: 46%;
+            float: right;
+        }
+        @media screen and (max-width: 1280px) {
+            .left, .right {
+                float: none;
+                width: 100%;
+            }
+            .sm-screen {
+                display: inline-block;
+                padding-right: 10px;
+            }
+        }
     </style>
 </head>
 <body>
@@ -38,15 +68,22 @@
     <h2>MTG Mana Symbol Demos</h2>
     <p>
         This HTML file is for demo purposes and is not necessary for Mana installation or use.
-        You can view all of the mana symbol font icons and the available examples below (casting cost background and increased sizes).
+        You can view all of the mana symbol font icons and the available examples below
+        (casting cost background and increased sizes). Please take a look at the
+        <a href="https://andrewgioia.github.io/Mana">Mana documentation page</a> for
+        the full set of icons, attributes, and usages.
     </p>
+    <div class="left">
         <h3>Regular mana symbols</h3>
         <p>
+            <div class="sm-screen">
                 <i class="ms ms-w ms-cost ms-shadow"></i>
                 <i class="ms ms-u ms-cost ms-shadow"></i>
                 <i class="ms ms-b ms-cost ms-shadow"></i>
                 <i class="ms ms-r ms-cost ms-shadow"></i>
                 <i class="ms ms-g ms-cost ms-shadow"></i>
+            </div>
+            <div class="sm-screen">
                 <i class="ms ms-0 ms-cost ms-shadow"></i>
                 <i class="ms ms-1 ms-cost ms-shadow"></i>
                 <i class="ms ms-2 ms-cost ms-shadow"></i>
@@ -68,9 +105,12 @@
                 <i class="ms ms-18 ms-cost ms-shadow"></i>
                 <i class="ms ms-19 ms-cost ms-shadow"></i>
                 <i class="ms ms-20 ms-cost ms-shadow"></i>
+            </div>
+            <div class="sm-screen">
                 <i class="ms ms-x ms-cost ms-shadow"></i>
                 <i class="ms ms-y ms-cost ms-shadow"></i>
                 <i class="ms ms-z ms-cost ms-shadow"></i>
+            </div>
         </p>
         <h3>Phyrexian, snow, colorless, energy, and split symbols</h3>
         <p>
@@ -114,13 +154,21 @@
             <i class="ms ms-r ms-cost ms-shadow ms-2x"></i>
             <i class="ms ms-g ms-cost ms-shadow ms-2x"></i>
         </p>
-    <h3><a href="http://gatherer.wizards.com/Pages/Card/Details.aspx?multiverseid=74257">Half mana symbols</a></h3>
+        <h3>Half mana symbols <small>[<a href="http://gatherer.wizards.com/Pages/Card/Details.aspx?multiverseid=74257">Source</a>]</small></h3>
         <p>
-        <span class="ms-half"><i class="ms ms-w ms-cost"></i></span>
+            <i class="ms ms-w ms-half ms-cost"></i>
-        <span class="ms-half"><i class="ms ms-u ms-cost"></i></span>
+            <i class="ms ms-u ms-half ms-cost"></i>
-        <span class="ms-half"><i class="ms ms-b ms-cost"></i></span>
+            <i class="ms ms-b ms-half ms-cost"></i>
-        <span class="ms-half"><i class="ms ms-r ms-cost"></i></span>
+            <i class="ms ms-r ms-half ms-cost"></i>
-        <span class="ms-half"><i class="ms ms-g ms-cost"></i></span>
+            <i class="ms ms-g ms-half ms-cost"></i>
+        </p>
+        <h3>Portal power and toughness symbols</h3>
+        <p>
+            <span class="mplantin pt">4</span>
+            <i class="ms ms-power" style="font-size: 1.05em; margin: -8px 0 0 -3px;"></i>
+            <span class="mplantin pt" style="margin-left: -3px;">/</span>
+            <span class="mplantin pt" style="margin-left: -2px;">5</span>
+            <i class="ms ms-toughness" style="font-size: 1.05em; margin: -9px 0 0 -3px;"></i>
         </p>
         <h3>Un-set mana symbols</h3>
         <p>
@@ -129,7 +177,9 @@
             <i class="ms ms-100 ms-cost ms-shadow"></i>
             <i class="ms ms-1000000 ms-cost ms-shadow"></i>
         </p>
-    <h3>Future Sight type symbols</h3>
+    </div>
+    <div class="right">
+        <h3>Future Sight and other type symbols</h3>
         <p>
             <i class="ms ms-artifact ms-2x"></i>
             <i class="ms ms-creature ms-2x"></i>
@@ -192,6 +242,8 @@
             <i class="ms ms-polis-akros ms-2x"></i>
             <i class="ms ms-polis-meletis ms-2x"></i>
         </p>
+    </div>
+    <div style="clear: both;"></div>
     <footer>
         Made with &hearts; by <a href="http://andrewgioia.com">Andrew Gioia</a>
     </footer>

less/cost.less

@@ -302,7 +302,8 @@
 /**
  * Half costs */
 
-.@{ms-prefix}-half {
+// Legacy handling with <span> tag
+span.@{ms-prefix}-half {
     width: .675em;
     overflow: hidden;
     display: inline-block;
@@ -313,6 +314,17 @@
     }
 }
 
+// New single-element handling!
+.@{ms-prefix}-half {
+    width: .675em;
+    margin-left: .675em;
+    overflow: hidden;
+    border-radius: 0 1em 1em 0;
+    &:before {
+        margin-left: -.65em;
+    }
+}
+
 /**
  * Un-set costs */
 

less/variables.less

@@ -2,7 +2,7 @@
  * Global */
 
 @ms-font-path: '../fonts';
-@ms-version: '1.4.0';
+@ms-version: '1.4.1';
 @ms-font-size-base: 14px;
 @ms-prefix: ms;
 @ms-serif-font: MPlantin, Garamond, Palatino, 'Times New Roman', Times, serif;

package.json

@@ -1,6 +1,6 @@
 {
   "name": "mana-font",
-  "version": "1.4.0",
+  "version": "1.4.1",
   "description": "Magic: the Gathering mana symbol pictographic font",
   "main": "css/mana.css",
   "repository": {

sass/_cost.scss

@@ -302,7 +302,8 @@
 /**
  * Half costs */
 
-.#{$ms-prefix}-half {
+// Legacy handling with <span> tag
+span.#{$ms-prefix}-half {
     width: .675em;
     overflow: hidden;
     display: inline-block;
@@ -313,6 +314,18 @@
     }
 }
 
+// New single-element handling!
+.#{$ms-prefix}-half {
+    width: .675em;
+    margin-left: .675em;
+    overflow: hidden;
+    border-radius: 0 1em 1em 0;
+    &:before {
+        margin-left: -.65em;
+    }
+}
+
+
 /**
  * Un-set costs */
 

sass/_variables.scss

@@ -2,7 +2,7 @@
  * Global */
 
 $ms-font-path: '../fonts' !default;
-$ms-version: '1.4.0' !default;
+$ms-version: '1.4.1' !default;
 $ms-font-size-base: 14px !default;
 $ms-prefix: ms !default;
 $ms-serif-font: 'MPlantin, Garamond, Palatino, 'Times New Roman', Times, serif' !default;