Fix search bar layout and add icon rotation animation

- Move search icon to the right of the text field using input-group
- Add smooth rotation animation when toggling between sun/moon icons
- Style search input for both light and dark modes
- Ensure search button aligns properly with input field

Co-authored-by: Claude <[email protected]>
🤖 Generated with Claude Code

Author: lenis2000

_includes/footer.html

@@ -87,13 +87,23 @@
 
     icons.forEach(icon => {
       if (icon) {
-        if (theme === 'dark') {
-          icon.classList.remove('fa-sun');
-          icon.classList.add('fa-moon');
-        } else {
-          icon.classList.remove('fa-moon');
-          icon.classList.add('fa-sun');
-        }
+        // Add rotation animation
+        icon.style.transform = 'rotate(180deg)';
+        
+        setTimeout(() => {
+          if (theme === 'dark') {
+            icon.classList.remove('fa-sun');
+            icon.classList.add('fa-moon');
+          } else {
+            icon.classList.remove('fa-moon');
+            icon.classList.add('fa-sun');
+          }
+          
+          // Reset rotation after icon change
+          setTimeout(() => {
+            icon.style.transform = '';
+          }, 10);
+        }, 150);
       }
     });
   }

_includes/top_brand.html

@@ -21,9 +21,13 @@
        <div class="navbar-nav me-auto">
        </div>
 
-       <form class="form-inline mt-2 mt-md-0 d-none d-md-block" id="search_form" name="q">
-         <input class="form-control input-lg me-sm-2" type="text" id="q" placeholder="UVA Search">
-         <button class="bg-inverse my-2 my-sm-0" style="border:none;" type="submit" value=""><img src="{{site.url}}/img/brand/search.png" style="width:30px" alt="UVA Search" title="UVA Search"></button>
+       <form class="form-inline mt-2 mt-md-0 d-none d-md-block d-flex align-items-center" id="search_form" name="q">
+         <div class="input-group">
+           <input class="form-control" type="text" id="q" placeholder="UVA Search">
+           <button class="btn bg-inverse" style="border:none;" type="submit" value="">
+             <img src="{{site.url}}/img/brand/search.png" style="width:24px" alt="UVA Search" title="UVA Search">
+           </button>
+         </div>
        </form>
      </div>
      </div>

css/main.css

@@ -624,6 +624,15 @@ footer {
   z-index: 1000;
 }
 
+/* Icon animation */
+.theme-toggle-single i {
+  transition: transform 0.3s ease;
+}
+
+.theme-toggle-single:active i {
+  transform: rotate(180deg) scale(0.9);
+}
+
 /* In light navbar */
 .navbar-light .theme-toggle-single {
   background-color: rgba(0, 47, 108, 0.1);
@@ -685,6 +694,39 @@ footer {
   align-items: center;
 }
 
+/* Search form styling */
+#search_form .input-group {
+  max-width: 300px;
+}
+
+#search_form .input-group .form-control {
+  border-right: none;
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+#search_form .input-group .btn {
+  border-left: 1px solid #ced4da;
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+  padding: 0.375rem 0.75rem;
+}
+
+/* Dark mode search form */
+[data-theme="dark"] #search_form .input-group .form-control {
+  background-color: rgba(255, 255, 255, 0.1);
+  border-color: rgba(255, 255, 255, 0.2);
+  color: #e8e8e8;
+}
+
+[data-theme="dark"] #search_form .input-group .form-control::placeholder {
+  color: rgba(255, 255, 255, 0.5);
+}
+
+[data-theme="dark"] #search_form .input-group .btn {
+  border-left-color: rgba(255, 255, 255, 0.2);
+}
+
 /* Orange items in dark mode */
 [data-theme="dark"] .orange-item {
   background-color: #d14900;  /* Darker orange for dark mode */