@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