github-stats/templates/languages.svg

122 lines
1.9 KiB
XML
Raw Permalink Normal View History

2021-11-15 13:19:45 +00:00
<svg width="360" height="210" xmlns="http://www.w3.org/2000/svg">
<style>
svg {
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji;
font-size: 14px;
line-height: 21px;
}
#background {
width: calc(100% - 10px);
height: calc(100% - 10px);
fill: white;
stroke: rgb(225, 228, 232);
stroke-width: 1px;
rx: 6px;
ry: 6px;
}
foreignObject {
width: calc(100% - 10px - 32px);
height: calc(100% - 10px - 24px);
}
h2 {
margin-top: 0;
margin-bottom: 0.75em;
line-height: 24px;
font-size: 16px;
font-weight: 600;
color: rgb(36, 41, 46);
fill: rgb(36, 41, 46);
}
ul {
list-style: none;
padding-left: 0;
margin-top: 0;
margin-bottom: 0;
}
li {
display: inline-flex;
font-size: 12px;
margin-right: 2ch;
align-items: center;
flex-wrap: nowrap;
transform: translateX(-500%);
animation-duration: 2s;
animation-name: slideIn;
animation-function: ease-in-out;
animation-fill-mode: forwards;
}
@keyframes slideIn {
to {
transform: translateX(0);
}
}
div.ellipsis {
height: 100%;
overflow: hidden;
text-overflow: ellipsis;
}
.octicon {
fill: rgb(88, 96, 105);
margin-right: 0.5ch;
vertical-align: top;
}
.progress {
display: flex;
height: 8px;
overflow: hidden;
background-color: rgb(225, 228, 232);
border-radius: 6px;
outline: 1px solid transparent;
margin-bottom: 1em;
}
.progress-item {
outline: 2px solid rgb(225, 228, 232);
border-collapse: collapse;
}
.lang {
font-weight: 600;
margin-right: 4px;
color: rgb(36, 41, 46);
}
.percent {
color: rgb(88, 96, 105)
}
</style>
<g>
<rect x="5" y="5" id="background" />
<g>
<foreignObject x="21" y="17" width="318" height="176">
<div xmlns="http://www.w3.org/1999/xhtml" class="ellipsis">
<h2>Languages Used (By File Size)</h2>
<div>
<span class="progress">
{{ progress }}
</span>
</div>
<ul>
{{ lang_list }}
</ul>
</div>
</foreignObject>
</g>
</g>
</svg>