polished post viewing

website/public/styles/post-popup.css

@@ -1,25 +1,22 @@
 /* modal based on: http://www.w3schools.com/howto/howto_css_modals.asp */
 
 .modal {
-    display: none; /* Hidden by default */
-    position: fixed; /* Stay in place */
-    z-index: 1; /* Sit on top */
-    left: 0;
-    top: 0;
+    display: none;
+    position: fixed;
+    top: 80px;
+    left: 256px;
     width: calc(100% - 256px); /* Full width */
     height: calc(100% - 80px); /* Full height */
-    overflow: visible; /* Enable scroll if needed */
     background-color: rgb(0,0,0); /* Fallback color */
     background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
+    overflow-y: auto;
 }
 
 /* Modal Content/Box */
 .modal-content {
-    background-color: #fefefe;
-    margin: 15% auto; /* 15% from the top and centered */
-    padding: 20px;
-    border: 1px solid #888;
-    width: 80%; /* Could be more or less, depending on screen size */
+    margin: 5% auto;
+    width: 70%; /* Could be more or less, depending on screen size */
+    overflow-y: auto;
 }
 
 .modal-close {
@@ -35,4 +32,41 @@
     color: black;
     text-decoration: none;
     cursor: pointer;
+}
+
+.modal-content img {
+    max-height: 100%;
+    max-width: 100%;
+}
+
+.post-header h4 {
+    font-size: 20pt;
+}
+
+.post-content {
+    margin: 30px auto;
+    width: 90%;
+}
+
+.commentfield {
+    margin-bottom: 20px;
+}
+
+.commentfield textarea {
+    width: 100%;
+}
+
+.comment {
+    padding-top: 10px;
+    padding-bottom: 10px;
+    border-top: 1px solid #4CAF50;
+}
+
+.commentinfo {
+    font-size: 10pt;
+}
+
+.commentcontent {
+    margin: 5px auto;
+    width: 95%;
 }