Improve post styling - scrollable content, clickable links, professional formatting

Author: ericgitangu

portfolio/static/all-posts.css

@@ -55,27 +55,35 @@ ul {
 }
 
 .post__content {
-  padding: 1rem;
+  padding: 0.75rem;
   text-align: center;
   width: 100%;
+  flex: 1;
+  overflow-y: auto;
+  scrollbar-width: thin;
+  scrollbar-color: #ccc transparent;
+}
+
+.post__content::-webkit-scrollbar {
+  width: 4px;
+}
+
+.post__content::-webkit-scrollbar-thumb {
+  background-color: #ccc;
+  border-radius: 2px;
 }
 
 .post__content h3 {
-  font-size: 1.1rem;
+  font-size: 1rem;
   font-weight: 600;
   color: #1a1a1a;
   margin: 0 0 0.5rem 0;
   line-height: 1.3;
 }
 
 .post__content p {
-  font-size: 0.9rem;
+  font-size: 0.85rem;
   color: #4a4a4a;
   margin: 0;
   line-height: 1.4;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  display: -webkit-box;
-  -webkit-line-clamp: 3;
-  -webkit-box-orient: vertical;
 }

portfolio/static/post_details.css

@@ -100,9 +100,42 @@ main {
   max-width: 90rem;
   margin: 3rem auto;
   background-color: white;
-  padding: 1rem;
+  padding: 2rem;
   border-radius: 12px;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
+  font-size: 1.1rem;
+  line-height: 1.8;
+  color: #333;
+}
+
+main p {
+  margin-bottom: 1.5rem;
+}
+
+main h1, main h2, main h3 {
+  color: #1a1a1a;
+  margin-top: 2rem;
+  margin-bottom: 1rem;
+}
+
+main ul, main ol {
+  margin: 1rem 0 1.5rem 2rem;
+}
+
+main li {
+  margin-bottom: 0.5rem;
+}
+
+main a {
+  color: #390281;
+  text-decoration: underline;
+}
+
+main code {
+  background-color: #f4f4f4;
+  padding: 0.2rem 0.4rem;
+  border-radius: 4px;
+  font-family: monospace;
 }
 
 .tag {

portfolio/templates/portfolio/post_details.html

@@ -57,7 +57,7 @@ <h2>{{post.title}}</h2>
         </article>
     </section>
     <main>
-        {{post.content|safe}}
+        {{post.content|urlize|linebreaks}}
         <br><br>
         <a href ="{% url 'posts' %}" class="center">Back to all posts</a>
     </main>