Fixed index page styling and sidebar styling on small screens

1 files changed, 32 insertions, 21 deletions

diff --git a/src/styles.css b/src/styles.css
index 4792d2a..106143f 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -117,7 +117,7 @@ article {
   min-height: calc(100vh - 228px);
   overflow: auto;
   padding: 0 0.4em;
-  box-sizing: content-box;
+  box-sizing: border-box;
 }
 
 .noMaxWidth {
@@ -412,6 +412,27 @@ dd code {
   font-size: 1.2em;
 }
 
+/* Index page styling */
+
+#index-contents {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+#index-contents-text {
+  margin-left: 15px;
+  max-width: 77%;
+}
+
+#index-contents-img {
+  max-width: 32%;
+}
+
+#index-list {
+  margin-block-end: calc(1em + 10px);
+}
+
 /* Small screen support */
 
 @media screen and (max-width: 610px) {
@@ -420,37 +441,27 @@ dd code {
   }
 
   #content-wrapper {
-    flex-direction: reverse-column;
+    flex-direction: column-reverse;
   }
 
   .sidebar {
     min-height: auto;
   }
 
-  table td, table th {
-    word-break: break-all;
+  #index-contents-text {
+    margin: 0;
+    max-width: inherit;;
   }
-}
-
-/* Index page styling */
-
-#index-contents {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  margin-left: 15px; 
-  max-width: 77%;
-}
 
-#index-contents-img {
-  max-width: 32%;
-}
+  #index-contents-img {
+    max-width: inherit;
+  }
 
-#index-list {
-  margin-block-end: calc(1em + 10px);
+  table td, table th {
+    word-break: break-all;
+  }
 }
 
-
 /* File tables */
 
 .file-wrapper {