Support for resolutions < 450 units

4 files changed, 369 insertions, 4 deletions

diff --git a/static/css/home.css b/static/css/home.css
index 289a0712..8405b6e7 100644
--- a/static/css/home.css
+++ b/static/css/home.css
@@ -101,4 +101,12 @@ marquee::after {
 
 marquee>ul {
     text-align: justify;
-}
\ No newline at end of file
+}
+
+#uc {
+    width: 730px;
+}
+
+#adfs {
+    width: 720px;
+}
diff --git a/static/css/old_ports.css b/static/css/old_ports.css
deleted file mode 100644
index e69de29b..00000000
--- a/static/css/old_ports.css
+++ /dev/null
diff --git a/static/css/phone_compatibility.css b/static/css/phone_compatibility.css
new file mode 100644
index 00000000..054f9467
--- /dev/null
+++ b/static/css/phone_compatibility.css
@@ -0,0 +1,297 @@
+/* 
+This is for compatibility for phones for resolution < 450
+
+All global modifications for phones are stored here. Since, I wrote the
+site for desktop only in mind, this is a quick fix for phones.
+
+There would certainly room for improvement later, if required. Right now,
+we will make the minimum changes to make sure all the content is visible
+and readable on phones. Some features might need to be disabled for phones,
+I am not sure yet.
+*/
+
+@media only screen and (max-width: 450px) {
+    body {
+        max-width: 100vw !important;
+        font-size: 12px !important;
+        /* line-height: 1.2rem; */
+        box-sizing: border-box;
+    }
+
+    h2 {
+        font-size: 14px !important;
+    }
+
+    h1,
+    .post-header h1,
+    article>h1 {
+        font-size: 1.5rem !important;
+        line-height: 1.8rem !important;
+    }
+
+    /* All elastic widths */
+    #wrap {
+        width: calc(100% - 20px) !important;
+        max-width: calc(100vw - 20px) !important;
+        margin: 0px auto !important;
+        padding: 10px;
+    }
+
+    #header,
+    #content,
+    #article,
+    #comments,
+    #new-comment,
+    #footer,
+    #welcome,
+    #welcome>p,
+    #uc,
+    #announcements,
+    marquee,
+    .post-image,
+    #post-actions-bar,
+    #article-body,
+    #archives-area,
+    #main-section,
+    #chatbox, #chatbox-input, #search_sidebar, #search_results {
+        width: calc(100% - 0px) !important;
+        max-width: calc(100% - 0px) !important;
+        box-sizing: border-box;
+        display: block !important;
+    }
+    p > img, .area > div {
+        max-width: 100% !important;
+    }
+
+    #header,
+    #content,
+    #article,
+    #footer,
+    #welcome,
+    #welcome>p,
+    #uc,
+    #announcements,
+    marquee,
+    .post-image,
+    #post-actions-bar,
+    #article-body,
+    #main-section #search_results {
+        padding: 0 !important;
+        margin: 0 !important;
+    }
+
+    #adfs {
+        width: calc(100% - 10px);
+    }
+
+    #sidebar {
+        display: none;
+        width: 100vw !important;
+        max-width: 100vw !important;
+        height: 100vh !important;
+        max-height: 100vh !important;
+        position: fixed !important;
+        top: 0 !important;
+        left: 0 !important;
+        z-index: 5 !important;
+        background: #000000fa !important;
+        box-sizing: border-box;
+        padding: 2rem !important;
+        overflow-y: scroll;
+        overflow-x: hidden;
+    }
+
+    #header {
+        height: 50vw !important;
+        margin-bottom: 15vw !important;
+    }
+
+    #welcome {
+        background: none !important;
+        background-size: auto !important;
+        margin: 1rem 0 !important;
+        border-radius: 0 !important;
+        min-height: auto !important;
+    }
+
+    #welcome>p {
+        margin: 12px 0 !important;
+        position: unset !important;
+    }
+    #chatbox {
+        display: block !important;
+        position: unset !important;
+        border: 10px solid #9566ff52 !important;
+        padding: 15px;
+        border-radius: 8px;
+    }
+
+    #ハンバーガー {
+        display: block !important;
+    }
+
+    #search-area {
+        top: 50vw !important;
+    }
+
+    #announcements {
+        height: auto !important;
+        background: none !important;
+        background-size: auto !important;
+        margin-top: 15px !important;
+    }
+
+    marquee {
+        position: unset !important;
+        width: calc(100% - 0px) !important;
+        height: 40vh !important;
+        padding: 10px !important;
+    }
+
+    #update-gif {
+        top: -13px !important;
+        left: 0 !important;
+    }
+
+    .author-info {
+        display: block !important;
+        margin: 15px 0 !important;
+    }
+
+    .post-image {
+        display: block !important;
+        height: auto !important;
+        margin: 15px 0 !important;
+        float: none !important;
+    }
+
+    #comments>div>table>tbody>tr>td:nth-child(2),
+    .comment,
+    .highlight {
+        width: calc(100vw - 90px) !important;
+        font-size: 11px;
+    }
+
+    #comments>div>table>tbody>tr>td:nth-child(2) {
+        padding-left: 10px;
+    }
+
+    #article-body p,
+    #article-body ul,
+    #article-body ol,
+    #article-body blockquote,
+    #article-body pre,
+    #article-body table {
+        font-size: 12px !important;
+    }
+
+    #article-body img {
+        width: 100% !important;
+        height: auto !important;
+        margin: 15px 0 !important;
+        float: none !important;
+    }
+
+    #article-body h1,
+    #article-body h2 {
+        font-size: 14px !important;
+    }
+}
+
+#ham {
+    width: 35px;
+    height: 30px;
+    margin: 10px 10px;
+    position: relative;
+    cursor: pointer;
+    display: inline-block;
+}
+
+#ham span {
+    background-color: #FFF;
+    position: absolute;
+    border-radius: 2px;
+    transition: .3s cubic-bezier(.8, .5, .2, 1.4);
+}
+
+#ham span:nth-child(1) {
+    width: 100%;
+    height: 4px;
+    display: block;
+    top: 0px;
+    left: 0px;
+}
+
+#ham span:nth-child(2) {
+    width: 100%;
+    height: 4px;
+    display: block;
+    top: 13px;
+    left: 0px;
+}
+
+#ham span:nth-child(3) {
+    width: 100%;
+    height: 4px;
+    display: block;
+    bottom: 0px;
+    left: 0px;
+}
+
+#ham:not(.open):hover span:nth-child(1) {
+    width: 100%;
+    height: 4px;
+    display: block;
+    top: -2px;
+    left: 0px;
+    transition: .3s cubic-bezier(.8, .5, .2, 1.4);
+}
+
+#ham:not(.open):hover span:nth-child(2) {
+    width: 100%;
+    height: 4px;
+    display: block;
+    top: 13px;
+    left: 0px;
+    transition: .4s cubic-bezier(.8, .5, .2, 1.4);
+}
+
+#ham:not(.open):hover span:nth-child(3) {
+    width: 100%;
+    height: 4px;
+    display: block;
+    bottom: -2px;
+    left: 0px;
+    transition: .3s cubic-bezier(.8, .5, .2, 1.4);
+}
+
+#ham.open {
+    transform: rotate(90deg);
+}
+
+#ham.open span:nth-child(1) {
+    left: 3px;
+    top: 12px;
+    width: 30px;
+    transition: .3s cubic-bezier(.8, .5, .2, 1.4);
+    transform: rotate(90deg);
+    transition-delay: 150ms;
+}
+
+#ham.open span:nth-child(2) {
+    left: 2px;
+    top: 20px;
+    width: 20px;
+    transition: .3s cubic-bezier(.8, .5, .2, 1.4);
+    transform: rotate(45deg);
+    transition-delay: 50ms;
+}
+
+#ham.open span:nth-child(3) {
+    left: 14px;
+    top: 20px;
+    width: 20px;
+    transition: .3s cubic-bezier(.8, .5, .2, 1.4);
+    transform: rotate(-45deg);
+    transition-delay: 100ms;
+}
\ No newline at end of file
diff --git a/static/css/styles.css b/static/css/styles.css
index c4d9be36..4837896e 100644
--- a/static/css/styles.css
+++ b/static/css/styles.css
@@ -13,7 +13,8 @@ body {
     box-sizing: border-box;
 }
 
