merged with fix/20210728

asset/scss/components/_forms.scss

@@ -1,66 +1,67 @@
-.search{
-  .input-group * {
-    margin: 0;
-  }
-  .input-group {
-    position: relative;
-    border-radius: 4rem;
-    overflow: hidden;
-    padding: 0;
-    margin: 0;
-  }
-  .input-group .appear {
-    right: 0;
-    position: absolute;
-    height: 100%;
-    padding: 0.3rem 1rem;
-  }
-  .button{
-    border-color: $primary-color;
-  }
-  .appear{
-    display:none;
-  }
-  input{
-    &:active{
-      border-color: $primary-color;
-      background-color: $input-background-focus;
+.hero{
+  .search{
+    .input-group * {
+      margin: 0;
     }
-    &:focus,&:focus-within{
-      border-color: $primary-color;
-      background-color: $input-background;
-    }
-    &:not(:placeholder-shown) {
-      border:none;
-      background-color: $input-background-focus;
+    .input-group {
       position: relative;
-      right: 2rem;
-      + .appear {
-        display: block;
-        color: $primary-color;
+      border-radius: 4rem;
+      overflow: hidden;
+      padding: 0;
+      margin: 0;
+    }
+    .input-group .appear {
+      right: 0;
+      position: absolute;
+      height: 100%;
+      padding: 0.3rem 1rem;
+    }
+    .button{
+      border-color: $primary-color;
+    }
+    .appear{
+      display:none;
+    }
+    input{
+      &:active{
+        border-color: $primary-color;
         background-color: $input-background-focus;
-        z-index: 2;
-        &:hover {
-          color: $white;
-          background-color: $primary-color;
-        }
+      }
+      &:focus,&:focus-within{
+        border-color: $primary-color;
+        background-color: $input-background;
+      }
+      &:not(:placeholder-shown) {
+        border:none;
+        background-color: $input-background-focus;
+        position: relative;
+        right: 2rem;
+        + .appear {
+          display: block;
+          background-color: scale-color($input-background-focus, $lightness: -20%);
+          z-index: 2;
+          &:hover {
+            color: $white;
+            background-color: $primary-color;
+          }
 
+        }
+      }
+    }
+    .hollow {
+      border-color: $primary-color;
+      color: $primary-color;
+      &::after {
+      }
+      &::placeholder {
+        color: scale-color($primary-color, $lightness: -20%);
+      }
+      &:hover {
+        background-color: scale-color($primary-color, $lightness: 95%);
+      }
+      &:active {
+        background-color: scale-color($primary-color, $lightness: 85%);
       }
     }
   }
-  .hollow {
-    border-color: $primary-color;
-    color: $primary-color;
-    &::after {
-    }
-    &::placeholder {
-      color: scale-color($primary-color, $lightness: -20%);
-    }
-    &:hover {
-      background-color: scale-color($primary-color, $lightness: 95%);
-    }
-    &:active {
-      background-color: scale-color($primary-color, $lightness: 85%);
-    }
-  }
 }

asset/scss/global/_omeka.scss

@@ -323,7 +323,7 @@ body.vertical-menu header .desktop {
 
 .browse-control-mobile {
    display: none;
-  
+
    @include breakpoint(small down) {
      display: inline-block;
   //   float: right;
@@ -376,16 +376,16 @@ body.vertical-menu header .desktop {
    @include breakpoint(small down) {
   //   margin: 0;
      display: none;
-  
+
      &.open {
        display: flex;
        align-items: stretch;
      }
-  
+
      &.closed {
        display: none;
      }
-  
+
   //   .sorting,
   //   .omeka-pagination,
   //   .advanced-search {
@@ -554,8 +554,18 @@ body.vertical-menu header .desktop {
    margin-bottom: 0;
 }
 
-.sorting button {
-  // margin-bottom: 0;
+.sorting {
+  display: flex;
+  button,.button {
+    padding: 0 $global-padding*1.4;
+    font-size: $global-font-size * 0.85;
+    margin: 0 $global-margin;
+  }
+  select {
+    // width: 100%;
+    // height: 100%;
+    margin-bottom: 0;
+  }
 }
 
 .layout-toggle button {