sergiokopplin/indigo

.home,
.blog,
.projects
    margin-top: 125px

    > .list
        border-top: 1px solid $epsilon
        margin-top: 30px
        padding-top: 40px
        position: relative

        &:before
            display: block
            content: " "
            width: 7px
            height: 7px
            border: $epsilon 1px solid
            position: absolute
            top: -5px
            left: 50%
            margin-left: -5px
            background: $omega
            box-shadow: $omega 0 0 0 5px
            border-radius: 3px

.home > .list,
.blog > .list,
.projects > .list
    > .item
        display: block
        width: 95%
        margin: 0 auto

    > .item > .url
        width: 100%
        display: block
        padding: 20px 0
        text-decoration: none

    > .item > .url > .title
        margin: 0
        width: 75%
        font-weight: 500
        transition: all ease-in-out .2s

    > .item:hover > .url > .title
        color: $delta

    // maybe we can't nest html5 elements
    // can you help me?
    aside
        position: relative
        top: 2px
        margin: 0
        width: 25%
        float: right
        font-weight: 300
        color: $gama
        text-align: right
        transition: all ease-in-out .2s

    .item:hover .url aside
        color: $alpha

.blog > .list > .item > .url,
.projects > .list > .item > .url
    > .title
        display: inline

    > .emoji
        display: inline
        position: relative
        top: -4px
        margin-right: 10px