From 9ac0c04078bd12935e71de7c3b84eeecdff91f26 Mon Sep 17 00:00:00 2001 From: Mischa POSLAWSKY Date: Wed, 1 May 2019 01:08:44 +0200 Subject: [PATCH] widget styling similar to blizzard's battle.net --- battle.css | 73 +++++++++++++++++++++++++++++++++++++++++++++++++++++ widget.html | 7 +++-- 2 files changed, 78 insertions(+), 2 deletions(-) create mode 100644 battle.css diff --git a/battle.css b/battle.css new file mode 100644 index 0000000..103dc7c --- /dev/null +++ b/battle.css @@ -0,0 +1,73 @@ +body { + background: #000D1A; + color: #CCE6FF; + font: 24px Source Sans Pro, Arial, sans-serif; +} + +h1 { + font: 700 1.2em Eurostile Extd,Source Sans Pro,sans-serif; + text-transform: uppercase; +} +h2 { + font: 700 .8em Eurostile, sans-serif; + text-transform: uppercase; +} +h1, +strong { + color: #FFF; + letter-spacing: .05em; + text-shadow: 0 2px 4px rgba(0, 0, 0, .8), 0 8px 16px rgba(0, 0, 0, .6); +} +h2, +a { + color: #CCE6FF; + text-decoration: none; +} +em { + color: #A3B8CC; +} +small { + color: #7AA3CC; + font-weight: 400; + font-size: 100%; +} + +figure { + text-align: center; + display: inline-block; + margin: 0 .5em 0 0; +} +figcaption { + margin-top: .2ex; +} +img { + border: 2px solid #122A42; + background: #021120; +} + +.rank:before { + background-image: url("https://static.starcraft2.com/dist/images/none.c8b435f5900fab1ac7981cc9b56f6f44.png"); + background-repeat: 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"); +} +.rank.gold:before { + background-image: url("https://static.starcraft2.com/dist/images/gold.ef84260f60c780d9fa2d99f083668592.png"); +} +.rank.platinum:before { + background-image: url("https://static.starcraft2.com/dist/images/platinum.f407fcd425549f315098b0806ef8eac4.png"); +} +.rank.diamond:before { + background-image: url("https://static.starcraft2.com/dist/images/diamond.6faad792f7b6bfc1c9f9bbeb5c289043.png"); +} +.rank.master:before { + background-image: url("https://static.starcraft2.com/dist/images/master.51c47057b8cee504613a87cd84fba16b.png"); +} diff --git a/widget.html b/widget.html index 88d5285..b337197 100644 --- a/widget.html +++ b/widget.html @@ -4,6 +4,9 @@ StarCraft ][ Clan summary + + + @@ -13,8 +16,8 @@ .then(res => res.json()) .then(json => { let out = document.getElementById('clan'); - out.innerHTML = `

${json.tag}

${json.league} #${json.rank}

` - + json.members.map(member => `

`).join(''); + out.innerHTML = `

${json.tag}

${json.league} #${json.rank}

` + + json.members.map(member => `

`).join(''); }) .catch(error => console.log(error)) -- 2.30.0