CSS improvements and time display

main/static/main/main.css

@@ -19,17 +19,54 @@ body {
 
     height: 100%;
     max-width: 1000px;
+
+    font-size: 16px;
+    color: var(--text-color);
+    font-family: Helvetica, Arial, sans-serif;
 }
 
 .thought {
-    color: var(--text-color);
-
     padding: 20px 30px;
+    line-height: 1.5em;
+}
+
+button.show-more {
+    background: none;
+    border: none;
+    border-radius: 0;
+    cursor: pointer;
+    color: var(--accent-color);
+    margin: 3px 10px;
+    padding: 0;
+    border-bottom: 1px solid transparent;
+    outline: none;
+    font-size: 14px;
 
 }
+button.show-more:hover, button.show-more:focus {
+    border-bottom-color: var(--accent-color);
+}
+
+.extended-text {
+    margin-top: 1em;
+}
+
+.timestamp {
+    float: right;
+    font-size: 14px;
+    color: var(--accent-color);
+
+    position: relative;
+    bottom: 4px;
+    border-bottom: solid 1px var(--accent-color);
+}
+
 hr.thought-end {
     margin: 0 30px;
     border-color: var(--accent-color);
+
+    border-style: none;
+    border-bottom-style: inset;
 }
 
 header {

main/templates/whispermaphone/index.html

@@ -15,22 +15,23 @@
     {% for thought in thoughts %}
         <div class="thought">
             <div class="main-text">{{thought.text}}</div>
-            <div class="extended-text hidden">{{thought.extended_text}}</div>
+            <div class="extended-text">{{thought.extended_text}}</div>
+            <span class="timestamp">{{thought.posted|date:"r"}}</span>
         </div>
         <hr class="thought-end">
         {% endfor %}
     </section>
 
-    <footer>Proudly developed with open source technologies.</footer>
-
     <script>
         const els = document.querySelectorAll(".thought");
         for (let el of els) {
             const extended = el.querySelector(".extended-text");
+            extended.classList.add("hidden");
             if (extended.textContent.length) {
                 const text = el.querySelector(".main-text");
                 const showMoreButton = document.createElement("button");
                 showMoreButton.appendChild(document.createTextNode("Show More"));
+                showMoreButton.classList.add("show-more");
                 showMoreButton.addEventListener("click", evt => {
                     // Remove our-self
                     showMoreButton.parentNode.removeChild(showMoreButton);
@@ -39,6 +40,11 @@
                 })
                 text.appendChild(showMoreButton);
             }
+
+            const timestampEl = el.querySelector(".timestamp");
+            const time = new Date(timestampEl.textContent);
+            const ampm = time.getHours() > 12 ? "pm" : "am";
+            timestampEl.textContent = `${time.getFullYear()}-${time.getMonth()}-${time.getDate()}, ${Math.abs(time.getHours() - 12)}:${time.getMinutes()}${ampm}`
         }
     </script>
 </body>

main/views.py

@@ -4,7 +4,7 @@ from .models import Thought
 
 
 def index(request):
-    return render(request, "whispermaphone/index.html", {"thoughts": Thought.objects.all()})
+    return render(request, "whispermaphone/index.html", {"thoughts": Thought.objects.order_by("-posted")})
 
 
 def post(request):