Skip to content

Instantly share code, notes, and snippets.

@EnzDev

EnzDev/index.html

Created April 11, 2019 07:14
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save EnzDev/30cfe6803a9f189c1183d87dc490e20a to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save EnzDev/30cfe6803a9f189c1183d87dc490e20a to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. EnzDev created this gist Apr 11, 2019.
    172 changes: 172 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,172 @@
    <!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>
    159 changes: 159 additions & 0 deletions style.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,159 @@
    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);
    }