progress / WINGS

<!DOCTYPE html>
<head>
<!------


                              wings

                            @odeysseus


------>
    <title> title </title> <!--title-->


<link rel="shortcut icon" href="{Favicon}">
<link rel="alternate" type="application/rss+xml" href="{RSS}">
<link href="https://fonts.googleapis.com/css?family=Work+Sans" rel="stylesheet">

<style type="text/css">

* { margin:0;padding:0; }

@-webkit-keyframes fadein {
        0%   {opacity: 0;}
        100% { opacity: 1; }
}

@-moz-keyframes fadein {
        0%   { opacity: 0; }
        100% { opacity: 1; }
}

@keyframes fadein {
        0%   { opacity: 0; }
        100% { opacity: 1; }
}


@-webkit-keyframes flow {
        0%   {width:0;}
        100% {width:100%;}
}

@-moz-keyframes flow {
        0%   {width:0;}
        100% {width:100%;}
}

@keyframes flow {
        0%   {width:0;}
        100% {width:100%;}
}


.tmblr-iframe { display:none; } a { transition:0.15s ease-in;-webkit-transition:0.15s ease-in;-moz-transition:0.15s ease-in;} .fuckchad a { bottom:27px;right:27px;position:fixed;border:0; } b,strong { color:#444; }


body {
    background:#fff; /*background*/
    font-family:'Work Sans',sans-serif; /*font*/
    font-size:10px; /* font size */
    line-height:180%;
    color:#767676; /* text color */
    letter-spacing:.5px;
    -webkit-animation-name: fadein;-webkit-animation-duration: 1s;
    -moz-osx-font-smoothing:grayscale;
    -webkit-font-smoothing:antialiased;
    font-smoothing:antialiased;

}

a { color:#aaa; /*links*/ text-decoration:none; }
a:hover { color:#444; /* link hover */ text-decoration:none;}
header a { margin-right:5px;}

h1 { /* main heading */
    font-size:14px;
    color:#444;
    font-weight:400;
}


h2 { /* subheadings (for each progress bar) */
font-size:11px;
margin:-25px 0px 0px;
font-weight:400;
position:absolute;

}

header {
    margin:10px 0px 25px;
    padding:10px 0px 10px;
    border-bottom:1px solid #ededed;
}


section {
    width:600px; /* 300px for one column, 900px for three */
    top:50%;left:50%;transform:translate(-50%,-50%);
    max-height:80vh;overflow-y:auto;position:fixed;
}

article {
    margin:25px auto; /* adjust the 25px to change spacing */
    width:300px;
    background:#ededed; /* border color for progress bars */
    float:left;
    position:relative;
    height:1px;
}

.bar {
    height:3px;
    position:absolute;
    background:#ccc;
    margin-top:-1px;
    -webkit-animation-name:flow;
    -webkit-animation-duration: 2s;
}

.fill {
    content:'';
    height:1px;
    z-index:200000;
    right:0;
    border-top:1px solid #fff;
    border-bottom:1px solid #fff;
    background:#ededed; /* border color for progress bars */
    position:absolute;
    margin-top:-1px;
}

/* progress bar colors - you can change these using colorpicker.com */
article.red .bar { background:#ff9b9b;}
article.orange .bar { background:#ffd39b; }
article.yellow .bar { background:#faff82; }
article.green .bar { background:#c1ffa3; }
article.blue .bar { background:#c1eaff; }
article.indigo .bar { background:#c1c3ff; }
article.purple .bar { background:#ebd6ff; }
article.pink .bar { background:#ffd3f0; }
</style>
</head>
<body>
<section>
<header> <!--header-->
<h1>works in progress</h1> <!--title-->

<!--links - add or delete as you wish-->
<a href="/">home</a>
<a href="/ask">request</a>
<a href="http://tumblr.com/dashboard">dash</a>

<!--end header--> </header>

<!--example bar:

<article class="pink">

<h2>about page</h2>
<div class="bar" style="width:50%"></div>
<div class="fill" style="width:50%"></div>

</article>

explanation:

class="pink" can be changed to any of the colours (red,orange,etc) above </style> - this is the color of the progress bar

<h2> ... </h2> is the project name

<div class="bar" style="width:50%"></div> is where you input your progress, adjust the 50% as you wish.

<div class="fill" style="width:50%"></div> should be 100% minus your progress. so if my bar width is 40%, the fill width is 60%, and so on.

-->


<article class="pink">

<h2> project name </h2>
<div class="bar" style="width:30%"></div>
<div class="fill" style="width:70%"></div>

</article>


<!--do not edit beyond this point-->
</section> <div class="fuckchad"><a href="http://odeysseus.tumblr.com">O</a></div> </body> </html>