archivist - page

<!------------------------------------------------------------------------


                    archivist // by @atlasthemes
                    pls do not remove credit, thanks!<3


------------------------------------------------------------------------->

<!DOCTYPE html>
<head>
<link rel="shortcut icon" href="{Favicon}">

<title>works in progress</title><!-- title for browser tab -->

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">

<style type="text/css">

/* -------------------------- change colors here ------------------------ */


:root {
    --body:#444444; /* text color */
    --link-color:#aaaaaa; /* link color */
    --accent:#b492a8; /* accent color */
}


/* ---------------------------------------------------------------------- */


@-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; }}

body {
    font-family:Calibri;
    font-size:12px;
    line-height:1.5em;
    color:var(--body);
    text-align:left;
    background-color:#fff;
    letter-spacing:0.2px;
    word-spacing:0.5px;
    -moz-osx-font-smoothing:grayscale;
    -webkit-font-smoothing:antialiased;
    font-smoothing:antialiased;
    -webkit-animation: fadein 1.3s;
    -moz-animation:fadein 1.3s;
    animation:fadein 1.3s;
    overflow-x:hidden;
}

a {color:var(--link-color);text-decoration: none;} a:hover {color:var(--accent);}

#banner {display:block;position:relative;height:20px;padding:10px;} #banner-title i {margin-right:5px;margin-top:-5px;}

#banner-title {
    display:inline-block;
    font-family:Georgia;
    font-size:16px;
    line-height:20px;
    color:var(--accent);
    vertical-align:middle;
}

#banner-links {float:right;text-align:right;} #banner-links span {display:inline-block;color:var(--link-color);margin-left:12px;}

#bar {
    display:block;
    position:relative;
    width:100%;
    height:25px;
    background-color:var(--accent);
    box-shadow:2px 2px 3px #ddd;
    margin-bottom:40px;
}

#bar-links {margin-left:15px;} #bar-links a {color:#fff;font-size:12px;line-height:25px;padding:5px 5px 6px 5px;} #bar-links a:hover {color:var(--body);background-color:#eee;}

#container {
    display:block;
    position:relative;
    margin:0px auto 100px auto;
    width:800px;
    height:auto;
    top:75px;
    border:1px solid #f6f6f6;
    box-shadow:3px 3px 5px #f6f6f6;
    padding-bottom:50px;
}

#top-buttons {display:block;position:relative;text-align:right;margin-bottom:10px;margin-right:35px;} #top-buttons i {font-size:9px;} #top-buttons button {font-family:Calibri;font-size:12px;background-color:#fafafa;border-radius:3px;line-height:16px;margin-left:5px;} #top-buttons button a {color:var(--body);}

#box-container {width:750px;margin:auto;}

#sidebar {
    display:block;
    float:left;
    margin:0px 20px 0px 0px;
    padding:10px 0px;
    border-top:5px solid var(--accent);
    border-bottom:5px solid var(--accent);
    width:100px;
    height:auto;
    top:0px;
    left:0px;
    border-radius:4px;
}

#sidebar article {margin-bottom:10px;padding-bottom:10px;border-bottom:1px solid #eee;text-align:right;} #sidebar article:last-of-type {border-bottom:0px!important;padding-bottom:0px!important;margin-bottom:0px!important;} #sidebar article a {color:var(--body);display:block;padding:0px 5px;} #sidebar article a:hover {color:var(--accent);background-color:#eee;} #sidebar article span {display:block;padding:0px 5px;}

.wip-box {
    display:inline-block;
    position:relative;
    border:1px solid #eee;
    width:615px;
    height:auto;
    margin:auto;
}

.wip-box-title {
    background-color:#eee;
    font-family:Georgia;
    font-size:12px;
    line-height:18px;
    padding:5px 10px;
}

section {
    display:block;
    margin:15px;
    padding:15px;
    height:auto;
    border:1px solid #eee;
}

.project-top {display:block;margin-bottom:5px;height:50px;}

.project-image {
    display:inline-block;
    float:left;
    margin-right:10px;
    width:50px;
    height:50px;
    vertical-align:middle;
}

.project-image img {width:50px;height:50px;}

.project-title {
    font-family:Georgia;
    font-size:13px;
    vertical-align:middle;
    padding-top:6px;
}

.project-title a {
    color:var(--accent);
}

.project-title a:hover {
    color:var(--link-color);
}

