simplify grid-template-areas

routes/_components/status/MediaAttachments.html

@@ -6,7 +6,7 @@
 </div>
 <style>
   .status-media {
-    grid-area: status-media;
+    grid-area: media;
     display: grid;
     align-items: center;
     justify-content: center;

routes/_components/status/Status.html

@@ -25,13 +25,13 @@
     padding: 10px 20px;
     display: grid;
     grid-template-areas:
-        ".............. status-header"
-        "status-sidebar status-author"
-        "status-sidebar status-spoiler"
-        "status-sidebar status-spoiler-button"
-        "status-sidebar status-content"
-        "status-media   status-media"
-        ".............. status-toolbar";
+        "....... header"
+        "sidebar author"
+        "sidebar spoiler"
+        "sidebar spoiler-button"
+        "sidebar content"
+        "media   media"
+        "....... toolbar";
     grid-template-columns: 58px 1fr;
   }
 

routes/_components/status/StatusAuthor.html

@@ -17,7 +17,7 @@
 </div>
 <style>
   .status-author {
-    grid-area: status-author;
+    grid-area: author;
     display: flex;
     align-items: center;
     margin: 0 10px 0 5px;

routes/_components/status/StatusContent.html

@@ -7,7 +7,7 @@
 <style>
   .status-content {
     margin: 10px 10px 10px 5px;
-    grid-area: status-content;
+    grid-area: content;
     word-wrap: break-word;
     overflow: hidden;
     white-space: pre-wrap;

routes/_components/status/StatusHeader.html

@@ -41,7 +41,7 @@
   }
 
   .status-header {
-    grid-area: status-header;
+    grid-area: header;
     margin: 5px 10px 5px 5px;
     display: flex;
     align-items: center;

routes/_components/status/StatusMediaAttachments.html

@@ -35,7 +35,7 @@
 {{/if}}
 <style>
   .status-sensitive-media-container {
-    grid-area: status-media;
+    grid-area: media;
     margin: 10px 0;
     position: relative;
     border-radius: 0;

routes/_components/status/StatusSidebar.html

@@ -3,7 +3,7 @@
         size="small" />
 <style>
   :global(.status-sidebar) {
-    grid-area: status-sidebar;
+    grid-area: sidebar;
     margin: 0 10px 0 0;
   }
 </style>

routes/_components/status/StatusSpoiler.html

@@ -8,7 +8,7 @@
 </div>
 <style>
   .status-spoiler {
-    grid-area: status-spoiler;
+    grid-area: spoiler;
     word-wrap: break-word;
     overflow: hidden;
     white-space: pre-wrap;
@@ -17,7 +17,7 @@
   }
 
   .status-spoiler-button {
-    grid-area: status-spoiler-button;
+    grid-area: spoiler-button;
     margin: 5px;
   }
 

routes/_components/status/StatusToolbar.html

@@ -22,7 +22,7 @@
 </div>
 <style>
   .status-toolbar {
-    grid-area: status-toolbar;
+    grid-area: toolbar;
     display: flex;
     justify-content: space-between;
   }