Rename to post css

public/post.css

@@ -1,15 +1,15 @@
-.section.post-container {
-
+.section.account-mode {
   --large: 1em;
   --medium: 0.5em;
   --small: 0.25em;
   margin-bottom: var(--large);
+  
   display: grid;
-  grid: ". post ." / auto 66% auto;
+  grid: ". post ." / auto auto auto;
 
   .mastodon-post {
     grid-area: post;
-    justify-self: stretch;
+    justify-self: center;
     display: grid;
     grid: 
       "header"
@@ -17,7 +17,7 @@
       "image"
       "link-preview"
       "footer" /
-      100%;
+      minmax(380px, 450px);
     border: 1px solid #ccc;
     padding: var(--small);
 
@@ -67,7 +67,7 @@
         justify-self: end;
         align-self: center;
         margin-right: 1em;
-      }   
+      }  
     }
 
     .mastodon-post-content {
@@ -84,10 +84,10 @@
   
       .mastodon-post-image {
         grid-area: image;
-        max-width: 100%; /* Adjust as needed */
+        max-width: 100%; 
         height: auto;
         align-self: center;
-        justify-self: center;        
+        justify-self: center;
         border-radius: 1em;
       }
     }
@@ -101,16 +101,16 @@
         "info" / 100%;
       text-decoration: none;
       border: 1px solid #ccc;
-      border-radius: 0.25em;
+      border-radius: var(--small);
       margin: var(--medium);
 
       .mastodon-post-link-image{
         grid-area: image;
         justify-self: center;
-        max-width: 100%;
+        width: 100%;
         height: auto;
         object-fit: cover;
-        border-radius: 0.25em;
+        border-radius:var(--small);
         margin-bottom: var(--small);
       }
 
@@ -184,7 +184,6 @@
 
       .retoot-count {
         justify-self: center;
-        align-self: center;
         grid-area: retoot-count;
       }
 
@@ -198,29 +197,209 @@
   @media screen and (max-width: 575px) {
     font-size: 2.1vw;
   }
-
+  
   @media screen and (min-width: 576px) {
     font-size: 2vw;
   }
-
+  
   @media screen and (min-width: 768px) {
     font-size: 2vw;
   }
-
+  
   @media screen and (min-width: 992px) {
     font-size: 1.5vw;
   }
-
+  
   @media screen and (min-width: 1200px) {
     font-size: 1.25vw;
   }
-
+  
   @media screen and (min-width: 1400px) {
     font-size: 1.1vw;
   }
+  
+  @media screen and (min-width: 2004px) {
+    font-size: 1vw;
+  }
+
+}
+
+.section.replies-mode {
+  --large: 1em;
+  --medium: 0.5em;
+  --small: 0.25em;
+  margin-bottom: var(--large);
+  
+  display: grid;
+  grid: ". post ." / auto auto auto;
+
+  .mastodon-post {
+    grid-area: post;
+    justify-self: center;
+    align-self: start;
+    display: grid;
+    grid: 
+      "header"
+      "content"
+      "image"
+      "link-preview"
+      "footer" /
+      minmax(380px, 450px);
+    border: 1px solid #ccc;
+    padding: var(--small);
+
+    .mastodon-post-header {
+      grid-area: header;
+      justify-self: stretch;
+      display: grid;
+      grid:  "avatar names . date" / max-content max-content auto 20%;
+      margin: var(--medium);
+  
+      .mastodon-post-avatar {
+        grid-area: avatar;
+        width: auto;
+        max-height: 60px;
+        object-fit: contain;
+        align-self: center;
+      }
+  
+      .mastodon-post-names {
+        grid-area: names;
+        display: grid;
+        grid: 
+          "dp-name"
+          "ac-name" /
+          auto;
+        justify-self: start;
+        margin-left: var(--medium);
+  
+        .display-name {
+          grid-area: dp-name;
+          align-self: end;
+          text-decoration: none;
+          color: inherit;
+        }
+      
+        .account-name {
+          grid-area: ac-name;
+          align-self: start;
+          text-decoration: none;
+          color: inherit;
+        }
+      }
+
+      .mastodon-post-date {
+        font-size: 85%;
+        grid-area: date;
+        justify-self: end;
+        align-self: center;
+        margin-right: 1em;
+      }   
+    }
+
+    .mastodon-post-content {
+      grid-area: content;
+      display: grid;
+      grid: 
+      "image text" / auto;
+      padding: var(--medium);
+
+      .mastodon-post-text {
+        grid-area: text;
+        align-self: center;
+        padding: var(--medium);
+      }
+  
+      .mastodon-post-image {
+        grid-area: image;
+        max-width: 100%;
+        height: auto;
+        align-self: center;
+        justify-self: center;
+        border-radius: 1em;
+      }
+    }
+
+    .mastodon-post-link-preview {
+      grid-area: link-preview;
+      justify-self: center;
+      display: grid;
+      grid:
+        "image"
+        "info" / 100%;
+      text-decoration: none;
+      border: 1px solid #ccc;
+      border-radius: var(--small);
+      margin: var(--medium);
+
+      .mastodon-post-link-image{
+        grid-area: image;
+        justify-self: center;
+        width: 100%;
+        height: auto;
+        object-fit: cover;
+        border-radius: var(--small);
+        margin-bottom: var(--small);
+      }
+
+      .mastodon-post-link-info {
+        grid-area: info;
+        grid: 
+        "." "link-title" "."
+        "." "link-description" "."
+        "." "link-url" "." / auto auto auto;
+        padding: var(--small);
+        
+        .mastodon-post-link-title {
+          grid-area: link-title;
+          color: #383838;
+          font-weight: bold;
+        }
+      
+        .mastodon-post-link-description {
+          color: #383838;
+          grid-area: link-description;
+        }
+      
+        .mastodon-post-link-url {
+          grid-area: link-url;
+          color: #666;
+        }
+      }
+    }
+
+    .mastodon-post-footer {
+      display: none;
+    }
+  }
 
+  @media screen and (max-width: 575px) {
+    font-size: 2.1vw;
+  }
+  
+  @media screen and (min-width: 576px) {
+    font-size: 2vw;
+  }
+  
+  @media screen and (min-width: 768px) {
+    font-size: 2vw;
+  }
+  
+  @media screen and (min-width: 992px) {
+    font-size: 1.5vw;
+  }
+  
+  @media screen and (min-width: 1200px) {
+    font-size: 1.25vw;
+  }
+  
+  @media screen and (min-width: 1400px) {
+    font-size: 1.1vw;
+  }
+  
   @media screen and (min-width: 2004px) {
     font-size: 1vw;
   }
 
-}
+}
+