feat: add responsive layout with media queries for mobile and tablet breakpoints

Implement responsive design adjustments across admin, auth, base, feed, gists, landing, messages, news, notifications, post, profile, projects, and services CSS files with collapsible sidebar, touch-friendly navigation, and reordered content sections for screen widths below 768px and 480px. Add hamburger menu toggle, mobile overlay panel, and back button for messages view in Application.js.

devplacepy/static/css/messages.css

@@ -208,6 +208,22 @@
     font-size: 0.875rem;
 }
 
+.messages-back-btn {
+    display: none;
+    background: none;
+    border: none;
+    color: var(--text-primary);
+    font-size: 1.25rem;
+    padding: 0.25rem;
+    cursor: pointer;
+    line-height: 1;
+    margin-right: 0.25rem;
+}
+
+.messages-back-btn:hover {
+    color: var(--accent);
+}
+
 @media (max-width: 768px) {
     .messages-layout {
         grid-template-columns: 1fr;
@@ -215,9 +231,17 @@
         min-height: calc(100vh - var(--nav-height) - 2rem);
     }
     .messages-list {
-        display: none;
-    }
-    .messages-list.show {
         display: flex;
     }
+    .messages-list.hide {
+        display: none;
+    }
+    .messages-main.hide {
+        display: none;
+    }
+    .messages-back-btn {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+    }
 }