fix: style for smaller media (#513)

Co-authored-by: pyansys-ci-bot <[email protected]>

Author: Revathyvenugopal162

doc/changelog.d/513.fixed.md

@@ -0,0 +1 @@
+fix: style for smaller media

src/ansys_sphinx_theme/theme/ansys_sphinx_theme/static/css/ansys-sphinx-theme-variable.css

@@ -56,6 +56,9 @@
   --pst-table-font-size: 14px;
   --pst-table-header-font-size: 12px;
 
+  --pst-sidebar-font-size-mobile: 12px;
+  --ast-nav-link-font-size: 14px;
+
   /**
   * sphinx design font sizes
   */

src/ansys_sphinx_theme/theme/ansys_sphinx_theme/static/css/fuse-search.css

@@ -1,4 +1,5 @@
 @import "ansys-sphinx-theme-variable.css";
+
 .results {
   display: flex;
   flex-direction: column;
@@ -136,24 +137,10 @@ html[data-theme="light"] .highlight {
 .bd-search {
   gap: 8px;
   background-color: var(--ast-search-bar-enable-background);
-  border: 1px solid var(--ast-search-bar-enable-border);
+  border: 0px solid var(--ast-search-bar-enable-border);
   margin-bottom: 0px;
 }
 
-@media (max-width: 768px) {
-  .form-control:focus,
-  .form-control:focus-visible,
-  .form-control {
-    width: 100px;
-  }
-  .bd-search input.expanded {
-    width: 200px;
-  }
-  .bd-search .search-button__kbd-shortcut {
-    display: none;
-  }
-}
-
 .bd-search input.expanded {
   width: 600px;
 }
@@ -166,3 +153,21 @@ html[data-theme="light"] .highlight {
   opacity: 0.5;
   transition: opacity 0.3s ease;
 }
+
+@media (max-width: 768px) {
+  .bd-search input.expanded {
+    width: 100px;
+  }
+
+  .form-control {
+    width: 50px;
+  }
+
+  .result {
+    width: 100px;
+  }
+
+  .bd-search .search-button__kbd-shortcut {
+    display: none;
+  }
+}

src/ansys_sphinx_theme/theme/ansys_sphinx_theme/static/css/pydata-sphinx-theme-custom.css

@@ -22,6 +22,25 @@
   margin-top: unset;
 }
 
+@media (max-width: 959.98px) {
+  .bd-sidebar-primary {
+    flex-grow: 0.75;
+    height: 100vh;
+    left: 0;
+    margin-left: -75%;
+    max-height: 100vh;
+    max-width: 350px;
+    position: fixed;
+    top: 0;
+    transition:
+      visibility 0.2s ease-out,
+      margin 0.2s ease-out;
+    visibility: hidden;
+    width: 75%;
+    z-index: 1055;
+  }
+}
+
 .sidebar-secondary-item {
   border: none;
 }
@@ -730,8 +749,10 @@ button.btn.version-switcher__button:hover {
   max-width: 100%;
 }
 
-.bd-sidebar-primary {
-  width: 20%;
+@media (min-width: 960px) {
+  .bd-sidebar-primary {
+    width: 20%;
+  }
 }
 
 @media (min-width: 960px) {