--- /dev/null
+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");
+}
<head>
<meta charset="utf-8" />
<title>StarCraft ][ Clan summary</title>
+<link rel="stylesheet" type="text/css" href="/schtarr/battle.css" />
+<meta name="theme-color" content="#000D1A" />
+<meta name="viewport" content="width=device-width" />
</head>
<body>
.then(res => res.json())
.then(json => {
let out = document.getElementById('clan');
- out.innerHTML = `<h1>${json.tag}</h1><h2 title="Division ${json.division}">${json.league} <small>#${json.rank}</small></h2>`
- + json.members.map(member => `<a href="${member.profileUrl}"><img src="${member.avatarUrl}" title="${member.name}" /></a>`).join('');
+ out.innerHTML = `<h1>${json.tag}</h1><h2 title="Division ${json.division}" class="rank ${json.league}">${json.league} <small>#${json.rank}</small></h2>`
+ + json.members.map(member => `<a href="${member.profileUrl}"><figure><img src="${member.avatarUrl}" title="${member.name}" /><figcaption>${member.name}</figcaption></figure></a>`).join('');
})
.catch(error => console.log(error))
</script>
git.shiar.nl / sc2-widget / commitdiff