better class names

routes/_components/Status.html

@@ -1,6 +1,6 @@
 <article class="status-article">
     {{#if status.reblog}}
-      <div class="boosted">
+      <div class="status-boosted">
         <svg>
           <use xlink:href="#fa-retweet" />
         </svg>
@@ -11,20 +11,20 @@
         </span>
       </div>
     {{/if}}
-  <div class="author">
-    <a class="author-name" href="/accounts/{{original.id}}">
+  <div class="status-author">
+    <a class="status-author-name" href="/accounts/{{original.id}}">
       {{original.display_name || original.username}}
     </a>
-    <span class="author-handle">
+    <span class="status-author-handle">
       @{{original.acct}}
     </span>
-    <a class="author-relative-date" rel="noopener" target="_blank" href="{{original.url}}">
+    <a class="status-author-date" rel="noopener" target="_blank" href="{{original.url}}">
       {{relativeDate}}
     </a>
   </div>
-  <Avatar account={{original}} className="sidebar"/>
-  <div class="content">{{{status.content}}}</div>
-  <div class="toolbar">
+  <Avatar account={{original}} className="status-sidebar"/>
+  <div class="status-content">{{{status.content}}}</div>
+  <div class="status-toolbar">
     <button aria-label="Reply" aria-pressed="false" type="button">
       <svg>
         <use xlink:href="#fa-reply" />
@@ -55,21 +55,21 @@
     padding: 10px 20px;
     display: grid;
     grid-template-areas:
-        "....... boosted"
-        "sidebar author"
-        "sidebar content"
-        "....... toolbar";
+        ".............. status-boosted"
+        "status-sidebar status-author"
+        "status-sidebar status-content"
+        ".............. status-toolbar";
     grid-template-columns: 58px 1fr;
     border-bottom: 1px solid var(--main-border);
   }
 
-  :global(.sidebar) {
-    grid-area: sidebar;
+  :global(.status-sidebar) {
+    grid-area: status-sidebar;
     margin: 0 10px 0 0;
   }
 
-  .author {
-    grid-area: author;
+  .status-author {
+    grid-area: status-author;
     display: flex;
     align-items: center;
     margin: 0 10px 0 5px;
@@ -77,11 +77,11 @@
     min-width: 0;
   }
 
-  .author a, .author a:visited, .author a:hover, .author .author-handle {
+  .status-author a, .status-author a:visited, .status-author a:hover, .status-author .status-author-handle {
     color: var(--deemphasized-text-color);
   }
 
-  .author .author-name {
+  .status-author .status-author-name {
     min-width: 0;
     flex-shrink: 1;
     color: var(--body-text-color);
@@ -91,11 +91,11 @@
     text-overflow: ellipsis;
   }
 
-  .author .author-name:hover {
+  .status-author .status-author-name:hover {
     color: var(--body-text-color);
   }
 
-  .author-handle {
+  .status-author-handle {
     min-width: 0;
     flex: 1;
     margin-left: 5px;
@@ -104,79 +104,79 @@
     text-overflow: ellipsis;
   }
 
-  .author-relative-date {
+  .status-author-date {
     flex-shrink: 1;
     text-align: right;
     margin-left: 5px;
     white-space: nowrap;
   }
 
-  .content {
+  .status-content {
     margin: 10px 10px 20px 5px;
-    grid-area: content;
+    grid-area: status-content;
     word-wrap: break-word;
     overflow: hidden;
     white-space: pre-wrap;
     font-size: 0.9em;
   }
 
-  :global(.content p) {
+  :global(.status-content p) {
     margin: 0 0 20px;
   }
 
-  :global(.content p:first-child) {
+  :global(.status-content p:first-child) {
     margin: 0 0 20px;
   }
 
-  :global(.content p:last-child) {
+  :global(.status-content p:last-child) {
     margin: 0;
   }
 
-  .boosted span {
+  .status-boosted span {
     margin-left: 5px;
   }
 
-  .boosted span, .boosted a, .boosted a:visited, .boosted a:hover {
+  .status-boosted span, .status-boosted a, .status-boosted a:visited, .status-boosted a:hover {
     color: var(--deemphasized-text-color);
   }
 
-  .boosted {
-    grid-area: boosted;
+  .status-boosted {
+    grid-area: status-boosted;
     margin: 5px 10px 5px 5px;
     display: flex;
     align-items: center;
   }
 
-  .boosted svg {
+  .status-boosted svg {
     width: 18px;
     height: 18px;
     fill: var(--deemphasized-text-color)
   }
 
-  .toolbar {
-    grid-area: toolbar;
+  .status-toolbar {
+    grid-area: status-toolbar;
     display: flex;
     margin: 5px 10px 5px 5px;
     justify-content: space-between;
   }
 
-  .toolbar button {
+  .status-toolbar button {
     padding: 0;
     background: none;
     border: none;
   }
 
-  .toolbar button svg {
+  .status-toolbar button svg {
     width: 24px;
     height: 24px;
     fill: var(--action-button-fill-color);
   }
 
-  .toolbar button:hover svg {
+  .status-toolbar button:hover svg {
     fill: var(--action-button-fill-color-hover);
   }
 
-  .toolbar button:active svg {
+  .status-toolbar button:active svg {
     fill: var(--action-button-fill-color-active);
   }
 </style>