From a22d8826576803998965e2e9b906b458f766124a Mon Sep 17 00:00:00 2001
From: siddharth ravikumar <s@ricketyspace.net>
Date: Sat, 28 May 2022 21:16:53 -0400
Subject: search: update styling

---
 static/peach.css       | 42 +++++++++++++++++++++++++-----------------
 templates/search.tmpl  |  2 +-
 templates/weather.tmpl |  2 +-
 3 files changed, 27 insertions(+), 19 deletions(-)

diff --git a/static/peach.css b/static/peach.css
index 7cbabb4..196d18e 100644
--- a/static/peach.css
+++ b/static/peach.css
@@ -115,8 +115,8 @@ body {
 
 .search-link-container {
     position: absolute;
-    right: 0px;
-    top: 30px;
+    right: 5px;
+    top: 0px;
     font-size: 1.5em;
     font-weight: 900;
     transform: rotate(-45deg);
@@ -124,11 +124,6 @@ body {
 
 .search-link-container a {
     text-decoration: none;
-    color: rgb(255,255,255);
-}
-
-.search-link-container a:after {
-    content: '➤';
     color: rgb(0,0,0);
 }
 
@@ -136,26 +131,38 @@ body {
 .search-container .search-form {
     display: flex;
     flex-direction: row;
-    column-gap: 15px;
-    align-items: center;
+    align-items: baseline;
+    justify-content: center;
 }
 
 .search-container .search-form  .search-box {
-    flex-basis: 70%;
 }
 
 .search-container .search-form  .search-box .location {
-    width: 100%;
-    font-size: 2em;
-    border: 2px solid rgb(0,0,0);
+    font-size: 1.5em;
+    border: 0;
+}
+
+.search-container .search-form  .search-box .location:focus-within {
+    border: 0;
+    outline: 0;
+    border-bottom: 2px solid rgb(0,0,0);
+}
+
+.search-container .search-form  .search-box .location::placeholder {
+    color: rgb(240,240,240);
+    font-weight: 900;
 }
 
 .search-container .search-form  .btn-block .search-btn {
     cursor: pointer;
     border: none;
-    background-color: rgb(255,255,255);
-    color: rgb(0,0,0);
-    font-size: 2.8em;
+    background-color: rgb(0 0 0);
+    color: rgb(255 255 255);
+    font-size: 1.3em;
+    padding: 3px 10px 3px 10px;
+    border-radius: 8px;
+    font-weight: 900;
 }
 
 .message-container {
@@ -164,6 +171,7 @@ body {
 
 .message-container p {
     margin: 5px 0 5px 0;
+    padding: 0 0 0 5px;
 }
 
 .search-result-container {
@@ -173,7 +181,7 @@ body {
 }
 
 .search-result-container  .item {
-    font-size: 1.8em;
+    font-size: 1.5em;
 }
 
 .search-result-container  .location-name a {
diff --git a/templates/search.tmpl b/templates/search.tmpl
index 9f211d6..1101f08 100644
--- a/templates/search.tmpl
+++ b/templates/search.tmpl
@@ -19,7 +19,7 @@
 								value="{{ .Location }}" name="location" required>
 						</div>
 						<div class="btn-block">
-							<input type="submit" class="search-btn" value="➮">
+							<input type="submit" class="search-btn" value="search">
 						</div>
 					</form>
 				</div>
diff --git a/templates/weather.tmpl b/templates/weather.tmpl
index 8476e87..e03ac75 100644
--- a/templates/weather.tmpl
+++ b/templates/weather.tmpl
@@ -66,7 +66,7 @@
 
 				<div class="search-link-container">
 					<a href="/search">
-						Search
+						➤
 					</a>
 				</div>
 			</div> <!-- root-container end -->
-- 
cgit v1.2.3