Void Post Backend

Link to article: Void Post Backend.

Module Styles

• /* == OUTER CSS == */
   div.void {
      width: 23rem;
      margin: 1rem auto;
      padding: 0 .8rem;
  
      color: hsl(0, 0%, 5%);
      background: hsl(0, 0%, 100%);
      border: 1px solid lightgray;
      box-shadow: 3px 3px 0 1px hsla(0, 0%, 0%, .15);
  }
  
   @media (max-width: 767px) {
       div.void {
      	width: auto;
      }
  }
  
  /* == INNER CSS == */
   div.void span {
      word-break: unset;
  }
  
   .vusermod {
      font-weight: bold;
  }
  
   div.void ul {
      list-style-type: "ₒ৹๐ ";
  }
  
  /* == AVATAR == */
   .void-img {
      float: left;
      margin: 1rem 0 0 .4rem;
      padding: 0 1rem;
  }
  
  /* == VOID TRENDS == */
   .vactivity {
      color: blue;
      cursor: pointer;
  }
  
   .vactivity span {
      word-break: unset;
  }
  
   .vactivity:hover,
   .vactivity:focus {
      text-decoration: underline;
  }

Inline Styles

• width: 60px

• color: hsl(0, 0%, 46%); font-size: 1.35rem

• color: hsl(0, 0%, 46%); font-size: 1.35rem

• font-size: 1.2rem

• color: hsl(0, 0%, 46%); font-size: .8rem

• font-size: 1.1rem; font-weight: bold

• color: hsl(0, 0%, 46%); font-size: .8rem

• font-size: 1.1rem; font-weight: bold

• color: hsl(0, 0%, 46%); font-size: .8rem

Includes

• (none)

CSS Classes

• void

• dark

• void-img

• vusermod

• vui

• vui

• vactivity

• vui

• vactivity

• vui

Page Source

[!-- CSS is located at the bottom. --]

[[div class="void dark"]]
[[span class="void-img"]]
[[image {$profile-pic} style="width: 60px"]]
[[/span]]
@@ @@
[[span style="color: hsl(0, 0%, 46%); font-size: 1.35rem" class="vusermod"]]{$username}[[/span]]
[[span style="color: hsl(0, 0%, 46%); font-size: 1.35rem" class="vui"]]⁂{$handle}[[/span]]
@@ @@
[[span style="font-size: 1.2rem"]]{$void-msg}[[/span]]
~~~~
* [[span style="color: hsl(0, 0%, 46%); font-size: .8rem" class="vui"]]ECHOES@@ @@[[/span]][[span class="vactivity" style="font-size: 1.1rem; font-weight: bold"]]{$echoes}[[/span]]
* [[span style="color: hsl(0, 0%, 46%); font-size: .8rem" class="vui"]]HUMS@@ @@[[/span]][[span class="vactivity" style="font-size: 1.1rem; font-weight: bold"]]{$hums}[[/span]]
~~~~
[[span style="color: hsl(0, 0%, 46%); font-size: .8rem" class="vui"]]{$time-and-date}[[/span]]
[[/div]]

[[module CSS]]
/* == OUTER CSS == */
 div.void {
    width: 23rem;
    margin: 1rem auto;
    padding: 0 .8rem;

    color: hsl(0, 0%, 5%);
    background: hsl(0, 0%, 100%);
    border: 1px solid lightgray;
    box-shadow: 3px 3px 0 1px hsla(0, 0%, 0%, .15);
}

 @media (max-width: 767px) {
     div.void {
    	width: auto;
    }
}

/* == INNER CSS == */
 div.void span {
    word-break: unset;
}

 .vusermod {
    font-weight: bold;
}

 div.void ul {
    list-style-type: "ₒ৹๐ ";
}

/* == AVATAR == */
 .void-img {
    float: left;
    margin: 1rem 0 0 .4rem;
    padding: 0 1rem;
}

/* == VOID TRENDS == */
 .vactivity {
    color: blue;
    cursor: pointer;
}

 .vactivity span {
    word-break: unset;
}

 .vactivity:hover,
 .vactivity:focus {
    text-decoration: underline;
}
[[/module]]