@require 'reset.styl'

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

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

a.topic,
a.topic:hover,
a.topic:visited
    color            rgba(200,0,100,.8)
    font-size        .8rem
    padding          0 .2rem
    text-decoration  none

/* Text icon near the title, to display the post content */
.text_preview
    height          .8rem
    margin          0 .5rem
    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
            @media screen and (max-width: 600px)
                display block
                text-align center
                
                > .title-large
                    display none
                
                > .title-small
                    padding-bottom 1rem
            
            @media screen and (min-width: 600px)
                display grid
                grid-template-columns max-content auto
                text-align  center
                
                > .title-small
                    display none
            
            padding 1rem 0
            
            /* 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
                
                > .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
                
                /* 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
                        color           #9a9a9a
                        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
                            border-radius    999rem
                            color            #00e313
                            font-weight      bolder
                            height           1rem
                            width            1rem
                        
                        /* Arrow style if already upvoted (red) */
                        &.downvoted
                            border-radius    999rem
                            color            #f00
                            font-weight      bolder
                            height           1rem
                            width            1rem
                
                /* Votes counter */
                > .count
                    margin 0 .5rem
            
            /* Home page */
            .posts
                
                /* A singe post */
                > .post
                    display grid
                    grid-template-columns min-content auto
                    grid-column-gap 1.5rem
                    
                    margin-bottom 2rem
                    
                    /* Show numbered position in the list */
                    > .position
                        color #555
                        font-style italic
                        line-height 1.9rem
                        text-align right
                    
                    > .info
                        > .title
                            font-size 1.5em
                        
                            > a
                                color #000
                        
                        /* Some post info showed below the title */
                        > .about
                            color   #666
                            margin  .5rem 0 0 0
            
            /* New submission page */
            > form.submit
                width 100%
            
            /* 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
                    > 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 */
            > form > .user
                display grid
                grid-column-gap 3rem
                grid-row-gap 1rem
                grid-template-columns max-content auto
            
            /* 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
                
                    @media screen and (max-width: 600px)
                        float none
                        margin 1rem 0
