Dylanda

by rwhal06

HTML

<div id="convoContainer">
  <div>
    <div id="header">
      Microsoft Office Communicator
    </div>
    <div class="user">
      <div class="statusCircle">
        ⬤
      </div>
      Walsh, Dylan G
    </div>
    <div class="user">
      <div class="statusCircle">
        ⬤
      </div>
      Sternberg, Amanda Marie
    </div>
  </div>

  <div>
    <div class="d">
      <p>
        [Dylan]
      </p>
      <p>
        So, I started at FIS in the Norcross office—coincidentally enough—as a Financial Analyst back in 2011.</p>
    </div>
    <div class="a">
      <p>
        [Amanda]
      </p>
      <p>
        And around that same time, I moved to Jacksonville, FL where I eventually started working at FIS as a Financial Analyst as well ⇽<em>insert accounting joke here (#D&A)</em>
      </p>
    </div>
    <div class="d">
      <p>
        Starting around Spring of 2013, I would travel to Jax every so often to meet with our Controller and Amanda happened to sit just outside of his office.
      </p>
      <p>
        Being the hyper-aware person that I am, I immediately took notice. But, also being the super-suave ladies man that everybody knew me to be, I did what any highly interested person would do and ignored her.
      </p>
    </div>
    <div class="a">
      <p>
        He's not lying... and me being the super-gregarious person that I am, I looked him up on our FIS Colleague Finder to see who that cute smile belonged to.
      </p>
      <p>
        And so one day, when he was walking past my desk, "Super-suave Ladies Man" was too cool to acknowledge anyone. I said, "Hi Dylan!" I'm not sure I've seen him caught more off-guard since then.
      </p>
    </div>
    <div class="d">
      <p>
        Oh please
      </p>
    </div>
    <div class="a">
      <p>
        You said the fastest "Hi" ever and scurried away!
      </p>
    </div>
    <div class="d">
      <p>
        Alright, fine. I do remember being pretty impressed that you had already somehow...

SCSS

$blue: #49b9fb;
  $gray: #e5e5ea;
  $containerBackground: white;
  #convoContainer {
    //max-width: 80%;
    max-width: 600px;
    margin: auto;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    line-height: 120%;
    background: $containerBackground;
    p {
        margin-bottom: 0;
        font-family: "Helvetica Neue", Helvetica, Arial, sans-serif!important;
        line-height: 120%!important;
        &:first-of-type{
           margin-top: 0;
        }
    }
    #header {
    padding: 5px;
    color: white;
    background: black;
  }
  
  .user {
    font-weight: bold;
  }
  
  .statusCircle {
    display: inline-block;
    color: #00ce00;
    width: 1em;
    font-family: serif;
  }
 
  
  .d,
  .a {
    width: 80%;
    border-radius: 15px;
    padding: 8px;
    margin: 5px;
    margin-bottom: 10px;
    clear: both;
    position: relative;
  }
  
  .d {
    background-color: $blue;
    p{
        color: white!important;  
    }    
    float: left;
    &::before {
      content: "";
      position: absolute;
      bottom: -10px;
      height: 10px;
      left: 10px;
      border-right: 30px solid $blue;
      background: $blue;
      /* css3 */
      -webkit-border-bottom-right-radius: 80px 50px;
      -moz-border-radius-bottomright: 80px 50px;
      border-bottom-right-radius: 80px 50px;
    }
    &::after {
      content: "";
      position: absolute;
      bottom: -12px;
      left: 8px;
      width: 30px;
      height: 10px;
      background: $containerBackground;
      /* css3 */
      -webkit-border-bottom-right-radius: 40px 50px;
      -moz-border-radius-bottomright: 40px 50px;
      border-bottom-right-radius: 40px 50px;
      /* using translate to avoid undesired appearance in CSS2.1-capabable but CSS3-incapable browsers */
      -webkit-transform: translate(-10px, -2px);
      -moz-transform: translate(-10px, -2px);
      -ms-transform: translate(-10px, -2px);
      -o-transform: translate(-10px, -2px);
      transform:...