@require 'reset.styl'

/* A class used for displaying URLs domain (under post tile) */
.netloc
    color #828282
    font-style italic

.monkey
    height 1.5em
    margin 0 1em
    vertical-align middle

/* Logo text */
a.logo,
a.logo:hover,
a.logo:visited
    color           #000
    font-weight     bold
    text-decoration none

body
    > .container
        margin      auto
        max-width   80%
    
        /* Page header */
        > .header
            padding     1rem 0
            text-align  center
            
            /* Menu under the logo */
            > .menu
                border-bottom 1px solid transparent
                display         flex
                flex-direction  row
                flex-wrap       wrap
                justify-content flex-start
                align-content   flex-start
                align-items     flex-start
                
                margin          1em auto
                
                > .flex-item
                    flex            0 1 auto
                    align-self      auto
                    order           0
                    
                    border          0
                    border-bottom   1px solid #ccc
                    color           #000
                    margin          0 0
                    padding         0 .5rem .5rem .5rem
                    
                    &:first-child
                        border-bottom 2px solid transparent
                        margin-left   0
                
                /* Highlight menu item of the current active page (Hot/New/Submit/...) */
                > .active_page
                    border-bottom   3px solid #000
                
                /* Highlight username if there are unread messages */
                .new_messages
                    background-color    rgb(255, 175, 50)
                    border-radius       4px
                    color               #fff
                    font-weight         bold
                    margin              0
                    padding             .5em .5em
                    text-decoration     none
        
        
        > .content
            padding     1em 0
            line-height 1.5em
        
            .vote
                margin 0
                
                > form
                    display inline-block
                    
                    > button
                        background      transparent
                        border          0
                        cursor          pointer
                        display         inline-block
                        font-family     "Courier New", Courier, monospace
                        font-size       1rem
                        margin          0
                        overflow        hidden
                        padding         0
                        text-decoration none
                        vertical-align  middle
                
                        /* Arrow style if already upvoted (green) */
                        &.upvoted
                            background-color #00e313
                            border-radius    999em
                            color            #fff
                            font-weight      bolder
                            height           1rem
                            width            1rem
                        
                        /* Arrow style if already upvoted (red) */
                        &.downvoted
                            background-color #f00
                            border-radius    999em
                            color            #fff
                            font-weight      bolder
                            height           1rem
                            width            1rem
                
                /* Votes counter */
                > .count
                    margin 0 .5rem
            
            /* Home page */
            .posts
                
                /* A singe post */
                .post
                    margin          0 0 2em 0
                    vertical-align  top
                
                    > .title
                        font-size 1.5em
                    
                        > a
                            color #000
                    
                    /* Some post info showed below the title */
                    > .info
                        color   #666
                        margin  .5em 0
                        opacity .8
                        
                        > .username
                            margin-left 1rem
            
            /* New submission page */
            > form.submit
                margin      auto
                max-width   30em
            
            /* Page for a post */
            > .post
                
                /* Style used to format Markdown tables */
                table
                    background      #fff
                    border-collapse collapse
                    text-align      left
                
                    th
                        border-bottom   2px solid #6678b1
                        color           #039
                        font-weight     normal
                        padding         0 1em
                    
                    td
                        border-bottom   1px solid #ccc
                        color           #669
                        padding         .5em 1em
                    
                    tbody tr:hover td
                        color #009
                
                /* The post title */
                > .title
                    font-size 1.5em
                
                /* Info below post title */
                > .info
                    margin 1em 0
                    
                    > .username
                        margin-left 1rem
                
                /* Post text */
                > .text
                    margin      2rem 0
                    word-wrap   break-word
                
                /* The "new comment" form for this post page */
                .new_comment
                    > textarea
                        height 5rem
                    
                    > input[type=submit]
                        margin 1em 0
                
                /* Comments tree for the Post page */
                > .comments
                    margin 5em 0 0 0
                    
                    /* A single comment in the tree */
                    > .comment
                        margin    0 0 1rem 0
                        overflow  hidden
                        
                        /* Some info about this comment */
                        > .info
                            display   inline-block
                            font-size .9rem
                            
                            > .username
                                display inline-block
                                margin  0 1rem
                                
                                > a, a:hover, a:visited
                                    display inline-block
                                    text-decoration none
                            
                            > .op
                                background-color rgb(255, 175, 50)
                                border-radius    4px
                                font-weight      bold
                                padding          0 1rem
                                
                                > a, a:hover, a:visited
                                    color #fff

                        /* The comment text */
                        > .text
                            word-wrap  break-word

                    /* Give the comment that's linked to in the URL location hash a lightyellow background color */
                    .comment:target
                        background-color lightyellow
            
            > .search
                margin-bottom 3rem
            
            /* User home page */
            table.user
                /* If one length specified: both horizontal and vertical spacing
                * If two length specified: first sets the horizontal spacing, and
                *                          the second sets the vertical spacing
                */
                border-spacing  2em 1em
                border-collapse separate
                margin          auto
                width           80%
                
                tr
                    > td:first-child
                        font-weight     bold
                        text-align      right
                        vertical-align  top
                        width           30%
                    
                    > td:last-child
                        text-align  left
                
            /* User activity */
            > .user_activity
            
                > *
                    margin 0 0 2em 0
                
                    > .info
                        color #888
            
            /* Login page */
            > .login
                margin      auto
                max-width   20em
                
                input[type=submit]
                    margin 1em 0
                
                .title
                    line-height 2em
            
            /* Page to edit a post or a comment */
            > .edit
            {
            }
            
            /* Page to reply to a comment */
            > .reply
            {
            }
            
            /* About page */
            > .about
            
                > h3
                    margin 1em 0 .5em 0
                
                > p
                    line-height 1.5em
            
        > footer
            border-top  1px solid #ccc
            margin      3em 0 0 0
            padding     2em 0
            
            img
                height          1.2em
                margin          0 .5em 0 0
                vertical-align  middle
            
            > ul
                list-style  none
                margin      0
                overflow    hidden
                padding     0
            
                > li
                    float   left
                    margin  0 2em 0 0