Fix mobile styling

Author: IrishBruse

docs/copy.png

@@ -17,10 +17,10 @@
 
     <script defer src="//unpkg.com/docsify@4.13.1/lib/docsify.min.js"></script>
     <script defer src="//cdn.jsdelivr.net/npm/prismjs@1/components/prism-csharp.min.js"></script>
+    <script src="//cdn.jsdelivr.net/npm/docsify/lib/plugins/zoom-image.min.js"></script>
 
     <link rel="icon" type="image/x-icon" href="/favicon.png" />
 
-
     <link rel="stylesheet" href="/styles/syntax-coloring.css" />
     <link rel="stylesheet" href="/styles/content.css" />
     <link rel="stylesheet" href="/styles/navbar.css" />
@@ -30,7 +30,8 @@
 
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
+    <link rel="stylesheet"
+        href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0" />
     <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" />
 </head>
 
@@ -43,12 +44,20 @@
                 <li><a href="/Documentation/">Documentation</a></li>
                 <li><a href="/Api/LDtk/">Api</a></li>
                 <li><a href="/Changelog">Changelog</a></li>
-                <li><a href="https://ldtk.io/json/#ldtk-ProjectJson">Json</a></li>
+                <li>
+                    <a href="https://ldtk.io/json/#ldtk-ProjectJson">Json</a>
+                </li>
             </ul>
             <div class="icon-navbar">
-                <a href="https://ldtk.io/"><img src="/ldtk.png" class="icon" /></a>
-                <a href="https://github.com/IrishBruse/LDtkMonogame"><img src="https://ldtk.io/wp-content/themes/ldtk/icons/github.svg" alt="Github" class="icon"></a>
-                <a href="https://ldtk.io/go/discord"><img src="https://ldtk.io/wp-content/themes/ldtk/icons/discord.svg" alt="Discord" class="icon"></a>
+                <a href="https://ldtk.io/">
+                    <img src="/ldtk.png" class="icon" />
+                </a>
+                <a href="https://github.com/IrishBruse/LDtkMonogame">
+                    <img src="https://ldtk.io/wp-content/themes/ldtk/icons/github.svg" alt="Github" class="icon" />
+                </a>
+                <a href="https://ldtk.io/go/discord">
+                    <img src="https://ldtk.io/wp-content/themes/ldtk/icons/discord.svg" alt="Discord" class="icon" />
+                </a>
             </div>
         </div>
     </nav>

docs/index.html

@@ -74,12 +74,9 @@ p > code {
     display: inline-block;
 }
 
-.markdown-section p > img:not([height]) {
-    height: 28em;
-}
-
 .markdown-section p:not([align]) > img {
-    max-width: 100%;
+    width: 100%;
+    max-width: 750px;
     border: 1px solid rgba(115, 127, 157, 0.6);
     border-radius: 3px;
     box-shadow: 2px 8px 0px rgba(0, 0, 0, 0.2);

docs/styles/content.css

@@ -125,6 +125,16 @@ main.hidden {
     text-decoration: underline;
 }
 
+body.close .sidebar-toggle {
+    width: auto;
+}
+
+.sidebar {
+    left: 0px;
+    width: 300px;
+    transition: left 250ms ease, width 250ms ease;
+}
+
 .content {
     position: relative;
     left: 300px;
@@ -133,62 +143,23 @@ main.hidden {
 }
 
 body.close .sidebar {
-    transform: translateX(-300px);
-}
-
-body.close .sidebar-toggle {
-    width: auto;
+    left: -300px;
+    width: 300px;
 }
 
 body.close .content {
     left: 0;
     width: 100%;
 }
 
-@media print {
-    .github-corner,
-    .sidebar-toggle,
-    .sidebar,
-    .app-nav {
-        display: none;
-    }
+.app-nav {
+    overflow-x: auto;
 }
 
 @media screen and (max-width: 768px) {
-    .app-nav {
-        margin-top: 16px;
-    }
-
-    .icon-navbar,
-    .app-nav .logo {
-        display: none;
-    }
-
-    .app-nav li ul {
-        top: 30px;
-    }
-
-    main {
-        height: auto;
-        min-height: 100vh;
-        overflow-x: hidden;
-    }
-
-    .sidebar {
-        transform: translateX(-300px);
-        transition: transform 250ms ease;
-    }
-
-    .content {
-        left: 0;
-        width: 100%;
-        padding-top: 20px;
-        transition: left 250ms ease;
-    }
-
-    .app-nav,
-    .github-corner {
-        transition: transform 250ms ease;
+    #main {
+        margin: 0;
+        max-width: 100%;
     }
 
     .sidebar-toggle {
@@ -197,31 +168,33 @@ body.close .content {
         padding: 30px 30px 10px 10px;
     }
 
-    body.close .sidebar {
-        transform: translateX(300px);
-    }
-
     body.close .sidebar-toggle {
         transition: 1s background-color;
         width: 284px;
         padding: 10px;
     }
 
-    body.close .content {
-        transform: translateX(300px);
+    body.close .sidebar {
+        left: 0px;
+        width: 300px;
+        transition: left 250ms ease, width 250ms ease;
     }
 
-    body.close .app-nav,
-    body.close .github-corner {
-        display: none;
+    body.close .content {
+        position: relative;
+        left: 300px;
+        width: 100%;
+        transition: left 250ms ease, width 250ms ease;
     }
 
-    .github-corner:hover .octo-arm {
-        animation: none;
+    .sidebar {
+        left: -300px;
+        width: 300px;
     }
 
-    .github-corner .octo-arm {
-        animation: octocat-wave 560ms ease-in-out;
+    .content {
+        left: 0;
+        width: 100%;
     }
 }
 
@@ -329,3 +302,15 @@ h4 {
     font-size: 1em;
     font-weight: normal;
 }
+.docsify-copy-code-button {
+    background-color: transparent;
+    padding: 0px;
+    padding-top: 10px;
+    padding-right: 10px;
+    display: block;
+}
+.docsify-copy-code-button .label {
+    font-family: "Material Symbols Outlined";
+    font-size: 12;
+    background-color: transparent;
+}