Style tweaks

Add <hr> for `links` compatibility.
Made "Show More" smaller and put it on the same line.
Forced long text to wrap.

main/static/main/main.css

@@ -110,33 +110,68 @@ body {
     line-height: 1.5em;
 }
 
-.text {
-    display: inline-block;
-}
-
 button.show-more {
     background: none;
     border: none;
     border-radius: 0;
     cursor: pointer;
     color: var(--accent-color);
-    margin: 3px 10px;
+    margin: 3px 6px;
     padding: 0;
     border-bottom: 1px solid transparent;
     outline: none;
-    font-size: 14px;
-
+    font-size: 13px;
 }
 button.show-more:hover, button.show-more:focus {
-    border-bottom-color: var(--accent-color);
+    /* border-bottom-color: var(--accent-color); */
+    text-decoration: underline;
+}
+
+.text {
+    max-width: 100%;
+}
+
+.main-text, .main-text p {
+    display: inline; /*inline so that the Show More is on the same line*/
+}
+
+.text pre {
+    display: inline-block; /*Code blocks need to be inline-block*/
+}
+
+a {
+    text-decoration: none;
+}
+
+.text a {
+    color: var(--accent-color);
+}
+.text p, .text pre {
+    padding: 0;
+    margin: 0;
+    overflow-wrap: break-word;
+}
+.text p:not(:first-child) {
+    margin-top: 1em;
+}
+.text pre {
+    background: black;
+    border-radius: 3px;
+    padding: 3px;
 }
 
 .extended-text {
     margin-top: 1em;
+    display: inline-block; /*Needs to be inline-block, so that margin on it works*/
 }
 
 .thought-end {
     overflow: auto;
+}
+
+.thought hr {
+    margin: 0;
+    border-style: none;
     border-bottom: 1px var(--accent-color) solid;
 }
 
@@ -169,26 +204,6 @@ header .text {
     display: none;
 }
 
-a {
-    text-decoration: none;
-}
-
-.text a {
-    color: var(--accent-color);
-}
-.text p, .text pre {
-    padding: 0;
-    margin: 0;
-}
-.text p:not(:first-child) {
-    margin-top: 1em;
-}
-.text pre {
-    background: black;
-    border-radius: 3px;
-    padding: 3px;
-}
-
 /*footer {
     position: fixed;
     bottom: 0;

main/templates/whispermaphone/index.html

@@ -28,6 +28,7 @@
             <div class="thought-end">
                 <span class="timestamp">{{thought.posted|date:"r"}}</span>
             </div>
+            <hr>
         </div>
     {% endfor %}
     </section>