Better phone compatibility for additional pages

2 files changed, 64 insertions, 3 deletions

diff --git a/static/css/phone_compatibility.css b/static/css/phone_compatibility.css
index 054f9467..f86ca6e1 100644
--- a/static/css/phone_compatibility.css
+++ b/static/css/phone_compatibility.css
@@ -53,7 +53,7 @@ I am not sure yet.
     #article-body,
     #archives-area,
     #main-section,
-    #chatbox, #chatbox-input, #search_sidebar, #search_results {
+    #chatbox, #chatbox-input, #search_sidebar, #search_results, blockquote, textarea {
         width: calc(100% - 0px) !important;
         max-width: calc(100% - 0px) !important;
         box-sizing: border-box;
@@ -63,6 +63,10 @@ I am not sure yet.
         max-width: 100% !important;
     }
 
+    select {
+        margin: 5px 0 !important;
+    }
+
     #header,
     #content,
     #article,
@@ -96,11 +100,17 @@ I am not sure yet.
         z-index: 5 !important;
         background: #000000fa !important;
         box-sizing: border-box;
-        padding: 2rem !important;
+        padding: 2rem 2rem 4rem 2rem !important;
         overflow-y: scroll;
         overflow-x: hidden;
     }
 
+    #content {
+        display: block;
+        margin-top: 1rem !important;
+        width: calc(100vw - 20px) !important;
+    }
+
     #header {
         height: 50vw !important;
         margin-bottom: 15vw !important;
@@ -170,6 +180,7 @@ I am not sure yet.
     .highlight {
         width: calc(100vw - 90px) !important;
         font-size: 11px;
+        overflow-x: scroll;
     }
 
     #comments>div>table>tbody>tr>td:nth-child(2) {
@@ -196,6 +207,51 @@ I am not sure yet.
     #article-body h2 {
         font-size: 14px !important;
     }
+
+    #login-error > .messageBox {
+        top: 20px !important;
+        position: relative !important;
+        left: 10px !important;
+        margin-top: -2rem;
+    }
+
+    #profile-area {
+        display: flex;
+        flex-direction: column;
+        flex-wrap: wrap;
+    }
+
+    #profile-area > div {
+        width: auto !important;
+        display: block !important;
+        float: none !important;
+    }
+
+    #profile-area > div:nth-child(1) {
+        display: flex !important;
+        flex-direction: row;
+        flex-wrap: wrap;
+        justify-content: space-around;
+        align-items: center;
+    }
+
+    #blinkie-chooser > form, .avatar-directory {
+        display: flex;
+        flex-wrap: wrap;
+        flex-direction: row;
+        align-content: center;
+        justify-content: space-between;
+    }
+
+    .avatar-directory > div {
+        flex: 50%;
+    }
+
+    #blinkie-chooser > form > div, .avatar-directory > div {
+        display: block !important;
+        width: auto !important;
+        float: none !important;
+    }
 }
 
 #ham {
diff --git a/static/css/styles.css b/static/css/styles.css
index 4837896e..afef43c0 100644
--- a/static/css/styles.css
+++ b/static/css/styles.css
@@ -432,4 +432,9 @@ blockquote {
 #article>h1 {
     font-size: 32px;
     margin-bottom: 10px;
-}
\ No newline at end of file
+}
+
+#categories-area > ul, #archives-area > ul {
+    position: relative;
+    z-index: 1;
+}