sorting with css

by monodyle

HTML

<input type="radio" name="sorting" value="DESC" id="desc" checked>
<input type="radio" name="sorting" value="ASC" id="asc">

Sort:
<label for="desc">DESC</label>
<label for="asc">ASC</label>

<br>

<div id="posts">
  <div class="item">
    <a href="#" class="title">My first post</a>
    <span class="created_at">a year ago</span>
  </div>
  <div class="item">
    <a href="#" class="title">How to clean code?</a>
    <span class="created_at">5 months ago</span>
  </div>
  <div class="item">
    <a href="#" class="title">First time learn Rust</a>
    <span class="created_at">2 months ago</span>
  </div>
  <div class="item">
    <a href="#" class="title">Flexbox is awesome!</a>
    <span class="created_at">few seconds ago</span>
  </div>
</div>

<br>

SASS

body
  font-family: monospace

#posts
  display: flex
  .item
    line-height: 18px
    .title
      color: #000
      font-weight: 700
    .created_at
      color: #888

input[type="radio"]
  display: none

input[type="radio"]:checked 
  &[value="DESC"] ~ #posts
    flex-direction: column
  &[value="DESC"] ~ label[for="asc"]
    display: inline-block
  &[value="ASC"] ~ #posts
    flex-direction: column-reverse
  &[value="ASC"] ~ label[for="desc"]
    display: inline-block

label
  display: none
  cursor: pointer
  padding: 2px 4px
  background: #000
  color: #fff