freepost-x/freepost/static/stylus/freepost.styl

@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        1rem
    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 only screen and (max-width: 800px)
                display grid
                grid-template-columns auto
                
                > .title-large
                    display none
                
                > .title-small
                    display grid
                    grid-template-columns auto max-content
            
            @media only screen and (min-width: 800px)
                display grid
                grid-template-columns max-content auto
                
                > .title-small
                    display none
            
            padding 1rem 0
            
            /* Menu under the logo */
            @media only screen and (max-width: 800px)
                .burger-icon
                    display inline-block
                
                .menu
                    border-bottom  2px dashed #aaa
                    display        none
                    padding        1rem 0
                    
                    /* This class is toggled when the burger icon is clicked */
                    &.visible
                        display block
                        
                        /* Every menu item */
                        > a
                            border          0
                            color           #000
                            display         block
                            margin          0
                            padding         .8rem 0
                            text-align      left
                            text-decoration none
                        
                        /* Highlight menu item of the current active page (Hot/New/Submit/...) */
                        > .active_page
                            font-weight     bold
                            text-decoration underline dotted
                            text-transform  uppercase
                        
                        /* Highlight username if there are unread messages */
                        .new_messages
                            background-color  rgb(255, 175, 50)
                            color             #fff
                            font-weight       bold
                            padding-left      1rem
            
            @media only screen and (min-width: 800px)
                .burger-icon
                    display none
                
                .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-end
                    
                    > .flex-item
                        flex            0 1 auto
                        align-self      auto
                        order           0
                        
                        border          0
                        border-bottom   1px solid #ccc
                        color           #000
                        margin          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              0
                        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 1rem 0 0
                padding 0 .5rem
                
                form
                    display inline-block
                    margin  0
                    padding 0
                    
                    > button
                        background      transparent
                        border          0
                        cursor          pointer
                        display         inline-block
                        margin          0
                        overflow        hidden
                        padding         0
                        text-decoration none
                        vertical-align  middle
                        
                        > img
                            height .8rem
                            width  .8rem
                
                /* Votes counter */
                > .count
                    margin 0 .5rem
            
            .upvoted
                background-color #d1ffd5
                border           1px dashed
                border-color     #00e313
                border-radius    .5rem
                color            #00a200
                font-weight      bolder
            
            .downvoted
                background-color #ffd9d9
                border           1px dashed
                border-color     #ff7171
                border-radius    .5rem
                color            #f00
                font-weight      bolder
            
            /* 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 > a
                            color #000
                            font-size 1.6rem
                        
                        /* Some post info showed below the title */
                        > .about
                            color   #666
                            margin  .5rem 0 0 0
                
                > .pagination
                    > form
                        width 100%
            
            /* 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
                @media only screen and (min-width: 1024px)
                    margin      auto
                    max-width   40%
                
                > form > div
                    margin 1rem 0
            
            /* 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 only screen and (max-width: 1024px)
                        float none
                        margin 1rem 0