fixed css issues on smaller screens

nomadjimbob · May 18, 2023 · f8860b0 · f8860b0
1 parent 47928b3
commit f8860b0
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 2 deletions.
diff --git a/README.md b/README.md
@@ -237,6 +237,8 @@ If the plugin is installed, the **Template Styles Settings** page will be expand
 
     -   Fixed notifications appearing in weird places at times.
     -   Setting `tpl»mikio»showNotifications` to an empty string is the same as setting it to `always`.
+    -   Fixed languages not shown in dropdown correctly with the translate plugin when `plugin»translation»dropdown` is turned on.
+    -   Fixed some css issues on small screens.
 
 -   **_2022-05-18_**
 

diff --git a/assets/mikio.css b/assets/mikio.css
@@ -405,6 +405,10 @@ body {
   font-size: 80%;
   color: var(--breadcrumb-text-color);
 }
+.mikio .mikio-breadcrumbs .mikio-container,
+.mikio .mikio-youarehere .mikio-container {
+  flex-direction: row;
+}
 .mikio .mikio-breadcrumbs span.curid a,
 .mikio .mikio-breadcrumbs span.curid a:visited,
 .mikio .mikio-breadcrumbs span.curid a:active,
@@ -1199,6 +1203,7 @@ body {
   font-size: 80%;
   position: relative;
   height: 1rem;
+  white-space: nowrap;
 }
 .mikio .mikio-toc h3.toggle .hamburger {
   width: 1rem;
@@ -1210,6 +1215,7 @@ body {
   bottom: 0;
   right: 0;
   margin: auto 0;
+  background-color: var(--toc-background-color);
 }
 .mikio .mikio-toc h3.toggle.open .hamburger {
   display: none;
@@ -3536,6 +3542,7 @@ pre {
   }
   .mikio-navbar .mikio-nav {
     width: 100%;
+    flex-direction: column;
   }
   .mikio-navbar .mikio-nav-dropdown {
     width: 100%;
@@ -3590,6 +3597,9 @@ pre {
   .mikio .mikio-content .mikio-article .mikio-toc #dw__toc {
     max-width: none;
   }
+  .mikio .mikio-content .mikio-article .mikio-toc #dw__toc .mikio-iicon.hamburger {
+    display: none;
+  }
   .mikio .mikio-content .mikio-article .mikio-toc h3.toggle {
     background-position: 99% 50%;
     text-align: center;
@@ -3922,4 +3932,4 @@ pre {
   border-right: 2px solid var(--dropdown-color);
   border-bottom: 2px solid var(--dropdown-color);
   transform: rotateZ(45deg);
-}
+}
diff --git a/assets/mikio.less b/assets/mikio.less
@@ -391,6 +391,10 @@ html, body {
 
 .mikio {
     .mikio-breadcrumbs, .mikio-youarehere {
+        .mikio-container {
+            flex-direction: row;
+        }
+
         padding: .5rem 1rem;
         background-color: var(--breadcrumb-background-color);
         border: 1px solid var(--breadcrumb-background-color);
@@ -1265,6 +1269,7 @@ html, body {
         font-size: @ini_toc_font_size;
         position: relative;
         height: 1rem;
+        white-space: nowrap;
 
         .hamburger {
             width: 1rem;
@@ -1277,6 +1282,8 @@ html, body {
             bottom: 0;
             right: 0;
             margin: auto 0;
+            // border: 1px solid red;
+            background-color: var(--toc-background-color);
         }
 
         &.open {
@@ -2752,6 +2759,7 @@ code, pre {
 
         .mikio-nav {
             width: 100%;
+            flex-direction: column;
         }
 
         .mikio-nav-dropdown {
@@ -2825,6 +2833,9 @@ code, pre {
 
             #dw__toc {
                 max-width: none;
+                .mikio-iicon.hamburger {
+                    display: none;
+                }
             }
 
             h3.toggle {
@@ -3186,4 +3197,4 @@ code, pre {
             }
         }
     }
-}
+}