Use mobile view where sticky is not supported (ie11)

1 files changed, 57 insertions, 55 deletions

diff --git a/src/main/assets/style.css b/src/main/assets/style.css
index a1491ed4..43ce7cfa 100644
--- a/src/main/assets/style.css
+++ b/src/main/assets/style.css
@@ -999,60 +999,62 @@ article p {
 }
 
 @media (--viewport-desktop) {
-    #column {
-        position: sticky;
-        padding: 12px;
-        height: 100%;
-        z-index: auto;
-        overflow-y: auto;
-    }
-    article,
-    .page,
-    .msg-cont {
-        width: 640px;
-    }
-    #sidebar_wrapper {
-        position: fixed;
-        width: 300px;
-        overflow-y: auto;
-        height: 100%;
-        display: flex;
-        flex-direction: column;
-    }
-    #header_wrapper,
-    #content_wrapper {
-        width: 1000px;
-        margin: 0 auto;
-    }
-    #content_wrapper {
-        display: flex;
-        margin: 66px auto 0;
-    }
-    #footer {
-        padding: 10px;
-    }
-    .desktop {
-        display: block;
-    }
-    .mobile {
-        display: none;
-    }
-    #content {
-        padding-bottom: 12px;
-        width: 100%;
-    }
-    .toolbar {
-        flex-direction: column;
-        justify-content: initial;
-        border-top: initial;
-    }
-    .toolbar a,
-    .l a {
-        border-top: initial;
-        border-right: 2px solid transparent;
-    }
-    .toolbar a:hover {
-        border-top: initial;
-        border-right: 2px solid #ff339a;
+    @supports (position: sticky) {
+        #column {
+            position: sticky;
+            padding: 12px;
+            height: 100%;
+            z-index: auto;
+            overflow-y: auto;
+        }
+        article,
+        .page,
+        .msg-cont {
+            width: 640px;
+        }
+        #sidebar_wrapper {
+            position: fixed;
+            width: 300px;
+            overflow-y: auto;
+            height: 100%;
+            display: flex;
+            flex-direction: column;
+        }
+        #header_wrapper,
+        #content_wrapper {
+            width: 1000px;
+            margin: 0 auto;
+        }
+        #content_wrapper {
+            display: flex;
+            margin: 66px auto 0;
+        }
+        #footer {
+            padding: 10px;
+        }
+        .desktop {
+            display: block;
+        }
+        .mobile {
+            display: none;
+        }
+        #content {
+            padding-bottom: 12px;
+            width: 100%;
+        }
+        .toolbar {
+            flex-direction: column;
+            justify-content: initial;
+            border-top: initial;
+        }
+        .toolbar a,
+        .l a {
+            border-top: initial;
+            border-right: 2px solid transparent;
+        }
+        .toolbar a:hover {
+            border-top: initial;
+            border-right: 2px solid #ff339a;
+        }
     }
 }