diff --git a/theme/src/client/styles/home.scss b/theme/src/client/styles/home.scss index 63d4bc17..bb67f0eb 100644 --- a/theme/src/client/styles/home.scss +++ b/theme/src/client/styles/home.scss @@ -131,6 +131,7 @@ .home { padding-left: 1.5rem; padding-right: 1.5rem; + width: 100%; .features { flex-direction: column; @@ -151,6 +152,7 @@ .home { padding-left: 1.5rem; padding-right: 1.5rem; + width: 100%; .hero { img { diff --git a/theme/src/client/styles/navbar.scss b/theme/src/client/styles/navbar.scss index 9647c98f..50ccf491 100644 --- a/theme/src/client/styles/navbar.scss +++ b/theme/src/client/styles/navbar.scss @@ -80,11 +80,16 @@ @media (max-width: $MQMobile) { .navbar { padding-left: 4rem; + padding-right: 2rem; .can-hide { display: none; } + .social-icon { + display: none; + } + .site-name { width: calc(100vw - 9.4rem); overflow: hidden; @@ -189,12 +194,6 @@ } } -@media screen and (max-width: $MQMobile) { - .toggle-sidebar-button { - display: block; - } -} - /** * toggle color mode button */ @@ -219,3 +218,13 @@ .DocSearch { transition: background-color var(--t-color); } + +@media screen and (max-width: $MQMobile) { + .toggle-sidebar-button { + display: block; + } + + .toggle-color-mode-button { + margin-left: 0.5rem; + } +} \ No newline at end of file diff --git a/theme/src/client/styles/search.scss b/theme/src/client/styles/search.scss index 774e2fc2..eee0d643 100644 --- a/theme/src/client/styles/search.scss +++ b/theme/src/client/styles/search.scss @@ -1,3 +1,5 @@ +@import '_variables'; + $input-color: #333; $input-background: #f6f9fc; $icon-color: darken($input-background, 30%); @@ -117,6 +119,14 @@ $active-color: #1ea7fd; } } +@media screen and (max-width: $MQMobile) { + .search-input-wrapper { + input[data-search-input='true'] { + width: 200px; + } + } + } + /* Fix the X appearing in search field on Chrome and IE */ input[type='search']::-ms-clear { display: none;