Sass for Meedan bidirectional layout.scss

// ========================================================================================
//  MARKUP
//   div.row
//     div.row_ar or div.row_en              <------ (1 main language per row)
//       div.column_ar and div.column_en      <------ (2 language columns per row)

!meta_header_height = 55px

=headline_big_type(!from="right")
  a
    +hover-link
    :color #000
  @if !from == "right"
    :font-size 35px
    :line-height 40px
  @if !from == "left"
    :font-size 30px
    :letter-spacing -1px
    :line-height 35px

=comment_count_layout
  :float left
  :clear both
  :font-size= !small
  :font-weight normal
  span.count
    +rounded
    :clear both
    :font-weight bold

=blocky_link
  :background #f8f8f8
  :border 1px solid #c3c3c3
  :cursor pointer
  :padding 0 5px
  :clear both
  :display inline
  :font-size= !small

=inside_column_link_and_comment_layout(!from="left",!to="right")
  :padding 0 1em 1em
  :margin 0
  :clear both
  :width 90%
  :overflow hidden
  li.posted_by
    :float= !from
    img
      :display none
    a.link_author
  li.link_title
    :margin-top 0.5em
    +headline_big_type(!from)
  li.quote
    @if !from=="left"
      :font-size 16px
      :line-height 1.4
    @if !from=="right"
      :font-size 20px
      :line-height 1.3
  li.url
    :max-width 100%
    :overflow hidden
    a
      +fancy-button(!med_grey)
      +fancy-button-size(10px, 10px, 1px)
  li.event_comment_count
    +comment_count_layout

  ul.response_actions
    :float= !from
    :position absolute
    :bottom 0
    li
      :float left
      :font-size= !small
      :margin-right 5px
      a
        :color= #888
        :text-decoration none

// =============================
// = language-dependent styles =
// =============================
        
=favicon(!from="left", !to="right")
  :float= !from
  a
    :float= !to
    img
      :float= !to

=column(!from="left", !to="right")
  :width 44%
  :float= !from
  :text-align= !from

  @if !from == "right"
    +rtl
 
  ul.link_root, ul.comment_root
    +inside_column_link_and_comment_layout(!from,!to)

=bidi_meta_row(!from="right", !to="left")
  :background= url("/static/images/#{!from}_to_#{!to}_960.png") top right no-repeat 
  span.timestamp
    :color #888
    :width 100px
    :font-size= !small
    :float= !from
  span.domain, span.translator, span.user
    :width 440px
    :height 40px
    :line-height 40px
    :vertical-align middle
    :float= !from
    a
      :color #000
    img
      :padding 5px 10px
    img.favicon
      :padding-top 10px
  span.domain, span.user
    +favicon(!from, !to)
    :border-bottom 4px double #ccc
    img.user_img
      :width 25px
  span.translator
    :float= !to
    :border-bottom 4px double #888
    img
      :float= !from
      :width 25px

    a.translator_name
      :float= !from
      :clear none
      :display block
      :width 200px
      

=bidi_post_row_layout(!from="left", !to="right")
  :background= url("/static/images/#{!from}_to_#{!to}_960_bkg.png") top right
  :width 950px
  :clear both
  :border-bottom= 1px solid #888
  :float left
  :padding-bottom 1.7em 
  :text-decoration none
  :position relative
  div.meta
    +bidi_meta_row(!from,!to)
    :height= !meta_header_height
    :margin 0
  div.column_en
    +column("left")
  div.column_ar
    +column("right")  

=indented_comment_layout
  :font-size 12px
  a
    +link-colors(#333)
  a.respond_to_comment
    :display none
  div.row_en div.meta span.user
    +left_reply_arrow
  div.row_en div.meta span.translator
    +right_reply_arrow
  div.row_ar div.meta span.translator
    +right_reply_arrow
  div.row_ar div.meta span.translator
    +left_reply_arrow
  div.column_en
    :width 40%!important
    :padding-left 80px
  div.column_ar
    :width 40%!important
    :padding-right 80px
  ul.response_actions li.respond
    :display none
    
// =================================
// = main mixin: +bidi_post_layout =
// =================================
// in screen.sass you can see how to apply this:
//  +bidi_post_layout on body.links #content
//  +link_page_layout on body.links #content
// ... this is used on event details (in parent comments and replies) and on each link on the link page

=left_reply_arrow
  :background url("/static/images/arrow_reply_left_large.png") 5% 0% no-repeat
  .timestamp
    :margin-left 60px
    
=right_reply_arrow
  :background url("/static/images/arrow_reply_right_large.png") 98% 0% no-repeat
  .timestamp
    :margin-right 60px
    
=bidi_post_layout
  div.links_page_list
    :border-top 3px solid #000
  div.links_helper
    +notice
  div.row
    div.row_en
      +bidi_post_row_layout("left","right")
    div.row_ar
      +bidi_post_row_layout("right","left")

  div.indented_comment
    +indented_comment_layout

I had no idea that existed, thanks!