gogs/templates/repo/language_statistics.tmpl

<style>@import "/css/language_statistics.css";</style>
<div class="statistics">
	<div class="box3d">
		<div class="toppanel repo">
			<ul class="navbar">
				<li class="navitem">
					<i class="octicon octicon-history"></i>
					<a href="{{.RepoLink}}/commits/{{EscapePound .BranchName}}">{{.CommitsCount}} Commit(s)</a>
				</li>
				<li class="navitem">
					<i class="octicon octicon-git-branch"></i>
					{{len .Branches}} Branch(es)
				</li>
				<li class="navitem">
					<i class="octicon octicon-tag"></i>
					<a href="{{.RepoLink}}/releases">{{.Repository.NumTags}} Release(s)</a>
				</li>
				<li class="navitem">
					<i class="octicon octicon-organization"></i>
					1337 Contributors
				</li>
			</ul>
			<div class="bottompanel lang">
				<ul class="navbar">
				{{range $Lang := .LanguageStats}}
					<li class="navitem" style="color:{{$Lang.Color}}" data-percent="{{$Lang.Percent}}">
						<a href="#">{{$Lang.Name}}</a>
					</li>
				{{end}}
				</ul>
			</div>
		</div>
	</div>

	<!--
		would prefer not to use inline styles for this
		in favor of data-* attributes + attr() in css
		however browsers do not support this yet
		and JavaScript cannot target ::before, ::after
	-->
	<div class="underbar" title="Language Statistics" onclick="document.querySelector('.box3d').classList.toggle('focusstate')">
		{{range $Lang := .LanguageStats}}
			<span style="color:{{$Lang.Color}};flex-basis:{{$Lang.Percent}}">{{$Lang.Name}}</span>
		{{end}}
	</div>
</div>