.project-title u {color:var(--accent);border-bottom:1px solid var(--accent);text-decoration:none;}

.themes {position:relative;margin:8px 0px;} .themes span {margin-right:8px;text-decoration:none;border-bottom:1px dotted var(--body);} .themes a {color:var(--body);text-decoration:none;} .themes a:hover {color:#fff;background-color:var(--accent);}

.stats {text-align:right;margin-top:8px;} .stats span {display:inline-block;margin-left:8px;}

iframe.tmblr-iframe {display:none;}

</style>
</head>
<body>

<!------------------------------------------------------------------------->
<!--                                                                     -->
<!--                      customization starts here                      -->
<!--                                                                     -->
<!------------------------------------------------------------------------->

<div id="container">


<div id="banner">

<!-- top banner -->

<div id="banner-title"><i class="fas fa-sitemap"></i> atlasthemes</div>

<div id="banner-links">
    <span>hi, atlasthemes!</span> <!-- your name here -->
    <span>post</span>
    <span>log out</span>
</div>
</div>

<!-- top bar -->

<div id="bar">
    <div id="bar-links">
        <a href="/">home</a>
        <a href="/ask">contact</a>
        <a href="/archive">archive</a>
        <!-- pls don't remove this one, thanks!!<3 -->
        <a href="http://www.atlasthemes.tumblr.com">theme</a>
    </div>
</div>


<!-- top buttons : these are just for show but you can make them links if you want -->

<div id="top-buttons">
    <button>post new</button>
    <button>edit works</button>
    <button>subscribe</button>
    <button>invitations</button>
</div>


<div id="box-container">

<!-- sidebar -------------------------------------------------------------->
<div id="sidebar">

<!-- change these links to whatever you want! -->

    <article> <!-- top sidebar links -->
        <a href="/">dashboard</a>
        <a href="/">index</a>
        <a href="/">inspiration</a>
        <a href="/">playlists</a>
    </article>

    <article>
        <span>works (3)</span>
        <span>drafts (2)</span>
        <span>completed (1)</span>
        <span>series (2)</span>
    </article>

    <article> <!-- bottom sidebar links -->
        <a href="/ask">inbox</a>
        <a href="/archive">history</a>
        <a href="https://www.tumblr.com/follow/atlasthemes">subscribe</a>
    </article>
</div>


<!-- current works section ------------------------------------------------>


<div class="wip-box">
<div class="wip-box-title">Current Works</div>


<!---------- project one ---------->

<section>
<div class="project-top">
    <div class="project-image">

        <!-- project image -->
        <img src="https://i.imgur.com/bKkwW2e.png">
    </div>

    <div class="project-title">

        <!-- project title : title can link to your project tag -->
        <u><a href="/">project one</a></u> by <u>atlasthemes</u> <br/>
        ya fantasy
    </div>
</div>

<!-- themes -->
<div class="themes">
    <span><b>themes:</b></span>
    <span>add some themes here</span>
    <span>theme one</span>
    <span>theme two wow it's a doozy</span>
    <span><a href="/">alternatively you could use this section</a></span>
    <span><a href="/">to list links and tags for your wip</a></span>
</div>

<!-- add your synopsis here -->
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla.

<!-- project stats -->
<div class="stats">
    <span>Started: 2017-05-12</span>
    <span>Genre: Fantasy</span>
    <span>Words: 15k</span>
    <span>Draft: First</span>
    <span>POV: Past, Third</span>
</div>
</section>
<!---------- end of project one ---------->


<!---------- project two ---------->
<section>

<div class="project-top">
    <div class="project-image">
        <img src="http://i.imgur.com/MDBf2LF.png">
    </div>

    <div class="project-title">
        <u><a href="/">project two</a></u> by <u>atlasthemes</u> <br/>
        poetry collection
    </div>
</div>

<div class="themes">
    <span><b>themes:</b></span>
    <span>theme one</span>
    <span>theme two</span>
    <span>theme three</span>
    <span>theme four</span>
    <span>theme five</span>
</div>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla.

<div class="stats">
    <span>Started: 2018-12-23</span>
    <span>Genre: poetry</span>
    <span>Words: 5k</span>
    <span>Draft: First</span>
    <span>POV: Past, Third</span>
</div>
</section>
<!---------- end of project two ---------->


<!----------

to add more projects, copy one whole project and paste after the end of the second project, then update with new info. you can add as many projects as you want!

---------->


</div></div></div>
</body>
</html>