discord chat representation

tbd

by arian_

HTML

<head>
  <title>happy 9/whatever lol (OLED model) - eat</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <style></style>
  <link rel="stylesheet" href="happy 9_whatever lol (OLED model) - fedora 28 - eat [485919503369371648] (after 2022-01-01).html_Files/solarized-dark.min-BA98F.css">
</head>
<div class="preamble">
  <div class="preamble__guild-icon-container"><img class="preamble__guild-icon" src="happy 9_whatever lol (OLED model) - fedora 28 - eat [485919503369371648] (after 2022-01-01).html_Files/8e80857960d1ce82ad2c66172044931d-459D6.png" alt="Guild icon" loading="lazy"></div>
  <div class="preamble__entries-container">
    <div class="preamble__entry">happy 9/whatever lol (OLED model)</div>
    <div class="preamble__entry">fedora 28 / eat</div>
    <div class="preamble__entry preamble__entry--small">chat quality maintained courtesy of the one man cleaning crew</div>
    <div class="preamble__entry preamble__entry--small">After 1/1/2022 5:00AM</div>
  </div>
</div>


<div class="chatlog__message-group">
  <div id="chatlog__message-container-1044126422026960939" class="chatlog__message-container" data-message-id="1044126422026960939">
    <div class="chatlog__message">
      <div class="chatlog__message-aside"><img class="chatlog__avatar" src="happy 9_whatever lol (OLED model) - fedora 28 - eat [485919503369371648] (after 2022-01-01).html_Files/0bac3a511cb635eec384faa3b6ae3f9a-4D947.png" alt="Avatar" loading="lazy"></div>
      <div class="chatlog__message-primary">
        <div class="chatlog__header"><span class="chatlog__author" style="color:rgb(96,125,139)" title="iamhighoncoke" data-user-id="547306237856055297">Mistake</span> <span class="chatlog__timestamp" title="Monday, November 21, 2022 5:45AM"><a href="#chatlog__message-container-1044126422026960939">11/21/2022 5:45AM</a></span></div>
        <div class="chatlog__content chatlog__markdown"><span class="chatlog__markdown-preserve">hey, do you plan on doing more...

CSS

html,
body {
  margin: 0;
  padding: 0;
  background-color: #36393e;
  color: #dcddde;
  font-family: "gg sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 17px;
  font-weight: 400;
  scroll-behavior: smooth
}

a {
  color: #00aff4;
  text-decoration: none
}

a:hover {
  text-decoration: underline
}

img {
  object-fit: contain;
  image-rendering: high-quality;
  image-rendering: -webkit-optimize-contrast
}

.preamble {
  display: grid;
  grid-template-columns: auto 1fr;
  max-width: 100%;
  padding: 1rem
}

.preamble__guild-icon-container {
  grid-column: 1
}

.preamble__guild-icon {
  max-width: 88px;
  max-height: 88px
}

.preamble__entries-container {
  grid-column: 2;
  margin-left: 1rem
}

.preamble__entry {
  margin-bottom: 0.15rem;
  color: #ffffff;
  font-size: 1.4rem
}

.preamble__entry--small {
  font-size: 1rem
}

.chatlog {
  padding: 1rem 0;
  width: 100%;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1)
}

.chatlog__message-group {
  margin-bottom: 1rem
}

.chatlog__message-container {
  background-color: transparent;
  transition: background-color 1s ease
}

.chatlog__message-container--highlighted {
  background-color: rgba(114, 137, 218, 0.2)
}

.chatlog__message-container--pinned {
  background-color: rgba(249, 168, 37, 0.05)
}

.chatlog__message {
  display: grid;
  grid-template-columns: auto 1fr;
  padding: 0.15rem 0;
  direction: ltr;
  unicode-bidi: bidi-override
}

.chatlog__message:hover {
  background-color: #32353b
}

.chatlog__message:hover .chatlog__short-timestamp {
  display: block
}

.chatlog__message-aside {
  grid-column: 1;
  width: 72px;
  padding: 0.15rem 0.15rem 0 0.15rem;
  text-align: center
}

.chatlog__reply-symbol {
  height: 10px;
  margin: 6px 4px 4px 36px;
  border-left: 2px solid #4f545c;
  border-top: 2px solid #4f545c;
  border-radius: 8px 0 0 0
}

.chatlog__avatar {
  width: 40px;
  height: 40px;
  border-radius:...