-input, textarea {
+input,
+textarea {
     font-family: 'Mali', sans-serif !important;
 }
 
@@ -51,13 +52,14 @@ a,
     text-decoration: none;
 }
 
-#fake-banner-ad{
+#fake-banner-ad {
     border: dashed 1px #dddddd;
     padding: 4px;
     border-radius: 8px;
 }
 
-#fake-banner-ad img, #fake-ad-area img {
+#fake-banner-ad img,
+#fake-ad-area img {
     display: block;
     margin: 0px auto;
     width: calc(100% - 8px);
@@ -372,4 +374,62 @@ blockquote {
     border-bottom: none;
     margin: 11px 0px;
     font-size: 14px;
+}
+
+#ハンバーガー {
+    display: none;
+    position: absolute;
+    bottom: -15vw;
+    left: -10px;
+    cursor: pointer;
+    z-index: 999;
+}
+
+.post {
+    clear: both;
+    text-align: justify;
+}
+
+.post-header h1 {
+    margin: 30px 0px 0px 0px;
+    text-align: left;
+    font-size: 18px;
+}
+
+.author-info {
+    margin: 10px 0px 10px 20px;
+    display: inline-block;
+}
+
+.post-profile-image {
+    height: 20px;
+    width: 20px;
+    display: inline-block;
+    margin-right: 4px;
+    border-radius: 10px;
+    background-size: cover;
+    background-position: center;
+    position: relative;
+    top: 5px;
+}
+
+.post-image {
+    width: 350px;
+    height: 233px;
+    border-radius: 8px;
+}
+
+.post-image-r {
+    float: right;
+    margin-left: 11px;
+}
+
+.post-image-l {
+    float: left;
+    margin-right: 11px;
+}
+
+#article>h1 {
+    font-size: 32px;
+    margin-bottom: 10px;
 }
\ No newline at end of file