improve styling as matrix widget

[sc2-widget] / battle.css

diff --git a/battle.css b/battle.css
index 103dc7c750c4ca00d4814c26f9cae4e052e83fc1..710d151d37beba5c6f685a105c1dda3f2c4bc824 100644 (file)
--- a/battle.css
+++ b/battle.css
@@ -3,12 +3,25 @@ body {
        color: #CCE6FF;
        font: 24px Source Sans Pro, Arial, sans-serif;
 }
+body {
+       margin-top: 1ex;
+}
 
 h1 {
        font: 700 1.2em Eurostile Extd,Source Sans Pro,sans-serif;
        text-transform: uppercase;
+       margin-top: 0;
+}
+h1:before {
+       background: url('https://static.starcraft2.com/dist/images/global/logos/img-sc2-nav-icon.png') no-repeat;
+       width: 50px;
+       height: 50px;
+       display: inline-block;
+       content: '';
+       vertical-align: middle;
+       margin: -1ex .4em -1ex 0;
 }
-h2 {
+.ladders {
        font: 700 .8em Eurostile, sans-serif;
        text-transform: uppercase;
 }
@@ -32,10 +45,21 @@ small {
        font-size: 100%;
 }
 
+ul {
+       overflow: hidden;
+       padding: 0;
+       margin: 0;
+       list-style: none;
+}
+li {
+       float: left;
+       margin-right: .8em;
+}
+
 figure {
        text-align: center;
        display: inline-block;
-       margin: 0 .5em 0 0;
+       margin: 0;
 }
 figcaption {
        margin-top: .2ex;
@@ -46,15 +70,13 @@ img {
 }
 
 .rank:before {
-       background-image: url("https://static.starcraft2.com/dist/images/none.c8b435f5900fab1ac7981cc9b56f6f44.png");
-       background-repeat: no-repeat;
+       background: url("https://static.starcraft2.com/dist/images/none.c8b435f5900fab1ac7981cc9b56f6f44.png") no-repeat;
        background-position: -100px 0;
        width: 45px;
        height: 45px;
        display: inline-block;
        content: '';
        vertical-align: middle;
-       margin-right: .2em;
 }
 .rank.silver:before {
        background-image: url("https://static.starcraft2.com/dist/images/silver.57bb73a131314d657135d2acf533d5e5.png");
@@ -71,3 +93,13 @@ img {
 .rank.master:before {
        background-image: url("https://static.starcraft2.com/dist/images/master.51c47057b8cee504613a87cd84fba16b.png");
 }
+
+.ladders {
+       float: right;
+       margin: 0;
+       margin-top: -3ex;
+}
+.ladders li {
+       float: none;
+       margin-right: 0;
+}