Update in resources

doc/dev-notes.md

@@ -1,28 +0,0 @@
-# Refactoring
-
-## ToDo
-
-### Collapse namespaces
-
-Currently there are two modes of operation in two explicit namespaces:
-reply mode and account mode.  
-
-This leads to higher maintenance needs and more complex program structure. The overall goal is now to reduce this complexity.  
-
-Having one ns called to_html that produces html as needed seems appropriate at this time.
-
-### Understand the data coming in from current reply mode
-
-Assumption: We're just pulling in data from posts.  
-This should be about the same as the data for account mode.
-
-- [x] The data are indeed statuses too
-
-### Check whether or not we need to modify the current post html
-
-### CSS per mode
-
-Creating css that does basic styling depending on the mode.
-
-### Automatically connecting CSS and appropriate HTML
-

src/main/dda/masto_embed/resources/post.css

@@ -7,6 +7,8 @@
   display: grid;
   grid: ". post ." / auto auto auto;
 
+  font-size: calc(clamp(0.8rem, 19200.75rem - 40000vw, 1.0rem) + max(0.75rem, 0.5rem + 0.5208333vw) - 0.75rem);
+
   .mastodon-post {
     grid-area: post;
     justify-self: center;
@@ -193,35 +195,6 @@
       }
     }
   }
-
-  @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 {
@@ -233,6 +206,8 @@
   display: grid;
   grid: ". post ." / auto auto auto;
 
+  font-size: calc(clamp(0.8rem, 19200.75rem - 40000vw, 1.0rem) + max(0.75rem, 0.5rem + 0.5208333vw) - 0.75rem);
+
   .mastodon-post {
     grid-area: post;
     justify-self: center;
@@ -301,13 +276,14 @@
       grid-area: content;
       display: grid;
       grid: 
-      "image text" / auto;
+      "image text" / minmax(40%, 108px) auto;
       padding: var(--medium);
 
       .mastodon-post-text {
         grid-area: text;
         align-self: center;
-        padding: var(--medium);
+        display: grid;        
+        padding: var(--medium) 0 var(--medium) var(--medium);
       }
   
       .mastodon-post-image {
@@ -373,33 +349,5 @@
     }
   }
 
-  @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;
-  }
-
 }