full stop | resolutions page

<!--

    - page 'full stop' by skye southcodes.tumblr.com
    - modify as you please but please do not touch the credit
    - any errors? need help? have questions? let me know!
    southcodes.tumblr.com/inbox

    - normalize css by https://github.com/necolas
    - fonts by google
    - icon font by https://cappuccicons.com/

-->

<!DOCTYPE html>
<html>
<head>
    <title>{title}</title>

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width">

    <link rel="shortcut icon" href="{favicon}">
    <link rel="alternate" type="application/rss+xml" href="{RSS}">
    {block:Description}<meta name="description" content="{MetaDescription}"/>{/block:Description}

    <!-- fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,400;0,500;1,400;1,500&family=Open+Sans:ital,wght@0,400;0,600;1,400;1,600&display=swap" rel="stylesheet">

    <!-- icons -->
    <script src="https://pull.cappuccicons.com/cpf.js"></script>
    <link href="https://icons.cappuccicons.com/cpf.css" rel="stylesheet">

    <!-- normalize css -->
    <link href="https://necolas.github.io/normalize.css/7.0.0/normalize.css" rel="stylesheet">

<style>
/*  general  */

body, figure{margin: 0;padding: 0}
html{font-size: 14px}
body {font: 1rem 'Open Sans', sans-serif;

color:#333     /* text color */

}
a {text-decoration: none;

color:#7778a4;      /* links color */

}
a:hover {

color:#36608c;     /* links hover color */

}
b {font-weight: 600}

nav ul,nav li {list-style-type:none;margin:0;padding:0;}

/*  header  */

header {
text-align: center;
margin:7rem auto 5rem;
width:95vw;
max-width: 35rem;
}

figure.header-image {
width:5rem;
height:5rem;
display: inline-block;
vertical-align: middle;
margin-right: 2rem;
}
img.header-image {
width:100%;
height:100%;
border-radius: 100%;
object-fit: cover;
}

#title {
font: 500 1.2rem 'Montserrat', sans-serif;
vertical-align: middle;
display: inline-block;
}

#description {
margin:3rem 0;
line-height: 170%;
letter-spacing: .03rem;
font-size: .9rem;
}

#navigation .cp {
font-size: 1.2rem;
}
#navigation li{
display: inline-block;
margin:0 1.5rem
}

/* main */

main {
width:95vw;
max-width: 35rem;
margin:0 auto 5rem;
font-size: .95rem;
}

main li{
list-style-type:none;margin:0;padding:0;
border:1px solid rgb(206, 206, 206);
margin-top:-1px;
padding:1rem;
margin-bottom: 2rem;
}

.finished {background:rgb(226, 240, 228);
position: relative;}
.finished:before {
font-family:'cappuccicons';
content: '\e9d9';
color:green;
margin-right: 1rem;
}

.pending {background-color:rgb(245, 231, 231);padding-left: 3rem;position: relative;}
.pending:before {
position: absolute;
left:1rem;
font-family:'cappuccicons';
content: '\ec3a';
color:red;
-webkit-animation:spin 4s linear infinite;
-moz-animation:spin 4s linear infinite;
animation:spin 4s linear infinite;
}
@-moz-keyframes spin {
100% { -moz-transform: rotate(360deg); }
}
@-webkit-keyframes spin {
100% { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
100% {
    -webkit-transform: rotate(360deg);
    transform:rotate(360deg);
}
}

</style>
</head>
<body>

<header>

    <figure class="header-image">

        <img src="IMAGE URL" class="header-image">

    </figure>

    <h1 id="title">new years resolutions title</h1>

    <article id="description">
        <p>A description: Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente velit quidem reiciendis ex? Animi adipisci nulla odit ducimus, possimus eos hic recusandae culpa debitis modi exercitationem ad, voluptates voluptatibus eius?</p>
    </article>

    <nav id="navigation"><ul>

        <li><a href="/" title="home"><i class="cp cp-home"></i></a></li>

        <li><a href="/ask" title="ask"><i class="cp cp-envelope"></i></a></li>

        <li><a href="#" title="about"><i class="cp cp-user"></i></a></li>

        <li><a href="#" title="menu"><i class="cp cp-menu"></i></a></li>

    </ul></nav>
</header>


<main>

    <!--
        TEMPLATES:

        use this code if the resolution has not been completed:

        <li class="pending">your resolution here</li>

        ----------------

        use this code if the resolution has been completed:

        <li class="finished">your resolution here</li>

     -->

    <li class="pending">a pending resolution</li>

    <li class="finished">a finished resolution</li>


</main>


<footer><a href="https://southcodes.tumblr.com/" style="font-size:.9rem;position: fixed;bottom:1rem;right:1rem;font-family: 'Montserrat', sans-serif;font-weight: 600;color:#888" target="_blank" >SC</a></footer>
</body>
</html>