Timeline Exploration

index.pug

article.timeline(style="--weeks:20; --current:5; --target:16; --prediction:14")
    div.leftline(data-date="22nd January")
    div.middleline
    div.rightline(data-date="10th June")
    div.target
    div.buffer
    div.overdue
    div.current
    div.prediction(data-date="29th April")

playground.json

{
  "scripts": [],
  "styles": []
}

script.ts

‎‎​

style.scss

:root {
    --bg-main:#2D313E;
    --bg-sidebar1:#262A37;
    --bg-sidebar2:#21252F;
    --bg-card:#373B49;
    --tx-main:#F5F7FA;
    --tx-sidebar2:#A9B9C9;
    --tx-sidebar3:#616B7A;
    --accent:#2491F0;
    --accent-ul:#82C6F7;
    --accent-ud:#1F4059;
    --task-color:var(--accent);
}
body {
    display: flex;
    flex-direction: column;
    background: var(--bg-main);
    color:var(--tx-main);
    margin:4rem 4rem 0 4rem;
    article.timeline {
        position: relative;
        display:grid;
        grid-template-columns: 5rem repeat(var(--weeks,1), 1fr) 5rem;
        grid-template-rows: 2rem 2rem 0.25rem;
        //height:3rem;
        //background:var(--bg-sidebar1);
        margin-bottom:4rem;
        &:before {
            z-index:2;
            content: '';
            position: absolute;
            top:0;
            right:0;
            bottom:0;
            left:0;
            background: linear-gradient(180deg, var(--bg-main) .5rem, transparent), linear-gradient(-90deg, var(--bg-main) 0, transparent 4rem), linear-gradient(90deg, var(--bg-main) 0, transparent 4rem);
        }
        .leftline, .rightline {
            z-index: 1;
            position: relative;
            &:before, &:after {
                position: absolute;
            }
            &:before {
                content: '';
                bottom:0;
                width:.25rem;
                height:4.25rem;
                background: linear-gradient(180deg, rgba(255,255,255,0), rgba(255,255,255,1));
            }
            &:after {
                content: attr(data-date);
                bottom:-.5rem;
                width:8rem;
                text-align: center;
                font-family: "segoe ui", "helvetica", sans-serif;
            }
        }
        .leftline {
            grid-area: 3 / 1;
            background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,1));
            &:before, &:after {
                right:0;
            }
            &:before {
                transform: translateX(50%);
            }
            &:after {
                transform: translate(50%,100%);
            }
        }
        .rightline {
            grid-area: 3 / calc(var(--weeks) + 2);
            background: linear-gradient(-90deg, rgba(255,255,255,0), rgba(255,255,255,1));
            &:before, &:after {
                left:0;
            }
            &:before {
                transform: translateX(-50%);
            }
            &:after {
                transform: translate(-50%,100%);
            }
        }
        .middleline {
            z-index: 1;
            grid-area: 3 / 2 / 3 / calc(var(--weeks) + 2);
            background: repeating-linear-gradient(90deg, rgba(255,255,255,.25), rgba(255,255,255,.25) .25rem, white .25rem, white calc(100% / var(--weeks)));
            background-position-x:-.125rem;
        }
        .target {
            grid-area: 2 / var(--current) / 4 / calc(var(--target) + 2);
            background:linear-gradient(180deg, var(--bg-main) 0, transparent 1rem), repeating-linear-gradient(-45deg, rgba(160,212,104,.8), rgba(160,212,104,.4).125rem, rgba(160,212,104,.4) .125rem, rgba(160,212,104,.1) .5rem);
            box-shadow: .125rem 0 0 0 rgba(160,212,104,.8);
            margin-right: .0625rem;
        }
        .buffer {
            grid-area: 2 / calc(var(--target) + 2) / 4 / calc(var(--weeks) + 2);
            background:linear-gradient(180deg, var(--bg-main) 0, transparent 1rem), repeating-linear-gradient(-45deg, rgba(255,206,84,.8), rgba(255,206,84,.4).125rem, rgba(255,206,84,.4) .125rem, rgba(255,206,84,.1) .5rem);
            //box-shadow: .125rem 0 0 0 rgba(255,206,84,.8);
            margin-right: .0625rem;
        }
        .overdue {
            grid-area: 2 / calc(var(--weeks) + 2) / 4 / calc(var(--weeks) + 2);
            background:linear-gradient(180deg, var(--bg-main) 0, transparent 1rem), repeating-linear-gradient(-45deg, rgba(216,51,74,.8), rgba(216,51,74,.4).125rem, rgba(216,51,74,.4) .125rem, rgba(216,51,74,.1) .5rem);
            //box-shadow: .125rem 0 0 0 rgba(255,206,84,.8);
            margin-right: .0625rem;
        }
        .current {
            grid-area: 1 / 1 / 4 / var(--current);
            background:repeating-linear-gradient(-45deg, rgba(255,255,255,.2), rgba(255,255,255,.6).125rem, rgba(255,255,255,1) .125rem, rgba(255,255,255,.6) .5rem);
            box-shadow: .125rem 0 0 0 rgba(255,255,255,.8);
            margin-right: .0625rem;
        }
        .prediction {
            position: relative;
            grid-area:1 / 1 / 4 / calc(var(--prediction) + 1);
            box-shadow: .25rem 0 0 0 #4FC1E9;
            color:#4FC1E9;
            margin-right: .125rem;
            &:before {
                content: attr(data-date);
                position: absolute;
                bottom:-.5rem;
                right:0;
                width:8rem;
                text-align: center;
                font-family: "segoe ui", "helvetica", sans-serif;
                transform: translate(50%,100%);
            }
        }
    }
}