Put small screen specific styling into the media screen style

1 files changed, 26 insertions, 21 deletions

diff --git a/src/styles.css b/src/styles.css
index 9155d11..4792d2a 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -260,9 +260,12 @@ table {
   overflow: auto;
 }
 
+table td, table th {
+  word-break: normal !important;
+}
+
 table td:not(:empty) {
   padding: 0.5em;
-  word-break: break-all;
 }
 
 table th:not(:empty) {
@@ -339,13 +342,12 @@ dd code {
 
 #content-wrapper {
   display: flex;
-  flex-direction: column-reverse;
+  flex-direction: row;
   min-height: calc(100vh - 16px);
   border-right: 3px solid var(--accent-line-color);
 }
 
 .sidebar {
-  min-height: auto;
   width: 11.2em;
   display: flex;
   flex-direction: column;
@@ -410,35 +412,38 @@ dd code {
   font-size: 1.2em;
 }
 
-/* Index page styling */
+/* Small screen support */
+
+@media screen and (max-width: 610px) {
+  article {
+    max-width: calc(100vh - 16px - 3px);
+  }
 
-@media screen and (min-width: 610px) {
   #content-wrapper {
-    flex-direction: row;
+    flex-direction: reverse-column;
   }
 
   .sidebar {
-    min-height: initial;
+    min-height: auto;
   }
 
-  #index-contents {
-    display: flex;
-    align-items: center;
-    justify-content: center;
+  table td, table th {
+    word-break: break-all;
   }
+}
 
-  #index-contents-text {
-    margin-left: 15px; 
-    max-width: 77%;
-  }
+/* Index page styling */
 
-  #index-contents-img {
-    max-width: 32%;
-  }
+#index-contents {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-left: 15px; 
+  max-width: 77%;
+}
 
-  table td, table th {
-    word-break: normal !important;
-  }
+#index-contents-img {
+  max-width: 32%;
 }
 
 #index-list {