Skip to content

Instantly share code, notes, and snippets.

@EnzDev

EnzDev/index.html

Created April 11, 2019 07:14
Show Gist options
  • Save EnzDev/30cfe6803a9f189c1183d87dc490e20a to your computer and use it in GitHub Desktop.
Save EnzDev/30cfe6803a9f189c1183d87dc490e20a to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link
rel="stylesheet"
href="https://meyerweb.com/eric/tools/css/reset/reset.css"
/>
<link
href="https://fonts.googleapis.com/css?family=Major+Mono+Display"
rel="stylesheet"
/>
<link
href="https://fonts.googleapis.com/css?family=Montserrat:300,400,900"
rel="stylesheet"
/>
<link rel="stylesheet" href="style.css" />
<title>Sandbox</title>
</head>
<body>
<section class="block color-a">
<div class="sec-title">Overview</div>
<!-- use CSS to add the > before -->
<div class="main">
<div class="info">
<span class="data">64</span>
<span class="title">Developers</span>
</div>
<div class="info">
<span class="data">532</span>
<span class="title">Contributors</span>
</div>
<div class="info">
<span class="data">12326</span>
<span class="title">Stars 🌟</span>
</div>
</div>
</section>
<section class="block">
<div class="sec-title">Top Repositories</div>
<!-- use CSS to add the > before -->
<div class="main nowrap">
<div class="intro">
Here is a little automated introduction about your top repositories !
<br />
As you can see, you have a great repo
<strong>Project Z</strong> topping with <em>12002</em> stars !
</div>
<div class="list">
<span>stars</span><span></span><span>contributors</span>
<span>12002</span><span>Project Z</span><span>137</span>
<span>862</span><span>Project A</span><span>62</span> <span>276</span
><span>Project New</span><span>13</span> <span>13</span
><span>Project M</span><span>8</span>
</div>
</div>
</section>
<section class="block color-b">
<div class="sec-title">Top Used Languages</div>
<!-- use CSS to add the > before -->
<div class="main nowrap">
<div class="intro">
Here is a little automated introduction about your top languages
repositories !
<br />
Your prefered language seems to be Java !
</div>
<div class="main">
<div class="info table">
<div>
<span class="data"></span
><span class="title">Number of Projects</span>
</div>
<div>
<span class="data">Java</span><span class="title">7</span>
</div>
<div><span class="data">CSS</span><span class="title">5</span></div>
<div>
<span class="data">HTML</span><span class="title">4</span>
</div>
<div>
<span class="data">Python</span><span class="title">4</span>
</div>
<div>
<span class="data">Shell</span><span class="title">2</span>
</div>
</div>
</div>
</div>
</section>
<section class="block color-c">
<div class="sec-title">Your most frequent assigned labels</div>
<!-- use CSS to add the > before -->
<div class="main nowrap">
<div class="intro">
Here are the most common labels assigned to your issues.
<br />
You want to make a lots of features !
</div>
<div class="main label">
<div class="info">
<div>
<span
class="data"
style="background:#EEEEEE; border-color:#EEEEEE;"
><span>type: feature</span></span
>
</div>
<div>
<span
class="data"
style="background:#EEEEEE; border-color:#EEEEEE;"
><span>type: bug/fix</span></span
>
</div>
<div>
<span
class="data"
style="background:#c7def8; border-color:#c7def8;"
><span>comp: build & ci</span></span
>
</div>
<div>
<span class="data" style="background:black; border-color:black;"
><span>effort3: weeks</span></span
>
</div>
<div>
<span
class="data"
style="background:#d4c5f9; border-color:#d4c5f9;"
><span>hotlist: angular-core-team</span></span
>
</div>
<div>
<span
class="data"
style="background:#bfe5bf; border-color:#bfe5bf;"
><span>effort1: hours</span></span
>
</div>
<div>
<span
class="data"
style="background:#fbca04; border-color:#fbca04;"
><span>freq3: high</span></span
>
</div>
<div>
<span
class="data"
style="background:#0052cc; border-color:#0052cc;"
><span>severity5: regression</span></span
>
</div>
<!-- Force color white/black if 15% < L > 90% -->
<!-- L = r,g,b : sum([255*_ for _ in (r,g,b)]) / 195075 -->
<!-- TODO: See how to handle element's bg color -->
</div>
</div>
</div>
</section>
</body>
</html>
Raw
style.css
body {
font-size: 120%;
}
.sec-title:before {
content: ">";
margin-right: 10px;
}
.sec-title {
font-size: 2rem;
font-family: "Major Mono Display", monospace;
}
.block {
padding: 20px;
color: white;
}
.title {
font-size: 1.25rem;
}
.data {
font-size: 1.3rem;
font-weight: bold;
}
.sec-title {
font-size: 2rem;
font-weight: bolder;
padding-bottom: 20px;
}
.info {
flex-grow: 1;
display: flex;
flex-direction: column;
padding: 10px;
font-family: monospace;
text-align: center;
}
.main {
display: flex;
flex-wrap: wrap;
justify-content: center;
flex-grow: 1;
}
.main.nowrap {
flex-wrap: nowrap;
}
.main.reverse {
flex-direction: row-reverse;
}
.color-a {
background: #1abc9c;
}
.color-b {
background: #3498db;
}
.color-c {
background: #f1c40f;
color:
}
.block:not(.color-a):not(.color-b):not(.color-c) {
color: grey;
}
.intro {
font-family: "Montserrat", sans-serif;
}
.list {
display: grid;
grid-template-columns: 100fr auto 100fr;
grid-row-gap: 0.5em;
grid-column-gap: 1em;
flex-grow: 1;
}
.list span:nth-child(-n + 3) {
font-weight: bold;
font-family: "Major Mono Display", monospace;
}
.list span:nth-child(3n-2) {
text-align: right;
}
.list span:nth-child(3n-1) {
font-family: "Major Mono Display", monospace;
text-transform: lowercase;
}
.list span:nth-child(4),
.list span:nth-child(5),
.list span:nth-child(6),
.table div:nth-child(2) span{
font-size: 2em;
}
.list span:nth-child(7),
.list span:nth-child(8),
.list span:nth-child(9),
.table div:nth-child(3) span{
font-size: 1.5em;
}
.list span:nth-child(10),
.list span:nth-child(11),
.list span:nth-child(12),
.table div:nth-child(4) span{
font-size: 1.25em;
}
.table div:nth-child(n+5) span{
font-size: 1em;
}
.info.table {
display: table;
border-collapse: separate;
border-spacing: 0.5em;
align-self: center;
text-align: left;
}
.info.table div {
display: table-row;
}
.info.table div span {
display: table-cell;
}
.info.table div span:nth-child(1) {
text-align: right;
padding-right: 15px;
}
.label .info > div {
display: flex;
align-self: self-start;
padding-bottom: 0.4em;
padding-left: 10em;
}
.label .data {
font-size: 1.3rem;
font-weight: bold;
border: 0.4em solid;
border-radius: calc( ( 1.3rem + 0.4em ) /2 );
}
.label .data span {
mix-blend-mode: difference;
color: rgb(50,150,150);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment